Overview
This Link Type allows you to display a popup when the user clicks the item where this Link Type has been set (e.g. Menu Item in DiviMenus Flex).
The popup content is a Divi Layout from the Divi Library that you have previously selected in the Link Type settings.
When you are opening popups, you are actually updating the HTML page, not opening a new one, so they won’t be blocked by any ad blocking extension that you may have installed.
Finally, to close popups, you can either press the ESCAPE key, click outside them or click the close button (if added). The item that opened the popup will receive the focus again.
Pop it up!
Let’s pop up some example layouts in order to guide you through all the popup creation process.
First, you have to select the Popup option from the Link Type dropdown.
If you are using the either the DiviMenus or the DiviMenus Flex module you must first enter the Menu Item that will show the popup and open the Link module toggle.
Content Tab
In this settings modal tab you will be able to pick the Divi layout that you want to trigger on item click and set up the popup behavior.
Content > Link > Divi Layout
Here you can select the Divi Layout that will be displayed in the popup.
This select field won’t list layouts that contain DiviMenus, since the Divi API does not allow to render a module inside the same module. Please check out the troubleshooting page if you want to learn more about this matter.
Let’s choose a Divi Layout we had previously stored in the Divi Library and click Save. This is what we have so far.
Please notice the animation. You can design your popup content, including animation, spacings or width, from the Divi Library itself.
Also, you can add custom enter and exit effects. We will explain them later in this documentation.
Content > Link > Show On Hover
This toggle field will allow the user to open the popup on Menu Item hover.
Content > Link > Show Close Icon
As you can see in the previous example, you can dismiss the popup by either clicking outside or pressing the ESC key.
This field will allow you to also close the popup by clicking a close button. This option is useful when opening fullscreen popups (we will see this later).
Let’s add a button to the previous popup.
In order to add a close button we have turned on the Show Close Icon field and selected the desktop and hover icons.
Content > Link > Disable Page Scroll
This toggle field will prevent the user to scroll the page while the popup is open.
Design Tab
In this settings modal tab you will be able to style the popup. If you selected the Popup Link type, a new toggle named Popup will appear.
Design > Popup > Location
This module field is pretty straightforward and does what it says.
Let’s add two new Menu Items in order to see different popup Locations (Center Left, Center Center and Center Right).
Please notice the animation. You can design your popup content, including animation, spacings or width, from the Divi Library itself.
Design > Popup > Popup Max Width
Here you can define the maximum width that the popup will take up.
Default is 80%, meaning that the popup will take up the 80% screen width (unless the popup content – the Divi layout – has a smaller width, as we saw in the previous examples).
Let’s add now in the examples a larger popup (Popup 2) so you can see how it actually takes up the 80% of the screen.
As a result, you will have room (20%) to dismiss the new added popup (Popup 2) and a bit more in the previously added popup (Popup 1).
If you are using a DiviMenu, as we use in this example, you might have noticed that the Popup 2 is not taking up the 80% of the screen width. Instead, the popup with is 1080px.
This is because the Limit Width on Large Screens module field is turned on.
This module field will limit the popup width to 1080px. Disabling this field will prevent this behavior and the popup width will be the 80% screen size for all screens now.
Of course you can use this field to reduce the popup width. This way you do not need to update the layout width from the Divi Library if you don’t want to. Let’s change the popup width to 50% from this module field (you can use pixels too).
You can also use this module field to make the popup fullwidth. We are going to set the popup height to 100% as well by entering that value in the Max Height module field.
Remember that we are setting the maximum popup width and the maximum popup height. If the Divi Layout width is smaller than the screen width, then the popup won’t be fullwidth. Same applies for the popup height.
The second popup will be now fullwidth and almost fullheight.
We are adding a close button as well to dismiss the popup.
Design > Popup > Limit Width On Large Screens
This field will limit the popup width to 1080px as explained in the previous examples.
Design > Popup > Popup Max height
Here you can change the popup maximum height. Default is 80%.
Design > Popup > Overlay Color
Here you can change the background color of the overlay that is added when a popup is displayed (i.e. the page content around the popup content). You may want to use your brand color rather than the default color. If so, you can use this module field.
We have duplicated our example popup so you can see what this field does. The first popup background color is the default color; the second background color is a custom color.
Design > Popup > Close Icon Color and Size
Here you can customize the close icon color and font size. Those fields will only be available if a close button is being used.
Design > Link > Enter Effect
This field will allow you to animate the popup when appearing.
Design > Link > Exit Effect
This field will allow you to animate the sub popup when disappearing.
Closing popups
Once the popup is displayed, you can dismiss it by clicking outside.
If you have included a close button, you can use the button as well. This is useful when you are displaying either large or full screen popups.
Remember that you can always press the ESCAPE key to dismiss the popup.
Once the popup is dismissed, the focus is back to the item that opened it.
We care about usability, that’s why we try offer different solutions so all users can easily get rid of them.
Popup Link Type in action
Below, we are listing some resources that might be helpful for a better understanding of this Link Type.
DonDivi Layouts
Band: https://dondivi.com/layouts/band/
Solar System: https://dondivi.com/layouts/solar-system/
Team: https://dondivi.com/layouts/team/
Woman / Man: https://dondivi.com/layouts/woman-man/
Working / Loading: https://dondivi.com/layouts/working-loading/
Youtube
Subscribe to our YouTube channel to see the Popup Link Type in action and much more, as well as new feature updates from our plugins: