How To Add Hex Effect Portfolio Into Elementor
Hi guys in this video I’m going to show you how to add fun and stylish profile cards to your WordPress website. It only takes a couple of minutes to do I’ve done all the hard work for you. So sit back relax hit that like And subscribe button and let’s get into the Tutorial.
Okay guys to get things started the first thing we’re going to do is add a HTML widget to our page. To do that all we need to do is click in the search bar in the top left hand side and type in HTML. Then once we found the widget all we need to do is drag and drop it in.
Once you’ve done that you’re going to need to go into the description below and click on the link to my website where you can find the HTML code. Highlight the HTML section of the code and copy and paste it into the HTML box on the left hand side of your Elementor page.
Click on Advanced on the top left hand side and scroll down to the bottom where it says custom CSS. Now you’re going to have to go back over to my website and highlight and copy the CSS part of the code.
All you need to do now is paste it into your custom CSS box you do need Elementor Pro. To be able to add custom CSS code to your website if you haven’t got Elementor Pro. There is a link at the Bottom of the Tutorial. As soon as you paste in the code the profile cards will load.
The next next thing I’m going to show you is how to change the alignment of your pictures on your page. As you can see some of our profile pictures don’t quite sit in the centre of our hexagons. To make sure they do we’re going to scroll down our code to about halfway.
.e’re looking for where it says .IMG a couple of lines underneath. Where it says background position Centre left so that’s what we’re looking for and we want to change it to Centre Centre. The code in the description will automatically be changed so you won’t have to change it later.
As you can see all the images moved over slightly. The next thing I’m going to show you is how to change the position of our text. When we hover over our images just above this part of the code it says demo 2 and as you can see it says top 60. If I hover over our image you can see our text is just over halfway.
Just over halfway if I change this to 50 it moves up you. We can change the position to any way you like anything below 50 will move it to the top. anything above will move it to the bottom.
If we hover over all of our images you’ll see that the text has been placed in the same position on each one.
The next thing I’m going to show you is how to change the colour of the text. When it loads. When we hover over our images. Scroll up our code to where it says hex link just look for where it says colour and white.
I’m going to change this from white to red and hover over our images. So you can see the difference there is a slight load time for our text. To load and this is the colour we’re changing. This is only a minor detail but it does give you a better result at the end.
Don’t worry I will show you how to change the colour of the text later. In the Tutorial I’m going to change this back to White. That’s probably all the CSS code you will have to change within this tutorial. we’re now going to scroll back up to the top of our page and click on content on the top left hand side.
We’re going to start adding actions to our profile images. The first thing I want to change in our HTML code is for when people click on our profile image. If each person has their own bio page we can send visitors to that page. If we look in our code the first HTML we see is where we send our visitors.
If we highlight this code and replace it with a new one. We can send our visitors to wherever we like. If we click on the preview button in the bottom left hand side. Once our page loads we’ll click on our first profile image. You’ll see that we’ve been taken to my Elementor Pro tutorial page.
I’ve already added links to each of the profile images. So each one when clicked will go to a different page on my website. The next thing I’m going to show you is how to change the image on each profile. We can do that by highlighting and replacing the next URL in our code.
You can find your image URL within your WordPress media Gallery. All you need to do is click on the copy URL button and paste it into the code. If we want to open a full-size image of our profile picture. When clicked all we need to do is paste in the same URL into the top part of our code.
Now if we click on the preview button and click on our profile the full size image will be opened. The next thing I’m going to show you how. To do is change the name displayed on our profile image towards the bottom of this block of code.
You’ll see the name just under demo 2. Whatever you type into this space is what is displayed when you hover over the image. If we scroll down the code on the left hand side each profile has its own block of code.
Within each block you’ll have to change the visitors URL. You’ll have to change the profile image. As we have four profiles we’ll have to do this four times. So what if we want to add a new profile card and profile image to our page. All we need to do is highlight and copy one of these blocks of code.
Directly underneath paste it back in and like we did earlier in the Tutorial. All we need to do is change our URLs in the code. The great thing about this code is no matter how many profiles we add they all fit perfectly within the box. (Almost like a beehive). Because we’re using Elementor page builder.
We can check the responsiveness of our page on other devices. If we do that you’ll see on each device we get a similar effect. Early in the video I said I was going to show you how to change the colour of the text. I’m going to do that now all we need to do is highlight our section and edit it on the left hand side.
What you’ll need to do now is click on the style tab in the top left hand side. Go down to typography at the bottom in here. You’ll need to select the Colour Picker next to link colour. Select the colour you want for your text. Now when you hover over your image your text will have changed.
When you add this code to your page you will need to change the page background colour. In the custom CSS code you’ll need to go down to where it says body. To match the page colour to the rest of your website you need to change this number.
If you don’t know what the colour of your page is then use Colorzilla. If you’ve never heard of Colorzilla it’s a free extension that goes on your Chrome browser. It allows you to select items on your page and it gives you the exact colour name and reference.
Remember if you want to use this code on your website you will need Elementor Pro.
If you haven’t got Elementor Pro there is a link in the top of this description it is an affiliate link. It doesn’t cost you any more to use but it does give me a very small percentage of elementor’s profit if you choose to sign up.
If you’ve got any questions feel free to drop them in the comments box below. Don’t forget to hit that like And subscribe button and I’ll see you in the next Tutorial.
