How to show a Divi Module on Column Hover + Free Layouts

Yoyo! What’s going on?

Welcoming you to my new Divi Tutorial and in this one, I’ll be showing you how to show a Divi Module only then when you’ll hover over to a column. I think you didn’t understand but don’t worry I’ve designed some Layouts for you which you can download for free and also make sure to check the demo page and you’ll definitely understand 😉

Join our Newsletter and get this Layout pack!

Stay updated with the latest news, Tutorial, Video Tutorial and get discounts and more stuff in your inbox. Your Email is safe and always be safe in our secured Lockers.

New Member?

If you're a new member then you may simply enter you email in the form and you'll be redirected to the Download page.

Already Subscribed?

If you've already subscribed to our Newsletter then simply enter your email address for verification and Download the good on the page you'll redirected to.

You can Check this video to out to see what we’re gonna do today.

Things to do first 

First of all, we’ll have to play with adding classes to the column and Module. First of all setup your design and click on Row Settings and then go to the column settings where is the module located which should show only when hovered to that column.

Now go to Column’s Advanced Settings and open up CSS ID and Class Panel. And here in the CSS Class field, you can enter your own class and click on Save Changes Button.

Now go to the Module Settings and do the same with the module go to Advanced Tab > CSS ID & Class Panel add CSS Class but this time different from the Column’s Class.

But if it’s not a module, It’s an element in the Module(Like Social Links in the Person Module) then you’ll have to Inspect the page by Right-clicking and click on Inspect page now select the mouse Icon and Hover to the Element.

Under the Element Tab, you’ll find lots of classes stuff going on. But you’ll have your element selected and you can also see the class of the element as well.

Now right click and click on Edit as HTML and simply copy the class for the element.

Let’s Play

As you got the classes for both Column and Module/Element then It’s time to add some CSS which is very small, Smaller than an Ant. You can paste this CSS anywhere you put your CSS mostly. In Theme Options, Page Settings > Custom CSS or anywhere.

.person .et_pb_member_social_links {
	opacity: 0
}

.person:hover .et_pb_member_social_links {
	opacity: 1
}

And that’s it now your Module/Element will be gone and when you’ll hover over to that column your module/element will appear.

Preview

But wait the tutorials isn’t ended yet. There are so many things to do.

Now we’ll be animating them with a nice entrance and exit animations. So now head over to Animista where you can so many I mean to say so many animations for Entrance, Exit, Attention background and more…

While you’re at Animista website click on Try Me button to enter to a whole new world of animations.

Now open up the Entrance tab and Choose your favorite animation make sure to play around with the Animations to get the best one for you. For me, I’ve Chosen under the Slide-In Tab slide-in-bottom animation. Now click on the Generate button to get the code for animation. 

Here you’ll have to copy the class of the animation.

Now you’ll have to place this class in the CSS where we’ve got the :hover pseudo-class.

With that done now copy the keyframes from Animista to let the animation work.

Now paste the keyframes right below the CSS code you’ve already pasted.

Now change all the numbers which are 1000px in Keyframes to 30px for small animation otherwise the animation will be so long as it will be coming from the very down of the page so It’s recommended to change that number to 30px or 20px.

Preview

And now there’s only one thing left which is adding Exit animation to Module/Element. For this find out your suitable animation from Animista under the Exit Tab and get the code again.

Now copy the class and the same way we did before and this time paste in where we have set the opacity to 0 like this.

Now paste the keyframes for this animation right below the CSS code you’ve already pasted. And also don’t forget to change the 1000px to 30px for better animation and here’s what we achieved.

OMG😲, What a cool Tutorial I’ve written today and not only the Tutorial some Free Layouts as well which you can download for free by clicking the download button here and also you can check their demos as well by clicking the second button. 

Join our Newsletter and get this Layout pack!

Stay updated with the latest news, Tutorial, Video Tutorial and get discounts and more stuff in your inbox. Your Email is safe and always be safe in our secured Lockers.

New Member?

If you're a new member then you may simply enter you email in the form and you'll be redirected to the Download page.

Already Subscribed?

If you've already subscribed to our Newsletter then simply enter your email address for verification and Download the good on the page you'll redirected to.

So that’s it for this tutorial and if you face any problem feel free to comment below and I’ll help you out as soon as possible. Good Luck! 👋

By Samar Jamil

I provide beautiful and creative Divi Child Themes, Layouts and Sections for everyone to create beautiful websites with ease using Divi.

Explore Divi, The Most Popular WordPress Theme In The World And The Ultimate Page Builder

 

You would also like one from these

Easiest Way to Create Inline Email Optin Form  in Divi

Easiest Way to Create Inline Email Optin Form in Divi

Hey Everyone, what's up? The Newsletter is the best way to communicate with your audience and give them special content that other users may miss but did you ever think that without a beautiful looking Newsletter form you'll not get more Audience and you'll also miss...

How to Create Stretchy Navigation in Divi

How to Create Stretchy Navigation in Divi

In today’s’ tutorial, we’ll see how to create a very modern and next level Stretchy navigation in Divi. It works like a charm on any Screen Size with beautiful Animations and more.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Pin It on Pinterest

Share This