How To Create A Popup/Fullscreen Menu in Divi (Free Layout)

by | Nov 11, 2020 | Blog | 0 comments

Do you want to create a Popup/Fullscreen menu in Divi but you can’t because It’s not available in Divi by default? Guess what– Divi Supreme has a wonderful Popup extension! So today, using this Popup extension, we will teach you how to create a nice Popup/Fullscreen Menu in Divi using Divi Supreme’s Popup Extension.

 

Preview

Before we start Let’s have a quick look at what we are going to make in this tutorial.

So Let’s see How to achieve this awesome Popup Menu. First of all, you’ll need to Download the Layouts to your Computer and Extract it.

Creating a Custom Header

Once you’ve extracted the .Zip file Head over to your Dashboard and open up Divi Library. Now click on Import & Export button at the top.

Now under the Import Section Choose the .json file you’ve extracted and click on Import Button.

Now you’ll see these two Layouts in your Library.

Now open up Theme Builder and Build a Global Header.

Now Choose Add from Library.

Add the Header Layout here from your Library under the “Your Saved Layouts” tab.

So you’re done with Adding a Custom Header to your site. You can also create your own one or if you’ve your own already you can skip the Creating Custom Header Step. So now Let’s see How to create a Popup/Fullscreen Menu.

 

Creating Popup/Fullscreen Menu

So now let’s see how to use the Divi Supreme’s Popup extension to create a Popup Menu in Divi. First, make sure that the Popup extension is enabled in the Plugin Settings.

Let’s Open up Theme builder again and Edit the Global Header.

Now open up the Blurb Module Settings. But If you’ve created your own Header Make sure that you’ve any sort of Blurb Module added with a Hamburger Icon and open up settings.

Go to Advanced tab > Visibility and Select the Layout as Menu, which you’ve in your Library Saved.

So when you’re done with that Save all the Changes and see your Header in action. You’ll now have a Nice Header + You also have a FullScreen/Popup Menu there.

Result

So that’s it. That’s the easiest way to create a Fullscreen Menu in Divi. We hope you like this tutorial and also don’t forget to share your thoughts in the comment section below we’d love to hear.

 

It will not slow down your page load speed.

Popups have for the longest time get a bad rap for their negative impact on page load speed. The reason for this is because most of them use a lot of Javascript files that eat up a lot of hosting resources.

The good news is that Divi Supreme works differently in that we use the same built-in popup lightbox library that Divi uses with no additional Javascript files. This means our popups add no extra load to your site other than what the native Divi Builder requires to load fully.

Want to add popups to your website? How about you install Divi Supreme Pro today and get access to our feature-rich popup extension. Let’s get your site popping!

 

Or try out the Divi Supreme Lite

Divi Supreme Lite Offers 18 Modules and 3 Beautiful Extensions and using them you can easily extend your site’s functionality.

Get access to all our Divi and Divi Supreme’s tips, articles and cutting-edge helpful tutorials that are easy to understand for small businesses, bloggers, and non-techy Divi website owners, direct to your inbox.

0 Comments

Submit a Comment

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

16 − eleven =

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