Hey guys! 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.
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.
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.
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.