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.
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! 👋
0 Comments