a

NEW & POPULAR DIVI CHILD THEMES

Molti

Multipurpose Business Child Theme for Divi.

Molti Ecommerce

Multipurpose Business/Ecommerce Child Theme for Divi.

Molti LMS

Multipurpose LMS/Business Child Theme for Divi & LearnDash.

Florence

A Delicate & Innocent Business Child Theme for Divi.

WANT MORE?

Join Our Membership

Get access to all our Divi Products by Joining Membership!

Membership Benefits

See the Benefits of Joining Membership before you Join!

Send us a Message

Need Help? Send us a Message and we'll be glad to help.

Visit Documentation

Instead of waiting for us, try to find your answer in our Documentation.

Our Blog

See the Latest News, Divi Tips & Tricks and a lot more.

Useful Tools

Some Useful Divi & Web Design Tools that we use and you'll love.

Customer Showcase

See cool websites made by our Customers using our Child Themes.

Affiliates

Earn Money while Promoting our Products today.

What's New?

See what we've been working on and what's new from us.

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

Samar Jamil

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 😉

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.

[et_pb_dmb_code_snippet code=”LnBlcnNvbiAuZXRfcGJfbWVtYmVyX3NvY2lhbF9saW5rcyB7CglvcGFjaXR5OiAwCn0KCi5wZXJzb246aG92ZXIgLmV0X3BiX21lbWJlcl9zb2NpYWxfbGlua3MgewoJb3BhY2l0eTogMQp9″ language=”css” style=”monokai” linenums=”on” _builder_version=”4.16″ body_text_align=”left” body_text_color=”#ffffff” border_radii=”on|5px|5px|5px|5px” global_colors_info=”{}” theme_builder_area=”post_content” _i=”15″ _address=”0.0.0.15″ /]

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. 

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! 👋

Share The Love ❤️

Written by: Samar Jamil

I Love to make beautiful and creative Divi Child Themes, Layouts and Module Designs for everyone to help them create beautiful websites with ease using Divi. I also Enjoy making helpful Divi Tutorials, Freebies, and More!

NEW & POPULAR DIVI CHILD THEMES

Molti

Molti Ecommerce

Molti LMS

Florence

WANT MORE?

MEMBERSHIP

Join Membership

Membership Benefits

CONTACT US

Send us a Message

Visit Documentation

RESOURCES

Theme Customization

Customer Showcase

What's New?

Our Blog

Useful Tools

Affiliates

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.

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.

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.