In this post, we’ll use Divi AI Agents with three Divi 5 features to recreate a filtered blog index: Flexbox for the page skeleton and cards, Loop Builder for a repeating post card, and Loop Filter Modules for search, category and author filtering, and Apply and Reset controls.

The goal is a working blog post loop that matches the reference layout: a hero, a sidebar of filters, and a grid of live posts. We’ll start from the screenshot, then attach dynamic content to real WordPress content one stage at a time.

What Are Divi AI Agents?

Divi AI Agents work with native Divi elements, including Sections, Rows, Columns, and Modules. Open the interface from the Builder Bar to ask questions about your layout or request changes. Ask Mode provides guidance, while Build Mode makes edits.

The chat panel opens beside the canvas, so you can follow the conversation and review the layout in the same workspace.

The first time you use it on a site, you’ll need to sign in with your Elegant Themes account so that the site can access and use your Divi AI credit balance.

Divi AI Agents are included with a Divi AI membership, which is also part of Divi Pro. The membership includes $5 in complimentary agent spend each month. Usage costs depend on the model and the request.

Ask Mode And Build Mode

The interface has two modes. Ask Mode can inspect the page, Design Variables, Presets, and Divi’s knowledge base. Use it to understand a setting, compare Flexbox and CSS Grid, or plan a change without editing the layout. For example, ask:

Divi AI Agents can use the available page context and Divi knowledge to explain which approach fits your layout.

Build Mode carries out the work. As the Agent processes a request, you can follow the tool calls and the work report in the chat, then check the canvas. For example, use this prompt:

Watch as Divi AI calls on the tools needed to create the row and assign the background color.

Keep related revisions in the same conversation. When you move to an unrelated task, click New Chat to start a fresh thread.

The History tab lets you reopen past conversations and continue with their context. Review the canvas after each build request. If something needs correcting, ask for a targeted change or use the Visual Builder’s Undo controls.

Inputs, Context, And Controls

You can start from a blank page and describe what you want, or give the Agent something to work from. It can build from a written brief, a screenshot or mockup, a website URL, or a mood board of reference images. What you get back is not a static picture or a pile of generated code. It builds real Divi sections, rows, modules, content, and styles that you can keep editing in the Visual Builder.

The chat window includes controls for adding context and reusing instructions.

Context

Context tells the Agent exactly what you mean. Select a Module, Group, Column, Row, or Section on the current page and add it to the request. You can also attach screenshots and other reference images, as showing the layout is faster than describing it. The more relevant the context, the less the Agent has to guess.

Rules

Rules give the Agent persistent guidance for the site. Use them for brand voice, layout conventions, and which Design Variables or Presets to use. Click the Rules icon, add a new Rule, give it a title, write the instruction, and describe when it should apply. Save those once instead of pasting them into every chat.

Commands

Commands turn a prompt you reuse into a one-step workflow. Good candidates are accessibility checks, responsive cleanup, content reviews, and design system audits. Trigger the saved Command from chat instead of rewriting the same multi-step request.

Tools

The Tools control provides access to Divi-specific actions that Divi AI Agents can use for elements, settings, and site content. During a build request, the chat shows the actions being used, helping you follow the work behind the result.

After the first draft exists, keep using the same conversation to edit it. Ask it to redesign a section, rearrange modules, change colors, adjust typography, rewrite copy, or update spacing. You can also ask it to use your global colors, turn repeated styles into Presets, or replace one-off values with Design Variables.

Be specific about the result you want, keep each request small enough to check on the Canvas, and give constraints as well as a goal. If a Build result is off, don’t stack another large request on top of it. Point the Agent at the element that needs work, or use the Visual Builder’s History and Undo controls to step back through the page edits.

Build The Blog Loop With Divi AI Agents

We’ll use a reference image and a series of focused prompts to build the layout, connect it to posts, and add filters. Use a site with published posts, featured images, categories, and authors so you can check the dynamic results. The prompts also assume your Color Variables already exist.

Open a blank or existing page in the Visual Builder and start a New Chat. Use the model dropdown menu to choose a model to build the layout. For this post, we’ll use Auto Deep Value, an automatic model selection option that balances deeper reasoning with cost.

Next, use the Attach a File icon to upload a reference image.

Recreate The Screenshot

Start by building the hero and the blog section beneath it. Leave the sidebar empty and create one card to serve as the repeating template. Use placeholder content for now; you’ll connect its fields to WordPress posts in the next stage.

Use this as the starting prompt:

The reference supplies the visual direction, while your Color Variables keep the colors connected to your design system. The outer 1/4 + 3/4 row separates the filters from the results. Inside the results column, the card column will become the repeating item, with its 1/3 Column Class creating a three-card desktop layout once Loop is enabled.

After the build finishes, check that the hero sits above the blog section and that the outer row contains a narrow sidebar and wider results column. Confirm that the sidebar is empty and the Nested Row contains only one card column. Replace any copied reference text with placeholders, and remove extra cards before enabling Loop.

If the generated structure is missing the Nested Row, add the outer 3/4 results column as context and ask:

Turn One Card Into A Loop

Select the individual card column inside the Nested Row, rather than the outer results column. This is the element that should repeat. In its Meta option group, label it Blog Results so you can identify it when selecting the Post Filter module’s target.

Add that card column as context. Ask Divi AI Agents to query posts, show six results per page, and order them from newest to oldest:

Once the task finishes, open the card column and confirm that Loop is enabled. Check the query and each dynamic field, including the post link. The repeated cards should display different posts rather than copies of the same static content.

Make any necessary adjustments, such as reducing the amount of text in the Excerpt.

Add The Loop Filter Modules

Now select the empty 1/4 sidebar column as context. Ask Divi AI Agents to add a Post Filter module there and connect it to the looped card column labeled Blog Results:

Open Content > Target in the Post Filter module and confirm that Target Loop points to the looped card column. Check the search, category, and author items, then use follow-up prompts for styling. For example:

If refinements don’t work as intended through the Agent, alter the prompt as needed or make small adjustments using the Post Filter module’s Design tab.

Make Targeted Refinements

Once the loop and filters are connected, preview the page as a reader. Try a search term, select a category and an author, apply the filters, and reset. Confirm that the displayed posts respond to the controls.

Add the blog row as context, switch to Ask Mode, and request a review:

Review the findings, then switch to Build Mode and ask for the changes you want to apply:

Divi AI Agents can inspect the relevant elements and their children, then use the available tools to adjust the layout.

Once complete, the Agent outlines the steps it took to make changes to the layout.

Make Responsive Changes

Once the Desktop version is set, use Divi 5’s Customizable Responsive Breakpoints to fine-tune the layout on Tablet and Mobile. For this layout, use two cards per row on Tablet. On Phone, the sidebar should stack above the blog post grid, and each card should span the full width. If you discover any inconsistencies, add the element as context and instruct the Agent to make any necessary changes for smaller screens.

For example, on the Phone breakpoint, the Nested Row that houses our blog posts isn’t spanning the full width of the Column, so we use the following prompt:

Once the Agent completes the task, cycle through each breakpoint to ensure everything looks as intended, then save the layout.

Prompting Habits

The Agent works best when each request has one clear job. These habits keep the conversation easy to review and the layout easy to correct.

Give The Agent One Job At A Time

Start with the layout you can see, then add the parts that depend on that layout. A screenshot or brief can produce the structure. Dynamic features, such as a loop or a filter, should wait until the element they belong to exists.

Say What Should Change And What Should Stay

Be specific about the outcome. “Make this section better” leaves too much open. “Tighten the spacing in this row and match the heading size to the one above it” gives the Agent both the change and a reference. Mention existing Color Variables, Number Variables, or Presets when you want the result to stay inside your design system.

Add Context Instead Of Describing A Location

Click the Section, Row, Group, or Module and add it to the request. Attach a screenshot when showing the result is clearer than describing it. The more precisely the Agent can see the target, the less it has to guess.

Keep Each Build Request Small Enough To Check

If a result is off, don’t stack another large prompt on top of it. Ask the Agent to change that one area, or use the Visual Builder’s History and Undo controls to step back through page edits. The Agent History tab stores past chats so you can reopen one and keep its context. Reopening a chat is separate from undoing page edits.

Save Rules And Commands You Repeat

Rules hold persistent instructions for the site: brand voice, Flex instead of Block, and which Variables or Presets to use. Commands turn a prompt you run often into a shortcut from chat. Accessibility checks, responsive reviews, and design-system cleanups are good candidates. Write the Rule or Command once, then reuse it instead of retyping the same constraints in every conversation.

Plan In Ask Mode, Then Review The Canvas

Use Ask Mode when you want a plan or an explanation. Switch to Build Mode when you are ready for the Agent to edit the page. After each pass, check the canvas before sending the next request.

Download The Files

Download the example layout below to use it as a starting point on your Divi 5 website. Once imported, you can adjust its design and settings with Divi AI Agents or edit it directly in the Visual Builder.

Download and extract the ZIP file, then head to the Divi Library and click Import & Export.

Select the Import tab, choose the blog post loop.JSON file from your computer, and tap Import Divi Builder Layouts.

Next, open an existing page or create a new one in the Visual Builder. Click to add a new section to the page.

When the modal appears, choose the Add From Library tab, choose the layout, and tap Use This Section. Divi will add the layout to the page. Review its Loop query, dynamic fields, and Post Filter target using your own posts, then adjust the styling as needed.

Download the Files

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

DOWNLOAD

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Start Building Smarter With Divi AI Agents

Divi AI Agents give you a conversational way to build with Divi 5. In this tutorial, Flexbox provides the structure, Loop Builder supplies the posts, and Loop Filter Modules let readers narrow the results.

The workflow is easier to follow when you build it in stages: create the layout, connect one card to dynamic content, add the filters, and refine the responsive design. Each stage leaves you with native Divi elements you can inspect and edit.

Use the downloadable example or start with your own reference image. Download Divi 5 and explore Divi AI to try the workflow on your next project.

Let us know what you think in the comment section below or on our social media channels.

The post Building And Designing A Loop With Divi AI Agents appeared first on Elegant Themes Blog.

This isn’t the end; it’s a new beginning for Divi, and we are moving forward faster than ever with weekly updates. If you use Divi 5, you’ll see a version 5.14 update notification today.

If you want to get an early inside scoop, I often post progress reports in the Divi Theme Users Facebook group. Join us!

What’s New In Divi 5.14?

The update includes 97 bug fixes and improvements. and some major enhancements to Divi AI’s quick image, text, and code generation tools.

Better AI Image, Text & Code Generation

Divi AI just got a major intelligence upgrade. 🧠

We upgraded the underlying AI models that power Divi’s text, image, and code generation tools, greatly improving the quality of the content they produce.

Generate photo-realistic images, create and edit website copy, write custom code, and more, all from the quick AI tools built directly into Divi.

Recently, we released AI Agents for Divi 5, introducing an entirely new way to build websites with AI. The agent can understand your website, interact with the builder, and perform complex tasks via a conversational interface using any model of your choosing.

But sometimes you don’t need an agent. Not every task requires a conversation or a multi-step workflow.

Sometimes you want to generate an image, rewrite a paragraph, or create a quick piece of custom CSS. That’s where Divi AI’s original quick tools shine, and now they are better than ever.

Take the full feature tour. 👇

What’s Coming Next?

Divi’s next feature will be Components and Slots.

Since the original sneak peek, we have expanded the scope to include a new component manager panel, component editor, and dedicated component import and export tools.

The entire feature, including its expanded scope, is complete, currently in QA testing, and should be ready next week.

Watch this video to get an early look. 👇

Changelog

Here is a list of all fixes and improvements included in this update.

• Fixed a Divi Cloud build failure caused by conflicting Common Sass module variables.
• Fixed an issue where AI Agent checkpoint sync could silently lose rejected batch items after a page reload instead of retrying them or surfacing a sync error.
• Fixed Accordion items opening when scrolling over their titles on a phone.
• Updated Divi’s shared foundation stylesheets to the modern Sass module system, so upcoming compiler upgrades no longer warn on those files.
• Improved Divi Cloud login security and kept Cloud checkout tied to the current WordPress user.
• Fixed Block Row gutter widths stored directly on page content are being ignored on the frontend when another Row on the same page uses an Element Preset with a different gutter width.
• Fixed CSS parallax background jumping when a transform-based animation runs on the module or its parent section.
• Fixed a security issue where the Tabs module titles could render as unescaped HTML in the tab navigation on the published page.
• Fixed Theme Options custom CSS affecting the Visual Builder interface by preventing it from loading in the top window.
• Fixed the first line of a long AI Agent chat prompt being clipped after scrolling back to the top of the input field.
• Fixed VB opening on Events (Gutenberg/draft), event date meta, and Toolset Views in Theme Builder Post Content.
• Fixed an issue where the Audio module displayed its cover image alongside the content in a 1/3 column instead of stacking it above the content, as in Divi 4.
• Fixed nested option-group preset values not appearing immediately after reselecting them while editing an element preset.
• Fixed WP Offload SES Lite settings failing to load when Divi 5 is active.
• Fixed an issue where Variable Settings appeared but were unresponsive after reselecting a global text variable in a dynamic content field.
• Fixed extra space above section rows on the frontend after removing a background video and switching to a background image.
• Fixed an issue where the Divi AI Agent aligned module text without updating the Text Alignment option.
• Fixed the AI Agent modal showing “Add New Chat” when logged out of Divi AI.
• Fixed missing custom button icons on Woo Cart Products and Cart Totals buttons in the Visual Builder and on the frontend first paint.
• Fixed Blog module image sizing height being applied to the image wrapper instead of the image itself.
• Fixed CTA modules with Use Background Color disabled, getting extra padding after Divi 4 migration.
• Fixed incorrect product sorting when using the Post Filter Order By: Price option on WooCommerce product loops.
• Fixed an issue where replacing or resetting a shared value in the page Inspector updated only one matching element.
• Fixed unwanted hover styles when importing older Divi layouts, such as Church Home.
• Fixed guest checkout, creating an account when creating an account. was left unchecked on the WooCommerce module checkout pages.
• Fixed sticky-state Custom CSS overrides not applying on custom post type pages.
• Fixed Map modules failing to load on the frontend when Critical CSS was enabled and a Map in the page body shared a parser ID with a Map in a Theme Builder template.
• Fixed Image module SVG logos with height or max-height only stretching to full width instead of matching JPG/PNG sizing.
• Removed deprecated Sass color-function usage while preserving Core UI hover colors.
• Migrated the Core UI Sass foundation from deprecated imports to module forwards without changing compiled CSS.
• Migrated Core UI and code-snippets Sass consumers to the module system without changing generated styles.
• Fixed nested Tooltip modules not appearing inside Group Carousel slides.
• Fixed Global Presets failing to save when using a child theme of a renamed Divi parent.
• Fixed Theme Builder save and preset operations failing on sites with large numbers of custom presets and global modules being removed from Theme Builder body layouts during Divi 5 migration.
• Fixed default Tooltip text appearing too large when nested inside a Button module.
• Fixed an issue where the Tooltip text was too large when nested inside a Button module.
• Fixed Visual Builder crashing when Loop is enabled on a Slider or Slide.
• Fixed Circle Counter Spacing margin settings not applying correctly inside flex layouts.
• Fixed first-time WooCommerce Product, Cart, and Checkout prefilled Builder templates so their Section, Row, and Column layouts use Divi 5 Flex defaults instead of legacy Block layout settings.
• Fixed Portfolio module project titles so HTML formatting in the title is rendered instead of shown as raw tags.
• Fixed an issue where changing a Post Filter Item Field Type between Checkbox, Radio, and Select reset the selected ACF or custom field to the Author or taxonomy defaults.
• Fixed an issue where a failed Instagram account token save in the Visual Builder closed the Add/Edit form without showing an error or preserving the entered values.
• Fixed Gravity Forms module Submit Button custom width and alignment not applying in the Visual Builder and on the frontend.
• Column Module Elements custom CSS now overrides the responsive block-row gutter and stacked-width rules on phone layouts, including block rows whose column layout attr is left at its default flex state.
• Fixed an issue where overriding Background Image Position on a module with an Element Preset that included both a background image and gradient could cause the background image to disappear.
• Fixed Divi AI Build mode so that converting repeating values on an existing page into Global Variables is offered instead of being ignored.
• Improved AI Agent for handling text-content tasks like spelling, grammar, punctuation, and capitalization corrections, so page-wide text edits use far fewer tokens.
• Fixed an issue where Loop Builder meta queries using Field Does Not Exist (NOT EXISTS) did not return any posts in the Visual Builder when the meta value was left empty.
• Fixed a Visual Builder freeze when the Filterable Portfolio Post Count contained a space or an invalid number.
• Fixed an issue where the Sticky State option was missing when a sticky section was opened from the Layers panel in the Full Site Visual Builder.
• Fixed Gravity Forms Submit and related action button borders so all sides’ width, color, and style from the Design tab apply on the canvas and frontend, not only border radius.
• Fixed Theme Customizer button borders incorrectly using the button text color when the primary color and button border color were set to the same value.
• Fixed Pagination module Links Text Direction not applying when the WP-PageNavi plugin is active.
• Updated Divi AI with new image, text, and code generation models.
• Updated Divi AI image generation to create one image at a time instead of four variations.
• Fixed details-set templates so each details-grid item and preview resolves to the correct child template.
• Fixed gutter-1 module spacing in Theme Builder CPT output, including RTL layouts.
• Fixed Theme Builder set details so every template in a set was displayed.
• Fixed Theme Builder set details template export downloads to generate normalized filenames without encoded fragments.
• Fixed a security issue where Testimonial portrait image URLs were not sanitized before they were written into the module’s inline background style.
• Fixed Icon Module alignment not working correctly when Layout Style is set to Flex.
• Fixed Accordion items opening when scrolling over their titles on a phone.
• Fixed Video overlay images not staying applied after layout import.
• Fixed a missing error message when saving to Divi Cloud from the Visual Builder after reaching the free tier item limit.
• Fixed Group Carousel navigation dots showing only one dot when Center Mode was disabled, and all slides were visible at once.
• Fixed an issue where Blurb Grid column styles were applied twice, causing incorrect narrow layout output.
• Fixed an issue where the Theme Customizer button text and border color pickers reset to white instead of the theme’s primary accent color.
• Fixed chained off-canvas interactions so subsequent canvases in a cascade are pre-rendered and available in the frontend DOM.
• Fixed the issue where the Fullwidth Header module in VB doesn’t match the actual result on the front end with a certain combination of settings.
• Fixed Google variable fonts such as Playfair Display showing a fake italic instead of the true italic style.
• Fixed an issue where Button, Circle Counter, and Accordion modules could not be dragged into an empty column from their edited content surface in the Visual Builder.
• Fixed section dividers on the frontend not inheriting an adjacent section’s Global Color background when automatic divider color is used.
• Added a swipe-style bottom progress bar, slide count, and swipe indicator to the Post Slider module.
• Fixed an issue where the shipping address would not update on the cart page when using a Theme Builder cart template.
• Fixed non-global rows added from the Divi Library inside a Global Section being removed after reloading the Visual Builder.
• Fixed the Woo Related Products image box shadow so it matches the rounded frame of the image border.
• Fixed the unwanted visible carousel group when the video slider module’s carousel navigation is clicked.
• Fixed a security issue that allowed authenticated contributors to execute arbitrary registered shortcodes through two Visual Builder AJAX endpoints that lacked the builder shortcode allowlist used elsewhere.
• Fixed Payment Button: Transform styles not applying when Advanced > HTML > Element Type was set to button.
• Fixed a PHP deprecated error that appeared in debug logs when Support Center Safe Mode was enabled.
• Fixed Pagination Text Direction so vertical text applies on the frontend.
• Fixed an issue where Visibility settings from an element preset remained enabled in module settings after the preset was removed.
• Fixed Border option group presets from current styles, removing parallax background images.
• Fixed Woo Related Products Image Alignment, not positioning reduced-width product thumbnails.
• Fixed Image modules with animation remaining hidden inside Tabs after the first tab.
• Fixed an issue in the Visual Builder where modifying the default OG preset for the Text Module’s Text OG group would incorrectly override a custom OG preset, causing the wrong font styles to appear in the editor.
• Fixed Woo Products image framing not working when the image height was set by applying height constraints to both the image wrapper and the product image.
• Fixed Woo Cart Products and Woo Cart Totals table row and table cell background colors not applying in the Visual Builder or on the frontend.
• Added a Show Labels option to the Email Optin and Comments modules so field labels can be shown and styled without custom CSS.
• Improved Divi AI Agent tool responses so the agent can identify the exact items it creates or changes, making multi-step requests more reliable.
• Fixed the missing browser backup restore prompt in Divi 5 so unsaved Visual Builder work can be recovered after a tab crash or reload.
• Contact Form Label Capitalization Small Caps and All Small Caps now style field labels instead of input text.
• Fixed an issue where Legend Labels Text Color did not apply to the chart legend label text in the Chart module.
• Fixed Theme Builder showing Save Changes after editing an existing layout in the Visual Builder.
• Fixed the Google Maps JavaScript API console warning about missing `loading=async` when Enqueue Google Maps API is enabled in Theme Options.
• Fixed a stored XSS issue in the Audio module cover image.
• Fixed an issue where turning off a global Row could fail when legacy imported content had orphaned global-parent markers without a matching global root.

Jump Into Divi 5 Today

It’s official. Divi 5 is ready for production. Give it a try, and let us know what you think!

If you are brand new to Divi 5, we suggest familiarizing yourself with its many new features; there’s much to explore.

• The Divi 5 page provides a good overview of some of its most exciting changes.
• Our help center has nearly 200 articles focused on Divi 5.
• On the blog, the Divi Resources category features hundreds of long-form tutorials that explore every aspect in depth.
• On YouTube, we have many videos that walk you through each new update.
• Plus, our Fin chatbot is trained on everything and can answer questions instantly! Behind the chatbot is our support team, ready to chat with you and help you through the transition.

The post Divi 5.14 Release Notes appeared first on Elegant Themes Blog.

Divi Overlays by Divi Life gives that content a second layer. It is a pop-up, modal, and full-screen overlay builder that uses the Visual Builder, so you can design the overlay with the same modules, layouts, and design settings you already use. Click a button, image, text link, or menu item to open it, or trigger it automatically with a timed delay, scroll percentage, or exit intent.

The plugin supports both Divi 4 and Divi 5. We’ll use Divi 5 for the walkthrough below.

In this post, we’ll look at what Divi Overlays includes, how its triggers and animations work, and how to build a pop-up inside the Visual Builder.

Why Popups Are Still Effective

A Divi page can only hold so much before it starts to feel crowded. Contact forms, email opt-ins, pricing details, videos, and product showcases all compete for the same space. Putting that content on a separate page solves the clutter problem, but it also sends visitors away at the moment they decide to act.

A well-placed pop-up lets a visitor request a quote, watch a video, or compare plans without navigating to another page. Its usefulness depends on the content and timing: a requested team bio serves a different purpose from an automatically triggered promotion.

The design matters too. Each overlay is a Divi layout, so its typography, colors, and spacing can follow the rest of the site. You build the content with familiar modules rather than styling it in a separate editor.

In practice, that adds another layer to the website. The page stays focused, the overlay carries the extra content, and both share the same Visual Builder you’re accustomed to.

Overview Of Divi Overlays

Divi Overlays treats each pop-up as its own Divi layout. The plugin adds a custom post type for Overlays, then lets you design them with the Visual Builder. You can create as many as you need, reuse them across the site, and edit one overlay without rebuilding every page that triggers it.

Once an overlay exists, you attach it to the site through a trigger. That trigger can be almost anything on the page, including a text link, button, module, Row, Section, or navigation menu item. Automatic triggers include timed delay, scroll percentage, and exit intent. A URL trigger also lets you link directly to an overlay.

The workflow has three parts: build the overlay, configure its appearance and display locations, and connect a trigger.

Key Features

The main features cover the overlay’s content, when it opens, where it appears, and how visitors close it.

Design Overlays With The Divi Builder

Divi Overlays gives you the Visual Builder’s layout and module controls inside each overlay.

That makes the plugin useful for both simple and complex layouts. A contact form overlay might only need a heading and a form module. A promotional overlay might include a pricing table, an image gallery, a slider, or a video. More specialized content, such as a multi-step form or shopping cart, depends on the form or e-commerce tools installed on the site.

Because the overlay is designed as a page, it can follow the site’s typography, colors, spacing, and module styling, rather than looking like a third-party widget dropped on top of Divi.

Click Triggers And Automatic Triggers

Overlays can open on click or when triggered by a rule you set in the overlay editor.

Manual / Click

Click triggers are the most straightforward way to reveal extra content without leaving the page. Text links, images, buttons, menu items, and even entire modules can open an overlay.

In Divi 5, copy the overlay’s CSS Class from its settings, then add it as a class attribute under the trigger element’s Advanced > Attributes option group. The team bio walkthrough below shows each step.

After that, the existing page element becomes the open action. This works well for contact forms, bios, product details, and other content that should appear only when someone asks for it.

Automatic

Automatic triggers are set on the overlay itself. Simply open the Divi Overlay settings, go to the Triggers tab, and use the Automatic Trigger dropdown.

Use None when the overlay should open only from a click.

Timed Delay

When Timed Delay is selected, the overlay waits a set number of seconds before opening. Use Specify timed delay (in seconds) to choose that interval. A value of 0 opens the overlay as soon as the page loads, while a higher value gives visitors time to see the page first.

The same panel also controls where and how often that delay runs. Disable On can turn the automatic trigger off for Phone, Tablet, or Desktop if the overlay should not appear on a specific device. Display Once Per Page Load limits the trigger to one appearance per page load.

Set Scheduling can limit the trigger to a Start & End Time (date) or a Recurring Schedule with the option to disable it on any day of the week. You can also specify a start and end time for the days you choose.

Scroll Percentage

Scroll Percentage waits until the visitor has moved down the page before the overlay opens. Under Specify in pixels or percentage, you can set a From and To range so the trigger can fire at a specific scroll point or inside a window of the page. Use a percentage when the overlay should appear relative to the page’s length, or pixels when you want it tied to a more precise distance.

Disable On can exclude a specific device if the scroll-based overlay should only run on certain devices. Display Once Per Page Load limits the trigger to one appearance per page load.

Exit Intent

Finally, Exit Intent opens the overlay when the visitor appears about to leave the page. There is no delay or scroll range to configure here. The trigger is the exit behavior itself, which makes it a natural fit for last-chance offers, opt-ins, or a reminder before someone navigates away.

Use Disable On to keep the overlay from running on a specific screen size when the behavior would feel intrusive. Like the other automatic triggers, Display Once Per Page Load limits it to one appearance per page load, rather than once across an entire browsing session.

Popup Templates

Designing from scratch isn’t the only option with Divi Overlays. The plugin includes premade pop-up layouts for common uses, such as signup, contact forms, videos, splash screens, and welcome mats.

Preview examples on the live demo, download the included templates through your purchase resources, and import a layout into the overlay editor. After import, swap the copy, modules, and styling to match the site.

Display Types And Use Cases

The same overlay workflow can support several types of content. Choose the layout and trigger to suit what the visitor needs to do.

Video Popup

A video pop-up keeps the page uncluttered until someone chooses to watch. The overlay can hold a YouTube, Vimeo, or self-hosted video, plus a short caption or close action. A click on an image, play button, or text link is usually the cleanest trigger, because the visitor has already asked for the video.

Full-Screen Overlay

A full-screen overlay is useful when the message should take over the page for a moment: a welcome mat, a featured announcement, or a first-visit promotion. Because the overlay is still a Divi layout, the takeover can include a heading, supporting copy, a form, or a button instead of a single generic message.

Product Showcase

Use an overlay when you want to show a product, offer, or featured item without immediately sending the visitor to another template. This works for a sale promotion, a featured product card, or extra product detail that would crowd the original page. A click trigger keeps the showcase optional. Exit intent can also work when the goal is to recover attention before the visitor leaves.

Email Opt-In Form

An opt-in overlay is one of the most common uses. The layout can be a simple signup modal or a more detailed lead-generation form. Timed delay and scroll percentage are useful when you want the form to appear after the visitor has seen some of the page. Exit intent is a better fit when the goal is to catch people before they leave.

Contact Forms

A contact overlay lets visitors reach you without opening a separate contact page. Trigger it from a button, text link, or menu item so the form appears in context. This is especially useful on one-page sites, service pages, and headers where a full contact section would take too much room.

Animation, Close Controls, And Display Rules

After the content and trigger are set, the remaining settings control how the overlay appears and how visitors dismiss it.

Divi Overlays includes entrance and exit animations, as well as speed controls. Those settings help the pop-up fade, scale, or slide in a way that fits the page rather than snapping onto it.

The built-in close button can be customized or hidden if the default icon does not fit the design. In that case, a button or other module inside the overlay can serve as the close action. That is useful for video overlays and any layout where the dismiss control should match the rest of the design.

Each overlay is also a reusable Divi post. You design it once, trigger it from multiple pages, and keep later edits in one place. Change the layout, animation, or close behavior on the overlay itself, and every page using that overlay picks up the update.

How To Create A Popup With Divi Overlays

The easiest way to see the workflow is to build a pop-up. We’ll create a click-triggered team bio overlay. The page keeps a compact team grid, while a Read Bio button opens that person’s photo, role, biography, and social links. Repeat the process for other team members.

Before you start, install and activate Divi Overlays. Then open the page that contains your team section, or build that section first.

Add A New Overlay

In the WordPress dashboard, go to Divi Overlays > Add New Divi Overlay.

This will open the Visual Builder where you’ll build your layout. Like any other Divi layout, you’ll start with a blank canvas and have access to all of Divi’s modules and design settings.

Configure The Overlay Settings

When the Builder launches, the Divi Overlay settings are active by default. There are seven tabs: Background, Animation, Locations, Close Button, Triggers, Advanced, and Design. Should you need to access this panel later, you can find it near the bottom of the Builder Bar, identified by the Divi Overlays logo.

Background Tab

In the Background tab, select an Overlay Background Color, adjust the opacity, and choose whether to Enable Background Blur. Background blur softens the page behind the overlay to help separate it from the pop-up content.

Animation Tab

In the Animation tab, you’ll choose the Animation Entrance and Exit settings. Options include Back Down, Bouncing, Fading, Flippers, Lightspeed, Rotating, Specials, Zooming, and Sliding animations. Use the Select Animation Entrance dropdown menu to choose how you want your pop-up to appear when the trigger is clicked. As you select an option, you’ll find various animation styles to choose from. As you click through them, Divi Overlays gives you a preview of the animation.

Use the Speed sliders to control how fast the pop-up enters and exits.

Locations Tab

The Locations tab controls where on your site the overlay is available. For this example, include the page containing your team section. You can choose from all pages, the home page, specific pages, or their children. Additional options include displaying on Posts, Archive pages, and custom post types.

Close Button Tab

The Close Button settings control how visitors dismiss the overlay. You can set a Close Button Cookie so the overlay does not keep returning after someone closes it, then choose the button’s Location. Vertical Offset and Horizontal Offset fine-tune its placement, and additional toggles give you more control over where it sits.

Enable Close Button Within Divi Overlays Container to keep the button inside the overlay itself. Turn on Close Clicking Outside The Content if clicking the dimmed area around the overlay should also close it. If you would rather use a Divi module as the close action, enable Hide Main Close Button and add your own Button or other trigger inside the layout.

The Customize Close Button toggle lets you choose Text and Background Colors, Font Size, Border Radius, and Padding to ensure the Close Button matches the style of the pop-up’s content.

Triggers Tab

The Triggers tab provides the identifiers used for manual triggers, including a CSS Class, CSS ID, and Menu ID. We’ll use the CSS Class to connect the team member’s Button Module to this overlay.

If you prefer to use an Automatic Trigger, you have several options to choose from, including None, Timed Delay, Scroll Percentage, and Exit Intent. For this click-triggered bio, set Automatic Trigger to None.

Advanced Tab

The Advanced tab includes additional trigger and display controls. Enable ESC Key lets visitors close the overlay with Escape, while Prevent Main Page Scrolling keeps the underlying page from scrolling. Keep both enabled for this bio overlay, as shown below.

The panel also includes CSS Selector Trigger, Enable URL Trigger, Enable AJAX (Load Content On Call), Force Render, and a Conditions group. You do not need to change these for this example.

Design Tab

The Design settings handle the Sizing and Positioning settings for your pop-up. Use the sliders to adjust Width and Height, or leave them at their defaults for a full-screen pop-up.

Note: You can also adjust the sizing of the Row once you start building your pop-up.

The Positioning controls determine where on the screen the pop-up should appear. Adjust the Location by clicking on a square, then adjust the Vertical Offset and Horizontal Offset if desired.

Once your settings are confirmed, click the close icon at the top right of the modal to begin building your pop-up.

Build The Bio Layout

Use the Visual Builder to design the overlay content. A simple team bio layout can include a circular or cropped portrait, the person’s name and role, a short biography, and social media links or icons. The most important thing is to keep the layout focused. The overlay only needs the details that would crowd the team cards on the page. Save or Publish the overlay when the content is in place.

Use Divi’s responsive previews to check the layout at smaller breakpoints. Adjust spacing, text sizes, and content width as needed, and make sure the close control remains reachable.

Save and Publish your layout before moving on to the next step. The overlay needs to be published before visitors can open it.

Copy The Overlay’s Unique Class

After saving your overlay, head back to the main Divi Overlays screen and copy the unique CSS Class we’ll use to trigger our new pop-up.

Attach The Trigger To A Button Module

Return to the team section on the page and open the Read Bio button module for that person. Expand the Link option group in the Button’s Content tab, and enter #open in the Button Link URL field.

Next, go to the Advanced Tab and expand the Attributes option group. Click + Add Attribute to add the CSS Class that will launch the pop-up.

When the options appear, choose class from the available options.

Give the new attribute an Admin Label like Launch Popup, and add the CSS Class you copied from Divi Overlays to the Attribute Value field. Paste the class name without a leading period.

Save the page and preview the overlay in another tab. Ensure that the click trigger is working correctly and that you can close the pop-up with the close button.

Who Is Divi Overlays For?

Divi Overlays makes the most sense when you want pop-ups that look like the rest of your site and want to stay within the Divi workflow. Agencies and freelancers can design branded overlays with the same modules and styling they already use on client pages. That avoids the need to maintain a separate pop-up tool with its own layouts, typography, and color system.

One-page and marketing sites benefit when extra content would otherwise force another page or crowd the current one. Team bios, service details, videos, and contact forms can live in overlays and open only when someone asks for them.

E-commerce and lead-generation sites can use the automatic triggers for timed opt-ins, scroll-based offers, exit-intent reminders, and cart-related messages. The overlay can hold a subscribe form, a promotion, or product details without taking the visitor off the page.

It is also a practical fit for Divi 5 users who already use Overlays on Divi 4 sites and need the same workflow to keep working. The plugin is compatible with Divi 4 and Divi 5. Divi Life provides support for this third-party plugin. Marketplace purchases include one year of support and updates, which is useful when you need help with an overlay’s setup or behavior.

Build Advanced Popups With Divi Overlays

Divi Overlays keeps extra content off the page until it is needed. Each overlay is a Divi layout, so forms, videos, product details, and full-screen messages can use the same builder and styling as the rest of the site. Click triggers and automatic rules decide when that layout appears, and the overlay stays reusable across the site. The plugin works with Divi 4 and Divi 5, so the same workflow applies to existing sites and newer Divi 5 builds.

If you want a faster start, preview the layouts on the live demo, import a premade pop-up template, then follow the steps above to set the trigger, animation, and close behavior.

Divi Overlays is available in the Divi Marketplace at a regular price of $79, with any current discounts shown on the product listing. It includes unlimited website usage, one year of support and updates, and a 30-day money-back guarantee.

Get Divi Overlays

The post Divi 5 Product Highlight: Divi Overlays Popups appeared first on Elegant Themes Blog.

These styled sections work as starting points for event announcements, workshop pages, creative portfolios, campaign landing pages, and promotional content. Import a design, replace the sample copy and imagery, and adapt the colors to your website.

Divi 5 also gives you room to develop the designs further. Its Composable Settings let you enable additional styling controls for module sub-elements, including backgrounds, borders, spacing, and transforms. That flexibility is useful when you want to refine the relationship between text and its surrounding design.

Preview

Here’s a look at the six Text With Background Designs included in the pack. The download is further down the post.

The collection uses background color as part of the typography. A compact highlight can emphasize one phrase, while stacked strips can turn several lines into a larger graphic composition. Supporting images, labels, and buttons give the text context without needing the same treatment everywhere.

Download 6 Text With Background Designs For Divi 5

Get all six styled sections for free. Download the ZIP file, unzip it on your computer, and import the included JSON files into your Divi Library.

Download the Files

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

DOWNLOAD

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

What’s Included (7 Exports)

Inside the Styled folder, you’ll find six individual section exports and one combined export containing the full collection.

• Styled – Text with Background Section 1.json
• Styled – Text with Background Section 2.json
• Styled – Text with Background Section 3.json
• Styled – Text with Background Section 4.json
• Styled – Text with Background Section 5.json
• Styled – Text with Background Section 6.json
• Styled – Text with Background Sections (All).json

Choose an individual file when you only need one design, or use the combined file to bring in the full collection. These are styled starting points, with example typography, colors, imagery, and spacing already in place.

A Closer Look At The Designs

The previews show how the same idea can serve different types of content. Background color can draw attention to a single phrase or organize a much denser section of text.

A Highlighted Headline With Supporting Imagery

In Section 2, the dark background gives the centered headline room to stand out. White text introduces the message, while an orange highlight and a slight tilt emphasize the words below it. Small photographs sit around the main content, and an overlapping button adds another point of interest.

This approach suits a workshop, creative event, or campaign with a short central message. Keep the highlighted phrase concise so its shape remains a strong part of the composition.

Stacked Text With Contrasting Backgrounds

Section 3 takes a more graphic approach. Cyan surrounds a dark central panel, with compact date and topic labels along the right side. Larger lines of text near the bottom sit on cyan backgrounds of different lengths, making the words and their backgrounds read as a connected arrangement.

This treatment works well for event themes, areas of expertise, or a short list of services. The line lengths contribute to the design, so review the overall shape when replacing the sample wording.

How To Use The Text With Background Designs

Keep your unzipped download folder handy. We’ll import a design, add it to a page, and customize the text, colors, and supporting content.

1. Import Sections Into The Divi Library

In your WordPress dashboard, go to Divi > Divi Library. Click Import & Export at the top of the screen.

In the import modal, open the Import tab and click Choose File. Select one of the individual Styled – Text with Background Section JSON files, or choose Styled – Text with Background Sections (All).json for the complete collection.

Click Import Divi Builder Layouts and wait for the import to finish. Select the JSON file itself rather than the ZIP archive.

2. Add A Section To Your Page

Open a page in the Visual Builder and add a new section where you want the design to appear. Choose Add From Library, select the imported design you want to use, and click Use This Section.

The section provides the starting composition, including its example content and styling. Review how it sits beside the surrounding sections before changing individual elements. A vivid text treatment may need more space around it when placed on an already busy page.

3. Replace The Text And Links

Start with the main headline. Select the element containing the text and open its content settings, then replace the sample wording with your own message.

Keep the existing formatting while making your first text changes. Some compositions separate words or lines into different elements, so work through each visible text element rather than replacing the whole section at once. Use the Layers panel if overlapping elements are difficult to select on the canvas.

Update the supporting paragraphs, dates, topic labels, and contact details as well. If the design includes a button or linked text, replace both the label and its destination so visitors reach the correct page.

After updating the copy, check the line breaks. A longer headline can change the width of a highlight, push a button out of position, or alter the stepped shape of stacked text. Refine the wording before reducing the type size simply to make it fit.

4. Adjust Text And Background Colors

Choose a text and background pairing that fits your brand. You can retain the original palette or replace the accent colors while keeping the same visual hierarchy.

Select the element carrying the background you want to change. Check that element’s existing background settings rather than changing the section background by default. The section backdrop, a text highlight, and a supporting panel may belong to different parts of the layout.

When styling a module sub-element, Composable Settings can make additional controls available. Hover over its option group, click Toggle Options, and enable the settings you need. Use this when extending the design, while preserving any existing formatting responsible for the imported effect.

If you want to reuse a palette across your site, save the colors as Design Variables and assign them to the relevant fields. Updating a variable then changes the fields connected to it.

5. Replace Supporting Images

For designs that include photography, replace the examples with images related to your message. Open the relevant image or background settings and choose a replacement from the Media Library.

Keep each image’s role in mind. Small supporting photographs should remain recognizable at their displayed size, while a larger portrait or focal image needs enough resolution and room around its subject. Review crops after replacing the images. Preserve the balance between imagery and typography so the supporting visuals do not compete with the main highlighted text.

6. Refine Typography, Spacing, And Overlap

Adjust the font, text size, line height, and letter spacing to suit your copy. A different typeface can change the length and height of each line even when the font size stays the same.

Then review the spacing around the text. Padding controls the space inside an element’s background, while margins control its separation from neighboring elements. Make small adjustments and check the whole section after each change.

For designs with tilted text, overlapping buttons, or offset images, keep enough clearance for every word and link to remain readable. The overlap should support the focal point rather than cover essential information.

Once you’re happy with the result, save your customized section to the Divi Library for reuse on other pages.

7. Check The Design On Smaller Screens

Review the section on desktop, tablet, and phone. Large text and tightly fitted backgrounds can change noticeably when the available width becomes smaller.

Check headline wrapping, the shape of each highlight, button placement, image order, and any intentional overlaps. Reduce text sizes or spacing where needed, and simplify decorative positioning if it interferes with the message.

Preview the page outside the builder as well. Make sure the text remains readable, links are easy to select, and no element causes unwanted horizontal scrolling.

Tips For Effective Text With Background Designs

The strongest results come from a clear message and a deliberate relationship between the words and the shapes behind them.

Highlight The Most Important Words

Choose the phrase visitors should notice first. Giving every sentence the same background treatment can flatten the hierarchy, so let supporting copy use a simpler style where possible.

Write For The Shape

A short phrase suits a compact highlight. A series of short lines can create a stepped composition. Write with those shapes in mind, but keep the wording natural and easy to understand.

Avoid forcing awkward line breaks just to match the sample. Adapt the layout to your message when necessary.

Keep Contrast Clear

Check the contrast between the letters and the background directly behind them. Bright colors alone do not guarantee readability. Review smaller labels and button text as carefully as the main headline.

Give The Typography Room

Leave enough space around highlighted text for its shape to be visible. Supporting images and buttons can overlap selectively, but they should not obscure the words or make the reading order unclear.

Repeat A Few Styling Choices

Use a consistent accent color, font pairing, or spacing approach to connect the section with the rest of your website. You can preserve the design’s character while replacing the sample palette and imagery with your own.

Start Building In Divi 5 Today!

These six Text With Background Designs give you ready-styled sections for messages that deserve more visual emphasis. Import a favorite, replace the copy and imagery, and adjust the typography and colors to suit your project.

From a highlighted event headline to a graphic list of services, use the collection as a starting point for your next page in Divi 5.

The post 6 Text With Background Designs For Divi 5 (Free Download!) appeared first on Elegant Themes Blog.

Commands exist for exactly this. They let you save a prompt inside the Divi 5 Visual Builder and pull it into chat with a slash whenever the same job comes up. This guide explains what makes a Command worth saving, how to create and run one, and three practical workflows you can reuse.

Where Commands Live In Divi AI Agents

Divi AI agents work inside the Divi 5 Visual Builder. You can use plain-language requests to inspect a page or make changes to its sections, rows, and modules. Commands live inside the AI chat window, alongside Rules and Context. Click the Commands icon to view and manage the prompts you have saved.

Choose Ask Mode when you want analysis and suggestions without changes to page content or design. Use Build Mode when you want the agent to apply edits. Select the mode that matches the Command you are about to run.

What Gets Saved When You Save A Command

A Command stores reusable instructions, not a recording of a previous edit. The agent works from those instructions and the current page when you run it.

Type / in the chat window and a picker opens with your saved commands. Choose one and its text lands in the composer, ready for you to read over, adjust for the page you are on, and send when it looks right.

The parts of a request that stay the same belong in the saved command, and the details that shift from one page to another can go in right before you send it.

Commands, Rules, And Context Do Different Jobs

Rules, Context, and Commands are available from the chat interface, but serve different purposes.

• Rules provide persistent guidance, such as brand voice or preferred color variables. They can apply broadly or when relevant to a particular task, depending on their settings.
• Context points the agent at the exact thing you mean. Reference a section, preset, or variable so the agent can identify it. Your prompt should still explain what you want done with that reference.
• Commands are the jobs you pull up when you need them. They suit instructions you expect to reuse without wanting them applied to every request you type.

When you are unsure where something belongs, use this as a quick check.

What Is Worth Saving As A Command?

Useful Commands share a simple trait: The job repeats, even though the page you run it on changes.

Alt text is a good example. The images differ on every page, while the instructions stay mostly the same. Reviewing a page before publishing works the same way, and so does bringing an imported layout into your existing design system.

Saved prompts also help when a request carries details you would rather not rebuild from memory, like what to check, what counts as finished, and what the agent should leave alone. The saved version keeps those instructions together when you move to another page.

Before saving one, run through three questions.

• Will I run this job again? A one-off request can stay in the chat.
• Does the agent need to inspect or act on the current page? A good Command holds the workflow steady while the result changes with the page.
• Does Divi already have a better way to repeat this? Updating a shared variable or preset affects the elements using it. For an intentional shared change, that may be more direct than repeating edits page by page.

What You Need Before You Start

Divi AI agents require Divi 5 and access to Divi AI. Divi AI is available as a separate subscription or as part of Divi Pro.

Open a page in the Divi 5 Visual Builder and click the AI Agent icon in the left sidebar. We will start with a job that comes up on almost every site, which is handling image alt text across multiple pages.

How To Create And Run A Command

Before we get to the workflows worth saving, let’s build one Command so the process is familiar.

We will use the alt text example from earlier. Suppose you have already tested this prompt on a page and it gives you the result you want.

For decorative images, an empty alt attribute (alt="") is different from a missing attribute. Review the generated descriptions and decorative-image handling in the rendered page.

Once a prompt behaves the way you expect, it is ready to save.

Save The Command

1. Open the AI chat window and click the Commands icon.
2. Click Add New Command.
3. Enter a short title that clearly describes the job, such as Review Image Alt Text.
4. Paste the tested prompt into the Command field.
5. Click Save Command.

Use titles that tell you what the Command actually does. As your library grows, “Review Image Alt Text” is easier to spot than something broad like “Image Check.”

Run A Saved Command

To use it, type / in the agent chat. The Command picker opens with your saved prompts, and selecting one drops its text into the composer.

Review the inserted prompt before sending it. Add any page-specific details or exclusions, and use Build Mode for this alt text update. Editing the inserted text does not change the saved Command.

Test first, save the part that stays the same, and fill in the rest at run time. For the full Command reference, including how to edit, duplicate, delete, attach Context to, and nest Commands, see our guide to using Commands in Divi AI agents.

Use Case 1: Bring A Page Into Your Design System

Imported layouts and older pages arrive carrying their own colors, spacing, and styles. If your site already uses Design Variables and Presets, the task is to connect suitable page-level values to those existing resources.

Take this imported layout. The same green accent shows up across buttons, icons, borders, and links, and every instance is a hardcoded color value.

Before changing anything, Ask Mode can show you what the page holds.

You can save the scan as a Command if you regularly audit imported layouts. Here, we will focus on reusing the replacement step.

In the Command editor, use Add Context to reference the site’s Primary Color variable. Save the following instruction, then use Build Mode when running it.

Run the Command to replace the specified light green values with references to the Primary Color variable, as shown below.

Before reusing this Command on another layout, update “light green” to identify that page’s source accent. Use the exact value from the scan if several similar shades appear, and check that the attached variable is still the intended destination.

The workflow stays useful while the page changes. One imported page may carry hardcoded button colors, and the next may hide them in backgrounds, icons, or borders. The agent finds the relevant values on the page in front of it, while the Command keeps the rules for replacing them the same every time.

There is a limit worth remembering here. When your styles already reference a variable or preset and you intend to change every use of it, update that shared resource directly. Commands help when disconnected page-level styles need pulling into the system, not when Divi is already managing them globally.

Use Case 2: Run A Pre-Publish Page Review

Some workflows earn a spot because you want the same checks on every page before it goes live. A pre-publish review fits neatly. The problems shift from page to page, while the checks you want the agent to run stay the same. Save this Command and run it in Ask Mode.

Use the report to decide which issues need attention. Follow it with your own responsive preview; an AI review may miss issues or flag a deliberate design choice.

On this page, for example, the agent flags the “Virtual Meal Prep Course” H2 as potentially too large on phones because its 44px size has no phone-specific override.

The review is worth keeping because it comes back around on every page, while the fix that follows rarely does.

Once you know what needs attention, reference the affected heading in Context, switch to Build Mode, and ask for a targeted fix.

The next page may need something else entirely, like overflowing buttons or cramped card spacing. A page-specific fix can stay in the conversation unless you expect to reuse it.

The pre-publish review stays useful because the job never changes. It gives you a repeatable starting point for inspecting each page and deciding what to adjust.

Use Case 3: Repeat A Temporary Update Across Multiple Pages

Not every Command needs to live in your library forever. Some are worth saving because the same job repeats across several pages for a short stretch of time.

Say you are changing an offer across the site. Several pages promote a free consultation, and those CTAs now need to send visitors to a strategy call. You could rewrite the instruction on every page you open, or save a temporary Command while the update is in progress.

Replace [NEW URL] with the actual destination before sending the Command. Run it in Build Mode on each page that needs the update, then check the changed button labels and links.

The exclusions do real work here. An unrestricted text replacement could also change mentions in body copy or testimonials. The Command asks the agent to identify relevant Button modules and leave other content alone.

A Command like this may be useful for a week while you work through the site, and it still counts as a good one. It saves you repeating the instructions and keeps the update consistent across every page in the project.

Once the update is complete, remove the Command if you no longer need it. This keeps outdated campaign instructions out of your active list.

Build A Command Library Around Work You Repeat

A Command library in Divi AI Agents works best when you keep it intentional. Save the prompts that stand for jobs you expect to repeat, from a permanent workflow like a pre-publish review to a temporary update you will run across several pages.

Start with the prompts you already find yourself rewriting. Test them first, keep the instructions that stay consistent, and leave the page-specific details for the moment you run the Command. The useful ones become obvious over time, since they are the prompts you stop having to rebuild from memory.

The post How to Use Divi AI Agents Commands appeared first on Elegant Themes Blog.

Divi AI Agents let you save that guidance as Rules in the Divi 5 Visual Builder. You can define standards the agent should follow, choose when they apply, and reference other Rules or site content. Here is how to set them up and keep them useful as your site develops.

From Individual AI Tasks To Connected Workflows

When Divi AI launched in August 2023, it brought text and image generation into the Visual Builder. Code generation followed, expanding what you could create without leaving the page.

Those tools later expanded to generate layouts and full websites. Instead of starting every section manually, you could use AI to create a starting point and continue editing it in Divi.

The introduction of Divi AI Agents brings these workflows into a conversational interface. You describe a task, and the agent can inspect the page and use Divi-specific tools to make changes across multiple elements.

For example, you can ask it to refine a hero section, standardize typography, replace repeated color values with Design Variables, or adjust responsive spacing. It can also create pages, manage menus, schedule posts, and work with Theme Builder templates.

Rules give these requests a shared set of instructions. Alongside the immediate task, the agent has guidance about how you want the site designed, written, and organized.

How Rules Help Maintain Consistency

The agent can inspect your existing page, but its content and settings do not explain every design decision. A particular color might be intentional, a temporary placeholder, or a value you want replaced with a Design Variable. Rules let you make those preferences explicit.

You might save instructions about brand voice, which presets to reuse, how to name elements, or which color variables to apply. This guidance remains available beyond an individual conversation, reducing the need to repeat it in each prompt.

Rules guide the agent’s work; they do not enforce settings like a preset or automatically update existing elements when you save them. Continue reviewing the result, particularly when a task involves exceptions to your usual standards.

Rules vs Commands

Rules describe how the agent should approach its work. Commands are reusable prompts you choose to run for recurring tasks.

For example, a Rule could tell the agent to use existing color variables when styling elements. A Command could ask it to review a page for hardcoded colors and replace them with suitable variables. The Rule supplies the convention; the Command starts the task.

Brand standards and naming conventions generally belong in Rules. Repeatable jobs, such as accessibility reviews or responsive cleanup, make useful Commands. You can use both in the same workflow.

Creating Rules For Divi AI Agents

Start with one instruction you regularly repeat. Give it a clear title, describe what the agent should do, and choose whether it applies broadly or only to certain tasks.

1. Open The Rule Editor

Open Divi AI Agents from the AI Agent icon in the Visual Builder toolbar.

In the chat’s composer toolbar, click Rules. This opens the Rules panel, where you can browse saved instructions or add a new one. The toolbar also provides access to Commands, Tools, Context, and file attachments.

Click Add New Rule. The editor lets you enter a title and instruction, then control when the Rule should apply.

2. Give It A Title And Write The Instruction

Enter a short, recognizable name in the Title field. In this example, we use Brand Voice because the Rule defines how the agent should write copy for the site.

In the Rule field, describe the writing style you want. Be specific about tone, sentence length, word choices, and calls to action rather than simply asking the agent to “write on brand.”

The example here asks for a warm, direct, and confident tone, with short sentences and paragraphs under three sentences. It also specifies words to avoid, asks the agent to address readers as “you,” and favors clear, action-focused headlines and button labels.

These details turn a broad preference into guidance the agent can apply when writing or editing content. Adapt them to your own brand rather than treating the example as a universal writing standard. Keep each Rule focused on one topic. Save typography or button styling instructions separately so you can find, update, and combine them more easily later.

3. Choose When The Rule Applies And Save

Use When To Use to describe the situations in which the Rule is relevant. For example, enter “when building or editing landing pages” or “when styling primary CTA buttons.” This gives the agent context for deciding when to use the instruction.

Turn on Always Use to apply guidance throughout your work on the site. General brand or naming conventions may fit here. Instructions specific to a page type or component are better suited to a clear When To Use description.

Click Save Rule. The saved instruction appears in the Rules panel, ready for the agent to use according to its applicability settings.

Try a small task covered by the Rule, such as styling one primary button. Review the result against the instruction and refine any wording that leaves room for an unintended interpretation.

Managing And Combining Rules

As your site develops, you may need to update standards, combine related instructions, or point the agent to an existing design. You can do this from the Rules panel without rewriting every Rule from scratch.

Nesting Rules

A page-specific Rule may need guidance from several other Rules. For example, a product page instruction could reference your brand voice, typography, and button conventions alongside its own layout requirements.

Use the Rules icon inside the Rule editor to open the picker and select a saved Rule.

The selected Rule appears as a reference tag, such as #Brand Voice or #Button Styles, above the instruction field. You can also include some more general When To Use instructions.

This lets you combine focused instructions without copying their text into several places. Update the referenced Rule when a shared convention changes, rather than maintaining separate versions of the same guidance.

Keep the combined instructions compatible. If a product page needs a different button treatment, explain that exception clearly instead of leaving two conflicting instructions for the agent to interpret.

Adding Context To A Rule

The @ icon in the Rule editor opens the Context picker. Use it to reference relevant site content alongside your written instruction. The picker shown here includes elements, Design Variables, Canvases, and Tools.

Select the item you want the agent to refer to. It appears as a tag above the Rule field.

For example, “match the existing heading style” is more useful when you also reference the heading you mean. The instruction explains what to match, while the reference identifies the source the agent should inspect.

Be specific about the relationship. You might ask it to follow the reference heading’s typography while preserving each heading’s text and semantic level. This gives the agent a clearer task than a general request to copy the heading.

When reusing a Rule elsewhere, check that its attached Context is still relevant. A page-specific example may not be the right reference for every layout.

Editing, Duplicating, And Deleting Rules

Open the Rules panel from the composer toolbar. Use the search field to find an instruction, then hover over it to reveal the controls for editing, duplicating, and deleting it.

Use the gear icon to edit a Rule. Update the instruction when a client changes their brand voice, a variable is renamed, or a design convention evolves. Review its applicability settings and references at the same time.

Use the duplicate icon when a new Rule shares much of an existing instruction but needs its own variation. Give the copy a distinct title and adjust When To Use so its purpose is clear. If only a small exception is needed, referencing a shared Rule may be easier to maintain than copying it.

Use the trash icon to remove guidance you no longer need. Before deleting a shared Rule, review any Rules that reference it so those instructions remain complete.

Give Divi AI Agents A Consistent Starting Point

Rules in Divi AI Agents let you save the conventions behind your website, from brand voice to preset choices, so they are available when the agent works on relevant tasks. Start with the instructions you repeat most often, keep them focused, and add references where an existing design explains your intent better than text alone.

As you use them, refine the wording around real results. A small set of clear Rules can reduce repeated briefing and help Divi AI Agents work more closely with your design system.

The post How to Use Divi AI Agents Rules appeared first on Elegant Themes Blog.

In this tutorial, we build a property directory with a Loop Builder listing grid and a filter form beside it. Visitors can search by keyword and use five ACF fields to narrow the listings by maximum price, city, property type, bedrooms, and amenities. Along the way, we cover numeric comparisons, automatically generated options, and the extra care needed when filtering multi-value fields.

How The Loop Filter Modules Work

Divi 5’s Loop Builder lets you repeat an element for each result in a query. For this directory, we design one property card, query the Properties post type, and use Dynamic Content to populate each repeated card. The loop defines the starting content and layout. The Post Filter Module gives visitors controls to refine those results without changing the card design.

Two modules work together to build the form. The Post Filter Module is the form container. It holds the controls and connects them to a target loop.

Inside it, add Post Filter Item Modules, one for each control.

Each item’s Field Type determines how visitors interact with it:

• Text: Accepts typed input, with the value type and data source determining what it searches or compares.
• Select: Displays options in a dropdown.
• Radio: Displays a list of options with one selection allowed.
• Checkbox: Allows multiple selections.
• Order: Controls ascending or descending order.
• Order By: Chooses the value used to sort results.
• Submit And Reset: Add buttons to apply or clear the filters.

Our property directory uses six filtering controls, plus Apply and Reset buttons. A simpler form might only need a dropdown and an Apply button.

Automatic And Manual Options

Select, Radio, and Checkbox items need options to display. With Options Method set to Automatic, Divi discovers stored field values. Manual lets you define each option’s submitted value and visible label. We use Manual later to control how amenities appear in the form.

Applying The Filter

You can apply filters when visitors click a button or automatically as they change a control. With six controls, we use button-based submission so visitors can make several selections before updating the results.

What This Makes Possible

Taxonomies work well for shared classifications, such as property types or amenities. Custom fields are useful when listings also need individual values, such as a price that visitors can compare against a budget.

The same approach can support job boards filtered by salary, course catalogs filtered by level, or event listings filtered by venue. This example keeps the property details in ACF fields so we can focus on how those fields connect to Divi’s filters.

What You Need Before You Start

First, we set up the data: register a Properties post type, create five custom fields, and publish sample listings. Then we build the listing cards with Loop Builder and connect the filter form.

We are using Advanced Custom Fields. The free version supports the fields and post type registration needed here. You do not need ACF Pro or a separate post type registration plugin for this setup.

Install Advanced Custom Fields

Download the free plugin using ACF’s installation guide. In WordPress, go to Plugins > Add New Plugin > Upload Plugin, select the ZIP file, and click Install Now. Activate the plugin to add ACF to the admin menu.

Register The Properties Post Type

A separate post type keeps property listings organized and gives the loop a dedicated content source. Go to ACF > Post Types and click Add New.

Enter:

• Plural Label: Properties
• Singular Label: Property
• Post Type Key: property

Save the post type. Properties now appears in the admin sidebar alongside Posts and Pages. Make sure the post type supports a title, editor content, and featured image, since we use these in the directory.

Create The Field Group

A field group contains the five fields and determines where they appear. Go to ACF > Field Groups, click Add New, and name the group Property Details.

Under Location Rules, set Post Type to is equal to Property. This displays the fields when editing a property listing.

Add the following five fields. Keep their field names consistent so you can identify the correct data sources in Divi.

1. Price

• Field Label: Price
• Field Name: property_price
• Field Type: Number

Store prices as numbers without currency symbols or thousands separators. For this example, enter 530000, not $530,000. We add the currency symbol when displaying the price, keeping the stored value suitable for numeric comparisons.

2. Bedrooms

• Field Label: Bedrooms
• Field Name: property_bedrooms
• Field Type: Select
• Choices: 1, 2, 3, 4, 5, each on a separate line
• Return Format: Value

Leave multiple selection disabled. A Select field gives contributors a consistent set of bedroom counts. Extend the choices if your directory needs studios or properties with more than five bedrooms.

3. Property Type

• Field Label: Property Type
• Field Name: property_type
• Field Type: Select
• Choices: Apartment, House, Villa, Townhouse, each on a separate line
• Return Format: Value

Leave multiple selection disabled so each listing has one property type.

4. Amenities

• Field Label: Amenities
• Field Name: property_amenities
• Field Type: Checkbox
• Choices: Parking, Pool, Garden, Balcony, Gym, each on a separate line
• Return Format: Value

A property can have several amenities, so this field needs to store multiple selections. Entering each choice without a separate label makes its value and label identical, which simplifies the manual filter options later.

5. City

• Field Label: City
• Field Name: property_city
• Field Type: Text

Use consistent city names across listings rather than mixing names and abbreviations. Save the field group.

Add Your Property Listings

Go to Properties > Add New. Add a title, featured image, and a short description, then complete all five custom fields below the editor.

Publish several listings with different prices, cities, bedroom counts, and amenities. Include properties with multiple amenities so you can test that field properly. Once the sample listings are published, move into the Visual Builder.

What We Are Building

The finished page has a filter sidebar on the left and a property grid on the right. Each card displays a featured image, title, price, city, bedroom count, amenities, and a contact button.

The sidebar contains keyword search, maximum price, city, property type, bedrooms, and amenities, with Reset and Apply buttons underneath. Keyword search targets post titles and content; the other five controls target the ACF fields.

The steps below focus on the query, Dynamic Content connections, and filter configuration. You can adapt the card styling to suit your website.

1. Set Up The Two-Column Page Structure

Add a row with a narrow left column for the filter and a wider right column for the listings.

Open the row settings and go to Design > Sizing. Set:

• Width: 85%
• Max Width: None

This gives the listing grid more room on desktop. In the row’s Layout settings, set Horizontal Gap to 1%.

Inside the right column, add a nested row with three equal columns. Set its Horizontal Gap to 1% as well.

Leave the filter column empty until the loop is ready.

2. Turn The Column Into A Property Loop

Delete the second and third columns from the nested row. The remaining column becomes the property card that Divi repeats. Keep the nested row configured for three cards across on desktop, with wrapping enabled for additional listings.

Open the remaining column’s settings, go to Content > Loop, and turn on Enable Loop. Use a post-based query and set Post Type to Properties.

The column repeats for the properties returned by the query, subject to its post count and other settings. Check Posts Per Page so the query includes enough listings for your test. Give the looped column a clear label, such as Property Listings, to make it easy to identify when connecting the filter.

3. Design The Listing Card Once

Everything inside the looped column repeats for each listing. Add:

• An Image Module for the featured image.
• Three Heading Modules for the property title, price, and city.
• Two Text Modules for the bedroom count and amenities.
• A Button Module linked to your contact page or intended enquiry destination.

Our card uses a white background, a bold title, and a smaller price underneath. Use Divi’s background, border, Box Shadow, spacing, and typography controls to style yours. Editing this source card updates the repeated cards; Presets are useful if you also want to reuse those styles elsewhere.

4. Pull ACF Data Into The Card With Dynamic Content

Dynamic Content replaces each module’s placeholder content with data from the current property in the loop.

In the Image Module, click the Dynamic Content icon in the image field and select Featured Image. In the property title Heading Module, select Post Title. Connect the remaining headings and text to their matching ACF fields:

• Price: Price
• City: City
• Bedrooms: Bedrooms
• Amenities: Amenities

Use the Dynamic Content Before and After settings to add display text. Add $ before Price and Bedroom(s) after Bedrooms. The stored values remain 530000 and 3, while the card displays $530000 and 3 Bedroom(s). The prefix adds a currency symbol, not thousands separators.

Check that Amenities displays the selected values as a readable list, such as Pool, Garden, and Balcony. Save the page and check the front end to confirm that each card uses its own property’s data.

For images with different dimensions, set the Image Module’s Aspect Ratio to 1:1.2 and Framing to Cover. This gives them a consistent shape while cropping to fill the frame.

5. Add The Post Filter Module And Connect The Loop

Add a Post Filter Module to the left column. Open Content > Target and set:

• Target Loop: Property Listings, the looped column created earlier
• Apply Mode: Submit
• Relation: And

If your version labels these settings Filter and Interaction Mode, choose the equivalent Manual mode. The intention is the same: wait for the visitor to click Apply.

Target Loop connects the form to the listings. And requires all active filter controls to match; Or allows a match from any one of them.

Keep the default Search, Apply, and Reset items. Remove Category because this example uses custom fields for its property criteria. Search targets property titles and content, not all of the custom fields displayed in the cards.

If the buttons are missing, add separate Post Filter Items with Field Type set to Submit and Reset. Use Apply and Reset as their button text.

Add the five custom-field controls below as Post Filter Items. In Text items, the data-source selector may be labeled Field Value rather than Field Option.

6. Set A Maximum Price With A Numeric Comparison

Add an item and set:

• Field Label: Maximum Price
• Field Type: Text
• Field Value Type: Number
• Field Value / Field Option: Price, the ACF field named property_price
• Field Comparison: Less Than Or Equal To
• Placeholder: 750000

Entering 750000 keeps listings priced at or below that amount. The placeholder is only a hint; it does not set a default maximum.

This is filtering, not sorting. Order By changes the sequence of results rather than removing listings above a budget. Its built-in Price option is for WooCommerce product prices, not this ACF field. Use a Text item with a Number value type to compare the ACF price with the visitor’s limit.

Keep currency symbols and thousands separators out of both the stored value and the filter input.

7. Search City Names

Add an item and set:

• Field Label: City
• Field Type: Text
• Field Value Type: Text
• Field Value / Field Option: City, the ACF field named property_city
• Placeholder: Enter A City

This control searches the stored City field independently of the general keyword search. Test it with city names that appear in your published listings.

8. Build The Property Type Dropdown From Stored Values

Add an item and set:

• Field Label: Property Type
• Field Type: Select
• Field Option: Property Type
• Options Method: Automatic
• Placeholder: Select Property Type

Automatic discovers values saved on listings, not simply every choice defined in ACF. An unused property type may therefore be absent. If saved values are missing, use Clear Cached Options and reload the page.

9. Display Bedroom Counts As Radio Buttons

Add an item and set:

• Field Label: Bedrooms
• Field Type: Radio
• Field Option: Bedrooms
• Options Method: Automatic

Radio allows one bedroom count at a time. Use an equality comparison to match the selected count, rather than treating it as a minimum.

If options are missing, confirm that the field is populated on published listings and clear the cached options. You can also switch to Manual and enter 1 through 5, using matching values and labels. Keep these aligned with your ACF choices.

10. Create Readable Amenities Options

Add a Post Filter Item and set:

• Field Label: Amenities
• Field Type: Checkbox
• Field Option: Amenities
• Options Method: Manual

Use Manual to enter each amenity as a separate option.

Under Options, click Add Checkbox for each amenity below. Enter the same text in both the Value and Label fields:

• Parking
• Pool
• Garden
• Balcony
• Gym

These values must match the choices entered in your ACF Amenities field earlier. Add them individually without using Generate Options.

Save the page and test the filter on the front end. Select Parking, click Apply, and check that properties with Parking appear, including those with other amenities. Test multiple selections as well.

Once filtering works correctly, use the Design tab to style the labels, inputs, spacing, and buttons. You can reuse these styles with Option Group Presets.

11. Test The Filters And Adjust Smaller Screens

Save the page and test it on the front end. Start with a combination that matches a known listing. For example, enter Portland, select 1 bedroom, and enter a maximum price of 300000, then click Apply. Use different values if your sample data does not contain that combination.

With Relation set to And, results should satisfy all active controls. Test each control separately before combining them so you can identify any field that produces unexpected results.

Also check:

• Price boundaries: A listing priced exactly at the maximum should remain visible.
• Amenities: Verify both single- and multiple-selection behavior using known listings.
• No matches: Try a combination no listing satisfies and confirm the page handles an empty result.
• Reset: Confirm that it clears your selections and restores the starting results.

On tablet and phone, check that the filter sits above the listings. Adjust the column widths, gaps, and cards per row with responsive settings as needed. Keep the Amenities list compact enough that visitors can reach the listings without excessive scrolling.

Build Useful Filters Directly Inside Divi 5

Reliable filtering starts with the data. Store prices as numbers, use consistent choices for fields such as Property Type and Bedrooms, and test multi-value fields separately.

With the field structure, loop query, and filter controls connected in Divi 5, visitors can narrow a directory using the details that matter to them. The same workflow can be adapted to other listings, from job boards to course catalogs, while keeping the layout and filter design inside Divi 5.

The post Filtering Loops With Custom Fields In Divi 5 appeared first on Elegant Themes Blog.

For a quick check, that may be fine. You switch breakpoints from the top bar, scan the layout, and continue building. A dedicated responsive editing session involves more adjustments, though, and the panel arrangement that works for a full-width canvas may be less convenient at phone width.

Divi 5’s Workspaces let you rearrange the builder for this kind of work and save that setup for next time. Below, we’ll create a Phone Editing workspace and explain the reasoning behind each choice, so you can adapt it to your screen and workflow.

Why Create A Workspace For Responsive Editing?

Divi 5 stores your builder arrangement as a Workspace you can return to whenever you need it. Panel positions, visible toolbar controls, and builder view preferences become part of that saved setup. Our full guide to Divi 5 Workspaces covers the feature in depth if it’s new to you.

The tools you need often change as a build progresses. While creating a layout, you add sections, rows, and modules, or load complete layouts and arrange their content. When refining an existing design for smaller screens, you’re more likely to adjust spacing, resize headings, change stacking order, and review which elements should remain visible.

During that work, settings need to stay close at hand, while controls for adding new content may be less useful. A workspace arranged for building the desktop layout can still work, but it may leave panels or overlays in places that make a narrow preview harder to inspect. Saving a separate arrangement lets you make those choices once.

A workspace saved for phone editing also gives you a consistent starting point. Instead of rearranging panels and switching views at the beginning of every session, you can load a setup intended for that task. Still check the active breakpoint before editing: a saved workspace helps establish the right view, but it doesn’t lock your changes to Phone.

How To Build A Phone Editing Workspace In Divi 5

Click the Workspaces icon in the Builder Bar on the left and open the Active Workspace menu. Select the workspace you normally use as your starting point. This keeps your preferred interface mode, color scheme, and other settings in place while you adjust the options below.

We’ll save the finished arrangement with Save as New Workspace in Step 5. There’s no need to duplicate it first or update your existing saved workspace during this setup.

Workspace Settings contains several groups of options, so you may need to scroll to find each one. Keep the panel available while you work through the steps, and close it when you need to check the finished arrangement.

Step 1. Open The Builder At Phone Width

In Workspace Settings, find Builder Default View Mode and choose Phone. This sets Phone as the workspace’s starting view. Check that the canvas has switched to the narrow preview before arranging your panels.

Take this step first because the next adjustments depend on the available space around the phone canvas. Panel placement in Step 2 is the clearest example: the gray area beside a narrow preview gives you somewhere to place settings without covering the design. A position chosen at desktop width may not work as well.

Starting in Phone view also makes it easier to begin with the intended responsive settings. Before changing a value, check the selected breakpoint, especially if you’ve switched views during the session or opened a setting’s Responsive Editor.

Step 2. Float The Settings Panel And Position It Beside The Canvas

Open a settings panel, right-click its header, and choose Undock Panel. The panel becomes a floating window you can drag into position. You can also use Settings Modal Default Position in Workspace Settings to choose a floating placement. Save the final arrangement in Step 5 to reuse it later.

A floating panel lets you position settings independently of the sidebars. Open a module’s settings when you need them, then close the panel for an unobstructed look at the page. Docked panels can also be closed; the advantage here is being able to place the open panel beside the phone preview.

At phone width, the layout occupies a narrow column with gray space on either side. Drag the floating settings panel into the space on the right, keeping it clear of the canvas edge. On a wide monitor, you may have room for a generous panel width. On a smaller laptop, resize the panel to fit the available space, or keep it docked if that gives you a more comfortable arrangement.

The goal is to see the setting and its effect at the same time. For example, change a padding value and watch the section respond without having to move the panel out of the way after each adjustment.

As you simplify the interface in the next step, keep the breakpoint switcher accessible. Switching to Tablet or Desktop after a Phone edit gives you a quick comparison without having to load another workspace.

Step 3. Choose Which Controls And Layouts Stay Visible

Next, reduce distractions around the phone preview. We’ll adjust Theme Builder visibility, hover controls, and sidebar shortcuts, then keep disabled modules visible while editing. These are workspace preferences, so you can retain any controls you use regularly.

Start with Show Theme Builder Layouts in Workspace Settings and switch it off when you’re focusing on page content. This hides the assigned Theme Builder layouts from the editing view, helping you reach the page content without scrolling past the header. It doesn’t remove those layouts from the live site. Turn the option back on when checking how the page works with its header and footer.

Use the Action Icons On Hover control in the Builder Bar to turn off module action overlays if they obscure the narrow preview. You can still open the element’s settings when you need to edit it. This is useful during a visual review, when toolbars would otherwise cover part of the content.

Do the same with Parent Action Icons On Hover if section and row controls are getting in the way. On narrow layouts, several nested elements can occupy the same small area, making the parent controls distracting. Right-click menus remain available for actions such as duplicating or deleting elements.

The Sidebar Icons checkboxes in Workspace Settings control whether these shortcuts appear in the Builder Bar. Hiding a shortcut and turning its mode off are separate actions, so set the mode first before hiding a control you don’t need.

Under Sidebar Icons, uncheck Wireframe View and Add Layout if you don’t use them during this stage. These options belong to the sidebar, rather than Page Bar Icons. Keep Wireframe View available if you regularly use it to inspect structure; this example uses Layers and X-Ray Mode instead.

Turn on Show Disabled Modules At 50% Opacity. When a module is disabled for the current device, this preference keeps it visible as a faded element inside the builder. You can select it, review its settings, or enable it again without first locating it through the layout hierarchy. It remains disabled on the front end according to its visibility settings.

Step 4. Keep Layers Closed Until You Need It

Layers View is useful for two jobs: inspecting the page hierarchy and selecting an existing element by its label. Both can help at phone width, where stacked or overlapping content may make it difficult to select the right module directly on the canvas.

For this workspace, keep Layers closed initially and open it when a task calls for it. If you prefer having the structure visible throughout the session, dock it on the left and check that the remaining space still suits your preview. The choice depends on the complexity of the page and the width of your screen.

For quick commands, press Cmd+K on Mac or Ctrl+K on Windows to open the Command Center. Use it to open panels, switch views, or jump to settings without keeping extra panels open. The example below shows it adding a Heading module. To select an existing module by its label, use Layers; typing a module type into the Command Center can offer an action to add a new one.

For an on-canvas view of the structure, turn on X-Ray Mode from the Builder Bar. Its outlines help you identify sections, rows, columns, and modules while keeping the content visible. This can make it easier to locate the container responsible for a spacing issue without opening another panel. Leave it enabled when you save this workspace if you want it in your usual responsive setup.

Layers remains available for tasks that benefit from a full hierarchy, such as moving several modules or selecting an element that’s difficult to reach on the canvas. Open it for those adjustments, then close it when you return to visual checks. Our guide to the Divi 5 power user workflow explores Layers and the Command Center in more detail.

Step 5. Save The Workspace

Once the panels and controls are arranged, open Workspace Settings and click Save as New Workspace. In the Save Workspace modal, enter a clear name such as Phone Editing. Leave Set as Default off if you want to keep your regular building workspace as the one that loads by default, then save.

Your new setup is now available from the Active Workspace menu. Switch to another workspace and back to check that the phone view and panel arrangement return as expected. When a page is ready for responsive editing, you can select this saved setup instead of arranging the interface again.

If you later move the panel or change a preference and want to keep the adjustment, run Update Active Workspace from the Command Center. This saves the current arrangement into the active workspace, so you don’t need to create another named workspace for every refinement.

The Reset Active Workspace command resets the active workspace’s settings and closes open panels. Use it when you want to clear workspace adjustments, then switch to your saved Phone Editing workspace to recall its arrangement.

Working In The Phone Workspace

Divi’s responsive values generally inherit from larger breakpoints to smaller ones until you add an override. For example, a padding value set for Desktop can carry through to Tablet and Phone. The value you see at Phone width may therefore be inherited rather than one you entered specifically for that breakpoint.

Suppose a section inherits 80px of padding and you want less space on Phone. With Phone active, changing that responsive setting creates a Phone override; it doesn’t rewrite the Desktop value simply because the original value was inherited. If you open the setting’s Responsive Editor, check which breakpoint’s field you’re changing, since that editor lets you adjust other views without switching the canvas.

To review existing overrides, use the Modified filter beside the settings search field. Apply it, then switch between view modes to inspect modified settings for each breakpoint. In the example below, the filter isolates the heading size changed for Phone. Clear the filter when you need to see and edit settings that haven’t been modified.

The filter is a way to narrow your settings, not a complete explanation of every style affecting the element. A missing result doesn’t prove that a value comes from a Preset: it may be inherited from another breakpoint or supplied by a default or shared style. Check the Responsive Editor for breakpoint values and use the Inspector and assigned Presets to investigate the source of shared styling.

Make A Tablet Version Next

To create a similar setup for Tablet, duplicate the saved Phone Editing workspace and activate the copy. Set Builder Default View Mode to Tablet, then reposition the settings panel to suit the wider preview. There may be less gray space beside the canvas, so resize or dock the panel if necessary. Rename the copy Tablet Editing and use Update Active Workspace to save the changes.

Keep using the breakpoint switcher for quick comparisons. A brief look at Tablet or Desktop doesn’t require a separate workspace. The dedicated Tablet arrangement becomes useful when you’re spending time adjusting that view and want panels positioned around its wider canvas.

If your site uses Customizable Responsive Breakpoints, check the enabled views and their widths in the breakpoint editor. Builder Default View Mode selects a starting view; it isn’t where you define custom breakpoint widths. Use the top-bar controls to select other enabled breakpoints as you review the layout.

Let The Builder Fit The Work

It’s easy to keep using the same interface arrangement for every task. A panel stays where it has always been, even when a different position would make the current job easier. Workspaces in Divi 5 give you a way to save the adjustments that suit each stage of your process.

Try the Phone Editing workspace across a few pages, then refine the panel positions and visible controls to suit your screen. Keep the tools you reach for, hide shortcuts you rarely use, and update the workspace when the arrangement feels right. You’ll have a reusable setup for small-screen work while keeping your regular building workspace available.

The post How To Create A Responsive Editing Workspace For Small Screen Breakpoints In Divi 5 appeared first on Elegant Themes Blog.

Divi 5 brings that principle into the Visual Builder through a connected design system. Design Variables provide reusable values, presets organize shared settings, and the Preset Manager gives you a central place to maintain them. Composable Settings and Nested Option Presets extend those connections to the individual parts inside modules.

Let’s look at how these features work together and how they compare with a class-based CSS workflow.

What Is Class-Based Design?

A CSS class lets you target multiple elements with shared style rules. For example, a .primary-button rule might define a background color, padding, and font weight. Buttons using that class share those declarations without needing a separate copy on each element.

Updating the rule updates the properties it controls wherever it applies. Additional classes and responsive rules can introduce variations, so shared foundations do not require every element to look identical.

The practical benefits are consistency and easier maintenance. A new page can reuse established button, heading, and spacing styles. A client revision can update a shared definition instead of requiring the same edit across many elements.

Clear names and responsibilities make the system easier to use. A class for rounded corners, for example, can serve several components without controlling their colors or typography.

Divi 5 Makes Shared Design Decisions Visual

Divi lets you create reusable values and styles while working in the builder. Design Variables, Option Group Presets, and Element Presets each handle a different level of the design.

Design Variables Provide Reusable Values

Design Variables let you define a value once and reference it in compatible fields. A primary color can supply buttons, links, and icons; a spacing value can be reused across several card designs.

Variables support both styling and content:

• Colors and Fonts: Shared palette values and typefaces.
• Numbers: Sizes, spacing, widths, and corner radii, including supported CSS functions such as clamp().
• Images and Gradients: Reusable assets and fills, including those created with the Gradient Editor and Gradient Variables.
• Text and Links: Repeated labels and destinations.

Open the Variable Manager from the Visual Builder’s sidebar, choose a type, and enter a descriptive name and value. Names such as Primary Color and Heading Size help explain each variable’s purpose.

In a compatible field, use the variable or Dynamic Content picker to select it. The available choices depend on the field type.

Updating the variable then updates its linked fields. Entering the same value manually does not create that connection.

Variables can be referenced directly on elements or inside presets. This lets several reusable styles draw from the same palette, typefaces, and spacing values.

Option Group Presets Share A Style Treatment

Option Group Presets save settings for a particular group, such as typography, spacing, borders, backgrounds, or shadows.

A Border preset can give images, columns, and cards the same corner treatment wherever a compatible Border group is available. Those elements can keep their own colors and layouts while sharing that detail.

To create one, configure the relevant group, hover over its heading, and click the preset icon. Select New Preset from Current Styles and give it a recognizable name.

To reuse it, select the preset from a compatible option group elsewhere. Use its star icon if it should become the default for that group.

Keep each preset’s purpose clear. A Border preset might control a complete border treatment or only its corner radius. Focused presets are easier to combine without introducing unrelated changes.

Element Presets Bring A Design Together

An Element Preset combines settings for an element, including its typography, backgrounds, spacing, and other configured attributes. Presets also apply to layout elements such as sections, rows, and columns.

Element Presets follow their element type: a Button Element Preset is for Button modules, while a Text Element Preset is for Text modules. Option Group Presets provide the reusable pieces that can work across compatible groups in different elements.

To create an Element Preset, style the element, open the Element Preset menu at the top of its settings, and choose New Preset from Current Styles. Name it by its role, such as Primary CTA.

Use the same menu to apply it to another matching element. Setting it as the default gives new elements of that type a shared starting point.

An Element Preset can also reference Option Group Presets. A card design can use a shared Border preset, keeping that treatment connected to other designs instead of maintaining its own independent copy.

Manage And Preview The System In One Place

The Preset Manager, available from the Visual Builder’s sidebar, brings Element Presets and Option Group Presets into a searchable, filterable panel. You can create, edit, duplicate, delete, reorder, and set defaults without first finding an example on a page.

This gives you another way to start a project: establish your reusable button and card styles, then use them to build the layout. Descriptive names such as Border / Rounded and Button / Primary make those choices easier to find.

Creating or editing a preset opens a dedicated Preset Preview. You can refine its appearance using a sample element and preview background colors, including your site’s color variables. Saving an existing preset updates its linked uses.

The Preset Manager and Variable Manager also offer import and export controls for carrying definitions into another site. Those exports provide a reusable starting point, rather than ongoing synchronization between sites. See the Preset Manager documentation for the full workflow.

Extend Shared Styles Inside Modules

A Blurb contains an image, title, and body text; a Call To Action includes a button. Divi’s design system can reach those individual parts through Composable Settings and Nested Option Presets.

Expose Additional Controls With Composable Settings

Composable Settings let you enable additional design groups for a module’s internal elements. For example, to expose more button controls in a Call To Action:

1. Open the module’s settings and go to the Design tab.
2. Hover over the Button option group and click Toggle Options.
3. Enable the groups you need, such as Sizing or Spacing.
4. Expand those nested groups to configure the button.

These controls target the button itself. You can also enable groups while editing a preset, making them available to elements using that preset. A default preset can therefore establish both your usual styling and the controls you want available. The Composable Settings documentation covers this in more detail.

Connect Those Controls With Nested Option Presets

Nested Option Presets let you apply presets within nested groups, including placing one Option Group Preset inside another. The extra controls you enable can become part of your shared design system.

For example, Call To Action → Button → Border can use a shared Border preset.

You could nest a Pill Border preset inside a Solid Button Option Group Preset, then use Solid Button inside a Dark CTA Element Preset:

Pill Border → Solid Button Option Group Preset → Dark CTA Element Preset

Here, Solid Button styles the Button option group inside the CTA. It is separate from an Element Preset for a standalone Button module.

Changing Pill Border updates its linked settings through those parent presets, unless a setting is overridden. The CTA can keep its own container and text styling while its button shares details with other designs.

Combine Variations With Stacked Presets

Stacked Presets let multiple presets contribute settings to the same element or option group.

A Dark Mode Blurb preset might control background and text colors, while a Left Image Blurb preset controls image placement. Applying both combines those treatments without requiring another complete preset for that variation.

When settings overlap, later presets in the stack take precedence. Direct styles on the element can override preset values too. Keeping each preset focused makes these combinations easier to predict.

How This Compares With CSS Classes

The common principle is reusing shared definitions. In CSS, a .button class might supply a button’s main styling, while a .pill class adds rounded ends. In Divi, an Element Preset and a focused Border Option Group Preset can divide those responsibilities in a similar way.

These are practical parallels, rather than identical features or a description of Divi’s internal implementation:

CSS class rules and Divi presets both benefit from clear, reusable responsibilities. CSS custom properties offer a useful comparison for shared styling values, while Design Variables also support content such as text and links.

There are two distinctions worth keeping clear:

• Stacking is not the same as ordering HTML classes. Changing the order of class names in HTML does not decide which style wins. CSS uses the cascade and specificity; Divi’s preset stack uses preset order to resolve overlapping preset settings.
• Nested Presets are linked definitions. A preset can reference another preset. This differs from CSS nesting or inheritance between parent and child elements.

Divi’s appeal is the connected visual workflow. You can organize shared styles, preview them, expose controls inside modules, and connect those controls to presets from the builder. CSS offers its own flexibility; Divi makes this kind of design organization available through visual editing.

Build A System You Can Keep Using

The strength of Divi 5‘s approach is how its features work together. A color variable can feed a button preset, a shared Border preset can shape that button, and a CTA preset can bring the connected design into a page.

Start with decisions that repeat across your site, then expand as useful patterns emerge. Keep shared styles connected, use local changes where they serve a specific design, and turn recurring exceptions into reusable variations. The result is a system that can evolve without requiring the same edits everywhere.

The post The Beauty Of Divi 5’s Unique Take On Class-Based Design appeared first on Elegant Themes Blog.

You do not need to memorize the catalog to use the feature. Understanding its main tool groups, however, helps you write clearer requests and see what the agent is doing. Building on our introduction to Divi AI agents, this guide explores the tools available in Divi 5, their risk labels, and practical ways to use them.

An overview of the tool catalog shown in this post, grouped by risk level.

What Is An Agent Tool?

A tool is a named operation the agent can use, such as reading a module, creating a preset, or moving a page to Trash. Its description and required inputs tell the agent what it does and what information it needs. Open the Tools catalog in the AI chat interface to browse or search the available operations.

For example, Trash Page moves a specified page to Trash. Find Duplicate Styles On Page identifies repeated styles that could become presets, while Set Loop Query configures the content source and ordering for a Loop.

A tool may need a page ID, a module reference, or a value to apply. The agent can obtain that information from your request or use other tools to find it. Risk labels help distinguish operations that inspect information from those that change or remove it.

Safe, Moderate, And Destructive

Every tool is labeled with one of three tiers:

• Safe: Lower-risk operations, including inspecting page structure, settings, presets, and content.
• Moderate: Operations that make changes, such as adding modules, editing attributes, or moving elements.
• Destructive: Higher-impact operations, such as deleting a preset or menu, or moving a page or template to Trash.

Check the tool’s label and description for its classification. Its name can suggest its purpose, but the first word alone does not establish its risk level.

Destructive and high-impact actions require approval. Review what the agent proposes before confirming. This gives you a chance to catch a misunderstood request or an incorrect target before the action runs.

For supported builder changes, use Undo/Redo or the chat’s message-level undo control to return to an earlier state. These controls should not be treated as a universal rollback for site-level actions such as managing pages, menus, or media.

Exploring The Main Tool Types

The catalog is easier to understand by grouping tools around the work they support. Some inspect your content, others build or edit it, and others manage the surrounding site and workspace.

Names such as Get, Find, Create, Update, and Delete provide useful clues about what a tool does. Read its description for the exact scope.

When you find a relevant tool, use its @ control to reference it in your request. This helps direct the agent toward a specific operation while leaving room for any supporting steps.

Use the @ control beside a tool to reference it in your chat request.

Reading Your Page And Its Modules

Reading tools help the agent identify the relevant content before making changes. They turn references such as “the first blurb” or “the button under the hero” into specific elements it can work with.

Resolve Module Reference turns “the first blurb” into a specific, named module that the agent can act on. Get Selected Modules identifies your selected modules. Search Modules By Content finds the module containing a specific phrase, while Find Modules By Type gathers all buttons on the page at once. Get Page Structure returns the whole element tree, as if handing over the layers panel. Find Duplicate Styles On Page finds repeated module and option group styles that are candidates for presets.

You do not have to know which of these tools to call. Ask in plain language, and the agent matches the request to the appropriate tools. If the agent isn’t quite doing what you want it to, that’s when you might want to search the Tools list and help guide it with more specifics.

Building And Editing Modules

Batch Add Modules and Batch Edit Modules let the agent add or update multiple elements in one operation. A request such as “Add three feature cards under the hero” may combine structure creation, content, and styling steps.

Find And Replace Attribute Values handles repeated value changes, such as replacing a color within a section. Generate Layout creates a layout from a brief, giving you a starting point to review and refine.

Add Module HTML Attributes adds attributes such as a class, ID, or aria-label. Batch Add Module Interactions configures interactions between existing trigger and target modules. Lock Module can protect elements from editing, while a clear instruction about what to preserve helps define the task’s scope.

Presets And Design Variables

Design Variables provide reusable values, while presets group reusable settings. They can work independently or together, and a preset does not need to be the default to be useful.

Create Module Preset From Current Styles turns an existing module’s styling into a preset. You can ask the agent to repeat that process for several modules and specify a naming convention. Get Preset Summary helps it inspect existing presets, while Parse Module Preset Naming Context helps suggest a relevant name. Corresponding tools support Option Group Presets.

Create Global Variable and Set Global Variable Value create and update reusable values. Promote Layout To Global Variables examines a section or page for literal styling values and offers conversions for you to review. This can help organize an existing Divi 5 layout, including one migrated from Divi 4, without manually recreating each value.

Dynamic Content And Loops

Dynamic Content and Loop tools help build layouts that draw from changing content, such as blog posts, directory entries, or products.

Enable Loop enables the Loop feature on an element. Set Loop Query and Set Loop Filters configure what it displays. For example, you can ask the agent to repeat a post card for the three most recent posts in a specified category.

Get Post Custom Fields reads existing post fields, Get Dynamic Content Options identifies available dynamic sources, and Build Dynamic Data Value prepares a Dynamic Content value for use in a setting. Together with editing tools, these operations let the agent connect the layout to the relevant content.

Working On The Rest Of Your Site

Of course, there is more to your website than what is accessible in Divi’s Visual Builder. These tools go beyond the current page and let you work on Theme Builder templates, pages/posts, WP menus, and much more.

Create Template, Update Template and Assign Template cover the Theme Builder, including the display conditions that decide which posts a template applies to. You can use these tools to manage a shared layout and where it appears.

Create Page, Update Page and Search Pages work across custom post types, not only posts and pages. Create Menu and Batch Add Menu Items build navigation, and Assign Menu Location drops it into the theme slot it belongs in. Save Item To Library and Load Library Item support reusing modules, rows, and sections through the site’s Divi Library.

Read Web Page reads a public URL for text extraction or design analysis. It gives the agent reference material to use alongside your instructions.

Media tools provide another source of context. Describe Image analyzes an image, helping the agent interpret an attached layout reference.

Compare Design To Reference Image compares the current layout with a reference. Its findings can guide another round of adjustments, alongside your own visual review.

Search Media looks through the library you already have before anything new gets made. Generate Image and Get Stock Image fill the holes while you are still waiting on real photography.

Managing The Workspace And Tracking Progress

The agent can set up the builder around you, not just work inside it.

Workspace tools help preserve and switch between editing setups. Create Workspace saves the current interface arrangement, while Switch Workspace activates another workspace. Add Canvas and Switch Canvas manage additional canvases.

Set View switches breakpoint views or Wireframe View, while Set Preview Mode turns preview mode on or off. Set Zoom changes the canvas zoom, and Set Color Mode switches the builder interface between light and dark. Panel tools can dock settings and resize sidebars.

Add TODOs and Update TODO maintain a checklist for larger requests, making progress easier to follow. Ask User Question lets the agent request missing information when it needs clarification to continue.

List Activities and Get Activity retrieve build activities from the current chat, helping the agent review earlier work.

Get Documentation and Get Knowledge give the agent access to Divi documentation and knowledge resources. Run Subagents lets it delegate independent subtasks and bring the results back into the main conversation.

Start With One Real Job

A practical way to learn what these tools in Divi 5 is to open a page you already have and give the agent a specific task to complete. Ask it what is on the page and ask what it can do. Have it find every button and make them match the one in the hero. Point it at a layout you built by hand. Turn those colors into design variables, and one module’s styling into a preset the rest of the site can use. Scroll through the list of tools and search for things you might like to have it do for you.

A request can involve several tools in sequence, with independent work handled in parallel where appropriate. Start with a clear outcome, identify what should stay unchanged, and review the result. The searchable Tools catalog is there when you want to understand or guide a particular step.

The post Exploring All 200+ Of Divi’s AI Agents Tools appeared first on Elegant Themes Blog.