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 (plugin has been updated a LOT since the video was made). You have control over the styles of the trigger and the popup itself. The popup (often called a lightbox) has optional controls for responsiveness as well (width and height settings at tablet and mobile sizes for extra flexibility..
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.
- CSS Class/ID
- On page load (with optional delay)
- Exit Intent – when the user tries to close the browser
- Scroll Delay – when the user gets to a certain % of the way down the page
- On Blur – much like class/ID except this fires when your user clicks out of a field
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.
The newest is called ‘Theme Style’ and it takes the ‘Accent Color’ from your Divi Customizer and uses that as the background color along with a clean and modern lightbox window. See screenshot below for an example.
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
- Visit plugins > add new
- Upload the plugin and activate
- Visit any page with a page builder
- Add the module called ‘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.
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.
For any support issues, please visit this link http://docs.tortoise-it.co.uk/
Changelog:* * < V1.4 * - Initial Release * * V1.5 * - Fixed responsive text size/line height issues * - Added more configuration options in advanced design settings across all modules * * V1.6 * - Better support for video popup types * - More trigger styles/CSS * - Support added for px and % sizing * * V1.7 (08/02/18) * - Moved init hook to builder ready to avoid conflicts * - Moved editable fields to new builder groups for a better experience * - Added new triggers - exit intent, scroll % and on blur of input element * - Added new responsive styling options (tablet and mobile width/height settings) * - Renamed module from Modal / Popup Builder to just Popup Builder * - Added Licensing/Auto Update * - Added 'Theme Style' skin which picks up accent color from the theme and uses a more modern style * * * V1.8 (05/04/18) * - Added URL parameter for page load option * - Fixed iframe when used in class/id trigger *
This theme, layout or plugin is comprised of two parts.
1. The PHP code and integrated HTML are licensed under the General Public
License (GPL). You will find a copy of the GPL in the same directory as this
2. All other parts, including but not limited to the CSS code, images and design are
copyrighted by the vendor concerned and are NOT licensed under GPL.
This license allows the item to be used in projects for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resale either on its own, in part, or as part of a larger project including that being part of a hosting offer. Distribution of source files is not permitted.
We understand that there can be issues whilst utilizing out of date browsers. Please ensure you use up to date browsers when using our vendor’s products. For DIVI Theme – Third Party Plugins may not perform as desired in the Divi Visual Builder if this is the case, please use the classic builder. We are working with our vendors to rectify this situation as quickly as possible. With the release of Divi 3.1 developer documentation and SOME support of third-party modules and plugins are now accessible through the visual builder.
Please be aware that you will need an amount of experience in the master theme that you are using in order to take advantage of our themes and plugins.
Please make your decision to purchase based upon your skill level to see if our products fit your needs. Due to the nature of Digital Downloads, Refunds are not possible unless the plugin or theme is unusable in your set up – we will require proof of this – please ensure that the product you are buying will do the job you want it too. In the case of Divi and Visual Builder compatibility – some plugins do not yet have 100% VB compatibility. Please check descriptions thoroughly to ascertain VB compatibility. Whilst every effort is made by our vendors to ensure compatibility with other themes, plugins and or web servers. This can never be guaranteed due to the many thousands of iterations in the wild. Please do not be afraid to ask the vendor for support by visiting the product page and clicking the relevant link. Warranty for fitness of products used on your installation is neither given nor implied.
*Support is provided by vendors directly.
You have questions about your purchased plugin, theme or layout? Then use this form to get your answers as soon as possible. If you have a license key, please enter it here. You can find it in your account under "view details and downloads". Otherwise, please use the invoice id from your invoice.