How to create a Fly-In Popup like Elegant Themes in Divi

Hey Everyone, what’s up?

In today’s super creative tutorial we’ll see How to create a Fly-In Popup in Divi the one that Elegant Themes have on their site for more than 2 years and they never showed how they’ve added this kind of Popup to their site. So today I made it possible with Divi. It works exactly like the same and you can use it to grow your Email List or show a Sale Notice in a modern way.

Sneak Peak

Here’s a quick look at how it looks like in action. You can see when we hover on the Button which is fixed on the Bottom Left of the screen it expands and on the click it shows the Popup with a nice and smooth animation. I’ve also added the Email Optin Module in the Popup and a cool little thing that when you’re in focus in the Email field it shows the title on top just like Elegant Themes. I hope I’ll not get a copyright strike from them 😑

 

Desktop

 

Mobile

 

Video Tutorial

 

Let’s see How to achieve this same thing on your site

All you’ve to do is simply enter your Name and Email in the form below and click on the Submit button then you’ll see the Download Layout button just download the layout.

After Downloading you’ll need to extract the .Zip file in your PC after extracting you’ll get a .json file. Once you’ve .json file you’ll need to go to any page you want and Enable the Divi Builder. Once Divi Builder is enabled on your page you can now drag the extracted .json file and drop it to Divi Builder. You’ll then see a popup, just uncheck the option “Replace Existing Content” and click on Import button.

Now the layout will be successfully imported on your page you can now simply change the content to your own and you’re good to go. The JQuery doesn’t load in Divi Builder so you’ll be able to change content easily. You can also use Layers View to edit more easily.

Where do I the find jQuery and CSS?

If you want to make some advanced changes then you’ll find the Code used to make all this happen by enabling the “Layers View”. There you’ll find a Row Labeled “Important Codes added below” and there will 2 modules as you can see in the image below.

How can I add a floating effect to any Divi Module?

If you haven’t noticed yet, there’s a cool Floating Animation going on to the Images (The Gif boxes) which is super cool. So what If you want to add the same Floating Animation to some other Module. All you’ve to do is to add the CSS below to any Module you wish. To add go to that Module settings -> Advanced tab -> Custom CSS -> Main Element and simply paste it in the box.

-webkit-animation: float 3s infinite;
    animation: float 3s infinite;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;

How can I show this globally?

Well, If you want to show it globally on your site then you can take advantage of Divi Theme Builder. Simply Edit the Global Footer (I don’t recommend Header) and paste this Section anywhere in the Footer and boom It will show on your whole site. Coooool 😎

And there you go something super creative for Divi. Hope you liked it and will use it to attract more visitors. Please let me know in the comments how you used it I’d love to hear from you. All the credit goes to Elegant Themes, the real talented people are there I’m just a copy cat 😝

Have a great day!

Make Beautiful websites with ease using our Handmade Beautiful Child Themes

For Divi

Feeling Generous

If you found this tutorial helpful, why not buy me a Coffee which really gives me more energy to make more Tutorials Like this.

Buy me a coffeeBuy me a coffee

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.

Pin It on Pinterest

Share This