NewThe Supreme Bundle: every Divi Supreme plugin, 31% less than buying separately.See what’s inside →

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

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.   […]

K

Divi Supreme, Divi Supreme team

Nov 11, 2020

On this page

Everything on this blog ships in Divi Supreme Pro.

70+ modules and 15 extensions. Unlimited sites.

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.

Found this useful? Share it with a Divi friend.

Get everything from this blog with Divi Supreme Pro.

Every module and extension from this blog, in one plugin, native to Divi 5.

70+ modules and 15 extensions

Unlimited sites on every plan

14-day money-back guarantee

$79

per year, or $269 lifetime

Divi Supreme Pro

Keep reading

Divi 5 multi-select with Bulk Edit applied across several Divi Supreme modules

Bulk Edit for Divi 5: Edit Many Divi Supreme Modules at Once

4min read
Temporary Support Access panel in Divi Supreme Pro showing a private support link, access window options and system status

Temporary Support Access for Divi: Let Support In Without Sharing Your Password

7min read
Supreme Post Reading Time module for Divi 5 showing a post byline with a 7 minute reading time and its content settings

Post Reading Time for Divi: Show an Accurate Read Time on Every Post, No Code

6min read

Get every Divi tip in your inbox.

New tutorials, module releases and Divi 5 updates, in one email a month. Unsubscribe any time.

Join Divi designers and agencies who build with Divi Supreme.

Divi Supreme