Philipp Stracker

Jenn

Tim Strifler

After the plugin is activated, the Visual Builder displays a new tab called “Popup” in the Section Settings modal. In the “Popup” tab, you can turn a regular Section into a Popup!
It’s super simple, as you can see on the plugins Demo Page: <a href="https://divimode.com/divi-popup/demo/?utm_source=wporg&utm_medium=link&utm_campaign=popups-for-divi" rel="nofollow ugc">divimode.com/divi-popup/demo</a>
ℹ️ How it works
First, activate the plugin (no configuration needed!)
<ol>
<li>Open up your Visual Builder and edit a Section – you’ll see a new “Popup” tab in the Section Settings.</li>
<li>Toggle the option “This is a Popup” and set the “Popup ID” to something (e.g., “<code>newsletter-optin</code>“). Close the Section Settings.</li>
<li>Add a Button Module somewhere else on the page and set the “Link URL” to your Popup ID, with a leading “#” hash (e.g. “<code>#newsletter-optin</code>“)</li>
<li>That’s all. Save the page and exit the Visual Builder! Click on the button, and you’ll see your Popup. Congratulations!</li>
</ol>
⭐️ Additional details
Check out the <a href="https://divimode.com/divi-popup/?utm_source=wporg&utm_medium=link&utm_campaign=popups-for-divi" rel="nofollow ugc">Plugin website</a> for more details. You’ll find:
<ul>
<li>Examples</li>
<li>CSS class options</li>
<li>JS API documentation</li>
<li>WP filter documentation</li>
</ul>
Tested in all major browsers on Windows and Mac: Chrome, Firefox, Safari, IE 11, Edge!
Popups for Divi Course
During the past years, we’ve added a ton of features and have created a stable and powerful marketing plugin.
To celebrate the anniversary, we have created a six-day course that teaches you everything about the plugin. It walks you through the basics of creating your first Popup, shows possible ways to customize your Popup layouts and goes into advanced techniques and usages of the plugin.
<blockquote>
“The instruction emails really helped me to understand how to use the plugin correctly!”
</blockquote>
The course is available in your wp-admin Dashboard right after you install and activate the plugin. Check out the screenshots to see the form. Also, have a look in the FAQ section, if you want to disable this feature.
🥳 Want more?
If you want to get the most out of Divi, you need to have a look at <a href="https://divimode.com/divi-areas-pro/?utm_source=wporg&utm_medium=link&utm_campaign=popups-for-divi" rel="nofollow ugc">Divi Areas Pro</a> to get additional features:
<blockquote>
<ul>
<li>An admin UI to create and configure your popups</li>
<li>Choose between 4 Area Types: Popup, Inline, Fly-in, Hover</li>
<li>A beautiful UI that blends in perfectly with Divi</li>
<li>Add advanced triggers to your Areas:
<ul>
<li>On click</li>
<li>On hover</li>
<li>On scroll</li>
<li>After delay</li>
<li>On Exit</li>
</ul>
</li>
<li>Customize the Area Display
<ul>
<li>Show on certain pages</li>
<li>Show on certain devices</li>
<li>Show for certain user roles or guests</li>
</ul>
</li>
<li>Customize Area Behavior
<ul>
<li>Show/Hide the Close button</li>
<li>Display the Area once per hour, day, week, …</li>
</ul>
</li>
<li>Flexible position for Inline Areas
<ul>
<li>Replace/extend the page header</li>
<li>or Footer</li>
<li>or Comment section</li>
<li>or actually any Divi section inside the page content</li>
</ul>
</li>
<li>It comes with an extended version of the JS API</li>
<li>Great documentation built into the plugin and an online knowledge base</li>
<li>and much more…</li>
</ul>
👉 <a href="https://divimode.com/divi-areas-pro/?utm_source=wporg&utm_medium=link&utm_campaign=popups-for-divi" rel="nofollow ugc">Learn more about Divi Areas Pro</a> (with screenshots!)
</blockquote>

Popups for Divi

I would request to improve it constantly, thank you 

Great Plugin


I inherited a client site with 4 other popup builder plugins installed. None worked after I updated Divi theme to its latest version. This plugin worked very well and had good documentation, which was helpful because it's a smart but non-obvious way to add and design popups in the Divi visual editor.



One area for improvement is built-in popup templates to choose from, such as borders, modal background designs (stripes), etc.


It works well, very easy and smart

A quick and easy way to create Popup layers inside the Divi Visual Builder!

PlugPress

Fahim Reza

WPPaw

Divi Torque

DiviEpic

M. Asif Hossain

DiviPeople by PlugPress

CF7 Mate (formerly CF7 Styler for Divi) is an all-in-one toolkit for Contact Form 7. Customize every aspect of your forms visually — no CSS needed — and unlock powerful features like form entries, star ratings, range sliders, and multi-step forms.
Works with Divi 4 & 5, Gutenberg, Elementor, and Bricks.
<h4>Why CF7 Mate?</h4>
Contact Form 7 is powerful but ships with minimal styling. CF7 Mate bridges that gap by giving you full visual control over how your forms look and behave — directly inside the page builder you already use.
<h4>Free Features</h4>
<ul>
<li>Visual Form Styling — Customize colors, spacing, borders, and typography for every form element</li>
<li>Multi-Builder Support — Native modules for Divi (4 & 5), Gutenberg block, Elementor widget, and Bricks element</li>
<li>Form Header — Add titles, descriptions, icons, or images above your form</li>
<li>Grid Layout — Arrange fields in responsive multi-column grids</li>
<li>Field Styling — Control background, borders, focus states, height, and spacing</li>
<li>Button Styling — Customize text color, background, padding, border radius, and hover effects</li>
<li>Label & Placeholder Styling — Fine-tune label color, spacing, and placeholder appearance</li>
<li>Radio & Checkbox Styling — Custom sizes, colors, and border styles for radio buttons and checkboxes</li>
<li>Validation Messages — Style success, error, and field-level validation messages</li>
<li>Responsive — All styles adapt to desktop, tablet, and mobile screens</li>
<li>Lightweight — No bloat. Only loads assets on pages that use your forms</li>
</ul>
<h4>Pro Features</h4>
<ul>
<li>Form Entries — Save every submission to your WordPress database and export to CSV</li>
<li>Multi-Step Forms — Build wizard-style forms with progress indicators and step navigation</li>
<li>Multi-Column Layouts — Advanced column arrangements with custom responsive breakpoints</li>
<li>Star Rating Field — Collect feedback and reviews with customizable star ratings</li>
<li>Range Slider Field — Let users pick values with an interactive slider</li>
<li>Calculator Field — Add calculated fields based on other form inputs</li>
<li>Design Presets — Save and reuse form styles across your site</li>
<li>AI Form Generator — Generate complete CF7 forms from a text prompt</li>
<li>Webhook Integration — Send form data to external services on submission</li>
<li>Heading, Separator, Icon & Image Fields — Enhance your forms with visual elements</li>
</ul>
<a href="https://cf7mate.com" rel="nofollow ugc">Learn more about Pro features →</a>
<h4>Builder Compatibility</h4>
CF7 Mate includes native integrations — not shortcode wrappers — for each builder:
<ul>
<li>Divi 4 — Full Divi Builder module with visual controls</li>
<li>Divi 5 — Purpose-built module for the new Divi 5 architecture</li>
<li>Gutenberg — Block editor block with live server-rendered preview</li>
<li>Elementor — Dedicated widget with Elementor-native controls</li>
<li>Bricks — Custom element for the Bricks Builder</li>
</ul>
<h4>Developers</h4>
The free version source code is available on <a href="https://github.com/plugpress-io/cf7-styler-for-divi" rel="nofollow ugc">GitHub</a>. Feel free to fork or build from source.
<h4>Who Is This For?</h4>
<ul>
<li>Agencies building branded forms for clients</li>
<li>Online stores that need styled order or inquiry forms</li>
<li>Service businesses collecting leads through custom contact forms</li>
<li>Anyone using Contact Form 7 who wants better-looking forms without writing CSS</li>
</ul>

Styler Mate for Contact Form 7

Style and enhance Contact Form 7 for Divi, Bricks, Elementor, Gutenberg, and more.

Popups for Divi vs Styler Mate for Contact Form 7