Divi Popup Module
Introducing the Divi Popup Modal Module for Divi. The ability to make a modal/popup using Divi has been missing for a LONG time. This plugin does just that. It’s based on the wildly popular Colorbox jQuery library and features a bespoke Divi Builder module which will allow you to define both the content of the popup and the trigger element. For example a button or image (configurable) and a video/image/layout based popup. It’s very easy to use, watch the video for further/more detailed instructions.
- Install and Activate the plugin
- Visit any page with a page builder
- Add the module called ‘Divi Popup Builder’
- Choose your trigger and modal content from the options within the module
- Configure using the settings, CSS and/or the Advanced Design Settings tab within the module
A trigger is what causes the popup to show. These can be as simple as a text link, image or button but may also be more advanced such as showing on page load or showing if an element with a specific class or ID is clicked. More triggers are being added all the time so by all means suggest what you’d like to see and it can be integrated into the next version 🙂
Each trigger is fully configurable and can be styled very easily. There are four triggers at present:
- CSS Class/ID
- On page load (with optional delay)
There are a selection of predefined popup styles which can be configured on a per popup basis. This causes the popup to use a different set of CSS rules therefore giving your popups a set skin/brand very easily.
Popup / Modal Content
Within the popup/modal window you can show a variety of types of content. Out of the box the system supports some simple formats such as video or image but also it can do a lot more such as using a Divi Builder layout or an iFrame. The current list of supported content types is as follows. As with triggers, if you’d like to see this support a different type of content then please let me know.
See the screenshots for how these look on the example site.
Layouts are subject to responsive rules and may look slightly different in terms of widths and spacing on occasion. Width and Height settings are provided but I suggest you test the popup and tune the output using the advanced design settings before releasing pages to the public.
This plugin is based on the wildly popular Colorbox jQuery plugin.