Hey guys! Joshua Mayo here back with another tutorial. In this tutorial, I’ll be walking you through Elementor hover effects. You’ll learn how to customize a widget’s hover feature, making it easy to take your website’s design interaction to the next level. In order to show you a few ways you can use Elementor’s hover feature in WordPress, I’m first building a “blurb”. Blurbs can be used in many ways, but today I’m using it as a blog section.
Once I walk you through building the blog section, I’ll share 3 ways to use the hover effect. If you’d like to save time and skip walking through this tutorial, or even watching the video above, you can download this landing page template as a Free Goody now. Otherwise, let’s get started!
Step 1: Open Elementor Editor
Sign in as an admin on your WordPress website. Viewing your dashboard on the back-end of your site, you may begin editing with Elementor by first creating or selecting a Post of your choice. There you will find the blue button that reads “Edit with Elementor”.
If you are on the front-end of your website, you will have a gray bar at the top of every page that allows you to click “Edit with Elementor”. Once clicked, the Elementor side bar opens to the left.
Step 2: Create New Section
When the page you are editing is empty, or you scroll to the bottom of page you’ve already added content to, you will see the lined box asking you to “Drag widget here”. The burgundy plus sign creates a new section.
Select the burgundy plus-sign and, for the purpose of building a blog section, select the third box option. This means you are creating a 3-columned section.
Once selected, look to the sidebar and change the content width option to “full width”.
Step 3: Set Background As Image
In another tutorial, I talk about the importance of nesting columns. For this design, nesting is not necessary. Hover your mouse over one of the columns; a grey box will appear in the left corner of the column. Click this box.
In Elementor’s editing sidebar, the option to add an image will be under the Style category. Select the paint brush and then the (+) sign to open your media folder and select your image.
After you’ve added an image, make sure to set your image’s Position to “center center” and Size to “cover”. This causes your image to stay properly sized and centered, no matter what changes are made within the container.
Step 4: Add An Overlay
*If your image is already dark, or black and white, you can skip this step.
Before adding text over the image, let’s add a light overlay. Looking further into the image settings, select the Background Overlay section. Opening the paintbrush options, select the box for Color. Choose black. This not only makes your text easier to read, but can completely change the way you see Elementor hover effects.
Step 5: Add A Header
Once the image has been added, you will notice that the column still appears empty. Only after adding a widget inside of the column, will your background image show. By going back to the main elements sidebar, where all widgets reside, drag and drop the Heading widget into the same column you’ve placed your image.
Customize your heading’s typography to match the style you’re going for. These text edit options are found under the Style category in the sidebar. I’m using the font Oswald and the size is 40. I’m also changing the header’s color to white.
Step 6: Add The Space Widget
By going back to the main elements sidebar, where all widgets reside, drag and drop the Spacer widget into the same column you’ve placed your text. Place one Spacer above, and one Spacer below the Header. To change the space, click on it in the column and the editor will appear in the sidebar. You can decide how much space works for your design; I’m changing each space to 200 for this design.
Step 7: Elementor Hover Effects
Finally, this is where the magic happens. Now that your column is complete, it’s time to play with Elementor hover effects. Taking a step backwards, go into the editor sidebar for the column background (where you placed the image). In the background overlay option, choose Hover. Click the paintbrush and edit the color. For my design, I’ve chosen the color blue (#0d11dc). Now when you hover over the column, you will see the color change you’ve made. You can decide if you’d like it to be more subtle and become only slightly darker or brighter than the color it is originally.
Next, you’ll notice options for Opacity and Transition Duration. Opacity causes your overlay to either be very dark or very subtle. Transition Duration changes how long it takes for the Elementor hover effects to appear or disappear. It’s a good design habit to have, to avoid leaving all settings to default. For a more finished and intentional look, change your opacity and duration to what fits your design. I’ve changed my opacity to 0.75 and my transition duration to 0.7.
Another option you can change for the hover feature is on text. Rather than having the background color change when your mouse hovers over any part of the block, you can make your text color be the only thing that interacts. Sometimes this is a good indicator for visitors on your page to know that the the text is a clickable link (of course make sure to add a link).
Another option is to create a hover effect that only changes the border of your column. For example, as you hover over the column, a colored border appears. Scroll down to the Border section of the Style category. If you have not added a border overlay, or your column is not nested, you will first need to set the border first for the normal view; selecting a solid border type (or whatever works for your design) and entering the width, then choosing the color. If you do need your overlay, make sure your Normal view border matches seamlessly (unless you prefer otherwise) with your background overlay. Now go into Hover and make your settings the same, except this time change the color to your desired hover look.
Step 8: Duplicate Column
After you’ve completed the exact look you desire, you can now duplicate this to your desired column amount. In my setup, I’ve selected 3. In order to duplicate, hover over the main column and right click the grey box in the left corner. Select Duplicate, and do it once more. Delete the empty columns by right clicking and selecting delete. Now, all you have to do is change the words and/or background image. If you decide to edit the hover effects for each column, this is your design so you make the calls. Changing one column will not affect another column.
Step 9: Final Touch
That’s it! You’ve successfully created Elementor hover effects for your website! Your visitors will be quite impressed with your website’s interaction. Don’t forget to have fun with this. I’ve only listed a few of the ways to use hover effects so make sure to practice and explore new ways to bring your site to life.
