In this tutorial, we’ll create a decorative leaf, refine it in the same conversation, and cover the prompt details that help preserve your design as you make changes.

What An SVG Is And Why Icons Use It

SVG stands for Scalable Vector Graphics. A JPEG stores an image as a grid of colored pixels. Enlarge it enough, and those pixels become visible. An SVG describes shapes and paths with coordinates, allowing the browser to render vector artwork at different sizes without pixelation.

That makes SVG useful for logos, icons, dividers, and badges. Simple vector artwork can scale across screen sizes and use colors defined in the markup or through styling.

Divi 5’s SVG Module accepts pasted SVG code or an uploaded SVG file. Its Design tab includes Fill and Stroke controls for styling the graphic. Module-level styling can override corresponding values in the SVG markup, so check both when a color or stroke does not look as expected.

The Content tab also includes a Title field for graphics that convey meaning. Decorative graphics need different accessibility treatment, which we’ll cover later.

WordPress blocks SVG uploads by default. That restriction affects the uploaded-file workflow, but you do not need to enable uploads when using the module’s SVG Code source.

What Divi AI Agents Do On The Canvas

Divi AI Agents can inspect your layout and make changes directly in the Visual Builder. Describe what you want and identify the element the agent should work with.

While it works, the agent displays progress notes. Actions that require approval pause with Approve and Reject controls. The agent also requests approval before saving the page.

Review the result before saving. If you want to revert a change, open the Page Menu using the gear icon at the top left and choose Undo. The conversation also provides a restore control for returning the working layout to an earlier point. Restoring the layout does not save it automatically.

Divi AI Agents is included with Divi AI and Divi Pro. Agent requests use the AI Wallet, which currently includes $5 in monthly agent usage. This balance is separate from the subscription’s unlimited text, image, code, and layout generation outside the agent. For details, see our AI Wallet guide.

How To Create An SVG With Divi AI Agents

Start with a page that already contains the column and text you want to decorate. We’ll place a leaf above an existing Text Module, then refine its appearance without changing the surrounding content.

Open Divi AI Agents In Build Mode

Open the page in the Divi 5 Visual Builder and click the AI Agent icon in the sidebar. Sign in to your Elegant Themes account if prompted.

Check the mode control at the bottom of the chat panel. Ask is for questions and inspection; Build allows the agent to change the layout. Select Build for this tutorial.

Describe The Graphic

Your request needs to explain both what the SVG should look like and where it should go.

A request such as “add a decorative leaf” leaves its shape, colors, line weight, and level of detail open to interpretation. Specify the features that matter to your design, including anything the agent should avoid.

For this example, we want a simple outline graphic: tall, sweeping curves, visible gaps between strokes, and no filled areas, gradients, or shading.

Attach The Column As Context

Instead of relying on a description such as “the left column,” identify the target column through Context.

Select the column on the canvas and check that the agent’s selected context identifies the intended element. You can also click the Context icon in the chat composer, find the column under Elements, and attach it. Typing @ opens the same picker.

Confirm the attached element before sending your request. Context identifies the target; your prompt still needs to explain what the agent should add and where inside that target it belongs.

If you want to use a saved color variable, attach it through the Variables group as well. Our example uses a variable named Light. Substitute one of your site’s existing variables or provide a specific color if that variable does not exist.

Write The Prompt

With the column and color variable attached, send a request like this:

The prompt defines the shape, stroke treatment, color, size, and placement. It also tells the agent what to preserve.

For outline artwork, Stroke controls the visible lines. Fill colors the interior of a shape and can produce unwanted filled areas, even when a path is open. Asking for no fill keeps this example focused on line art.

The color variable gives the agent an existing design value to use. Check the result against its background to confirm that the strokes remain visible.

Once the graphic appears, open its SVG Module to confirm that it contains editable SVG code. You can refine it through the chat or use the module’s settings.

Refine The SVG In The Same Chat

Review the icon beside the text and at its intended display size. You may want to change its size, stroke thickness, or angle.

Continue in the same conversation, but name the changes and the properties that should remain unchanged. The conversation provides useful context; it does not remove the need to review each result.

For a single icon, select or attach its SVG Module. For a batch edit, select or attach the containing section and make sure an earlier Scope is not still limiting the request to one column or module.

A batch request could read:

Check the rendered result rather than relying only on the agent’s summary. In our sandbox test, increasing Width from 120px to 144px initially left the icon at 120px because Max Width still capped it. Updating Max Width allowed the larger size to appear.

If an edit does not look right, check the module’s Design → Sizing settings. Also check its Stroke settings: the visible stroke may come from a module-level override rather than the value written inside the SVG.

Preview the result on smaller screens before saving, particularly if the icon sits beside text or inside a narrow card.

Mark Decorative SVGs For Screen Readers

Decide whether the SVG conveys information or simply decorates the page.

Our leaf is decorative: removing it would not change the meaning of the surrounding content. Screen readers should skip it. You can describe that goal to the agent without writing the attributes yourself:

In our test, the resulting SVG retained aria-hidden=”true” and focusable=”false” after refinement.

A meaningful graphic needs different treatment. Give it an appropriate accessible name and verify the result. A linked logo or icon-only button also needs a clear name for its destination or action; do not hide the interactive element itself.

The SVG Module’s Content → Title field and Advanced → Attributes settings can help with manual adjustments. However, a title or hover tooltip alone is not a complete accessibility check. Review how the graphic is exposed to assistive technologies.

Edit SVGs You Already Have

Divi AI Agents can also help refine SVGs from an existing project. The most predictable requests make small, specific changes while preserving the original geometry.

Select or attach the SVG Module you want to edit. For the most direct code-editing workflow, use the module’s SVG Code source and paste the complete SVG markup. Use trusted SVG code; if you choose the uploaded-file workflow, use a process that sanitizes the file before upload.

For an existing line-art icon, try:

Adapt the request to the artwork. A filled icon may need a Fill adjustment, while an outline icon needs a Stroke adjustment. Changing the stroke width will not thin a shape whose outline was drawn as a filled path.

Review the graphic at desktop and mobile sizes, check its colors and accessibility treatment, and save the page once you are happy with the result.

Create Custom SVGs With Divi AI Agents

Creating an SVG starts with a clear description of its shape, style, and placement. Attach the right element as Context, define the details that matter, and use follow-up prompts to refine the result while preserving the parts you want to keep.

Start with a simple icon in an existing layout. Check its appearance, sizing, and accessibility before saving, then apply the same approach to other graphics. With Divi AI Agents and the SVG Module, you can create and refine vector artwork directly in the builder while keeping its code editable.

The post Creating Custom SVGs with Divi AI Agents appeared first on Elegant Themes Blog.

With Components and Slots in Divi 5, you can combine those two levels of reuse. Put a card Component inside a Slot belonging to a larger section Component. The section controls its shared structure, the card controls its own shared design, and each page instance supplies its content.

We’ll build a pine-green resource collection with peach cards, oversized serif headings, and editorial images. Its first instance contains two resource cards. Its second contains a checklist card beside a newsletter block. All three cards remain connected to one card source.

How Components Inside Slots Work

A Component has a saved source and connected instances. The source defines the settings those instances share. A Slot provides a place for an instance’s own child elements within that shared structure. Those children can include another Component, which retains its connection to its own source.

Our example has three editing scopes:

• The outer Resource Collection source controls the pine background, shared introduction, divider, resource Row, and Slot positions.
• The inner Resource Card source controls the image treatment, peach surface, spacing, corners, typography, and button styling.
• The page instance controls what appears inside Left Content and Right Content, including each card’s permitted content overrides.

The two Slots make this distinction visible. A right-hand card can be replaced with an ordinary newsletter Group in one instance without replacing the outer Component.

Download And Import The Starter Layout

Download the files below and unzip the package. It includes a starter layout, a finished layout for comparison, and the three full-size cover images.

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!

Use nested-components-starter.json to follow the tutorial. It contains the styled pine-green Section, its header and two-column resource Row, and one ordinary resource card Group. It contains no saved Components or Slots, so you can create both sources yourself.

1. Create a new page and enable the Divi 5 Visual Builder. Use a blank page if you want the example without your site’s header and footer.
2. Open Import & Export from the Page Menu, or press Ctrl + Shift + P. Select the Import tab.
3. Choose nested-components-starter.json. Enable Replace Existing Content only on this new practice page, then click Import Divi Builder Layout.
4. Wait for the imported design to appear and save the page. Expand its Layers to locate the existing card Group in the left resource Column.

For the completed example, import nested-components-finished.json on a separate page with Import Components enabled. This imports the connected section and card sources along with their local Slot content. Use the starter file for the walkthrough below.

Prepare The Pine-Green Base Design

Open your page in the Divi 5 Visual Builder. Use the stacked-layers icon in the left sidebar to open Layers. Expand the arrows beside elements to inspect their children.

The imported starter already has the following base design. If you are building your own version, start with a regular Section containing two Rows. The first Row is the shared header. Use a wider left Column for a small label and a large Heading, and a narrower right Column for the description. Add a thin divider beneath this Row. The second Row contains two equal Columns for the resources.

Add a short introductory label, a prominent Heading, and a brief description suited to your resource collection.

Keep the design finished before turning it into Components. These are the main visual settings used here:

• Section: Pine green #073E31, with generous vertical spacing.
• Rows: 90% width and a 1200px maximum width, with 24px between resource columns.
• Header: Cream text, a large Georgia Heading, and a subtle cream divider.
• Card: Peach #F4B899 initially, with 4px corners and an image flush with its edges.
• Card content: 24px side spacing, about 14px between elements, and dark green text.
• Card image: Full-width landscape artwork with a consistent 3:2 crop.
• Card button: An underlined text link.

At phone widths, stack the header Columns and resource Columns vertically. Let headings scale down and allow descriptions to wrap naturally. Keep the card styling on the card Group and its children; the outer Section should supply the frame around those cards.

1. Save The Inner Resource Card

If you imported the starter, use its existing card Group; do not add a second card. If you are starting from scratch, select the left resource Column and open Content > Elements > Add Element. Choose Group, then use that Group’s own Elements list to add these five modules in order:

1. An Image module for the resource artwork.
2. A Text module for the category label.
3. A Heading module for the resource title.
4. A Text module for a short resource description.
5. A Button module linking to the resource.

Apply the card design to this Group. Keep its outer padding at zero so the image reaches the edges, then give the text and button their inset spacing. Use full-size artwork rather than a small thumbnail, and give each resource image a suitable text alternative.

Select the complete Group in Layers. Open the Component menu beside its name and choose Save as Component. Name it Resource Card, keep Save As Component enabled, and click Save To Library.

Expose The Card Content That Can Vary

Open Components from the left sidebar, expand Group, and click the pencil beside Resource Card. This opens its source settings and Component Preview.

In the source Group’s Content > Elements list, use the Image module’s pencil to open its settings. Expand Content > Image and use the field control labeled Make this field editable on component instances.

Return to the Group using the settings breadcrumbs. Open each remaining child with its pencil and expose these fields:

• Category Text: Open Content > Text and make Body editable.
• Heading: Open Content > Text and make Heading editable.
• Description Text: Open Content > Text and make Body editable.
• Button label: Open Content > Text and make Button Text editable.
• Button destination: Open Content > Link and make Button Link URL editable.

Return to the root Group using the settings breadcrumbs before saving. Keep the card’s design settings synchronized. Leave the card Group’s overall child collection shared as well; we want instances to change the content within this fixed five-module structure. Save the source and confirm the site-wide update.

An exposed field can continue inheriting its default until an instance receives a local value. Making the Heading editable allows another card to use its own title while retaining the source Heading’s design.

2. Save The Outer Resource Collection

Close the source editor. Remove the temporary card placement from the resource Column while keeping the saved Resource Card source. If you created a second ordinary card while refining the design, remove that placement too. Keep both resource Columns and the finished header.

Select the outer Section in Layers. Choose Save as Component from its Component menu, name it Resource Collection, keep Save As Component enabled, and click Save To Library.

You now have two separate sources: one for the full section and one for the card. Next, give the section designated places for instance content.

3. Add Two Slots To The Section Source

In the Components sidebar, expand Section and click the pencil beside Resource Collection. In its source Content > Elements list, open the second Row using its pencil. Open that Row’s left Column through its Elements list.

Under the Column’s Content > Elements, click Add Element and choose Slot. The Slot belongs inside the resource Column, beneath the shared header Row.

In the Slot’s settings, open Content > Meta > Element Label and enter Left Content. Under Content > Elements, use the synchronization control labeled Make child elements editable on component instances. Leave the source Slot empty.

Return through the breadcrumbs to the resource Row, open its right Column, and repeat. Name this Slot Right Content and enable its child collection for instance editing too. Return to the root Section using the settings breadcrumbs, then save and confirm the source changes.

Keep both Slots transparent and free of card-style padding. Their children supply their own surfaces and internal spacing. In the outer source preview, the shared header remains visible while the resource Slots have no local children.

4. Place Connected Cards Inside The Local Slots

Close the source editor and select Left Content beneath the page’s Resource Collection instance in Layers. Open the Slot’s own Content > Elements list and click Add Element.

In New Module, search for the exact name Resource Card and select its saved Component tile. Repeat from the local Right Content Slot to place the second card.

Check the placement before editing. Layers should show Section > resource Row > Column > Left Content > Group, with the card Group indented beneath the Slot. The Group’s Component controls should identify Resource Card as its source.

A Group at the same indentation as the Slot is a sibling, not its child. Using the Slot’s Elements list avoids this ambiguity. If that list is unavailable in instance mode, revisit the Slot in the outer source and enable child editing.

5. Give Each Card Its Own Content

Keep the left card’s source content. For the right card, expand Right Content > Group in Layers. Double-click each child module to open its instance settings and update:

• Image: The website-planning laptop artwork from the included images folder. Upload it to the Media Library and select Full Size.
• Category: Change the category label to match the resource.
• Heading: Change the resource title.
• Description: Add a short description of the resource.
• Button Text: Adjust the call to action as needed.
• Button Link URL: Your website-planning resource destination.

These edits belong to the nested card instance. Do not open the shared source just to change this card’s title or image.

The demonstration uses placeholder anchor links. Replace them with real resource URLs, or create matching anchor targets, before using the page for navigation.

6. Create A Different Composition In A Second Instance

In Layers, right-click the connected Resource Collection Section and choose Duplicate Section to create a second instance. Duplication carries its current local Slot content with it, so review both Slots before changing the composition.

In the second instance’s left card, change the category label, title, and description to introduce a different resource. Replace the image with the full-size checklist artwork and update the resource link.

Select the second instance’s Right Content Slot. In its own Elements list, remove the copied card placement. This removes that local child without deleting the saved card source.

Create an ordinary Group for the newsletter content. Add a Heading for the signup title, a Text module with a short description, and your form. Use cream text against the pine background and a peach submit button; keep the Group’s background transparent.

Use Right Content > Content > Elements > Add Element > Group to create the container. Open that Group’s own Elements list to add its Heading, Text, and form. If you reuse an existing newsletter Group, insert it inside this Slot and check that Layers shows Right Content > Group > Heading, Text, Contact Form.

To reproduce the illustrated form, add a Contact Form module inside the newsletter Group. In its Elements list, remove the Name and Message fields and keep one Email field. Set that field’s type to Email, give it a clear email label, and set its width to full width. Choose a suitable signup label for the submit button. Style the field with a transparent background, a subtle cream border, and cream text. Give the button a peach background and dark green text. In Phone settings, make the field and submit button full width so they stack.

The illustrated form uses an email-only Contact Form module to show the layout. It is not connected to a newsletter mailing list. For a working signup, configure an appropriate Email Optin integration and its provider before accepting subscriptions.

The result demonstrates the purpose of the Slots: the first section holds two connected cards, while the second holds one connected card and a local newsletter Group. Both sections retain the same outer source.

7. Update The Shared Card Design

Open Components > Group in the sidebar and click the pencil beside Resource Card. Use this source entry point when updating the reusable design.

Under the source Group’s Content > Background, change Background Color from #F4B899 to the lighter peach #F6C4A8. Keep this field shared. Save, then confirm the message that the change will update instances across the site.

Save the page and reload its front end. All three connected cards should use the new peach surface. Their different images, categories, titles, descriptions, and links should remain intact. The local newsletter Group should retain its own appearance.

The shared section and card remain separate maintenance points. Use Resource Collection for the surrounding structure, Resource Card for the card design, and page instance settings for the local content. Detaching a Component breaks that connection, so keep the instances connected for this example.

Source edits use the bottom Component Save button and its confirmation. Local Slot content and card overrides use the page’s top-right Save button. Save both contexts when your work includes both types of change.

8. Check The Saved Layout On Smaller Screens

Use the builder’s device controls to check both Tablet and Phone previews. Inspect a narrow phone width such as 390px. Check the full layout, not only the first card: the header should stack, resource cards should fill their columns, and the newsletter should follow the checklist card in the second instance.

Confirm that headings and descriptions wrap without horizontal overflow, images remain sharp, and the form field and button have comfortable widths. Save the page, reload the front end, and check that both local compositions survive the reload.

Build Flexible Layouts With Nested Components

Our resource collection combines a shared section with reusable cards and local newsletter content. The outer Component maintains the frame, its Slots make room for different compositions, and the nested cards keep their own shared design.

Start with a section you reuse, identify the areas that need different modules, and add named Slots to those areas. Place connected Components inside them when those smaller elements should share future design updates. For more examples, explore our guides to Components and Slots in Divi 5.

The post Components Inside Of Components Using Slots appeared first on Elegant Themes Blog.

Create spacing relationships that stay connected as your design changes. Build fluid sizes from shared minimum and maximum values. Mix reusable text, dynamic content, and your own words in the same field.

This expands on Design Variables and works alongside Relative Colors, turning reusable values into the building blocks of more connected designs and content.

Let’s take a look at how it works. 👇

Create Design Relationships With Variable Math

A number variable can now be part of a calculation. Insert your variable into a supported number field, then combine it with other values using addition, subtraction, multiplication, or division.

Imagine a section with padding controlled by a Spacing variable. You want an image inside that section to extend beyond its edge. Use the same variable multiplied by -1 for the image’s margin, and those two settings stay connected. Adjust the original spacing, and the negative margin follows.

You can use the same approach to create related values throughout a design:

• Give a large card twice your standard padding.
• Set a smaller gap to half your base spacing.
• Subtract a shared gutter from a container’s width.
• Offset an element using a calculation based on its surrounding spacing.

You decide whether a relationship belongs in one field or deserves its own reusable variable. A one-off adjustment can stay with the element, while a frequently used calculation can become part of your website’s sizing system.

Build Variables From Other Variables

Variables can now contain other variables, including references inside number functions and combinations inside text variables.

Open the Variable Manager from the builder’s sidebar and edit a number or text variable. Its value field now includes variable insertion controls, allowing you to build a value from other variables rather than repeating their contents.

Create Fluid Sizes With Shared Limits

Divi’s Advanced Units already support functions such as clamp(). This update lets you insert number variables into those functions using editable chips.

For example, create Minimum Heading and Maximum Heading variables, then reference both inside a Fluid Heading variable using clamp(). The middle value controls how the heading scales with the viewport, while your shared variables establish its limits.

Apply Fluid Heading wherever you need that size. When your client requests a larger maximum heading size, change the source variable, and the dependent value will follow.

The function remains accessible through the field’s unit selector, and its arguments remain editable around the variable chips.

Assemble Reusable Text

Nesting also works with text variables.

Create Legal Name and Year variables, then nest them inside a reusable Copyright text variable: “Copyright © [Year] [Legal Name]. All rights reserved.”

Reuse the Copyright variable in footers and other areas across your website while keeping its individual pieces centrally managed.

When you update the Legal Name or Year variable, the change carries through to the parent Copyright variable and every place it appears on your website.

Combine Variables, Dynamic Content, And Your Own Words

Both normal and rich text fields can now contain dynamic content and variables intermixed with static content.

A blog post info section is a simple example: type “By,” insert the post’s author from the dynamic content menu, then add the publish date and comment count with your preferred text and separators. You can build a line like “By Jane Smith · October 27, 2026 · 12 Comments” in a single Text Module. Each dynamic source stays independently editable inside the same field.

Place your cursor where the next source belongs, open Insert Dynamic Content, and choose it. You can also highlight existing text before choosing a source to replace just that selection.

In rich-text fields, the surrounding formatting stays part of your content. Bold the author’s name or italicize the date while combining several dynamic content chips instead of assigning one source to the entire field.

This also works in Loop Builder, where the same post info line can display each post’s author, publish date, and comment count while keeping your text, separators, and formatting intact.

Improved Variable Chip UI

We’ve improved Divi’s variable chip UI to make it easier to insert, rearrange, and edit multiple variables within a single field.

Easily Insert, Move, and Manage Variables Within Text Fields

Working with several variables should feel like editing one coherent value. Each source now appears as its own chip, so you can interact with the piece you want to change.

• Click a chip to open options for that occurrence.
• Replace, remove, or detach one source while preserving the surrounding content.
• Drag chips to a new position within ordinary inline fields.
• Select the text for replacement, then continue typing around existing chips.
• Hover over chips to inspect their values or nested expressions.

Variable picker previews also show nested references as readable chips. Search can match the names of referenced variables, making composed values easier to find.

Insert Variables From The Keyboard

Type {{ in a supported text, URL, or CSS number field to open the picker at your cursor. Choose a source, then continue editing after the inserted chip.

It’s a convenient shortcut when you’re assembling a sentence or adding several variables to a calculation.

Did You Miss Divi 5’s New Icon Manager?

We recently introduced the Icon Manager for Divi 5, a central place to import custom SVGs and icon fonts, organize them into collections, and choose which collections appear while you build.

Create a collection for your client’s brand, organize your favorite icons, and select them directly from Divi’s icon picker. Check out the announcement for a full walkthrough!

More Divi 5 Updates Are On The Way

The features keep coming, and we aren’t slowing down anytime soon!

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 Nested Variables, Variable Math & Variable Combinations for Divi 5 appeared first on Elegant Themes Blog.

Clear direction helps it produce a useful first pass. Name the outcome, identify the target, and explain what should stay unchanged. Without that guidance, the agent has more decisions to infer, and the result may need more cleanup.

In this post, we’ll explain which controls shape the work, then walk through ten best practices for steering Divi AI agents toward the result you have in mind.

What Are Divi AI Agents?

Divi AI agents brings a conversational assistant into the Divi 5 Visual Builder. You describe what you want, and the agent can add, edit, move, and style elements, update design settings, and coordinate changes across the layout. It can also use a screenshot, a public URL, or other reference material as direction for what to build.

Supported attachments include JPEG and PNG images, TXT, HTML, and CSV text files, and font files. PDFs, Markdown, JSON, XML, YAML, and source-code files are not accepted as attachments. Video and audio cannot be attached to the chat. If your brief or brand guide is a PDF, paste the relevant text into the prompt or save it as a TXT or HTML file before attaching it.

Divi AI agents is part of Divi AI, but its workflow differs from the other generation tools. Divi AI can generate text, images, code, sections, and full layouts through dedicated controls. The agent adds a conversational workflow that can read page context and coordinate changes across multiple elements. You can discuss the work, refine the request, and continue editing the result in the builder.

To use the agent, you need Divi 5 and an active Divi AI subscription, which is also included with Divi Pro. Agent usage is metered separately from Divi AI’s other generation tools. Requests draw on your AI Wallet, and your subscription includes $5 in agent usage each month.

Divi AI Agents Features

The chat window gives you controls for the agent’s mode, context, reusable instructions, and model choices. Understanding these controls helps you give clearer direction before sending a request.

Ask Mode And Build Mode

The Change Mode control lets you switch between Ask and Build.

Ask uses available page context and Divi documentation to answer questions, explain settings, and suggest an approach. It does not make changes to your site.

Build plans the request and carries it out. It can add, edit, move, and style elements, work with Presets and Design Variables, and operate the builder on your behalf.

Use Ask when you want to understand an unfamiliar page, discuss a design change, or clarify how a setting works. Switch to Build when you are ready to apply the change.

Context, Attachments, And Scope

Context helps identify the exact element or resource you mean. Instead of asking the agent to change “the button,” add the relevant element to your message. You can choose it from the Context picker or select an element on the page. Typing @ in the chat opens the picker.

When a picture explains more than a paragraph, attach a screenshot or mockup. For a public webpage reference, paste its URL into the message. You can also scope a conversation to an element so follow-up requests stay focused on that part of the page. Check the selected scope before sending a request, and include only the context the task needs.

Rules

A Rule is standing guidance you save for later conversations. Use it for instructions you regularly repeat, such as your brand voice, spacing standards, or a preference for existing Design Variables.

Turn on Always Use for guidance that should be included in every conversation. Use When To Use to describe when a conditional Rule applies. The agent uses that description to decide whether the Rule is relevant to the task.

A Rule describes how you want work done. A Command stores a task you want to repeat.

Commands

If you regularly use the same request, save it as a Command. Retrieve it by typing / in the chat or choosing it from the Commands icon. The saved instruction is inserted into your message so you can review it, add page-specific details, and then send it.

You can attach context to a Command, such as a Preset or Variable. Keep its scope explicit: a reusable instruction that says “on this page” targets the page where you run it, rather than the page where you originally wrote it. If the Command includes a specific resource as context, check that the reference still suits the current task.

These Commands live inside the agent chat and are separate from the Divi 5 Command Center.

Tools, Approvals, And Working Notes

The Tools icon opens a searchable catalog of purpose-built actions for Divi and WordPress. Browse the catalog to understand the available capabilities, or add a specific tool as context when you want the agent to use it.

The catalog also lets you filter tools by risk level. Safe actions do not require confirmation. Moderate actions ask for approval only when the individual tool is configured to require it. Destructive actions always require confirmation before execution.

When an action needs confirmation, the chat displays Approval Required with Approve and Reject buttons. Saving the page is one action that requires approval. Review the requested action before approving it, especially when it affects shared resources or published content.

Page edits on the working canvas still need to be saved, but other resources can persist separately. A saved Preset, Variable, or site-level change should not be treated as temporary merely because the page itself has not been saved.

While a request runs, Working notes show progress, including thinking, tool use, and ongoing work. Longer jobs can also include a Todos list. Use these updates to follow the task, then inspect the result on the canvas.

To return the working canvas to its state before a request, use the restore control on your own message. Confirm the Restore to This Point dialog before proceeding. This also removes manual edits made after that checkpoint, so review what you would lose first. Restoring the canvas does not reverse every saved or site-level action.

Models And The AI Wallet

Your model selection affects speed, capability, and wallet spend. Divi AI agents offers four automatic tiers, with Auto Value selected by default. These are configurations for the models used behind the scenes, rather than four permanent model assignments.

• Auto Value: Prioritizes low cost for everyday work, including copy tweaks, alt text, and small additions.
• Auto Balanced: Offers a middle ground between cost and capability for several coordinated settings or steps.
• Auto Deep Value: Prioritizes more careful reasoning at a moderate price.
• Auto Premium: Prioritizes capability over price for demanding layout and design work.
• Custom: Lets you choose models for the Planner, Agent, Layout, and Ask roles individually.

Match the tier to the job rather than leaving a premium option selected for every request. Your subscription includes $5 in agent usage each month. Unused complimentary funds do not roll over, and you can add funds through your Members Area or the wallet in the agent interface.

10 Best Practices For Steering Divi AI Agents

A useful prompt explains the desired result, identifies the target, and sets clear limits. Context, Rules, and Commands help you carry that guidance into the conversation without repeating every detail. The following practices show how to put those controls to work.

1. Say What “Done” Looks Like

Give the agent an outcome you can check. “Make it better” leaves the design decisions open. Naming the structure you want and the content to preserve gives it a clearer task.

Weak: Make the marketing section better.

Better:

The stronger request names both the change and the elements that should survive it. After the pass, you can check whether the section uses Blurb modules and whether the original icons and copy remain intact.

2. Name The Target

“Fix the button” is ambiguous on a page with nine buttons. Add the relevant element as context, or identify its section and position in the prompt. Then explain which settings should change and which should stay untouched.

Weak: Change the button color.

Better:

Attaching the button and the relevant Variables makes the references more precise. The final sentence also limits the work to the requested color changes.

3. Keep The Scope Tight

If you want one section changed, identify that section. If you want a page-wide sweep, name the exact setting and the elements it applies to. A scoped request can cover a whole page while remaining specific about what may change.

On an established site, work section by section when the task involves design judgment. Finish the hero, then services, then the footer. Inspect the result between passes rather than combining unrelated changes into one request.

Weak: Fix the spacing.

Better:

This example is page-wide, but its scope is narrow: one setting on Columns, with the other element levels excluded. Check that the Columns use a layout where Vertical Gap applies, and review the spacing at the relevant breakpoints.

4. Ask First When You Want A Plan

Use Ask when the page is unfamiliar, the change is still taking shape, or you want to review the approach before implementation. The agent can explain the available context and suggest a plan without editing your site.

Weak: Convert static text values to variables.

Better:

Review the recommendations and correct any misunderstandings in the same chat. When the proposed changes and exclusions match your intent, switch to Build and ask the agent to carry out that plan.

Planning first can help avoid unnecessary edits, though the cost still depends on the model and processing involved. Check the implemented settings afterward rather than relying only on the agent’s completion message.

5. Point The Agent To A Preset

Context can identify both the element you want edited and the style you want applied. Attach an existing Module Preset or Option Group Preset so the agent can work from its saved settings.

Open the Context picker, search or browse by type, and add the Preset before sending the request. Typing @ opens the same picker.

Weak: Make these cards look like the other cards, with the same styles, including the headings, body text, and colors.

Better:

After the pass, check that the intended Preset is assigned, the content is preserved, and local overrides are not preventing the expected styles from appearing. Matching the appearance alone does not establish that the Preset was applied.

You can also attach a Preset to a Command or Rule so reusable instructions point to the saved resource.

6. Teach The Agent Your Standards With Rules

Use Rules for guidance you regularly repeat, such as your preferred Presets, writing voice, spacing scale, or accessibility practices.

Turn on Always Use for instructions that should accompany every conversation. Use When To Use to describe the tasks where a conditional Rule belongs.

With relevant button-styling guidance saved in a Rule, your next request can focus on the button’s position and copy:

Rules give the agent additional guidance alongside your prompt, conversation history, and attached context. They can reduce repetition, but you should still review whether the result follows your standards.

Keep the distinction clear: a Rule describes how you want work done, while a Command stores a task you want to repeat.

7. Save Repeatable Jobs As Commands

When a prompt proves useful across several pages, save it as a Command. Type / in the chat or open the Commands picker to insert it into your message.

Useful repeatable jobs include:

• Alt Text: Check image alt text, retain meaningful existing descriptions, and identify decorative images that should have empty alt text.
• Scan For Hard-Coded Values: Identify static color and spacing values and recommend existing Variables that could replace them before making changes.
• Responsive Review: Check the Phone breakpoint for cramped content or overflow and report the findings before editing.
• Element Labels: Replace generic Element Labels with descriptive names that make the page structure easier to navigate.
• Pre-Publish Check: Review heading order, contrast, CTAs, and alt text, then report issues for you to verify.

Before sending the inserted Command, check its scope and add details such as “on this page” or “in the pricing section.” You can attach a Preset or Variable to the Command, but review those references when reusing it elsewhere.

For work that creates shared Variables or Presets, separate the audit from implementation. Review what already exists before allowing a reusable Command to create more resources.

8. Tell The Agent What The Reference Is For

The agent can build from a written brief, a screenshot or mockup, a public URL, or a moodboard. Explain what the reference should contribute: layout, spacing, color direction, typography, or overall mood. Then identify what should change.

Weak: Here’s a screenshot. Make my page look like this.

Better:

Use JPEG or PNG for attached image references. If the design is already online, provide a public URL the agent can access without signing in. Explain whether you want to borrow its structure, visual direction, or both, and identify any copy or branding that should not be reused.

Review the first pass against your instructions. Continue in the same chat for related refinements so the reference and your earlier decisions remain part of the conversation.

9. Refine In Conversation, But Use The Builder When That’s Faster

Treat a generated layout as a first pass to inspect. If one part misses the brief, identify that part and request a focused correction rather than rebuilding everything.

The result uses native Divi Sections, Rows, Columns, and modules that you can edit in the builder. A small padding or color adjustment may be quicker to make directly. Use the agent for changes that benefit from coordinated work across several settings or elements, such as a section restyle or an alt-text review.

Focused follow-ups can avoid repeating work, but their cost depends on the models and context involved. Choose the approach that makes the change easiest to complete and verify.

If a pass goes in the wrong direction, use the restore control on your message to return the working canvas to its earlier state. Remember that this also removes manual edits made after that point. Wait until the agent has finished and any pending approval has been resolved before restoring.

10. Match The Model To The Job

Use the automatic tiers as a starting point, then adjust based on the results you get for your work.

• Auto Value: Copy tweaks, alt text, and small additions.
• Auto Balanced: Section restyling or a few coordinated steps.
• Auto Deep Value: Tasks that benefit from additional reasoning at a moderate cost.
• Auto Premium: Demanding layout generation or building from a screenshot.
• Custom: Individual model choices for the Planner, Agent, Layout, and Ask roles.

A stronger model may handle a complex request more effectively, but it does not remove the need for clear instructions or a final review. Reasoning effort can also affect response time and cost, so leave it at the default unless the task gives you a reason to change it.

Keep related refinements in the same conversation. Start a new chat when moving to an unrelated job, and check the selected scope and attached context again. This helps keep the conversation focused and prevents old requests from filling the Context Usage meter unnecessarily.

Make Steering The Habit

Start with one task on an existing page. Name the outcome, add the target as context, and explain what should remain unchanged. Use Ask if you want to review an approach first, then switch to Build and inspect the result.

As you find instructions worth repeating, save your standards as Rules and your recurring tasks as Commands. That gives Divi AI agents clearer direction while keeping everyday prompts concise.

If you haven’t already, download the latest version of Divi 5. With an active Divi AI subscription, including Divi AI through Divi Pro, you can open the agent in the Visual Builder and try your first scoped request.

Which instruction has made the biggest difference in your results? Share it in the comments below.

The post Best Practices For Steering Divi AI Agents To Get It To Do What You Want appeared first on Elegant Themes Blog.

For many projects, the deciding question is who will edit the site after launch. A developer maintaining a site through code has different needs from a client who wants to update services, publish articles, and manage inquiries independently.

My experience is mainly with WordPress sites built around options pages, custom post types, and custom fields. I approached Astro from that perspective: where does it simplify the work, and where does it require a different setup? This comparison uses a small demo to explore those differences rather than treating either platform as the best choice for every site.

What Astro Is, And What It Leaves Out

Astro is an open-source framework designed for content-driven websites. By default, it generates HTML pages during a build. It can also render routes on request using an adapter for a supported runtime or hosting platform, including Node.js, Netlify, Vercel, and Cloudflare.

Its islands architecture lets developers add interactive components where needed without requiring the entire page to run as a client-side JavaScript application. Content collections, server islands, Actions, and sessions support more complex sites, but they do not turn Astro into a ready-made CMS.

The company behind Astro joined Cloudflare in January 2026. The announcement states that Astro remains open source under the MIT license and available for deployment beyond Cloudflare.

The one-page demo used for this comparison produced an HTML file of 2,734 bytes in the build output folder. That is the size of one generated file, not a measurement of the complete page with its images, styles, and other assets.

Astro generates deployable files from the project’s source code and content.

Astro itself does not include an editorial dashboard, media library, or ready-made user management system. Content can live in Markdown, MDX, and data files, or come from an external CMS.

Without a CMS integration, maintaining that content means working with project files and a development environment. Adding a CMS can give nontechnical editors a browser-based interface, but choosing and configuring that interface becomes part of the project.

During development, Astro also provides a toolbar. Its Audit app checks the current page for supported accessibility and performance issues, giving developers feedback while they work.

What WordPress Brings To Similar Builds

WordPress starts with the content management tools already in place. Editors can create posts, upload media, manage revisions, and publish through the dashboard.

Developers can register custom post types and metadata using WordPress’s core APIs. A custom fields plugin adds a more convenient interface for defining fields and displaying them on editing screens. Post types and fields can also be exposed through the REST API when configured appropriately.

For site-wide settings, developers can build options pages with the WordPress Settings API or use a plugin that provides an interface for creating them.

Advanced Custom Fields PRO includes options pages, with annual plans priced at $49 for one site, $149 for 10 sites, and $249 for unlimited sites at the time of writing. Secure Custom Fields, a free fork of ACF, also includes options pages.

WordPress also has a large ecosystem of plugins and themes. That gives site owners many ways to add features without developing each integration themselves. The tradeoff is choosing compatible tools and maintaining them.

The Question That Decides It: Who Edits The Site After Launch?

The technology behind a site matters, but so does the work its owner needs to do next month. A small client site makes the difference easier to see.

The Same Client Site On Each Platform

My client sites usually have options pages, custom post types, and custom fields. Clients update shared settings on the options pages and add content through a defined set of fields.

On WordPress, those tasks happen in one dashboard. Publishing a new post or updating a published one makes the change available without a separate front-end build, although caching can delay what visitors see.

In the Astro demo, the equivalent structure uses a content collection for projects and a settings data file for shared business information. A Zod schema defines the expected fields and validates their values.

A schema defines the expected content structure and helps catch invalid data.

A schema validates the data supplied to it; it does not create an editing screen. To let a client manage those fields without opening project files, we need to add a CMS.

The page then reads the settings and collection entries and uses them to generate the design.

In this demo, the studio information comes from the settings file, while the project cards come from the collection.

Choosing An Editing Layer For Astro

There are several approaches to adding a CMS:

• Git-based editing: Tools such as Keystatic, TinaCMS, and CloudCannon can manage content stored in a repository.
• A hosted content platform: A service such as Sanity stores content separately and makes it available through APIs.
• Headless WordPress: WordPress provides the editing environment, while Astro retrieves the content and builds the public-facing pages.

Keystatic illustrates how a settings screen can work in a file-based setup. A singleton represents one shared content record, similar to the information managed through a WordPress options page.

Keystatic’s local mode writes to the local filesystem. For a deployed editing interface, its documentation describes a GitHub-connected setup, with Keystatic Cloud available to simplify authentication. The deployed integration also needs a compatible server runtime.

In the setup shown here, the field definitions exist in both Astro’s validation schema and the CMS configuration. Those definitions need to stay aligned. Shared definitions or additional validation can help, but that coordination is part of the implementation.

How Long An Edit Takes To Go Live

On a conventional WordPress site, publishing or updating content does not require rebuilding the front end. The change becomes available through WordPress, subject to caching and any publishing workflow in use.

On a statically generated Astro site, content changes normally trigger a build and deployment. A Git commit or CMS webhook can start that process automatically, but visitors see the updated pages after deployment finishes.

Build time depends on the content, integrations, and hosting setup. Astro introduced experimental incremental static builds in version 7.2 to reuse eligible pages whose code and content have not changed.

An Astro route that retrieves current CMS content at request time can show updates without rebuilding that route. Its freshness still depends on caching and how the data is fetched.

Clients may not care which stack a developer chooses, but they do care about whether routine changes are easy and reliable. Before choosing either platform, establish what the owner can edit, how previews work, and when published changes will appear.

Routine WordPress Features That Need Rethinking On Astro

WordPress plugins package many common site features into an installable product. On Astro, equivalent features may come from a CMS, hosting service, JavaScript package, or custom integration.

Astro already supports image processing and internationalized routing, with official integrations for features such as sitemaps and RSS. Its documentation theme, Starlight, includes search. The larger implementation differences appear when a site needs forms, commerce, accounts, or visual editing.

Forms: Astro Actions and on-demand API endpoints can process submissions. Developers still need to connect the required storage, email delivery, spam protection, and submission management. A form can also submit directly to an external service, allowing the public pages to remain static.

WordPress form plugins package more of that workflow into a dashboard. A builder such as Divi also provides integrations for styling forms from plugins such as Gravity Forms and Contact Form 7.

E-commerce: Astro can support checkout links, embedded payment services, and custom storefronts connected to commerce APIs. It does not supply a built-in product and order management dashboard. Its e-commerce guide includes examples using services such as Lemon Squeezy, Paddle, and Snipcart, but those examples are not the limits of what developers can integrate.

WordPress with WooCommerce provides product, cart, checkout, and order management within the WordPress environment. Divi’s WooCommerce modules add visual design controls for store pages.

Accounts: WordPress includes users and roles, while plugins extend those foundations into memberships, courses, and customer portals. Astro can integrate authentication tools such as Better Auth or Clerk, but the developer must also implement the site’s access rules and member features. Having sessions or authentication available is not the same as having a complete membership system.

Visual editing: WordPress includes the block editor, and Divi’s Visual Builder provides visual page-building tools. Astro does not include an equivalent editor in the framework itself. Services such as CloudCannon and other CMS integrations can add visual editing, with capabilities that depend on the chosen service and implementation.

For planning purposes, the distinction is:

• Content editing: WordPress includes a dashboard; Astro uses project files or an added CMS.
• Common site features: WordPress offers established plugin workflows; Astro gives developers more responsibility for selecting and connecting the pieces.
• Design changes: WordPress editors and builders expose design controls; Astro’s editable design controls depend on the integration.
• Ongoing costs: Compare hosting, licenses, service subscriptions, development, and maintenance across the complete setup.

Performance: What The Numbers Say And What They Don’t

Astro’s homepage highlights a Core Web Vitals comparison of approximately 71% for Astro and 48% for WordPress. That supports a practical reason to consider Astro: its default rendering approach can make it easier to deliver content with less client-side JavaScript.

The chart below presents the August 2026 comparison used for this article.

These figures compare populations of websites, rather than the same site built twice by the same team. WordPress serves a much broader mix of sites, including older installations and projects with very different budgets and maintenance practices.

The results are useful context, but they do not predict an individual project’s performance. Astro sites can still load substantial JavaScript through interactive components, analytics, and third-party services. A small framework footprint does not guarantee a small finished page.

On WordPress, theme choice, plugin behavior, hosting, caching, and image handling all affect the result. Test representative pages and important interactions on the finished site instead of relying on the platform name alone.

Security And Upkeep

A fully static Astro deployment serves generated files without running WordPress, PHP plugins, or a database to render each page. That removes some common attack paths from the public-facing site.

It does not remove maintenance. The project still has dependencies, deployment credentials, and any connected CMS or services to secure. Adding server-rendered routes, authentication, or custom endpoints introduces additional responsibilities.

WordPress has a different maintenance profile. In its 2026 security report, Patchstack recorded 11,334 vulnerabilities disclosed across the WordPress ecosystem in 2025, a 42% increase over 2024. It attributed approximately 91% to plugins and reported six low-priority issues in core.

Those are ecosystem-wide disclosures, not vulnerabilities present on every WordPress site. The software installed on a particular site determines its exposure.

For my WordPress work, I use a limited selection of vetted plugins and add vulnerability monitoring where appropriate. That approach still requires timely updates, tested backups, access controls, and a plan for replacing abandoned software. Hosting protections are another layer, not a substitute for maintaining the application.

AI Tooling On Each Side

AI has made me more productive on WordPress, and the platform now includes infrastructure designed to support those workflows.

The Abilities API, introduced in WordPress 6.9, lets developers register capabilities in a machine-readable form. WordPress 7.0 added an AI Client that gives plugins a shared PHP interface for working with AI providers. These are developer foundations; the available user-facing features depend on the tools installed and configured.

The official MCP Adapter can expose registered abilities to compatible clients. Builders add their own tools too. Divi AI Agents works inside the Visual Builder, where plain-language requests can create pages and add, edit, or move modules. Our roundup of WordPress AI plugins covers more options.

Astro’s AI tooling documentation focuses on helping coding agents work with Astro projects. Its documentation MCP server gives compatible tools access to Astro’s documentation.

Both platforms can be used with coding agents. The practical difference is where the workflow happens: an integrated WordPress tool can work within an existing editing environment, while an Astro coding workflow commonly changes project files and sends those changes through a build and deployment process.

The Middle Path: WordPress For Editing, Astro For The Front End

You can also use WordPress as a headless CMS behind an Astro front end. Editors keep the WordPress dashboard, while Astro retrieves content through an API and controls how the public pages are rendered.

This approach combines the two platforms’ strengths, but it also creates two application layers to maintain. You need to plan content fetching, previews, authentication where required, and how published changes reach visitors.

For static pages, that usually means triggering a deployment when content changes. Routes that fetch content on request can avoid that rebuild requirement, subject to their caching strategy.

Astro’s headless WordPress guide provides a starting point for retrieving posts and custom post types. Custom fields and site-wide settings need additional configuration.

For example, ACF post fields can appear in REST responses when the relevant field group’s Show in REST API setting is enabled. Options-page values require separate handling, such as an appropriately secured custom endpoint or a suitable integration. Only expose data intended for the front end.

I have not built this hybrid setup for a client, so I would treat it as a separate architecture decision rather than assume it is an easier version of either platform.

Which One To Pick For Your Next Site

Choose the platform around the site’s editing, publishing, and maintenance requirements.

• Developer-maintained marketing sites: Astro is a strong option when a developer owns the content workflow and wants direct control over markup, assets, and integrations.
• Documentation sites: Astro with Starlight provides a focused starting point for structured documentation.
• Client sites with shared settings and structured content: WordPress often provides a more direct handoff because the editing dashboard is already part of the platform.
• Stores: WordPress with WooCommerce suits teams that want store management inside their site. Astro is worth considering when the team wants a custom storefront connected to a separate commerce platform or checkout service.
• Memberships and courses: WordPress offers established plugins that combine access management, payments, and editorial tools. Astro can support these projects, but expect more integration work.
• Blogs: Astro suits developers who enjoy a file-based publishing workflow. WordPress is often the simpler starting point for writers and editors who need browser-based publishing, scheduling, and revisions. An Astro CMS integration can also provide those tools, depending on the product selected.

Where To Go From Here

For the client sites I build, WordPress remains a practical fit. I already have established development processes, a familiar plugin and theme ecosystem, and an editing environment that clients can use. AI tools have also improved that workflow.

Astro deserves consideration when its approach matches the project: developer-controlled layouts, content-focused pages, and a team prepared to choose and maintain the surrounding services. Its flexibility is valuable, but the editing experience needs as much planning as the front end.

Before committing, test one routine task from start to finish: update a shared setting, publish a content entry, preview the change, and confirm when it reaches the live site. That reveals more about the fit than a framework benchmark alone.

If you want to explore an Astro-based CMS, Cloudflare’s EmDash is another option to evaluate. For more on how AI changes the platform decision, see Is AI Going To Kill WordPress?

The post WordPress vs Astro (2026): Which One Fits Your Next Site? appeared first on Elegant Themes Blog.

In this tutorial, we’ll build four cards on an eight-column grid. Each card starts farther to the right and spans fewer columns, creating a stepped area of empty space along the left.

Why Use Offset Rules Instead Of Spacers?

Spacers, margins, and column spans can all create empty space, but they give you different types of control.

An empty Group Module can act as a spacer. However, if you add it as a direct child of the grid container, it also counts as a grid item. Inserting it before a card changes that card’s position in the sequence, which can affect rules targeting items by index.

A left margin adds space beside an item, but a fixed value such as 240px does not stay aligned with grid tracks as the container width changes.

Column spans control how many tracks an item covers, while alignment positions it within its assigned grid area. To specify exactly where that area begins, use a start value.

Grid Offset Rules combine these controls. For example, Card 2 can start at column line 3 and span 6 columns. The two columns before it remain empty, without adding a spacer.

Set Up The Section

Add a Section, then insert a Row using the Single Column Flex Structure Template. Leave the Row’s Layout Style set to Flex while you build the cards. This gives you room to adjust their content and styling before applying the grid composition.

Set the Section’s Background Color to #F0EDE4 and its CSS ID to work. We’ll use #work as the card button’s example link later.

Build The Card

Each card will be a Group Module inside its own Column. When we switch the Row to Grid, those Columns will become the grid items.

Add a Group Module inside the first Column and set its Element Label to Card 1. Apply these settings:

• Background Color: #FAF8F5
• Border: 1px solid #D8D8D0 on all sides
• Border Radius: 6px
• Padding: 2.25rem on all sides
• Overflow: Hidden
• Layout Style: Flex
• Layout Direction: Row

Add two more Group Modules inside the card. The first will hold the text; the second will hold the button and oversized number.

Set the first inner Group’s Layout Style to Flex, its Layout Direction to Column, and its gap to 0.75rem.

Inside it, add a Text Module for the eyebrow label, a Heading Module, and another Text Module for the body copy. Set the heading to Heading 2 at 30px. Set the body text to 16px and its Max Width to 590px.

Place The Button And The Number

Set the second inner Group’s Layout Style to Flex and its Layout Direction to Column. Then apply:

• Size: Grow to Fill
• Justify Content: Space Between
• Align Items: End

Because the outer card uses a Row direction, Grow to Fill lets this Group take up available horizontal space. Space Between separates the button and number vertically when there is spare height, while Align Items: End aligns them to the right.

Inside this Group, add a Button Module. Use an arrow glyph as its text and set its background to #FAF8F5.

Unlink the Border Radius values. Set Top Left to 0 and the other three corners to 50% to create a leaf-shaped button.

Under Border, set Button Border Width to 1px, Button Border Color to #1D3B2E, and Button Border Style to Solid.

Adjust the arrow’s size and color under Text. Turn Show Button Icon off so Divi does not add another icon beside the arrow. Under Sizing, set both Button Width and Button Height to 2.5rem.

Set the button’s link to #work for this example. For a live project, replace it with the relevant destination.

In the Attributes option group, add an Aria Label that describes the link’s purpose, such as View our work. An arrow alone does not clearly communicate the destination to screen reader users.

Add The Oversized Number

Below the button, add a Text Module for the card number. Set its text size to 76px and its Opacity to 0.15.

The second Group’s layout places the number below the button and aligns it to the right. The card’s Overflow: Hidden setting clips any content that extends beyond its boundaries.

For Card 1, we’re using the eyebrow 01 / FEATURED PROJECT, the heading The Long Table Garden, and a short body description. The oversized number repeats 01.

Duplicate The Card

Finish styling Card 1, then duplicate its Column three times. This keeps each card inside a separate direct child of the Row.

Update each card’s label, heading, body copy, and number. Apply these settings to the corresponding card Groups:

• Card 2: CSS ID approach; Background Color #1D3B2E
• Card 3: CSS ID services; Background Color #9FAF8D
• Card 4: CSS ID contact; Background Color #C85B38

Adjust the text and button colors to maintain readable contrast against each background. Give every CSS ID a unique value, entered without the # prefix.

Keep the Columns at full width and the Row’s wrapping enabled while editing so the cards remain stacked.

Switch The Row To Grid

Open the Row’s Design → Layout settings and apply:

• Layout Style: Grid
• Number of Columns: 8
• Number of Rows: 4
• Grid Auto Columns: 1fr
• Grid Direction: Column
• Horizontal Gap: 0px
• Vertical Gap: 0px

The cards may look compressed before we add their placement rules. Next, we’ll give each card its own row, starting position, and column span.

With both gaps set to zero, the cards will meet vertically. The unoccupied cells to their left will create the stepped composition.

Add The First Offset Rule

Find Grid Offset Rules in the same Layout option group and click Add Grid Offset Rule. For an introduction to the container settings, see How To Create A Grid Layout In Divi 5.

The rule dialog includes an optional Admin Label, a Target Offset, and fields for column and row placement.

Rules target the Row’s direct children in their source order. In this layout, those children are the four Columns containing our cards.

Set Target Offset to Custom nth-child Rule and enter 1 in the field below it. This targets the first Column. Enter:

• Column Span: 8
• Column Start: 1
• Row Start: 1

Leave Column End, Row Span, and Row End unset.

Start values refer to grid lines; spans count the tracks between them. Starting at column line 1 and spanning 8 columns makes Card 1 cover the full grid width.

Build All Four Card Offset Rules

Add three more rules, targeting items 2, 3, and 4. Your four rules should use these values:

• Card 1 — nth-child 1: Column Span 8, Column Start 1, Row Start 1
• Card 2 — nth-child 2: Column Span 6, Column Start 3, Row Start 2
• Card 3 — nth-child 3: Column Span 5, Column Start 4, Row Start 3
• Card 4 — nth-child 4: Column Span 4, Column Start 5, Row Start 4

Leave the other placement fields unset for each rule.

All four cards end at the right edge of the grid. Card 2 leaves two empty columns on the left, Card 3 leaves three, and Card 4 leaves four. This creates the stepped shape without adding empty elements.

You can also arrange the cards visually using Divi 5’s CSS Grid Editor. Click Open Grid Editor in the Row’s settings, then move and resize the items to match the placement above. Check the resulting rules to confirm their start and span values.

Make The Cards Presentable On Mobile

Preview the layout on Tablet and Phone. The desktop placement leaves less room for each card’s content as the screen narrows, especially in the fourth card.

To retain the stepped composition, start by adjusting the content inside each card. At the Phone breakpoint:

• Change the outer card Group’s Layout Direction to Column so its two inner Groups stack vertically.
• Reduce the card’s Padding from 2.25rem to 1.75rem.
• Reduce the heading size from 30px to 26px.
• Reduce the body text size from 16px to 15px.

The video below shows these content adjustments on Card 1. Repeat them on Cards 2, 3, and 4, since changes made after duplication do not automatically apply to the other copies.

If the narrower cards still feel cramped, simplify the grid placement too. Grid Offset Rule values can be overridden responsively. For a full-width stack on Phone, set the Row’s Number of Columns to 1, then set every rule’s Column Start and Column Span to 1 at that breakpoint. Keep the four Row Start values at 1, 2, 3, and 4.

This preserves the desktop composition while giving each card the full available width on Phone.

Build A Different Shape

The same controls can create other compositions. Change the track count, starting positions, and spans to leave an opening within the layout or a channel of empty cells between groups of content.

This example uses one rule for each card. If you add a fifth card, give it a placement rule if it needs a specific position; otherwise, the grid’s auto-placement settings determine where it appears. Recheck the targets whenever you insert, remove, or reorder Columns, since the rules follow their positions in the Row.

For more on adapting the grid to smaller screens, see How To Master Grid Responsiveness In Divi 5.

The post How To Use Empty Grid Cells To Create More Interesting Compositions In Divi 5 appeared first on Elegant Themes Blog.

We will use them together to build a hero section: keep Layers visible while adding its structure, then switch to a Workspace with more room for styling. You can reuse both setups on your next page.

How The Two Tools Work Together

Open the Command Center with Cmd+K on Mac or Ctrl+K on Windows. Type an action, select the matching result, and press Enter. Below, Cmd/Ctrl means Cmd on Mac or Ctrl on Windows.

A Workspace saves your builder preferences and panel arrangement, including which panels are open, where they dock, and their sizes. Switching Workspaces restores that setup without changing the page content.

For this workflow, we use two saved arrangements:

• Command Build: Keep Layers open to select elements and check where queued commands place them.
• Command Style: Close Layers and widen the settings panel for adjusting the elements you have added.

The Command Center lets you switch between them by typing their names. It also opens the settings and tools you need within each setup.

1. Save Your Command Build Workspace

Open a blank page in the Visual Builder and choose to build from scratch. Start by docking the settings panel so it opens beside the canvas. In Workspace Settings, set Settings Modal Default Position to the left or right sidebar.

Next, press Cmd/Ctrl+K, type layers, select the result, and press Enter. Dock the Layers panel and leave it open. When you add several elements through one command queue, the tree lets you check their nesting without opening each element on the canvas.

With the panels arranged, reopen the Command Center and run Save as New Workspace. Enter Command Build in the Workspace Name field and click Save. You can return to this arrangement whenever you need to add or reorganize page content.

2. Build The Hero Structure With Commands

Selection controls where new modules go. Use the Layers panel to check your selection before opening the Command Center:

• With a module selected, the new module goes below it in the same container.
• With a row selected, adding a module creates a new row to hold it.
• With a section selected, adding a module creates a new section and row to hold it.
• With nothing selected, Divi uses a module in the viewport as the insertion reference. Select an element explicitly when placement needs to be predictable.

For the hero, we need a row with a heading, supporting text, and a Group containing two buttons. Queuing lets us add related elements without reopening the module picker for each one.

Press Cmd/Ctrl+Enter to queue an element or preset and keep the Command Center open. Press Enter to run the queue. The > operator nests the next element inside the previous one, and *2 adds two copies of an element.

Select the empty section and open the Command Center. Type row, select the matching element command, and press Cmd/Ctrl+Enter. Then type > heading and press Enter. Divi adds the row with a Heading module inside.

Select the heading, reopen the Command Center, and run text to add a Text module below it. With that Text module selected, build the button container:

1. Type group and press Cmd/Ctrl+Enter.
2. Type > button and press Cmd/Ctrl+Enter again.
3. Type *2 and press Enter to run the queue.

The Group contains both buttons, giving you one element to select when arranging them together. Check the Layers tree before continuing. Replace the modules’ placeholder content with your heading, supporting copy, and button labels and links.

If you need to insert something above an existing module, select it and prefix the new module command with ^. For example, ^ text adds an eyebrow line above the selected heading.

3. Switch To Command Style For Styling

With the structure in place, give the settings panel more room. Close Layers, widen the settings panel, and run Save as New Workspace from the Command Center. Name this arrangement Command Style and click Save.

Once both Workspaces are saved, switching phases takes one command. Press Cmd/Ctrl+K, type Command Build or Command Style, select the matching result, and press Enter. Use Command Build when adding more structure, then return to Command Style for settings adjustments.

In Command Style, select the button Group and open the Command Center. Type layout and choose the result under Settings. Set Layout Direction to Row to place the buttons side by side. The command opens the relevant option group in your docked panel; you still choose the setting value there.

Apply saved styles the same way. Select the first button, open the Command Center, type its preset name, choose the matching preset, and press Enter. Repeat for the second button. This skips opening each button’s preset dropdown and searching through the list.

The presets must already exist on your site. Use clear names you can remember, such as Primary Button and Secondary Button. If you need to create them, follow our guide to presets in Divi 5.

For future additions, the + operator applies a preset within the element queue. Queue button with Cmd/Ctrl+Enter, then type + followed by your saved button preset name. Select the preset and press Enter to add a styled button. To add two, queue the preset with Cmd/Ctrl+Enter, type *2, and press Enter.

4. Use Commands For Settings And Responsive Checks

Stay in Command Style while refining the hero. With an element selected, reopen the Command Center and type the option group you need, such as spacing or border. Select its Settings result and press Enter. The docked panel opens directly to that group, skipping the tabs and scrolling.

You can also change your selection from the keyboard. With the canvas focused, Left Arrow selects a parent, Right Arrow selects a child, and Up and Down move between siblings. Return focus to the canvas before using these keys for navigation; inside a text field, they move the cursor.

Reopen the Command Center for each of these checks:

• Run phone to inspect the hero at the phone breakpoint, then desktop to return.
• Run hover state to edit supported hover settings on the selected element. Run default state when you finish.
• Run variables to open the Design Variables manager if you need another reusable value.

If a search returns several similarly named commands, narrow it with a category filter. :settings limits results to option groups, :preset to presets, and :view to view commands. Confirm the highlighted result before pressing Enter.

When you finish, run save and preview to save your changes and inspect the page before exiting the builder.

Keep Your Workspaces Ready To Reuse

If you move panels while working, run Reset Active Workspace to restore the saved arrangement. If the new arrangement works better, run Update Active Workspace to keep it. These commands manage the builder setup; they are separate from saving your page edits.

Use the mouse for adjustments you need to judge visually, such as spacing, colors, or dragging modules into a different order. Commands are useful when you already know the action or setting you want. If you are still looking for it, browse the panel and learn its name for next time.

Start with these two Workspaces and the commands you repeat most. Keep Layers available while building, switch to a wider settings panel for styling, and use presets to apply reusable designs. On the next page, both your builder arrangements and saved styles are ready to use again.

The post How To Build Faster In Divi 5 With The Command Center And Workspaces appeared first on Elegant Themes Blog.

Bring in custom SVGs or an icon font, create a collection for your client’s brand, and use those icons directly from Divi’s new icon picker. You can also organize the included icons into collections that fit your website.

Let’s take a look at how it works. 👇

Import Custom SVGs And Icon Fonts

The Icon Manager brings your own artwork into the same selection workflow as Divi’s included icons.

Click Import Icons to open the Add Icons window, then use Choose Icon Files to select your files. Choose an existing Collection or enter a Collection Name to create a new one, then click Import.

Add A Set Of SVG Icons

Drag as many SVG files as you want into the icon uploader to upload them all at once into a new or existing collection.

Imagine building a website for a landscaping company with custom symbols for planting, irrigation, and garden maintenance. Import those SVGs into a “Services” collection and select them as you build the company’s service sections.

Bring In An Icon Font

You can also import WOFF2, WOFF, TTF, or OTF icon fonts. Divi reads its character mappings and adds the available icons to your collection.

An optional Name Mapping File lets you supply readable names and search terms through a JSON file. That makes a large custom font easier to search when its built-in glyph names are less descriptive.

You can upload multiple SVGs and icon fonts at once!

Organize Collections Around Your Website

Icons are organized into collections.

Click New Collection, enter a name, then click Create to build a collection. Collections allow you to organize icons into groups, making them easier to find in the icon picker.

A collection can contain both SVG icons and font icons. You could group arrows, contact symbols, and custom service illustrations under “Brand Essentials,” even when they come from different sources.

Select an icon to reveal its available actions. Use Shift, Ctrl, or Command while selecting to work with multiple icons, then choose Move to place them in another collection. These actions are also available from an icon’s right-click menu.

Use Rename to update a collection’s name, Remove to take selected icons out of it, or Delete to remove a custom collection.

Keep Icon Pickers Focused

Each collection has a toggle that controls whether its icons appear in pickers across the website.

On a client site, you could enable a curated collection of approved icons and turn off collections the client does not need. That gives everyone a more focused selection when adding new content. Turning off a collection preserves icons already used on pages. Removing icons from a collection or deleting a custom collection also preserves those existing uses and the underlying Media Library files.

Take Icon Collections Between Websites

The Icon Manager includes an Import & Export Icon Collections control in its header.

Open it, select the collections you want to export, and use Export Icon Collections. The export includes their assignments and referenced custom icon files, including font name mappings when present.

On another website, open the same control and use Import Icon Collections to bring them into that site’s library.

If you build websites for multiple locations of the same business, you could prepare a single branded collection and transfer it to each site without having to upload every SVG or font again.

Your Icons, Inside Divi’s Icon Picker

The updated icon field displays a compact preview of your selected icon. Click it to open a dropdown with an icon grid, search, and collection filters.

Choose All Collections to browse everything enabled, or narrow the selection to a specific collection. The filter groups Theme Icons, Custom Icons, and Styles, making it easier to find the right set while editing.

When you need to organize your library or add something new, click Icon Manager at the bottom of the picker.

Manage Icons With The Divi AI Agent

The Divi AI Agent gains tools to search for icons and manage collections.

Ask it to create or rename a collection, turn a collection on or off, Import supported attached files or existing Media Library files, or move or remove icons. It can also delete custom collections.

For example, attach a set of service SVGs and ask, “Import these icons into a new collection called Services.” Or ask the agent to find icons in an existing collection before choosing which ones to use.

Imports request confirmation, as do moves, removals, and collection deletions.

Have You Tried Divi’s Multi-Select & Bulk Editing?

Last week we released multi-select and bulk editing for Divi 5!

Editing a website often means making the same change more than once. Adjust the spacing on several cards. Restyle a handful of buttons. Move a collection of modules into another column.

Multi-Select and Bulk Editing bring those tasks together in Divi 5. 🎉 Select individual elements with Cmd/Ctrl-click, select a range with Shift-click, and edit your selection from one settings panel.

Selection also extends into the Layers panel, right-click actions, keyboard shortcuts, the Inspector, and the Divi AI Agent. You can choose the elements you want to work on, then carry that selection through your workflow.

Let’s take a closer look. 👇

More Divi 5 Updates Are On The Way

The features keep coming, and we aren’t slowing down anytime soon!

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 The Icon Manager For Divi 5 appeared first on Elegant Themes Blog.

Agent usage is metered. A Divi AI or Divi Pro subscription includes $5 in agent usage each month, so you can try real tasks before adding funds beyond your subscription.

Your model choice is one of the biggest factors in how far that balance goes. An affordable tier is a useful starting point for everyday edits, while a stronger one may justify the extra cost on more demanding work. Here is how Divi AI agents pricing works, what each Auto tier is for, and how to decide when paying more makes sense.

How Divi AI Agents Pricing Is Calculated

AI models charge for the tokens they process. Input tokens cover what a model reads, including your prompt and the context supplied to it. Output tokens cover what it generates in response. A single instruction can involve several model calls as the agent plans, inspects your page, and carries out the work.

Each provider sets its model’s input and output rates. We add a small markup to cover transaction and business costs. Your total depends on those rates and the amount of processing required, rather than a fixed price for each prompt. Larger tasks generally involve more context, generated output, or steps, which can increase the cost.

On average, generating an entire custom layout costs less than five cents, though individual builds vary. In one of our recorded examples, Auto Deep Value rebuilt a screenshot into a nine-section page for about $0.10. Your chosen models and the work required determine what a particular request costs.

The wallet is tied to your Elegant Themes account and shared across the websites where you use the agent. Open the agent panel in the Visual Builder and click the wallet icon in the top right to see your balance.

What The $5 Monthly Balance Covers

Every Divi AI subscription includes a $5 monthly balance for agent usage, and Divi Pro includes Divi AI. The complimentary balance resets to $5 on your subscription’s renewal date rather than the first of the calendar month. Unused complimentary funds do not roll over.

The agent balance is separate from Divi AI’s text, image, code, and layout generation outside the agent, which remain included in your subscription. Building a layout through the agent uses your wallet, even though layout generation through Divi AI’s other tools is included.

Agent requests connect to external AI models through OpenRouter. The complimentary $5 lets you explore these workflows without purchasing additional agent funds. How much work it covers depends on the models, reasoning effort, and size of your requests.

The balance screen shows your total credits, the complimentary funds from your subscription, and the amounts you can add.

When $5 is not enough, add funds from the same wallet icon by choosing a preset amount or entering your own. Purchased funds are used only after your complimentary monthly balance runs out.

The Four Auto Tiers

Divi AI agents offers four automatic tiers, with Auto Value selected by default. We choose the models behind each tier to balance cost and capability, so you can pick an option that suits the task without configuring individual models yourself.

• Auto Value prioritizes the lowest cost. Start here for simple edits, content tweaks, and small additions.
• Auto Balanced offers a middle ground between cost and capability for work involving several settings or steps.
• Auto Deep Value prioritizes more careful reasoning at a moderate price for tasks that need additional thought.
• Auto Premium prioritizes capability over price for demanding work where a stronger model may reduce the amount of correction needed.

You can change tiers in the chat window as the work changes. The video below shows the four options and their displayed input and output rates per million tokens. Those rates are not the total price of a request. A task can involve several calls and different amounts of input and output, so check the live picker before a larger job.

The models behind each tier can change over time as we update the selections. The tiers describe a cost-and-capability trade-off rather than a permanent assignment to one model. The graphic below lines up the four tiers with suitable starting tasks.

Which Model Is Worth Paying For

Start with Auto Value for straightforward work such as typo fixes, content updates, and image alt text. These repetitive tasks are a useful place to save by choosing an affordable tier, then reviewing the result.

Move up when the request needs more judgment. Auto Balanced is a reasonable starting point for restyling a section. Auto Deep Value suits questions about how your site is built, such as which presets or variables a page uses. Auto Premium is worth considering for a full page built from a screenshot or another demanding layout request.

These are starting points, not requirements. Auto Deep Value completed our nine-section screenshot example for about $0.10, so a lower-cost tier can still handle substantial work. A stronger model may produce a better first result, but every tier needs review. Additional requests to correct a build add to the cost, though they will not necessarily cost the same as the original request.

To compare the trade-off on a smaller task, we gave Auto Value and Auto Premium the same request. You can copy it below to try it on an empty section of your own page.

Comparing Results: What You Get For The Extra Cost

In our comparison, Auto Value finished in about two minutes for $0.10. It returned a bulleted list, with descriptions running off the right edge. Auto Premium took about two minutes and 50 seconds for $0.54 and returned a connected timeline with text that wrapped cleanly.

Premium cost 5.4 times as much in this run, but it also followed the requested design more closely. It added a timeline line with markers, an off-white background, and smaller padding on phones. The Auto Value result would have needed further editing to meet the brief.

For this task, the extra $0.44 bought us a result that needed less correction. Results will vary between requests, so compare the tiers on work you do regularly. Consider both the wallet cost and the time you spend finishing the layout.

Custom Models And Reasoning Effort

For more control, open the model menu in the chat window and use Configure Custom Models. The Custom configuration lets you choose models for four internal roles:

• Planner: Works out the steps needed to complete a request.
• Agent: Carries out the work on your page.
• Layout: Generates page and section layouts.
• Ask: Answers questions in Ask mode.

This lets you prioritize a stronger model for planning or layout generation while choosing a more affordable one for other parts of the workflow. We provide access to hundreds of models through OpenRouter, so you can adjust the configuration to the work you do.

Reasoning effort also affects cost. Where supported, the available levels are Low, Medium, High, and XHigh, with Medium as the default. Increasing effort can help with complex or ambiguous tasks, but typically takes longer and costs more. Leave it on Medium initially, then adjust it when a task gives you a reason to do so.

Keeping Spend Predictable

Match the tier to the task before sending a request, and check your balance before a larger build. Keep the scope specific: if you want one section changed, identify that section rather than asking for a page-wide review. Use Ask mode when you want an explanation without implementation.

For larger jobs, the agent can divide independent work among sub-agents and assign different models to them. That can help distribute the work, but it does not guarantee a lower bill. The total still depends on the models selected and the processing each task requires.

Start with one real request on Auto Value and review both the result and its cost. If the output needs more correction than you want to do, try a stronger tier on a comparable task. Explore Divi AI agents for more examples of what you can build and edit, then choose a task to try on your own page.

The post How Divi AI Agents Pricing Works (And Which Models Are Worthwhile) appeared first on Elegant Themes Blog.

Ask works from the page you’re on. A question about CSS Grid becomes a conversation about your services section and how its columns should adapt on phones. You can then ask where to find the relevant controls without starting over or explaining the layout again.

Below, we explore how to use Ask for on-demand support, using a portfolio page to work through practical questions about CSS Grid and Flexbox, including how a layout adapts on phones.

What Ask Mode Does In Divi AI Agents

Ask is an interaction mode in the Divi AI Agents panel. It lets you ask questions about your page and how Divi works. The agent can inspect the page and consult Divi documentation to explain an approach before you make changes.

Ask explores and advises without changing your design, while Build is the mode for requesting actions, such as updating settings or rearranging elements.

This makes Ask useful at several points in your workflow. You might need help choosing between Flexbox and CSS Grid, locating a responsive setting, or understanding why an existing structure needs to change before a particular design will work.

You don’t need to know the exact setting name to start. Describe the element, what you want to achieve, and the part you’re unsure about. Ask can use that information to investigate and explain the next steps.

How To Switch To Ask Mode

Open your page in the Divi Visual Builder and open the AI Agent panel. If prompted, sign in to your Divi AI account.

At the bottom of the panel, open the interaction mode selector and choose Ask, the same selector you use to switch between Ask and Build.

Enter your question in the input field and send it. For a page-specific question, name the section or element. Referring to a visible heading, such as “What I Do Best,” gives the agent a concrete starting point.

For our examples, we’re using a portfolio page with a services section and a Featured Work section. We’ll keep the existing design in place while asking for guidance on how its layout could work with Divi 5’s layout controls.

Ask Whether To Use Flexbox Or CSS Grid

Knowing which layout system to use is often the first decision. Both Flexbox and CSS Grid can arrange a set of services, but the most useful answer depends on the structure you have and the result you want.

Our “What I Do Best” section contains three services, each with an icon, a heading, and a description. To get advice for this specific section, we asked:

Ask inspected the page and identified a heading row followed by a separate row containing three equal-width columns. It recommended CSS Grid for the services. An explicit column count makes the desktop layout and its responsive changes easy to define.

It also explained that Flexbox could work for a row of items that wraps, a comparison that ties the recommendation to what this layout needs.

For the responsive layout, Ask suggested three columns on desktop and one column on phones. It offered a two-column tablet layout while noting that the remaining service would sit in another row. It also noted that the existing layout might already stack correctly. A look at the responsive previews could show that no rebuild is necessary.

Because Ask explained why it chose Grid, you can test that reasoning against your own design. If your services need a set number of columns at each breakpoint, Grid fits. If they should wrap as space allows, Flexbox does.

Ask Follow-Up Questions To Find The Exact Setting

Once you have a direction, use the same conversation to get more specific. You don’t need to repeat the entire question or describe the section again.

We followed up with:

Ask explained that the relevant controls belong to the parent Row, which contains the three service columns. It directed us to Design > Layout, identified Grid as the Layout Style, and explained how column count and horizontal and vertical gaps control the arrangement.

It then described using the Phone breakpoint to set a single column while retaining the desktop configuration. The response is also linked to Divi’s documentation on CSS Grid and responsive editing. That gave us somewhere to read more.

A follow-up like this turns a broad recommendation into steps you can follow. If part of an answer is unclear, ask about that specific point. You could ask which parent element to edit or how a breakpoint change affects the rest of the layout.

Ask What Your Page Structure Needs Before A Redesign

Sometimes the question is about whether your current layout can support a different design. Ask can help you understand the structural changes involved before you start moving elements.

For the Featured Work section, we explored an alternating image-and-text arrangement on desktop, with each image appearing before its text on phones. This is a useful Flexbox question because the answer depends on which elements share a parent container.

Our test also showed what inspection catches. The question assumed the projects were already arranged as alternating image-and-text rows. Ask identified a different structure: each project’s image, text modules, and button were inside the same project column. There wasn’t an existing pair of image and grouped text containers to reverse.

Ask explained that the proposed design would need a parent container with two direct children: the image and a grouped copy area. Keeping the heading, description, and button together would allow the copy to behave as one item.

It then outlined a Flexbox approach using Row and Row Reverse for alternating desktop arrangements, followed by Column at the Phone breakpoint, with the image first in the content order. It also linked to the Flex Layout Direction documentation.

That response helped clarify both the design approach and the preparation it required. Changing the direction of the existing project column could arrange all its individual modules, rather than create the intended image-and-copy pairing.

Try this with your own layout. Describe the outcome you want, and ask the agent to inspect how the relevant elements are organized. This gives it room to identify structural requirements you may not have considered.

Switch To Build To Make The Changes

After reviewing an answer, you can follow its instructions manually in the Visual Builder. This lets you learn the controls while checking the result at each step.

If you want Divi AI Agents to carry out the changes, switch from Ask to Build and give it a specific instruction based on the approach you’ve chosen. For the services example, that means specifying which row to update, the number of columns at each breakpoint, and which existing content and styling should be preserved.

Keep the request focused, then review the result in the relevant desktop, tablet, and phone previews. Ask helps you decide what to do. Switching to Build lets you request the implementation.

Use Ask As On-Demand Divi Support

The Ask feature gives you a way to explore Divi 5 settings, such as a row’s Grid columns or a Flexbox direction, on the page you’re building. Start with a question about one section. Ask reads how that section is built before it answers, and each follow-up narrows the advice until you know which control to change.

Whether you’re choosing a layout system, locating responsive controls, or planning a different arrangement, Divi AI Agents can help you weigh the options before putting them into practice. Open Ask on your next page and start with the part of the design you want to understand better.

The post Getting On-Demand Support With The Ask Feature In Divi AI Agents appeared first on Elegant Themes Blog.