This is one of the most important updates to Divi since Variables and Presets!

Components are the evolution of Divi’s Global Elements. They retain the power of globally synchronized designs while giving you much more control over what stays global and what can be customized on each instance.

Detach settings from nested modules, add Slots for unique local content, edit Components from a dedicated interface, nest Components inside other Components, import and export them, and manage them using the Divi AI Agent.

There’s much to explore, so let me jump into the builder and give you the full tour. 👇

Components Are The Evolution Of Global Elements

Divi introduced Global Elements and selective synchronization nearly a decade ago. They made it possible to reuse elements across a website, update them from one place, and detach selected settings for local customization.

Components take that idea much further. They can contain complete layouts and nested Components, with selective sync extending through sections, rows, columns, groups, and modules. Slots introduce free-form areas for unique instance content, while improved attribute inheritance lets detached settings retain their global values until locally overridden.

Dedicated instance and Component editing modes make local and global changes easy to distinguish. Components can also be converted, managed, imported, exported, preloaded for faster editing, and controlled using the Divi AI Agent.

Together, these improvements transform Global Elements into a flexible system for building consistent, scalable, and reusable websites in Divi.

Customize Component Instances With Selective Sync

One of the most important improvements is support for selective sync throughout nested layouts.

You can detach individual attributes from modules anywhere inside a Component, including Components built from sections and all their contents.

Detach Attributes From Nested Modules

Imagine creating a reusable testimonial Component that includes Image, Icon, and Text Modules.

You may want its typography, spacing, colors, borders, sizing, and layout structure to remain consistent across the board. At the same time, every testimonial needs a different photo, name, and quote.

With Components, you can detach those individual attributes while keeping everything else connected.

Detach the content inside a Text Module, the image used by an Image Module, or any design setting that should vary between instances.

You decide what remains global and what becomes local.

Inherit Global Values Until You Override Them

Detached attributes now inherit their values from the source Component until you customize them locally.

Previously, unsyncing an attribute could leave it empty at the instance level. Now, local attributes sit on top of global attributes.

For example, you can detach a Button Module’s text while every instance continues to display the text defined by the Component. When you change the text on one instance, that local value overrides the global value on that instance alone.

Reset the local value, and it returns to inheriting from the Component. The source value is never erased.

Detach And Reattach Nested Modules

You can also detach an entire nested module from its parent Component.

Once detached, the module becomes editable at the instance level. Its settings can change freely without affecting the source Component or its other instances.

If you change your mind, attach the module again to restore its connection to the Component.

You can also detach an entire Component instance, preserving its current design while converting it into regular local modules.

Local And Global Settings Are Clearly Separated

Components introduce a dedicated editing experience that clearly separates instance-level customization from global Component editing.

You always know whether a change will affect the current instance or every connected instance across your website.

Edit Local Settings In Instance Mode

Opening an attached Component starts in instance mode.

The settings panel surfaces the attributes and child collections available for local editing. Globally synchronized settings remain hidden, reducing clutter and preventing accidental changes to the source Component.

If nothing is available for local editing, Divi explains that the settings are managed by the Component and gives authorized users a direct path to edit them.

Local changes are saved with the page and don’t affect other instances.

Edit Global Settings In Component Mode

Choose Edit Component from the settings panel header to enter Component editing mode.

This mode reveals the complete source settings, selective-sync controls, and Component information. Purple styling identifies synchronized values, making the editing context immediately clear.

Changes made here update the source Component and propagate to its connected instances. Save and Cancel controls protect unfinished changes when you close the panel or move elsewhere in the builder.

Build Unique Local Layouts With Slots

Components become even more powerful with the introduction of Slots.

A Slot is a new module that can be added inside a Component. The Slot’s position belongs to the synchronized Component, while everything placed inside it remains unique to each instance.

In other words, a Slot creates a free-form local area inside an otherwise global design.

Slots Allow Freeform Design Within A Synced Global Structure

Imagine creating a site-wide hero section Component in Divi 5. Its heading, description, image, button, background, spacing, and typography can remain globally synchronized.

To the right of the text, image, and button, you could add a Slot that creates a free-form content area within the hero section.

On one page, that Slot could contain an image collage. On the other hand, it could contain an Email Opt-in Module. Somewhere else, it could contain videos or an entirely different arrangement of modules.

Everything surrounding the Slot updates globally, while the content inside it remains tailored to each page. You get a consistent hero design across your site, with the freedom to create something unique in each instance.

A Component can contain multiple independent Slots, and Slots can contain other Components when they don’t create a circular relationship.

Components Are First-Class Citizens In The Divi Builder

Components now have a prominent place in Divi alongside other foundational systems such as Presets and Variables.

They are easier to create, find, insert, identify, edit, detach, and manage throughout the builder.

Create From And Convert To Existing Components

Turn any compatible Divi element into a new Component using Save As Component, and convert any local instance to an existing component.

Its design is saved to your library, and the element on the page becomes a connected instance. You can then reuse it across your website and manage all synchronized instances from a single source.

You can also convert an existing module into an existing Component of the same type.

Instead of deleting local content and manually inserting a Component, connect it directly to a reusable design from your library.

This makes it much easier to standardize an existing website. Convert repeated sections, rows, or modules into matching Components and maintain their shared designs from one place.

Manage Everything In The Components Manager

Divi now includes a dedicated Components Manager, similar to the Preset Manager and Variable Manager.

Browse your Components, reorder them, open them in the Component editor, rename them, duplicate them, delete them, and manage their portability from one central interface.

The Component editor provides a focused environment for updating a source design without first locating one of its instances on a page.

Nest Components Inside Other Components

Components can now contain other Components. 🤯

This lets you create larger systems from smaller reusable parts. A global header Component could contain separate Components for its logo, navigation, announcement bar, and call to action.

Each nested Component remains independently reusable and editable while participating in the larger design.

Nested Components also work inside Slots, allowing local layouts to reuse elements from your Component library.

Components, Presets, Variables, And Slots Work Together

Components fit naturally into Divi 5’s broader approach to building design systems.

Variables define reusable values such as colors, fonts, numbers, images, and text. Presets define reusable collections of element settings. Components define reusable elements and layouts while controlling what remains synchronized. Slots introduce unique content inside those Components.

Each system solves a different problem, and they become especially powerful when used together.

You could use Variables to define your brand colors, Presets to style your buttons, Components to build reusable call-to-action sections, and Slots to customize the content placed inside each instance.

The result is a much more composable way to build websites with Divi.

Import, Export, And Load Components Faster

Components are easier to move between websites, and they appear faster when you use them in the builder.

Import And Export Components

Layouts and canvases can include the Components they reference in the export. During import, Divi can recreate those Components and update their references for the destination website.

This keeps reusable designs together when you move complete pages or layout collections between websites.

You can also import and export Components directly from the Components Manager, just like Presets and Variables.

Nested Component relationships are preserved during Component imports, allowing complex reusable designs to travel together.

Load Components Instantly

Components used on the current page are now fetched before the Visual Builder renders. Their nested Component dependencies are loaded with them, allowing connected designs to appear immediately instead of waiting behind individual loading spinners.

After the builder loads, Divi also preloads up to 50 recently modified Components in the background.

That means the Components you are most likely to use are ready as you add them, resulting in a faster, smoother building experience.

Manage Components With The Divi AI Agent

The Divi AI Agent can now work directly with Components.

Ask the agent to add a Component to the page, turn an existing module into a new Component, convert a module to an existing Component, edit Component attributes, update selective-sync settings, duplicate a Component, or delete one.

You could ask the agent to turn a finished hero section into a Component, replace repeated modules with an existing Component, update a synchronized design, or decide which settings should remain locally editable.

The agent understands the difference between a Component’s source and its local instances, allowing it to make targeted changes without affecting the wrong content.

Combined with Divi’s upgraded AI models and quick tools, the new Component tools give you another powerful way to build and maintain websites with AI.

Try Divi Components And Slots Today

Components and Slots are now available in Divi 5.

Create a Component, detach a nested attribute, add a Slot, and see how easily global design and local content can work together.

Then open the Components Manager or ask the Divi AI Agent to organize and update your reusable designs.

If you are enjoying these updates, do us a huge favor by liking this video and leaving a comment. It means a lot to us to see you cheering Divi on, and it’s essential to feed the algorithm and spread the word.

Don’t forget to follow us on YouTube and subscribe to the Divi newsletter so you never miss an update. I’ll see you soon for another Divi 5 feature announcement, which I promise will be right around the corner. 😁

The post Introducing Components and Slots for Divi 5 appeared first on Elegant Themes Blog.

Context lets you reference a module, preset, variable, page, or other item directly in your request. Instead of describing everything from scratch, you can point to the content or settings you want the agent to use.

In this post, we’ll explore how to add Context in the Divi 5 Visual Builder, choose references for different tasks, and combine them with Scope. We’ll also save recurring references inside Commands and Rules.

Meet Divi AI Agents

Divi AI Agents work inside the Divi 5 Visual Builder. You can use plain-language instructions to inspect a page, ask questions, or make changes to your layout and site. Open the Divi AI Agents panel from the left sidebar of the Visual Builder.

The chat window is where you write requests and access Context, Commands, Rules, and Tools. Use Ask Mode for questions and suggestions, or Build Mode when you want the agent to make changes.

Before adding Context, it helps to understand how it differs from Scope. Both make a request more specific, but they serve different purposes.

How Context And Scope Work In Divi AI Agents

Context supplies information for a request. It might identify an element to edit, a button to match, a preset to apply, or another page to use as a reference. Your prompt explains what the agent should do with it.

Scope keeps the conversation focused on a selected element. Follow-up requests continue to refer to that element until you clear or change the Scope, so you do not have to identify the target in every message.

For example, suppose the Browse Courses button in your Get Started section should match the hero button. Attach the hero button as Context and set the Browse Courses button as the Scope.

Then send this request in Build Mode:

The attached button provides the styling reference, Scope identifies the working target, and the prompt specifies what should change. You can use Context and Scope together whenever a task involves both a reference and a separate target. When you move to another part of the page, clear the current Scope and select the next element as needed.

How To Add Context In Divi AI Agents

Context is added through the chat composer. Selected references appear as chips in the message box, so you can review them before sending your request.

Click the Context icon or type @ to open the Select Context window. Browse by type or search for the item you need, then select it to attach it to your message.

Attaching an item does not apply or change it by itself. Include a prompt that explains whether the agent should inspect it, use it as a reference, or modify it.

Choose The Right Context For The Task

The Select Context window includes Presets, Variables, Elements, Tools, Canvases, and content from across your site. Each provides a different kind of reference.

Start with the information your request needs. If the style already exists as a preset, attach that preset. If you only need a saved URL or color, a variable may be enough.

1. Use Presets For Saved Styles

The Presets group includes saved Element Presets and Option Group Presets. Attach one when you want the agent to use its existing settings rather than recreate the appearance from a description.

In this example, the features section contains six headings, from Self Guided Courses to Homework & Tests, that were styled individually. Attach the Course Heading preset, then send this request in Build Mode:

The goal is to assign the saved preset to the headings. Once applied, changes to its shared settings can update those headings together, except where local settings override the preset.

Review the preset assignment after the task to confirm the headings use Course Heading. This is especially useful when replacing individually styled text with a reusable style.

2. Use Variables For Reusable Values

The Variables group contains the Global Variables saved on your site. Attach one to identify an exact reusable value, such as a color, font, number, or link.

The All Access Membership section has two Learn More buttons that should point to the contact page. Attach the Contact Link variable and send:

With the variable assigned to both links, you can change their destination by updating Contact Link. You do not need to replace the URL on each button separately.

As with presets, the distinction is between using the reference and copying its current value. Be explicit when you want the connection to remain reusable.

3. Use Elements As References From The Current Page

Attach an Element when something already on the page provides the reference you need. In the earlier example, the hero button supplied the styling for another button.

An element can also be the target of a request. For example, attach a Text Module and ask the agent to proofread its content. When you include multiple elements, name which one should change and which should remain a reference.

Element Context works well for one-off tasks. If a style should be reused regularly across the site, consider saving it as a Preset and referencing that instead.

4. Use Tools When The Method Matters

Tools provide a different kind of guidance. A Preset, Variable, or Element identifies something the agent can inspect or use. Attaching a Tool points toward a particular capability for the task.

For example, the Popular Courses section contains hardcoded colors. Select that section as the Scope, attach Promote Layout To Global Variables, and send this request in Ask Mode:

This tool is relevant because it examines literal styling values and offers variable conversions. Attaching it does not run the conversion on its own; the prompt and work mode still define what you are asking the agent to do.

Review the suggestions first. When you are ready, switch to Build Mode and specify which changes to apply, including whether existing variables should be reused.

You can browse available capabilities through the Tools button in the composer. For more detail, see our post to Divi AI Agents Tools.

5. Reference Canvases And Other Site Content

Context can point beyond the main page you currently have open.

Use the Canvases group to reference a canvas used for a popup, off-canvas menu, or other layout. For example, attach a newsletter popup when asking the agent to update its copy or coordinate its styling with the current page.

The picker also includes site content such as pages, posts, Divi Library layouts, and menus. Other available content depends on your site’s setup, including content types added by themes or plugins.

You might reference an approved landing page while building a new section, or attach a menu you want to update. State whether the attached content is a reference or the target so the intended change is clear.

6. Use Files, Images, And URLs As References

You can also supply material from outside the builder. Use Attach File for a supported file, or include a URL in your prompt when you want the agent to work from another page.

For example, attach a screenshot as a visual reference or a TXT file containing approved copy. Supported attachments include JPEG and PNG images, TXT, HTML, and CSV files, and font files. Do not assume every document format is supported.

Explain what matters in the reference. A screenshot might guide the layout, while an attached text file supplies the wording. If you want to preserve the current colors or typography, include that instruction too.

Keep the references focused. One relevant image or page is often more useful than several similar examples with conflicting details.

Save Context Inside Commands And Rules

Attaching Context to an individual request works well for a one-time task. When an instruction repeatedly depends on the same preset, variable, or tool, you can save that reference inside a Rule or Command.

A Rule provides guidance for how work should be done. A Command stores a task you choose to run. Both can include Context, so you do not have to attach the same reference each time.

Add Context To A Rule

Suppose headings in feature and course cards should use the Course Heading preset. Save the reference with a Rule:

1. Open the Divi AI Agents panel and click the Rules icon.
2. Click Add New Rule.
3. Enter a title such as Card Heading Style.
4. In the Rule field, write: Use the attached preset for headings in feature and course cards.
5. Click the Context icon and attach the Course Heading preset.
6. In When To Use, write: When adding or editing headings in feature or course cards.
7. Leave Always Use turned off, then click Save Rule.

With Always Use off, the agent uses the When To Use description to decide whether the Rule is relevant. This makes the instruction available for card-heading tasks without including it automatically in every request.

Turn Always Use on for guidance that should accompany every request. For this example, the narrower condition is a better fit.

Attaching the preset also makes the Rule more precise than wording such as “use our usual heading style.” The saved reference identifies the intended style directly.

Add Context To A Command

Use a Command when the reference belongs to a repeatable task you want to run manually.

Earlier, we reviewed a section’s hardcoded colors with Promote Layout To Global Variables. Save that review prompt and tool together so you can reuse them on another section:

1. Click the Commands icon in the chat window.
2. Click Add New Command.
3. Enter a title such as Suggest Color Variables.
4. In the Command field, add: Find the hardcoded color values in this section and suggest which ones to convert into Global Variables. List the suggestions without applying them.
5. Click the Context icon and attach the Promote Layout To Global Variables tool.
6. Click Save Command.

To use it, set the section you want reviewed as the Scope, switch to Ask Mode, and type / in the composer. Choose Suggest Color Variables, then review the inserted prompt and Context before sending.

The Command retains the instruction and tool reference, while Scope identifies the section for each run. Check that Scope points to the intended section before reusing the Command elsewhere.

Save Context That Still Makes Sense Later

Before saving a reference inside a Rule or Command, consider whether it will remain useful on another page.

Site-level presets and variables are good candidates for recurring instructions. Tools can also support repeatable workflows. A specific page, menu, or canvas may be useful when you deliberately want to reference that same item each time.

An element from the current page is more specific. Saving it does not automatically make it refer to an equivalent element on the next page.

Keep the reusable parts in the saved instruction and supply the changing target through Scope or the current prompt. This helps a Command stay useful without carrying an outdated reference into a different task.

Keep Context Focused

Adding more Context does not automatically make a request clearer. Each reference adds information for the agent to consider, so include what the task needs and leave unrelated material out.

The Context Usage meter shows how much of the conversation’s available working context is in use. The conversation includes more than the chips in your current prompt; earlier messages and other material also contribute.

When you move to an unrelated job, consider starting a new chat. This separates the next task from the previous conversation without changing your page or deleting saved Commands and Rules.

Before sending a request, remove any attached references that no longer apply. Removing a chip from a new prompt does not erase information already discussed earlier in the chat.

For ongoing work, keep the important target and constraints clear. Attach the preset you want used, identify the page that should guide the design, and update Scope when the working target changes.

Give Divi AI Agents Better Context

A useful prompt explains the task. Context supplies the specific references behind it, whether that is a saved preset, a link variable, an existing element, or a design screenshot. Start with the item the agent needs to identify, then explain how it should be used. Combine Context with Scope when the reference and working target are different, and save recurring references inside Commands or Rules.

You do not need to attach everything. A small set of relevant references, paired with a clear instruction, gives Divi AI Agents a more precise starting point.

The post How To Use Divi AI Agents Context appeared first on Elegant Themes Blog.

These designs work as starting points for portfolios, agencies, fashion and lifestyle brands, architecture sites, product pages, creative studios, and editorial layouts. Import a section, replace the sample copy and imagery, and adapt the colors and typography to fit your project.

The collection explores several ways to use clipped backgrounds inside text. Some designs make one oversized word the main focal point, while others combine image-filled typography with supporting copy, buttons, navigation, and photography to build a complete section around the effect.

Preview

Here’s a look at the seven Text Background Clip Sections included in the pack. The download is further down the post.

The designs range from restrained editorial compositions to much bolder layouts where oversized clipped typography dominates the section. In each case, the imagery inside the letters becomes part of the visual hierarchy rather than sitting separately from the text.

Download 7 Text Background Clips For Divi 5

Get all seven 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 (8 Exports)

Inside the download, you’ll find seven individual section exports and one combined export containing the complete collection.

• Text Background Clip Section 1.json
• Text Background Clip Section 2.json
• Text Background Clip Section 3.json
• Text Background Clip Section 4.json
• Text Background Clip Section 5.json
• Text Background Clip Section 6.json
• Text Background Clip Section 7.json
• Text Background Clip Sections (All).json

Choose an individual JSON file when you only need one design, or import the combined file to add the full collection to your Divi Library at once.

Each section is already styled with example typography, imagery, spacing, colors, and supporting content. Use the original composition as a starting point, then replace the sample assets with content that fits your own website.

A Closer Look At The Text Background Clip Designs

The same clipped-text idea can produce very different results depending on the scale of the typography, the image used behind it, and how much surrounding content is included.

Oversized Editorial Typography

One of the lighter designs uses an oversized word across the top of the composition, with photography visible inside the letterforms. A portrait overlaps the lower part of the headline, while supporting navigation, copy, and a button sit inside a darker content panel underneath.

The result feels closer to an editorial cover than a conventional website heading. The clipped image gives the headline visual texture without requiring another large photograph beside it.

This type of composition works particularly well when the headline itself is short. A single word gives the letterforms enough width for the image inside them to remain recognizable.

Vertical Typography As The Main Graphic

Another design takes a darker, more experimental approach. Large vertical letters fill much of the left side of the section, with architectural imagery visible through the text. Supporting copy, contact details, and a call to action remain relatively small, allowing the typography to act as the primary graphic.

This treatment works well for architecture, design studios, creative agencies, portfolios, and other projects where typography can take a more expressive role.

Because the image is being viewed through the letter shapes, subject placement matters. Strong lines, recognizable forms, and clear contrast tend to work better than images with lots of tiny detail.

How To Use The Text Background Clip Sections

Keep your unzipped download folder handy. We’ll import one of the sections into Divi, add it to a page, and customize the text, imagery, and surrounding design.

1. Import The Sections Into The Divi Library

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

Open the Import tab and click Choose File. Select one of the individual Text Background Clip Section JSON files, or choose Text Background Clip Sections (All).json to import the complete collection. Then, 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, and click Use This Section.

The imported section contains the full starting composition. Before making major changes, review the existing structure and identify which text element carries the clipped background effect.

For designs with overlapping content, the Layers panel can make individual elements easier to find and select.

3. Replace The Main Text

Start with the oversized word or headline. Open its text settings and replace the sample wording with your own.

Keep the length of the replacement text in mind. The shape and width of the letters directly affect how much of the background image is visible, so replacing a short word with a long sentence can completely change the composition.

Try the new wording at the existing size first. If the result no longer fits the available space, adjust the font size, line height, or width deliberately rather than shrinking the text until it loses its impact.

4. Replace The Background Image Inside The Text

Next, replace the image used for the clipped typography with one that fits your message or brand.

Choose imagery with enough contrast and recognizable detail to remain effective when it is only visible through the letterforms. Architecture, portraits, landscapes, textures, and large graphic shapes can all work well.

Pay attention to image position. Moving the focal point horizontally or vertically can make a significant difference because only selected portions of the image will appear inside each letter.

5. Adjust The Typography

The font plays an especially important role in this effect. Wider and heavier letterforms reveal more of the background, while thinner typefaces leave much less image area visible.

If you change the typeface, review the entire composition again. The same word can occupy substantially more or less space depending on the font, weight, width, and letter spacing.

Large display type usually works best for the main clipped element. Keep supporting copy simpler so it does not compete with the focal typography.

6. Update The Supporting Content

Work through the surrounding headings, body copy, labels, buttons, navigation items, and contact details included in the section.

These elements help turn the text effect into a complete section rather than an isolated visual. Keep their hierarchy quieter than the clipped headline unless the design intentionally gives another piece of content equal emphasis.

If the section includes a button or linked text, update both its label and destination URL.

7. Adapt The Colors To Your Brand

Replace the section backgrounds, text colors, buttons, and accents with colors that suit the rest of your site.

Keep enough contrast around the clipped text for the edges of each letter to remain clear. A complex image inside the typography can become difficult to read when the surrounding background is visually similar.

If you want to reuse the same palette elsewhere, save your colors as Design Variables and assign them to the relevant settings.

8. Refine Spacing And Positioning

Large typography can change the balance of a section quickly. Review the margins and padding around the focal text and adjust background position after replacing the wording, image, or font.

For designs with overlapping portraits, text panels, buttons, or other supporting elements, check that every element still has enough room and that the intended reading order remains clear.
Make small adjustments while viewing the whole section rather than focusing on one element in isolation.

9. Check The Design On Smaller Screens

Review the section on desktop, tablet, and phone. Oversized clipped typography can behave very differently as the available width decreases.

Check headline wrapping, font size, background positioning, image visibility, overlap, and the order of supporting content.
On smaller screens, it may be better to reduce the size of the clipped text, change its alignment, or simplify an overlap rather than trying to reproduce the exact desktop composition at a much narrower width.

Preview the finished page outside the builder as well and make sure there is no unwanted horizontal scrolling.

Tips For Effective Text Background Clips

The effect works best when the word, image, and surrounding layout all contribute to the same focal point.

Use Short, Strong Wording

A short headline gives the image inside the letters more room to become visible. Single words and compact phrases often produce the clearest result.

If the text becomes too long, the letters may need to shrink so much that the clipped image loses its impact.

Choose Images With Clear Shapes

Remember that visitors will only see fragments of the image. Strong silhouettes, faces, architectural lines, or areas of clear tonal contrast are easier to recognize through large letters.

Avoid relying on tiny details that disappear once the image is clipped into the typography.

Think About The Image Position

Two sections using the same photograph can look completely different depending on which part of that image appears inside the letters.

Adjust the image position until the most useful part of the photograph falls inside the most prominent areas of the text.

Let The Clipped Text Stay Dominant

The effect already contains both typography and imagery, so it can carry a lot of visual weight on its own.

Keep secondary text, buttons, decorative elements, and supporting photographs restrained enough that the primary word or headline remains the first thing visitors notice.

Keep Readability Ahead Of The Effect

The image should enhance the typography without making the word difficult to identify. If the photograph creates too little contrast inside parts of the letters, try a different crop, image, or surrounding background.

The strongest result is one where the clipped image is noticeable after the word itself is already easy to read.

Start Building In Divi 5 Today!

These 7 Text Background Clip Sections give you ready-made starting points for combining bold typography and imagery in a single focal element.Import the design that fits your project, replace the text and background imagery, and adapt the typography, spacing, colors, and supporting content to your brand.

Use the collection as a starting point for your next creative section in Divi 5.

The post 7 Text Background Clips For Divi 5 (Free Download!) appeared first on Elegant Themes Blog.

The module works independently of WooCommerce. It does not add a cart, manage inventory, or create WooCommerce order records. For donations, a single service, or a straightforward paid offer, that can be a useful alternative to building a storefront. Booking, ticket management, and digital delivery still need their own arrangements.

In this post, we’ll explore the Payment Button Module, configure both payment providers, style a button for a service offer, and test the checkout process. You’ll also find downloadable layouts for the examples shown throughout the post.

What Is The Payment Button Module In Divi 5?

The Payment Button is a native Divi 5 module that sends visitors to PayPal or Stripe to complete a payment. You choose the provider and payment resource in the module, then configure the remaining checkout details according to the provider you use.

For PayPal, settings such as the amount, currency, and return pages are configured in Divi. For Stripe, those details are managed through a Payment Link created in your Stripe dashboard.

Divi handles the button’s appearance and the handoff to checkout. The payment provider processes the transaction and manages its payment records.

The module offers a simple way to collect payments without adding a full e-commerce system to WordPress. It does not create a product catalog, track stock, calculate shipping, or manage fulfillment. If your site needs those features, a store solution such as WooCommerce is a better fit.

Visually, the Payment Button uses familiar button design controls. You can adjust its typography, colors, spacing, border, and icon to match the rest of your site. Compatible Button Option Group Presets can help you reuse existing styling.

What The Payment Button Module Does

The module connects a button on your page to a payment checkout. How much of the configuration happens inside Divi depends on the provider.

For PayPal, select a fixed amount or let visitors enter their own amount. Choose the currency and add a description that identifies the payment.

The PayPal settings also include a Return URL and a Cancel URL. These specify where visitors should go after completing or canceling checkout. You can also choose whether checkout opens in a new tab.

Use Sandbox in the Environment field while testing with PayPal sandbox accounts. When you are ready to accept payments, select your live account resource and switch the environment to Live.

Stripe’s configuration happens primarily in its dashboard. Create a product and a Payment Link, then add that link to Divi. The Payment Link determines the price, currency, and what visitors see after checkout.

For Stripe, testing depends on using a Payment Link created in a Stripe testing environment. Changing a setting in Divi does not turn a live Stripe Payment Link into a test link.

In the module, select Stripe and save the Payment Link as a resource. Divi sends visitors to that URL, and Stripe handles checkout.

With either provider, you manage the button’s design in Divi and the transaction in the provider’s dashboard. Available payment methods and receipt settings depend on your provider configuration.

What The Payment Button Module Doesn’t Do

The Payment Button Module is different from the Woo Checkout Payment Module. The latter works within WooCommerce checkout, while the Payment Button operates independently of WooCommerce.

It also does not embed a credit card form into your Divi page. Visitors complete checkout with PayPal or Stripe, and you manage transactions, refunds, disputes, and payouts through that provider.

The module does not automatically deliver files, reserve appointments, issue tickets, or restrict access to paid content. Those tasks require a separate workflow. A return to a thank-you page should not be treated as proof of payment on its own.

Typical Use Cases

The Payment Button is useful when a page presents a clear offer and needs a direct route to checkout. The following layouts show how that can work for donations, services, events, and digital products.

Donations And Fundraising Pages

A listener-funded radio station may need a donation page rather than a store. This layout explains the campaign and presents several suggested amounts.

The first three buttons represent fixed donations. A fourth lets visitors choose their own amount. With PayPal, use the module’s User Defined amount mode. With Stripe, configure a suitable customer-chosen amount Payment Link in Stripe.

Visitors choose an amount and continue to the provider’s checkout without browsing a product catalog on your site.

Single Services Or Consultations

A fractional CFO offering a single working session can use a focused service page. The page explains what is included, how much it costs, and what happens after payment.

Here, the offer is $450 for a 90-minute video call and a written summary. The Payment Button sits beneath the price, with a label that matches the offer. After checkout, the thank-you page can explain how to book the session.

The button collects payment; your booking process manages availability and scheduling. This pattern also works for audits, consultations, and other clearly defined services.

Event Tickets Or Simple Single-Item Offers

A letterpress workshop can present its date, price, and registration details in a compact banner. This example places the event information on the left and a Payment Button on the right, sending visitors to checkout for a $95 payment.

For an event with only six seats, availability needs separate handling from the start. The Payment Button does not count seats or prevent overselling. Use a booking or ticketing system, or an appropriate provider-side purchase limit, when capacity must be enforced.

The layout still works well as the public-facing offer, provided the payment and registration workflow supports the event’s requirements.

Digital Product Landing Pages

A $28 PDF field guide can have a simple landing page: show the cover, explain what is inside, list the price, and add a Payment Button.

Digital delivery needs its own setup. Your thank-you page can explain how buyers receive the file, while a separate fulfillment process sends or grants access after payment is confirmed. A publicly accessible thank-you page does not protect a download by itself.

If the offer grows into a catalog with customer accounts and managed downloads, a dedicated e-commerce solution may become more suitable.

Prerequisites Before You Build

The Payment Button Module was introduced in Divi 5.11. Update to the latest available Divi 5 release before following the tutorial.

You’ll also need the payment resource for your chosen provider: a PayPal business account email or a Stripe Payment Link. Each button uses one provider and one selected resource.

Prepare the pages your checkout process needs:

1. Offer Page: The page containing your service, product, or donation information and the Payment Button.
2. Thank-You Page: For PayPal, use this as the module’s Return URL. For Stripe, configure it as the Payment Link’s after-payment redirect if you want buyers returned to your site.
3. Cancel Page: For PayPal, set the module’s Cancel URL to an appropriate page, such as the original offer or a short “try again” page.

Start with test resources. PayPal testing uses a sandbox business account for the seller and a sandbox personal account for the buyer. Stripe testing uses a Payment Link created in its sandbox or test environment.

Finally, confirm that the module suits the project. It does not provide a WordPress cart, inventory system, or order-management workflow. Stripe may offer additional checkout options through its Payment Links, but those remain provider-side features rather than store functionality added by Divi.

How To Use The Payment Button Module

The layout below promotes a one-time $150 website audit, with the offer on the left and a payment card on the right.

We’ll focus on configuring the Payment Button rather than rebuilding the entire section. We’ll cover PayPal’s settings first, then connect Stripe through a Payment Link, style the button, and test the completed checkout.

For PayPal, the fixed amount is entered in Divi. For Stripe, the $150 price is set on the product and Payment Link in Stripe.

Create a new page or open an existing one in the Visual Builder. Prepare your offer section, then click to add a module. Search for Payment Button and insert it where the checkout call to action should appear.

The Content tab contains the payment connection and button text. The available payment settings depend on the provider you select.

Use the Design tab to style the module.

If you already have a compatible Button Option Group Preset, apply it to reuse your site’s button styling. An Element Preset created for a regular Button Module should not be assumed to apply to a different module type.

Later in the tutorial, we’ll save a Payment Button Element Preset for reuse on other Payment Button Modules.

Configure PayPal Settings

Select PayPal as the Provider. The resource identifies the receiving account by its PayPal email address.

For the test setup, use the email associated with your PayPal sandbox business account. When you go live, replace it with your live business account resource.

Click Add under Resource.

Enter a recognizable Account Name and the appropriate PayPal Email, then click Submit. A name such as “Business Sandbox” helps distinguish the test resource from the live one.

Select Sandbox under Environment. The environment and account resource need to match: use a sandbox account for testing and a live account for real payments.

Choose between Fixed and User Defined for the amount mode. Since our offer is a $150 website audit, select Fixed, enter 150 as the amount, and choose USD as the currency.

Set the Return URL to your thank-you page and the Cancel URL to the offer page or a dedicated cancellation page. Add a description that identifies the website audit.

These return and cancellation fields apply to PayPal. Stripe’s after-payment destination is configured separately.

Configure Stripe Settings

Stripe uses the Payment Link saved as the module’s resource. Configure the product, amount, currency, and after-payment behavior in Stripe rather than relying on the PayPal settings in Divi.

Stripe can show its own confirmation message or redirect buyers to your website. For this example, we’ll configure a redirect to the thank-you page.

Create A New Stripe Product

Open your Stripe Dashboard and navigate to the product catalog. Start in a sandbox or test environment if you are setting up the checkout for the first time.

Click + Create Product.

Enter the product name, description, and image. Add the relevant category information where shown, and configure a one-time price of $150 USD for the audit. Click Add Product when the details are complete.

Create A Payment Link

In the dashboard shown here, open Payments > Checkout. Stripe’s navigation may vary by account, so you can also use its dashboard search to find Payment Links.

Open the Payment Links tab.

Click + Create Payment Link in the upper-right corner.

Keep the link type set to Products Or Subscriptions and select the product you created. The product’s one-time price determines the charge for this example.

Review the available checkout options, including tax collection and customer information. Collect the details needed for the service, such as a name and email address. Any Managed Payments option shown is a separate Stripe feature, not a requirement for connecting the link to Divi.

Open the After Payment tab. Under Confirmation Page, select the option to redirect to your site, shown here as Don’t Show Confirmation Page, and enter your thank-you page URL.

Once the settings are ready, click Create Link.

Copy the generated Checkout Link URL from the link’s details page.

Return to the Visual Builder. Select Stripe as the Provider and click Add under Resource.

Enter a recognizable Product Name, paste the Payment Link into Checkout URL, and click Submit.

Expand the Text option group in the Content tab and enter the Payment Button Text. Use a label that fits the offer, such as “Book Your Audit” or “Pay For Your Audit.”

Style The Button

The Design tab provides familiar button styling controls. Expand the Button option group to adjust its background, border, text, icon, spacing, and sizing.

Match the surrounding offer card so the payment action feels like part of the page’s design.

Use Divi 5’s state controls to configure the hover appearance. Keep the button label readable in both its default and hover states.

Once the styling is ready, click the Preset icon in the module’s header.

Choose New Preset From Current Styles.

Expand Preset Settings and give the preset a descriptive name.

Review the styles in the Design tab, then click Save Preset. Reuse this Payment Button preset for other offers, while configuring each button’s payment resource separately.

Test The Full Path

Save the page and open it outside the Visual Builder. Click the button and test the complete checkout process for your selected provider.

For PayPal, use Sandbox with a sandbox business resource, then complete the purchase using a sandbox buyer account. Test the Return URL and Cancel URL separately. Before accepting real payments, select your live business resource and switch the environment to Live.

For Stripe, use a Payment Link created in its test environment. A live link remains live regardless of the environment settings used for PayPal in Divi.

In the Stripe dashboard, open a Sandbox or Test Mode, depending on the interface available to your account.

Create a test product and Payment Link matching the offer, if you have not already done so. Save that test URL as a resource in the Payment Button Module.

Complete checkout with Stripe’s test payment details. Confirm that the displayed product, amount, and currency match the offer, then check that the after-payment redirect reaches the correct page.

Check the Stripe dashboard for the test transaction. This verifies the payment result separately from the page redirect.

When testing is complete, return to Stripe’s live environment.

Open the corresponding live Payment Link and copy its URL. If you only created the offer in the testing environment, create its live counterpart first. Leaving the sandbox does not convert a test link into a live one.

Add or select the live resource in the Payment Button Module, then save the page.

Your button is now connected to the live checkout. The same setup can be adapted for another service, a donation, or a digital offer, with fulfillment configured separately where needed.

Best Practices

A Payment Button needs both a clear design and a working checkout connection. These checks help keep the offer, payment, and next steps consistent.

Start In Sandbox

For PayPal, match the Sandbox environment with a sandbox receiving account and test buyer. Check both completion and cancellation before switching to your live resource and environment.

For Stripe, test with a Payment Link created in its testing environment. Replace it with the live link only after the test checkout and redirect work as expected.

Connect The Provider Before Publishing

A styled button is not enough to confirm that payments work. Check the selected resource and open checkout from the published page.

Confirm that the receiving account, offer, currency, and amount are correct. This is especially useful after duplicating a button or importing one of the example layouts.

Keep Checkout And Fulfillment Separate

The module connects visitors to payment, but it does not create a complete store or fulfillment system. Arrange any scheduling, ticket issuance, download delivery, or paid access separately.

If you need those processes managed within WordPress, consider WooCommerce or a suitable booking, ticketing, or membership solution. Provider-side checkout options do not automatically add those capabilities to your Divi site.

Create The Thank-You Page First

Give buyers a clear next step, such as booking instructions, delivery information, or a confirmation message.

For PayPal, set this page as the module’s Return URL. For Stripe, choose it in the Payment Link’s after-payment settings. Verify payment through the provider or your fulfillment integration before granting anything that requires a confirmed purchase.

Match The Copy To The Offer

Labels such as “Donate $25,” “Pay For Your Audit,” and “Buy The Guide” explain the action in context. Include the price near the button, and make the offer’s contents and next steps clear.

Use wording such as “Claim Seat” only when your registration workflow actually handles availability. The button label should reflect what the complete process does.

Check Completion And Cancellation

Confirm that successful checkout reaches the intended confirmation page.

For PayPal, test the module’s Cancel URL separately and send visitors back to the offer or a useful retry page. Stripe’s after-payment setting controls completed checkout, not an equivalent Divi Cancel URL. Check the return or back navigation available in your Stripe checkout rather than treating the two providers’ settings as interchangeable.

Reuse Styling With Presets

Use a Payment Button Element Preset across similar payment modules, or compatible Button Option Group Presets when sharing styling with other button elements.

Configure the payment details for each offer separately. For example, three fixed donation amounts and one custom-amount option require four buttons or an appropriate provider-side amount-selection flow. Reusing the styling should not accidentally reuse the wrong payment destination.

Download The Files

To help you get started, we’ve included a ZIP file containing the examples from this post. It includes five section layouts, plus styled thank-you and cancellation layouts that you can import into your Divi Library.

Download and extract the ZIP file. In your WordPress dashboard, go to Divi > Divi Library and click Import & Export.

Select the Import tab. Choose Payment Button examples – ALL.json to import the bundled layouts, or select an individual example file. Then click Import Divi Builder Layouts.

Once imported, create a page or open an existing one in the Visual Builder. Click the blue + Add New Section icon.

Open Add From Library and choose a layout.

Click Use This Section to add it to your page.

Replace the example content, connect your own payment resources, and update the amounts and destination URLs before publishing. Test each button using the provider-specific steps above.

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!

Accept Payments Without Building A Store

The Payment Button Module gives you a direct way to connect an offer to PayPal or Stripe checkout. It is useful for donation pages, individual services, and other paid offers that do not need a full storefront.

You design the button in Divi 5, configure the payment details for your chosen provider, and decide what buyers should do next. Presets help keep the design consistent across your pages, while your payment provider manages the transactions.

Start with one of the included layouts, connect your own resource, and test the checkout before going live. If the offer also needs delivery, scheduling, or access management, connect that part of the workflow as well.

What would you use the Payment Button Module for? Let us know in the comments.

The post Exploring Divi 5’s New Payment Button Module appeared first on Elegant Themes Blog.

Below, we’ll build a product grid that shoppers can search by keyword and narrow by category and price. Along the way, we’ll look at other controls you can add, including stock status, review ratings, product attributes, and sorting by price, popularity, or rating. You’ll need Divi 5, WooCommerce, and a few products in your catalog.

Prepare Your Product Catalog

WooCommerce must be installed and have products ready to display before you begin. If you need help with that, our guide to installing WooCommerce covers the setup, and the Divi and WooCommerce integration page explains how the two work together.

Filters use data that already exists. If you want shoppers to filter by category, color, or size, the relevant categories and attributes need to be assigned to your products. Adding a filter control does not create that underlying information.

Before building, confirm that your product categories contain products. For global attributes, define the terms and assign them to the appropriate products. A range of prices makes it easier to demonstrate the price slider, while products with different review ratings help you see how a rating filter affects the results.

Sorting also depends on the available data. For example, Popularity (Sales) uses sales counts. Products with no sales can still appear, but a catalog where every product has the same sales count will not produce a meaningful popularity ranking.

Build A Product Loop

Divi includes several WooCommerce Modules for displaying product information throughout your store, including in Theme Builder templates. For this tutorial, we’ll use individual Image, Heading, Text, and Button Modules, then enable a Loop on their parent container.

This approach gives us control over the product card’s structure. We can decide which information to show, how to arrange it, and which parts need their own layout before connecting the modules to product data.

If you would rather start with a finished card design, 12 Shop Loops For Divi 5 includes twelve free product-grid layouts. Import the JSON under Divi > Divi Library, add a layout to your page, and continue with the query settings below.

Either way, build the Loop first and connect the Post Filter Module afterward. This tutorial uses a custom Divi product Loop rather than the standard WooCommerce shop grid.

Build The Product Card

Open the page in the Visual Builder and add a Row or Group to hold the grid. Inside it, add a second container for the product card.

Select the outer container and switch its Layout to CSS Grid. The outer container arranges the repeated cards into columns, while each inner card remains one unit. Set the column count and gaps to suit your design.

Inside the card container, add an Image Module for the product photo, a Heading Module for the title, a Text Module for the price, and a Button Module linking to the product.

We’ve also added Group Modules to organize parts of the card. These let us arrange selected elements horizontally while keeping the overall card vertical. You can adjust that internal structure without changing how the outer grid arranges the cards.

Enable The Loop And Set The Query

Remove any unused Columns from the grid so only the intended card structure remains. Then select the card’s own container, the one holding the Image, Heading, Text, and Button Modules, and enable its Loop.

Set Query Type to Post Type, choose Products as the Post Type, and set Posts Per Page to the number of products you want to show before pagination.

Pagination is handled by a separate module. A Pagination Module connected to the same Loop follows its active filters and returns to the first page when they change. Our guide to using the Loop Builder and Pagination Module together covers that setup.

Once the query is set, Divi repeats the card container for the products it returns. The outer grid handles their arrangement, so you do not need to duplicate the card manually.

Bind The Modules To Dynamic Content

Next, connect the modules inside the card to the current product’s data. Open each module and use its dynamic content options to assign the appropriate value:

• Image: The product’s featured image.
• Heading: The product title.
• Text: The product price.
• Button Link: The product URL.

Set the Button’s text separately to the label you want shoppers to see.

Each repeated card receives the data for its own product. A Heading connected to the product title displays the correct name in every card, while the Image and price update in the same way.

You configure the structure and dynamic connections once. Changes to that shared card design then apply across the products displayed by the Loop.

Label The Loop

Give the two containers distinct labels under Meta > Element Label. Use Product Grid for the outer container and Product Card for the inner container with the Loop enabled.

The Post Filter Module’s Target Loop dropdown identifies Loops by their Element Labels. For this setup, the filter should target Product Card, because that is the element repeating for each product.

Clear labels become especially useful on pages with several Loops. They also help you identify elements in the Layers Panel and when choosing targets for Interactions.

Connect The Post Filter Module

With the product Loop in place, add a new one-column Row above the grid and insert a Post Filter Module. Keeping the form in its own Row means the grid’s layout does not need to account for the filter controls.

The starter form includes a Search field, a Category checkbox list, a Reset button, and an Apply button. Until you choose a target, the module displays a Select a Loop message.

Open Content > Target and set Target Loop to Product Card, using the label assigned to the looped container.

Two additional settings control how the form works:

• Apply Mode: Submit waits for the shopper to click Apply. Auto applies changes as a field is adjusted.
• Relation: And requires all active filter conditions to match. Or allows products matching any active condition.

For this build, use Auto and And. This lets shoppers combine a search term, category, and price range to narrow the grid.

The example removes both buttons for a compact form. The Apply button is unnecessary in Auto mode, but Reset can still provide a convenient way to clear selections. Keep it if you want that option available to shoppers.

One Post Filter Module can contain the different field items needed for this form. We’ll keep them together here, with the parent module controlling the target and the relationship between the active filters.

Set Up The Filter Items

With the buttons removed, the Search and Category items remain. The default Search field searches product titles and content. It does not automatically search every value displayed on a card, so use dedicated controls for categories, attributes, and price.

The Category item initially refers to standard post categories. Open it and change Field Option to Product Categories so it matches the Products query used by the Loop.

Check that the displayed options now correspond to your product categories. If they do not, confirm both the field’s source and the products assigned to those categories.

Add The WooCommerce Filter Items

When targeting a WooCommerce product Loop, you can use three product-specific field types:

• Price Range: Gives shoppers a slider for narrowing products by price.
• Stock Status: Filters by availability, including in stock, out of stock, and on backorder.
• Review Rating: Filters products by star rating.

These controls use the information saved with your products. For this build, we’ll add only the Price Range slider, but you can include the others when they are useful for your catalog.

Click Add New Post Filter Item, set Field Type to Price Range, and enter Price as its label. Check the displayed price bounds against your catalog before moving on.

Filter By Attributes, Tags, And Custom Fields

Attributes help shoppers compare products by details such as size, color, or material. For example, a jacket catalog may benefit from size and color filters alongside its product categories.

Use global product attributes with terms assigned to the relevant products. Filtering the grid helps shoppers find matching products; selecting a specific variation still happens through the product’s variation controls.

To add an attribute filter, create a Post Filter Item, set Field Type to Checkbox, and choose the attribute under Field Option. Checkboxes allow shoppers to select multiple available values.

The same general setup applies to product tags and shipping classes: create a separate item and select the corresponding source under Field Option.

Custom fields can provide additional filtering criteria. Choose the relevant field source and make sure the filter values match the data saved with your products. The field type and comparison should suit that data, particularly when working with numeric values.

We are leaving these optional controls out of the finished example. Its search field, product categories, and price slider are enough to demonstrate the setup without making the form unnecessarily long.

Let Shoppers Sort The Grid

Sorting changes the order of the products returned by the Loop. An Order By item lets you choose which sorting options shoppers can use. For a product Loop, these include Price, Popularity (Sales), and Rating, alongside options such as title and date.

An Order item gives shoppers ascending and descending choices. A Multiple Order item lets them combine up to five sorting rules.

Sorting reads the underlying product data rather than the visible card content. For example, shoppers can sort by rating even if your card design does not display a rating.

We are not adding sorting to this particular form, but these items are available in the same module when your product grid needs them.

What Happens When A Filter Is Used

The form applies its active conditions to the selected Target Loop. With And selected, a shopper can enter a keyword, choose a category, and adjust the price range to display products matching those conditions together.

Apply Mode determines when those changes take effect. In Auto mode, filters apply as the shopper adjusts the fields. In Submit mode, shoppers can make several selections before clicking Apply.

A separate grid with a different target is not controlled by this form. That distinction lets you place multiple collections on a page without making every filter affect every Loop.

The example also shows active filters in the page URL. This makes filtered views useful beyond the current browsing session: shoppers can bookmark a selection, and you can share a link to a specific set of results.

For example, a link to tents within a particular price range can lead to the same grid with those filters already applied. Open a copied filtered URL in a new tab to confirm that it restores the intended selection.

Before styling the form, try the controls individually and together. Confirm that the results match your catalog, then clear the selections to return to the unfiltered view.

Style The Filter Form

The parent Post Filter Module’s Design tab provides shared styling for the form’s items. Its layout settings control the overall arrangement, while groups for fields, options, checkboxes, radio options, and buttons let you style the controls within it.

For this example, we use off-white backgrounds, thin borders, and consistent label colors to connect the form visually with the product grid.

To reproduce the demonstrated arrangement, use a Flex layout with wrapping enabled. Each Post Filter Item has its own Column Class under Sizing, which determines its share of the available width.

Set Search to full width, Product Categories to one-third, and Price to two-thirds. This places Search on its own line, with categories and price sharing the line beneath it.

A Size of Shrink to Fit can make an item follow its content width. Use it where that suits the layout, while leaving enough space for the price slider to remain comfortable to use.

Style Every Field In One Pass

With the arrangement in place, open the parent module’s Field group. Set the background color, border width and color, and corner radius.

These shared settings help the search field, category control, and price slider feel like parts of the same form. You can establish the common styling here before adjusting any individual exceptions.

Next, adjust the field padding and label typography. Padding gives the controls enough space, while the Label Text group controls font weight, color, and line height.

A slightly heavier label can distinguish it from input text without overpowering the form. If your chosen font supports variable weights, Divi 5 lets you choose a weight between the usual regular and bold values.

Individual Post Filter Items also have their own design settings. Use those when one item needs to differ from the shared parent styling, rather than configuring every field separately from the start.

You can save reusable styling as Option Group Presets and apply it to other forms. This is helpful when several filtered grids should share the same field and label design.

Set The Filter Layout For Small Screens

The one-third and two-thirds arrangement works on wider screens. On a phone, give the category and price items their own lines so neither control feels cramped.

Switch to the phone breakpoint and set each item’s Column Class to full width. Search, categories, and price will then stack vertically.

Check the product grid’s responsive column count at the same time. The form and cards should remain easy to use together, with readable text and enough space for the slider and category options.

Build A Product Grid Shoppers Can Explore

Your product grid in Divi 5 now lets shoppers search by keyword, choose a category, and narrow the price range. The Loop Builder handles the repeated product cards, while the Post Filter Module controls which products appear. This setup uses Divi and WooCommerce without a separate filtering plugin.

You can build on the same foundation with attributes, stock status, ratings, and sorting when they are useful for your catalog. Start with the controls shoppers need most, then add others as the product range requires them.

The Loop Builder also supports other data sources, including custom post types and custom fields. The same general approach can be used for other filterable content, while WooCommerce provides the product-specific controls used in this tutorial.

The post How To Build A Filterable WooCommerce Product Grid In Divi 5 appeared first on Elegant Themes Blog.

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.