What Ever Happened to Divi’s Button Hover Controls and other Divi Hover Answers

What Ever Happened to Divi’s Button Hover Controls? Click To Tweet

And yes. That’s where it went – introducing the “Little Black Pointer” or pointer icon or hover pointer icon – I’m not sure what Divi is calling it.

Wherever you see the little black pointer – you have the option to add a hover effect, Go ahead and click on it. You will automatically open “Default” and “Hover” Tabs. You simply set each one and viola! Hover effects! But it’s not so simple – especially for a more than “simple” hover effect.

Let’s Start Hovering!

What we are going to accomplish in this video is the following hover effect. This is a standard Call To Action module, but keep in mind – the following techniques will work in almost every module. I decided to use the Call To Action module because it has many parts in it that can be “hovered”. Keep in mind that no CSS was hurt in the making of this video. As a matter of fact – No CSS was used at all.

There is going to be a total of 6 hover effects in this one example. They have to be configured in 6 different areas, and they will run simultaneously. First, we are changing the color of the image.  Second, we are changing the position of the image. Third, we are changing the title size. Fourth, we are changing the color of the title. Fifth, the opacity of the body text and lastly, Sixth, we are adding a bottom border line.

Divi Hover Effects – Learn How @ Divi Ready Themes! Click To Tweet

That’s a lot of hovers.  It’s also a lot to keep track of, so take your time and make sure you are entering data in the correct areas. More often than not I find myself making changes to the default state instead of the hover state, and have to stop and do it all over again! So pay attention to what you are doing. Save your work. Let’s get started.

Let’s go into our Visual Builder and add a “Call to Action” Module:

To recap, we are going to:

1. Change the color of the image
2. Change the position of the image
3. Change the Title Size
4. Change the Title Color
5. Change the opacity of the Body Text
6. Add a Bottom Border

Step 1: Change Image Color

The first thing we need to do is add a background image to our module. We are also going to set the Background Image Blend Mode to “Multiply”. Lastly, set the Background Color to White.

Since Divi has not gotten advanced enough to have a hover tab for the image itself, we are going to change the color of the image through the use of image blends. By having the background image blend mode set to Multiply, and the background color set to white – the image will appear normal. This will be our default state.

Divi Child Themes and Divi Layouts @ Divi Ready Themes Click To Tweet

Now let’s go back to our Background Color, Click the Pointer Icon to open the Hover Tab. Make sure the Hover Tab is highlighted when making your changes.

Change the background color to anything but white and you will see your image change. This is due to the fact that we have the image blend mode set to Multiply. Okay – save your changes. Step one, Change Image Color – Done.

Step 2: Change Image Position

Let’s go back to the Call to Action Settings and let’s move over to the Design Tab and go down to Spacing. In the spacing area, we see our hover Pointer Icon. Make sure the Hover Tab is highlighted. Let’s change the Custom Margin Top to -25px.

Save your work. Step 2 completed. Change Image Position – Done.

Step 3: Change Title Text Size

Let’s go back to Call To Action Settings, this time we are going to head over to the Design tab and go down to Title Text.

First, we click on the Pointer Icon to open the Hover Tab. Change the Title Text Size to 35px. Step 2 completed – Change Title Size – Done. Let’s move on.

Step 4: Change Title Text Color

Don’t move from where you are. In that same screen, let’s move up to Title Text Color, find the Pointer Icon and open the hover tab. I chose Yellow because it stands out against the background color.

Make sure you save your changes. Okay, Step 3, Change Title Color – Done.

Learn How To Create Divi Hover Effects at Divi Ready Themes Click To Tweet

Step 5: Change Opacity of Body Text

Next, we are going to add the effect of the body text becoming visible on hover – it’s pretty simple. Let’s go back to our Call To Action Settings, Design Tab and let’s go down to Body Text.  Click the pointer icon to open the Hover Tabs. Highlight the Default tab, and change the opacity of the body color to transparent.

Move over to the Hover tab and change the color to White with no transparency.

Step 5 – Change Body Text Opacity – Done. Save your work.

Premium Divi Child Themes and Divi Layouts Click To Tweet

Step 6: Add Bottom Border Line

Okay – We are almost done. The last step is to add the Bottom Border Line to the module on hover. Let’s go back to our Call To Action Settings, open the Design tab and go to Border. Choose the Bottom Border icon. Next click on the pointer icon to open the Hover tabs. With Hover highlighted, change the Bottom Border Width to 10px. While you are there, give it a color.

That’s it. Save everything and exit the Divi Visual Builder and you should have the hover effect shown. All 6 of our individual hover transitions we set will trigger at the same time and give you a nice, clean hover effect.

Lastly:

If you want to change the Transition duration, Transition delay and Transition Speed Curve, open the Call To Action Settings, go to the Advanced Tab and go down to Transitions. From this one area, you can control all the transitions to all the hover effects you have added to this module. There is only one setting for all transitions – you will not be able to set different durations and such to each hover effect we have put in our Call To Action module.

So as you can see – there are thousands of variations you can accomplish with Divi’s built-in Hover Effects. This functionality can be found in all areas of the Divi Builder – just look for the little pointer icon. You can find it in almost every module including Blurb, Text, Image and so on. Hover effects will enhance your visitors user experience and give a little life to your Divi pages.

I hope this article was of some use to you. If it was, give Divi Ready Themes a Like on Facebook, and Subscribe to our YouTube Channel. Our premium themes are available on our site at https://divireadythemes.com.  Our Divi Child Themes are available for a variety of niche markets including Legal Firms, Construction companies, Cleaning Services, Church Websites and many more. All of our Child Themes and Divi Layouts come with an easy One-Step Demo import so you can get your site looking like the demo in no time.

As of today,  Revolution Slider is the #1 selling slider plugin on the market. With almost 300k sales of the plugin. That means a whole lot of websites are using the plugin.

This video will be more a slider revolution tutorial then it is a Divi tutorial – but you will see how well they play together while building a beautiful divi slider.

So, in this video, we will be creating a slider in Slider Revolution and inserting it into our Divi Layout via the Code Module.  This will be the finished slider. This is what we are aiming for.

Let’s get started.

Before we do anything, we are going to need 3 images. Let’s go over to Photoshop. As you can see I have 3 images; A Laptop, an iPad and an iPhone. These are all transparent PNG files – we are going to need transparency in our slider.

Let’s head over to Slider Revolution.

This is the Slider Revo main screen. Here we can create a new slider, add a slider from a template or import a slider. I will be adding a link to this Divi Slider Layout that I will be creating. You can use it as a guide or starting point in your own project.

So, let’s start a new Slider.

Once in the slider settings, you have an array of different sliders you can set up. For this Demo, we will be using the default slider.

Next, we will give our slider a name. We’ll call it Home Page Slider. Then we’ll give it an alias, home-page-slider and you’ll see that it automatically generates the shortcode you will put into your code module.

Next is our Slide Layout. This is how it covers the screen. I usually just choose Full Width, because Slider Revolution is good about resizing to different screens. You can choose Auto or even Full-Screen layouts.

In the desktop section, we are going to enter our Layer Grid Size. I’m going to set it at 1440px by 600px. Leave all the other grid sizes on Auto. You can come back to this section once the slider is created and fool around with different sizes, so you can get the slider revolution responsive look you want on different mobile devices.

To the right, we have a whole slew of options – but for now, we will keep it simple. In the General Settings, you can set things like Stop Slide on Hover, shuffle. In the Default tab, you select the Slide duration other options. Navigation lets you choose your icons for navigating the slider. We are going to leave everything as is because these are the default settings. We can change those options within each individual slider.

Let’s go ahead and Save Settings.

How to Create a Beautiful Header Using Slider Revolution and Divi
Share on X

Now let’s go to the Slider Editor. We are not going to worry about any of these extra settings. We want to go down and make sure our slider background is set to transparent. Now let’s go down to our slider window. This is where the slide is created. Basically, what you are going to do is create the finished slide first – and then add the animation.

Down below that we have the timeline. For any of you old timers, it’s a little reminiscent of the original Macromedia Flash. Keyframes and tweening and all that. I’ll show you how that works after we add our images.

But let’s do this first. I want to set up the page with the slider code, so I can keep going back to see how it is working. On the page lets start the Divi Visual Builder. Let’s add a full-section, full-screen code, and enter the shortcode for our slider. Now we can jump back every now and then to see how things are going.

Use Slider Revolution with our Premium Divi Layouts!
Share on X

Okay, so back in the Slider window. We are going to add a layer, image, and grab our laptop image. We are going to resize this and place it where we want it to end up and the end of our animation. With the image selected, we will set the animation to Long from Right, and set the easing to Sine.easeout. You can see the animation as we are changing the settings.

Now let’s go back and add our iPad. Click Add Layer, image and grab the iPad image. We are going to do the same exact thing. Resize and place it where you want it to end up. Okay now that we have that in place, let’s add the iPhone. Resize it and place it. Add the same animations.

Next, we will add some text. We are going to add a layer, text/HTML and I’m going to put BEAUTIFUL DIVI LAYOUTS. Let’s set the color to a dark gray, let’s set the font size to 70, the line height to 75 and a weight of 300. Let’s add another line of text, I’ll put WordPress, HTML, CSS Divi. Lastly, we are going to add a button. Just like Divi, Slider Revolution lets you style your buttons – although not to the extent that the Divi Button Module has – but good enough.

Now we are going to go back and add animation to the text and button. We are basically going to be using the same exact settings – only we will be coming in from the left. Since we are right on the edge, we will use Short from Left. Save everything and let’s go see what we have.

Lastly, we have to set the timeline. We are going to set the text to come out first. As you can see here, each asset has its own layer in the timeline. If we drag these boxes, we can set when it will start and how long the animation takes. So we’ll set the text to come one after another with a tiny delay. Then, just as the button slides out we start the laptop, then the iPad and lastly the iPhone. Let’s jump back to our Divi layout page and give it a refresh.

That looks pretty good.

Now to give it a little pizazz. I’m going to add a regular section with one regular row. Click the gear icon and change the background color to blue. Now we go into Design, and Spacing and give it a negative margin of around 200 – 225px. This gives the entire slider a very sleek look.

So there you go. A beautiful slider made even better with a little Divi touch.

I guess that’s it for the video. Don’t forget to check out our online shop for the best Premium Divi Child Themes and Divi Layouts at divireadythemes.com. Subscribe and save 25%.

[et_bloom_inline optin_id=optin_2]

If you liked this video and want to see more Slider Revolution and Divi tutorials, let me know down in the comments – and don’t forget to click the subscribe button.

This has been John, from Divi Ready Themes – and I’ll catch you on the next video.

DOWNLOAD THE DRT SAMPLE SLIDER HERE

How to Center Divi’s Bottom Bar

Don’t get me wrong. I love Divi – but let me rant.

I have been designing websites now for over 25 years. I’ve been around since FrontPage, which makes me approximately a million years old in computer years. In all my years of designing websites for clients – I have never once left aligned the bottom bar. You know what I’m talking about. The bottom bar – where you usually have a copyright date, company name, “all rights reserved”, blah blah etc.? Yeah, that one. I’ve seen millions of websites – 99.98% have the bottom bar centered.

So why does Divi default to a left-aligned bottom bar? Every new site I build I have to take the time to go into the additional CSS, put in my “Centering Bottom Bar CSS code” to get what should have already been there in the first place. I mean it would be easy right?

I even came up with a preview of what this new functionality might look like – check it out below:

Pretty cool, eh?

Imagine how much collective time this would save? Nick Roach, if you are listening – Please give us this option!

Rant over.

Okay. So how do we center the bottom bar in Divi? CSS of course. Just cut and paste the following code into your Additional CSS area, save it and then refresh your page. Ta-dah. You have just become one of the 99.98%.

/* Center Bottom Bar */
#footer-info { width: 100%; margin:0 auto; text-align: center !important; }
@media only screen and (min-width: 980px) {
#footer-bottom .et-social-icons { margin-bottom:-28px; }
}

In conclusion, adding this code takes no time at all. I’m just ranting for the sake of ranting – but it would make a great program even greater. Just saying.

So why does Divi default to a left-aligned bottom bar? Every new site I build I have to take the time to go into the additional CSS, put in my “Centering Bottom Bar CSS code” to get what should have already been there in the first place. I mean it would be easy right?