You can also build a fluid heading size from shared limits or assemble reusable text from smaller pieces. We’ll use a workshop layout to explore each approach and show what happens when a source value changes.

What Are Nested Variables In Divi 5?

A nested variable contains a reference to another variable within its value. The source holds the original information; the variable that references it adds a relationship or combines it with other content.

For example, a number variable named Base Space can hold 24px. A second variable, Panel Padding, can reference Base Space and multiply it by 2. Panel Padding then produces 48px wherever you apply it. Change Base Space to 32px, and that padding becomes 64px.

The distinction is where you store the relationship:

• Use a source variable directly when several settings should share the same value.
• Use variable math in a setting when a calculation belongs to that particular field.
• Create a nested variable when you want to name and reuse the calculated or combined value.

Our nested variables, variable math, and variable combinations update brings these workflows together. The examples below focus on number and text variables, using a single layout so their effects are easy to follow.

Download The Example Layouts

Choose between two page layouts in the download. With the starter, you can replace fixed values with variable relationships yourself. The finished layout includes the nested variables and their connections to the design.

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!

To follow along with the starter layout:

1. Create a new page in WordPress and choose the Blank Page template to keep the example free of a header and footer.
2. Save the draft, then open it with the Divi Builder.
3. Open the Page Menu at the top left of the builder and choose Import.
4. Select the starter JSON from the extracted download. Leave Replace Existing Content selected on this new, empty page, then click Import Layout.
5. Save the page and keep the Visual Builder open for the following examples.

These are page-level imports, so use the builder’s page menu rather than the Divi Library importer. The finished file also includes nine global variables; the starter does not require them.

Build Connected Spacing With Number Variables

Start with one source value and two related sizes. In the example, Base Space controls the introduction’s padding, Panel Padding gives the blue column more room, and Small Gap spaces the modules within each column.

Create The Source Variable

Open the Variable Manager from the builder’s left sidebar. If you’re new to the system, our Design Variables introduction explains how reusable values work across elements and presets.

1. Expand Numbers in the Variable Manager.
2. Click Add Global Number.
3. Give the variable the name Base Space.
4. Set its value to 24 and its unit to px.

Use a distinct name if your site already has a variable for another spacing system. These variables belong to the website, so their names should make sense beyond the current page.

Create The Derived Spacing Variables

Add another global number and name it Panel Padding. Its value will contain a reference to Base Space followed by a multiplication.

1. Clear the new variable’s initial value.
2. Click its Dynamic Content insertion button and select Base Space from the number variables.
3. Place the cursor after the inserted chip and type * 2.
4. Add a third number variable named Small Gap.
5. Insert Base Space in its value, then type / 2 after the chip.

Keep Base Space as a variable chip in both expressions. Typing its current value would produce a fixed calculation without a connection to the source.

Click Save Variables, then confirm Apply Changes when prompted. With Base Space at 24px, Panel Padding produces 48px and Small Gap produces 12px.

Apply The Variables To The Layout

Open Layers from the left sidebar and expand the section and its first row. Open the settings for the blue agenda column. Selecting the column in Layers helps avoid opening a Text Module inside it instead.

1. Go to Design > Spacing in the column settings.
2. In the first Padding field, use the dynamic content picker to select Panel Padding.
3. Apply that variable to the top, bottom, left, and right padding fields. Use the linking controls for matching pairs where convenient.

Each side now references the same derived variable. The settings show its name, while the column uses the resulting 48px value.

For the spacing between modules, open Design > Layout in that column and select Small Gap for Vertical Gap. The supplied columns use the Flex layout style. Apply Base Space directly to the introduction column’s padding if you’re reproducing all the example’s relationships.

Change The Source And Check The Result

Return to the Variable Manager and change Base Space from 24px to 32px. The introduction padding becomes 32px, the blue column’s padding becomes 64px, and the module gaps become 16px.

The derived expressions stay intact throughout that change. You can adjust the overall spacing without replacing the values in each connected setting. Restore Base Space to 24px if you want to continue with the supplied layout’s original proportions.

Create Fluid Typography With Shared Limits

Nesting also works inside the CSS functions available through Divi’s Advanced Units. A useful example is a fluid heading with a shared minimum and maximum size.

We’ll use three number variables:

• Heading Minimum: 36px.
• Heading Maximum: 76px.
• Fluid Heading: a clamp() expression referencing both limits.

Create Heading Minimum and Heading Maximum in the Numbers group, as you did with Base Space. Then add the third number variable and name it Fluid Heading.

1. Open Fluid Heading’s unit selector and choose clamp.
2. In the function’s value field, insert the Heading Minimum variable as the first argument.
3. After that chip, enter a comma, 5.2vw, and another comma.
4. Insert Heading Maximum as the final argument.
5. Save the variables and apply the changes.

The clamp selector supplies the function around those three arguments. In the value field, you’ll see the two variable chips with 5.2vw between them.

The first and final arguments establish the size limits. Between them, 5.2vw provides a preferred size that changes with viewport width: 5.2% of that width. The browser keeps the result within the two limits.

To use the result, open the main Heading Module and go to Design > Heading Text. In Heading Text Size, insert Fluid Heading through the dynamic content picker.

Check the title in desktop, tablet, and phone previews. At a wide viewport, the maximum may limit the size; on a narrow screen, the minimum may take over. Between those limits, the viewport value controls the heading’s size.

To verify the connection, temporarily lower Heading Maximum to 44px while viewing the desktop layout. The heading cannot grow beyond that limit. Restore 76px afterward. A change to the maximum will only alter the visible result when that limit affects the current viewport size.

Assemble Reusable Text With Nested Variables

Text variables can combine shared details into a larger reusable value. Our workshop uses a date and location together in both the introduction and the agenda panel.

Create The Individual Details

In the Variable Manager, expand Text and click Add Global Text. Create a variable named Event Date and enter the workshop date. Add another named Event Location and enter the city.

The example uses 18 June 2027 and Antwerp. Both are ordinary text values: the date stays as entered until you change its source.

Build The Combined Text Variable

Add another text variable and name it Event Details. Build its value from the two existing sources:

1. Place the cursor in the empty value field.
2. Open the dynamic content picker and select Event Date.
3. After the chip, type a space, a middle dot separator, and another space.
4. Open the picker again and insert Event Location.
5. Save the variables and apply the changes.

The date and location remain separate chips, with an ordinary text separator between them. Event Details combines those pieces into one value you can reuse elsewhere.

Reuse The Combined Value

Open the Text Module used for event details below the introduction. Under Content > Text, replace its fixed date-and-location line with the Event Details variable using the dynamic content control. Repeat this for the corresponding Text Module in the blue agenda column.

Now change Event Location in the Variable Manager. Changing it from Antwerp to Ghent updates both Event Details instances because they reference the same composed value. Restore the original location when you’ve finished checking the result.

You can also combine variables with words directly in a module’s text field. The distinction is reuse: create Event Details when that same combination belongs in several places. Keep surrounding words in the module when they belong to that particular piece of content.

Insert And Manage Individual Variable Chips

Each chip represents one source within the field. You can continue typing around it, add another source, or change that occurrence without replacing the whole value.

For keyboard insertion, place the cursor where a source belongs and type {{ in a supported field. Divi opens the variable picker at that position. Search for the source, select it, and continue editing around the inserted chip.

Click an existing chip to open its options. The menu lets you choose another source, Detach From Variable, or Remove Variable.

• Choose another source to replace that chip’s reference while keeping the surrounding content.
• Detach From Variable to keep the current value at that occurrence and break its live connection.
• Remove Variable to remove that occurrence from the field.

For Event Details, these controls belong to the individual date or location chip. Editing a chip inside that global text variable affects the composed value wherever it’s used. Editing a chip inside one module changes that module’s content instead.

Keep Your Variable Relationships Easy To Maintain

A useful nesting system should remain understandable when you return to it later. A few habits help keep the connections clear:

• Name variables by purpose. Base Space and Panel Padding describe their roles more clearly than numbered names.
• Keep arithmetic meaningful. Multiply or divide a spacing value by a plain number. When adding or subtracting lengths, use compatible CSS values and include the required units.
• Keep clamp limits sensible. The minimum should fit small screens, and the maximum should suit the design. Check the actual heading at several widths.
• Avoid circular references. A source should not depend on a variable that eventually points back to it.
• Check the connections before saving. Global variable changes can affect other pages. Inspect the dependent values, save the variables and page, then reload to confirm the result.

If a setting stops following a source, check whether it still contains a variable chip. A detached value, a fixed replacement, or a separate responsive override may explain why that setting behaves differently.

Build More Connected Designs With Divi 5

Nested variables let a few shared decisions guide the details of a design. Start with one spacing relationship or a reusable text combination, then expand the system where those connections save work. Explore Divi 5 and use variables to keep your next design easier to adjust.

The post Everything You Need To Know About Nested Variables In Divi 5 appeared first on Elegant Themes Blog.

In this tutorial, we’ll build a small web-design course directory with Divi 5 and Advanced Custom Fields (ACF). Visitors can choose a category, skill level, and duration, then open a matching course through its image or title. We’ll use native Divi settings throughout the build.

What We’re Building

Our example includes six fictional courses covering UI design, development, and WordPress. Each card shows an illustration, title, short description, level, and exact duration. Three labeled dropdowns sit above the cards, alongside a button that returns the directory to its unfiltered view.

ACF stores each course’s details, while Divi’s Loop Builder repeats one card design for the course records. We’ll connect the dropdowns to that loop with the Post Filter module, giving us one card design to maintain as the directory grows.

The layout has three card columns on desktop, two on tablets, and one on phones. We’re building the directory page and linking its cards to individual course records. Designing a custom course-page template, delivering lessons, handling enrollment, taking payments, and tracking progress sit outside this example.

What You’ll Need

Activate ACF on a WordPress site running Divi 5, and check that the Post Filter module is available in the module picker. The example uses WordPress 7.1.3 with Divi 5.15.1 and ACF 6.8.10. Gather six course images and brief descriptions before adding the sample content.

Use a test site while you work through the tutorial. The downloadable files include the layout, ACF structure, sample data reference, and illustrations. Alternatively, use the download section to load the layout instead of building it from scratch.

1. Create The Courses Post Type

In the WordPress dashboard, go to ACF > Post Types > Add New. Set Plural Label to Courses, Singular Label to Course, and Post Type Key to course. Keep Public enabled and Hierarchical disabled.

Next, open Advanced Configuration > General. Under Supports, enable the title, editor, excerpt, featured image, custom fields, and revisions.

Open Advanced Configuration > URLs. Choose Custom Permalink to reveal URL Slug, then enter courses as the slug. Leave the archive disabled for this standalone directory.

Finally, open Advanced Configuration > REST API and keep Show In REST API enabled, then save the post type.

You now have a Courses area in the dashboard. Its title, excerpt, and featured image supply the standard card content; the fields we add next hold the information used for filtering.

2. Add The Course Details Fields

Go to ACF > Field Groups > Add New and name the group Course details. Under the group’s location rules, choose Post Type, Is Equal To, and Course. This places the fields on course editing screens.

Add a Category field, choose Select, and use course_category as the field name. Enter UI design, Development, and WordPress as choices, one per line.

For this Select field, switch to Validation and enable Required.

Return to General, set Return Format to Value, and leave Select Multiple disabled. Apply these General and Validation settings to Level and Duration band as well.

Next, add a Level Select field named course_level. Its choices are Beginner, Intermediate, and Advanced.

Add a Duration band Select field named course_duration_band. Its choices are Under 3 hours, 3–6 hours, and Over 6 hours. Keep their spelling consistent with the sample content.

Finally, add an Exact duration Text field named course_duration_label. The General tab identifies the field’s type and name.

Open Validation and enable Required.

In Presentation > Instructions, remind editors to update the duration band whenever this value changes. Then save the field group.

Duration uses two fields because the dropdown matches a saved band. It does not calculate a range from text such as 2 hr 30 min. Assign courses shorter than three hours to Under 3 hours, courses from three through six hours to 3–6 hours, and longer courses to Over 6 hours.

3. Add The Sample Courses

In Courses > Add New, create the first course with a title, excerpt, and featured image. Fill in its four course fields, then publish it.

The Excerpt is a standard WordPress post setting, separate from the ACF Course details fields. Open the course editor’s post settings sidebar and use its Excerpt control to enter the short description used on the directory card.

Repeat for the remaining courses, using these values to reproduce the example and its filter tests:

• Web design fundamentals: UI design; Beginner; Under 3 hours; 2 hr 30 min.
• Responsive layouts: Development; Intermediate; 3–6 hours; 4 hr 15 min.
• Design systems in Figma: UI design; Intermediate; 3–6 hours; 5 hr.
• Build with WordPress: WordPress; Beginner; Over 6 hours; 6 hr 30 min.
• Accessible interfaces: UI design; Beginner; Under 3 hours; 2 hr.
• Advanced CSS layouts: Development; Advanced; Over 6 hours; 7 hr.

The excerpt supplies each card’s short description. Keep it brief enough to scan alongside the title and metadata.

Add the information visitors should read on the individual course page to the main content editor. The excerpt and ACF fields populate the directory, but they do not automatically create a complete course-detail page. Without main content or a custom template, a course page may show only its title and featured image.

For the directory images, we’ll use each course’s title as dynamic alt text when configuring the Image module in section 5.

4. Create The Directory Page

Go to Pages > Add New and name the page Web Design Course Directory. Choose the Blank Page template for the standalone demo, then open Divi Builder and start with a regular section and a one-column row.

Find The Section And Row Settings

Click the stacked-layers icon in the left toolbar to open Layers, then double-click an element’s name to open its settings on the right. Choose Content, Design, or Advanced, then expand the named settings group.

Each settings image shows one native Builder view. Locate the selected element in Layers, then follow the open tab and settings group on the right. Red outlines identify the relevant controls.

You can name an element through Content > Meta > Element Label. In this demo, the Post Filter module is labeled Filter courses in Layers; its settings panel still identifies it as Post Filter.

Double-click the section in Layers, then open Content > Background and use #ffffff.

With the section selected, open Design > Spacing and set top and bottom padding to 64px and left and right padding to 0px.

Select the row inside the section in Layers. Open Design > Sizing, set Width to 88% and Max Width to 1280px.

Open the row’s Design > Spacing settings and set its top and bottom padding to 0px.

Build The Directory Introduction

Inside the column, add a Text module for the small introductory label. Open Content > Meta and set Element Label to Library eyebrow. In that Text module, open Design > Text and set its font to Inter, weight 500, size 14px, and color #022eee.

Open Design > Spacing and give Library eyebrow a 20px bottom margin.

Add a Group below it and label it Directory intro. With Directory intro selected, open Design > Layout and use a Flex row with a 28px horizontal gap and bottom alignment.

In Directory intro > Design > Spacing, use a 40px bottom margin.

Add a nested Hero text Group and a Text module beside it. Select Hero text in Layers and open Design > Sizing. Set its width to 68%.

Select the adjacent introduction Text module and set its Design > Sizing > Width to 30%.

In Hero text, add an H1 Heading module for the main title. In the Heading module, open Design > Heading Text. Use Inter 500 at 64px, black text, 1.1em line height, and -0.03em letter spacing.

Add a Text module for the blue subtitle. Open its Design > Text settings and use Inter 500 at 64px and #022eee.

Select the adjacent introduction Text module. Add a short explanation of the directory and use its Design > Text settings to set the text size to 18px.

5. Build One Dynamic Course Card

Below the introduction, add an H2 Heading module for the course-list heading and a Text module for a short supporting note. Select the Heading module and open Design > Heading Text for Inter 500, 26px, and black.

Select the note’s Text module and open Design > Text for 15px and rgba(0,0,0,0.75).

In each module’s Design > Spacing settings, keep the heading’s bottom margin at 0px and give the note a 24px bottom margin.

Add a Group beneath the note and label it Course grid. In Design > Layout, choose Grid, set Number Of Columns to 3, and use 24px horizontal and vertical gaps. Keep the default 100% width in Course grid > Design > Sizing; the image below shows the Layout settings.

Inside that grid, add a Group labeled Course card. In its Content > Loop settings, enable Loop Element, choose the post-type query, and select Courses. Give this Group a clear label so you can recognize it in the filter’s target list.

In the same Loop group, set Posts Per Page to 6, Order By to ID, and Order to Ascending so the sample courses stay in their creation order.

Style The Course Card

Select Course card and open Design > Layout. Use a Flex column, stretch alignment, no wrapping, and zero gaps.

With Course card selected, open Content > Background and set its background to white. Under Design > Border, apply 24px rounded corners.

In the same Border group, apply a 1px solid border in rgba(0,0,0,0.12).

Connect The Card Content

Inside Course card, add an Image module. Select the Image module and open Content > Image. Open the Image field’s dynamic-content picker and choose Loop Featured Image.

Leave the Image module’s Sizing settings at their defaults and check that the image fills the card.

For its alt text, open Advanced > Attributes and add an attribute. Enter alt as the attribute name, choose Image as the target element, and set Attribute Value through dynamic content to Loop Post Title. Each directory image will use its course title as its alt text.

Add a Group after the Image module and label it Course details. In Design > Layout, use a Flex column and explicitly set its horizontal and vertical gaps to 0px. We’ll control the space between its contents with module margins.

Open Design > Spacing and give Course details 22px padding on all sides. Fill this Group with the category, title, and excerpt modules described below.

Add The Category, Title, And Description

Add a Text module for the category. Open the category Text module’s Content > Text settings. In its dynamic-content picker, choose Loop Post Custom Field, then select Category (course_category) so each card displays its course’s value.

In that module’s Design > Text settings, use Inter 500, 13px, and #022eee.

Open the category module’s Design > Spacing settings and set its bottom margin to 10px.

Add an H3 Heading module. Open Content > Text and delete the module’s default heading text before inserting dynamic content. Then use the dynamic-content picker to choose Loop Post Title. The field should contain only the dynamic title, without the starter heading text beside it.

In the title module’s Design > Heading Text settings, use Inter 500, 23px, 1.15em line height, -0.03em letter spacing, and black text.

In its Design > Spacing settings, set its bottom margin to 12px.

Add a Text module for the description and open Content > Text. Replace its starter content through the dynamic-content picker with Loop Excerpt. Open its Variable Settings and set Number Of Words to 30.

In the excerpt module’s Design > Text settings, use Inter 400, 15px, 1.5em line height, and rgba(0,0,0,0.75).

Open the excerpt module’s Design > Spacing settings and use a 20px bottom margin.

Finally, open its Design > Sizing settings and set Min Height to 72px.

Link The Image And Title To The Course

Dynamic image and title content do not automatically make the card clickable. Add the links separately so visitors can open the course represented by each loop item.

1. Select the card’s Image module in Layers and open Content > Link.
2. Leave Open in Lightbox disabled. Beside Image Link URL, open the dynamic-content picker.
3. Under Loop Dynamic Content, choose Loop Link. Leave Before, After, and Loop Position empty, then click Apply.
4. Keep Image Link Target set to In The Current Tab.
5. Select the course-title Heading module and open Content > Link.
6. For Module Link URL, open the dynamic-content picker and choose Loop Link. Leave the optional values empty and click Apply.
7. Keep Module Link Target set to In The Current Tab.

Choose the link from Loop Dynamic Content so each repeated card opens its own course. A static course URL would send every card to the same destination.

These settings make the image and title clickable. The card’s category, description, and metadata remain supporting content.

Add The Level And Duration

For the metadata footer, add another Group inside Course details. With the footer Group selected, open Design > Layout. Use a Flex row with Space Between, wrapping enabled, and a 10px horizontal gap.

Open the footer Group’s Design > Spacing settings for 16px top padding.

Open its Design > Border settings and apply a 1px top border in rgba(0,0,0,0.12). Then add two Text modules for the level and exact duration.

For the first Text module, open Content > Text, use the dynamic-content picker to choose Loop Post Custom Field, then select Level (course_level).

Repeat for the second Text module, choosing Exact duration (course_duration_label).

For the Level Text module, open Design > Text and use Inter 400, 14px, and black.

Apply the same typography to the Exact duration Text module.

You should see different course content repeated through the same card design. If every card shows the same text, reopen its dynamic-content setting and select the field from the loop’s course.

Below Course grid, add a Text module with guidance for visitors who cannot find a match. Explain that they can try another filter combination or use Reset filters. In Design > Text, use 14px text.

This guidance remains visible beneath the directory, including when Divi displays its standard empty-results message. That default message can include generic wording about a page not being found, so the additional text should clearly explain what visitors can do next.

Open the guidance module’s Design > Spacing settings and set its top margin to 24px.

6. Add The Three Course Filters

Between the introduction and the course-list heading, add a Group labeled Filter bar. Open its Content > Elements settings to add the filter module next.

Place a Post Filter module inside Filter bar and label it Filter courses. Open Content > Target and choose Course card from Target Loop, set Apply Mode to Auto, and set Relation to And.

Auto applies each selection as it changes. And requires the course to match every active dropdown. Choosing UI design and Beginner therefore narrows the result to beginner UI-design courses.

Configure The Filter Items

In the Post Filter module’s Content > Elements settings, remove the starter controls and add a Post Filter Item. Under the item’s Content > Field settings, configure Category as follows:

• Field Type: Select.
• Field Label: Category.
• Field Value Type: Text.
• Field Option: the ACF field Category (course_category).
• Field Comparison: equals (=).
• Options Method: Automatic.
• Field Placeholder: All categories.

Duplicate Category to create the Level item. Choose Level (course_level), use Level as its label, and enter All levels as its placeholder. Keep the remaining field settings the same.

Duplicate an item again for Duration. Choose Duration band (course_duration_band), use Duration as its label, and enter Any duration as its placeholder. Keep the same Select, Text, equals, and Automatic settings.

Because Automatic fills the dropdowns from stored field values, publish the sample courses before checking the controls.

If an option is missing after you add a new value, select the affected Category, Level, or Duration item in Layers. Open its Content > Field settings, find Options Method: Automatic, click Clear Cached Options, and reload the page. The Post Filter Item documentation explains the automatic and manual option settings.

Style The Filter Bar

Select Filter bar. In Content > Background, use #f2f3f7. Set the corner radius to 24px in Design > Border. In Design > Spacing, use 24px padding on all sides and a 36px bottom margin.

Select the parent Post Filter module. In Design > Layout, use a Flex row with No Wrap, a 20px horizontal gap, and a 16px vertical gap. Explicitly disabling wrapping keeps the third dropdown on the same desktop row.

For the Post Filter module’s width, use 82% in Design > Sizing, leaving room for Reset. Set each child filter item’s width to 33.333%.

Return to Filter bar > Design > Layout. Use a Flex row with bottom alignment and 20px horizontal and vertical gaps. The bar now holds three unstyled fields; Reset is added afterward.

Style The Filter Fields

Under the parent module’s Design > Field > Input Text settings, use black Inter text at 16px for the values.

In the same Field group, use white backgrounds and set the label text to black Inter 500 at 14px. Set field padding to 12px vertically and 14px horizontally.

Still in Post Filter > Design > Field, open its Border controls. Apply 8px field corners and a 1px solid border in rgba(0,0,0,0.12).

With the Post Filter module selected, open the device/state menu at the upper right of its settings panel and choose Focus. In Design > Field > Border, use a 2px solid border in #022eee at 100% opacity. Afterward, return to Desktop.

Add A Reset Button

Inside Filter bar, add a separate Button module beside Post Filter. In Content > Text, enter Reset filters. Open Content > Link for the button URL, then use its dynamic-content picker to choose Current Page Link. This resolves to the directory’s clean permalink.

In the Reset Button module, open Design > Button > Text and use white Inter 500 text at 15px. Keep the icon disabled.

Under Button > Border, set the corner radius to 999px and the border width to 0px.

Open the Reset Button module’s Design > Button > Background controls and set the background to black. Then open the module’s Design > Spacing settings and use 14px padding vertically and 22px horizontally.

This button reloads the directory without the filtered query string. Because it clears all query parameters on this page, use this approach for the standalone directory shown here. It also avoids stale dropdown selections observed with the built-in Reset item after reloading a filtered view in the tested build.

7. Adjust The Tablet And Phone Layouts

Select Course grid and open Design > Layout. Open the responsive control for Number Of Columns. In its Responsive Editor, set Desktop to 3, Tablet to 2, and Phone to 1. The three device rows below show those values together.

With the phone breakpoint selected, set the grid’s horizontal gap to 0px and retain its 24px vertical gap.

Set The Filter And Introduction Layouts

Select Filter bar and choose Tablet in the settings-panel device menu. In Design > Layout, use a Flex column and stretch alignment.

Select Post Filter and open Design > Sizing to set its Tablet width to 100%.

Select Post Filter and choose Phone. In Design > Layout, use a column.

Select each child filter item and open Design > Sizing to set its Phone width to 100%.

Select Directory intro, choose Phone, and open Design > Layout to use a column.

With Phone selected, open Hero text > Design > Sizing and set its width to 100%.

Repeat the 100% Phone width for the adjacent introduction Text module.

Select the main Heading module, open Design > Heading Text, and use the responsive control for its text size: 40px on tablet and 32px on phone. The screenshot shows the Phone value.

Repeat the 40px Tablet and 32px Phone text sizes in Design > Text for the blue subtitle Text module.

Select the section, choose Phone, and open Design > Spacing. Set top and bottom padding to 36px.

Save the page and check the frontend at desktop, tablet, and phone widths. The video below switches the native preview between desktop, tablet, and phone layouts. Labels should stay readable, cards should fit the screen, and the page should not scroll sideways.

Click Save in the Builder’s upper-right toolbar, wait for saving to finish, then click Exit.

8. Test The Directory

On the frontend, choose UI design. The clip shows Category changing from All categories to UI design and the three matching courses appearing. The open dropdown menu is not visible in this recording.

With UI design selected, add Beginner and Under 3 hours. Web design fundamentals and Accessible interfaces should remain. Reload the filtered page and confirm that the selected values and results persist.

Click Reset filters. All six courses and the three dropdown placeholders should return.

Choose Development, Intermediate, and 3–6 hours. Responsive layouts should be the only result. The continuous video shows these checks in order, including a scroll through the restored courses after Reset.

Check The Course Links

Click the remaining course’s title and confirm that it opens the Responsive layouts course page. Return to the directory, reset the filters, and open a different course through its image.

Repeat an image-link test after applying a filter. Confirm that the destination matches the course you clicked, rather than the first course in the loop or the directory itself.

Check the individual course page as well. Its main content should contain the information visitors need after leaving the directory. The directory’s card excerpt does not automatically become the body of that page.

Check Empty Results And Keyboard Focus

For an empty-result test, choose WordPress, Advanced, and 3–6 hours. No sample course matches that combination.

Divi displays its standard empty-results output, which can include No Results Found and generic wording about a page not being found. In this situation, the directory page is still available; the selected filters simply have no matching courses. Keep the explanatory guidance and Reset button available so visitors can recover.

Put keyboard focus on Category and press Tab to move to Level. Watch the blue outline move between those two controls in the clip.

Continue tabbing through Duration and Reset, and check that selections work without a mouse. The short clip demonstrates only Category-to-Level focus movement.

After resetting the directory, continue to a course image link and press Enter to check that it opens the matching course.

The filter combinations, filtered reload, Reset behavior, and responsive grid were checked in the manually built native demo. Course navigation was also checked through a title and an image after filtering. Run these checks again with your own content before making the directory available to visitors.

Download The Course Directory Layout

The download contains the Divi Library layout, an ACF structure export, a sample-course reference file, six course images, and a README with setup instructions.

Because the layout needs the course post type, fields, and content to display its cards, unzip the archive and read README.txt before importing.

The ACF import is an alternative to creating the post type and fields manually in sections 1 and 2. If you have already completed those sections, keep your existing setup and skip the ACF import. Importing another registration with the same course post-type key can create a conflict.

To use the supplied ACF structure on a site without that setup, open ACF > Tools. In the Import panel, choose ACF Course Structure.json and click Import JSON to register Courses and its Course details fields. Use the Import panel on the right; the checkboxes on the left belong to the separate Export controls.

Upload the images to your Media Library, then create each of the six course records manually using Sample Courses.json as a reference. This reference file is not a one-click WordPress content import. Use the course-entry example in section 3 for the fields, and add any course-page information to each record’s main content editor.

Import The Layout Into Divi

Open Divi > Divi Library > Import & Export > Import. Click Choose Files, select Web Design Course Directory.json, then click Import Divi Builder Layouts. The image shows the dialog before file selection.

Create a directory page and open Divi Builder. In the Library picker’s Your Saved Layouts tab, select the imported Web Design Course Directory layout and click Use This Layout.

Use Replace Existing Content only on the new page whose content you intend to replace. The screenshot’s layout name includes a test-import suffix; select the layout you imported.

Check its dynamic fields and target loop. To make the course images and titles clickable, follow Link The Image And Title To The Course in section 5.

Save the page and repeat the filter and course-link tests above. Follow the content setup instructions when moving the layout to a different site.

Use the files below to start with the design, then replace the sample descriptions and illustrations with your own course content.

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!

Keep Your Course Directory Current

To add another course, create its record in Courses and fill in the same fields, keeping the exact duration and its band consistent. Follow the course-entry example in section 3.

The example shows up to six courses. For a larger catalog, select Course card in Layers and open Content > Loop > Posts Per Page. Increase that value to include all your entries; the image shows the example’s current value of 6. A paginated directory can be a later extension.

You can change the card design once in the loop and apply that presentation across the catalog. The same course fields continue to supply the dropdowns, giving visitors a way to find courses that match their subject, experience, and available time.

When adding or changing courses, check their links and destination content as well as their filter values.

Build Your Course Directory With Divi 5

With Divi 5, you can turn a collection of courses into a directory that helps visitors choose where to start. The Loop Builder keeps your course cards consistent, while the Loop Filter Modules let visitors narrow the selection by category, level, and duration.

Start with the downloadable layout or build the example step by step, then replace the sample content with your own courses. Before sharing your directory, check its filters, course links, and responsive layouts so visitors can find a suitable course and open its details.

The post How To Create A Course Directory With Category, Level, And Duration Filters appeared first on Elegant Themes Blog.

The new Icon Manager in Divi 5 makes it easier to bring another icon family into a design. You can import SVGs into a collection and choose them from the icon picker while you build.

Here are three sections with four icon styles each. The design stays fixed throughout each comparison, from the type and copy to the spacing between cards. Watch the icons change, then try the same approach in the Visual Builder.

Four Icon Styles, Three Different Designs

These examples cover three settings. A hotel’s amenity row, an adventure card, and a repair service’s process diagram give an icon different roles, so the examples below compare four families across all three:

• Font Awesome Solid: A bold baseline available among Divi’s included icons.
• Google Material Symbols Rounded: Rounded shapes with an extensive library of subjects.
• Phosphor Regular: A line-based style with room around its details.
• Lucide: A consistent outline family for another take on the same visual roles.

Font Awesome is separate from the original Elegant Icon Font included with Divi. The downloadable layouts use original ET icons as defaults. The comparisons also demonstrate separately imported SVGs.

The subjects vary between families. Lucide uses footprints for walking; Phosphor’s sailboat gives the water card a boating theme.

1. Sunday House: A Softer Welcome

Sunday House invites a slower pace. Its warm cream background, editorial headline, and postcard illustration set the mood before four small icons introduce coffee, walks, dining, and the evening.

Watch how the filled cup and moon hold more visual weight than their outlined alternatives. The headline and postcard remain in place as the four families rotate through the amenities row.

Watch the amenities row. The dense, solid icons establish a rhythm across the bottom of the section that remains easy to pick out beneath the much larger headline.

Phosphor Regular leaves more empty space inside the cup and other symbols. That gives the amenities a lighter presence alongside the delicate rules and serif typography. Material Symbols Rounded offers another interpretation of those familiar objects; Lucide introduces a different walking cue through footprints.

Here is the Phosphor version as a still. Notice the balance between the fine icon shapes and the stronger headings immediately beneath them.

For a hospitality design, check whether the icons support the atmosphere you want. A small amenity row can carry useful information without competing with the main invitation.

2. Outside People: Give The Cards Some Energy

Outside People puts its icons in a louder setting. Lime, lavender, and cream cards sit against a dark background, with oversized symbols above condensed uppercase headings.

At this scale, the icon family becomes a major part of each card. Compare the solid mountain silhouette with the more open line drawings, then follow the cycling symbol through the sequence.

Font Awesome holds its own here. The large areas of dark ink give the mountain and bicycle enough presence to compete with the bright cards and forceful headings.

The color comes through. With open line drawings, more of each card’s surface remains visible inside the icon, which changes its balance against the large headline. Phosphor’s sailboat also turns a general water activity into a boating cue; choose the subject that fits your offering.

The solid version below shows how much of the composition those three symbols occupy. Judge your candidates in their actual cards, with the final labels in place.

Keep the drawing style consistent across the row. Mixing a heavy mountain with a delicate bicycle can make one activity appear more important, even when the cards have equal space.

3. Fix!: Carry The Same Style Across Sizes

The repair section uses a wrench inside its large orange badge, then repeats the visual language in three job-sheet cards. Search, repair, and completion turn the service into an understandable sequence.

This example lets you judge a family at two sizes. Watch the hero wrench first, then compare the smaller icons in the cards beneath it.

The filled wrench gives the badge a strong center. An outlined wrench reveals more orange and makes the badge feel less dense, while the surrounding lettering stays unchanged.

In the cards, pay attention to the search icon’s handle and the space inside the wrench. Details that look attractive at hero size also need to remain legible in a smaller supporting role.

Lucide connects the badge to the process cards through the same outline treatment. See how the smaller wrench echoes the one above it.

For a service business, the words still need to explain the process. An icon helps a reader scan the cards, while “Show us the problem” and “Leave it with us” supply the meaning.

Try Another Icon Set In The Visual Builder

You can repeat this comparison using the native Icon modules in Outside People. Start with a small collection containing the three symbols the cards need.

The SVGs In This Example

For the Phosphor version, use the Regular versions of Mountains, Sailboat, and Person Simple Bike. The collection uses one file for each card.

Google also offers SVG downloads through its Material Symbols library, and Lucide provides SVGs through its icon browser. Google’s symbols use Apache 2.0; Phosphor uses the MIT license. See Lucide’s license page for its ISC terms and notices for icons derived from Feather. Keep the applicable notices when using or redistributing assets.

Import The Collection

Begin on the Outside People page. In the Visual Builder, open an Icon module inside one of the activity cards and follow these steps:

1. Under Content, open the Icon group and click the current icon preview.
2. Click Icon Manager at the bottom of the picker.
3. Click Import Icons, then Choose Icon Files, and select the three SVGs.
4. Choose New Collection and enter a descriptive name, such as Outside People — Phosphor.
5. Click Import and wait for the icons to appear in the collection.

The recording follows that upload through the actual Icon Manager. A project-specific collection name makes it easier to find when you return to the picker.

Change The Icons And Save

Return to the picker. Close the manager, open the module’s icon preview again, and filter to your new collection so only its three choices appear. Choose Mountains for the first card.

Open the second card’s Icon module and choose Sailboat from the same collection. Repeat with Person Simple Bike on the third card, then click Save.

Keep the design unchanged while judging the swap. Once the family feels right, use the module’s design settings to refine the size and color where needed.

Keep The Icons In Balance With The Type

An icon’s nominal size does not tell you how large it will look. A filled silhouette can feel heavier than a line drawing inside the same bounding box. Compare the row as a whole and make small optical adjustments after choosing the family.

Type can help, too. With a supported font, Divi’s variable font controls expose axes such as weight and width, while the accompanying text settings give you control over wrapping and capitalization. A tightly condensed heading and a broad serif heading may call for different icon weights.

The layouts use responsive values, including clamp(), through Divi’s own settings. Check your phone view. When the cards stack, large icons take on a different relationship to the heading beside or beneath them; our font sizing guide covers the type adjustments available.

Keep the labels visible. Where an icon only decorates equivalent text, it can be hidden from assistive technology so the information is not announced twice. An interactive icon needs an accessible name explaining its action; color alone should not supply that meaning.

For a standalone illustration that needs SVG-specific styling, Divi’s SVG module is another relevant option. These examples use Icon modules so the collection picker remains the central workflow.

Download The Three Layouts

The download contains Sunday House, Outside People, and Fix! as individual Divi Library JSONs, plus one combined Library export containing all three. Each layout uses native Divi modules and original ET icons by default, with no custom CSS.

No third-party icon files or custom icon collections come with the pack. Some default symbols are approximations: the outdoor cards use a compass, map, and location pin, for example. Import your chosen SVGs separately to reproduce the other styles above. The hotel’s decorative postcard image is included.

These are Divi Library exports. Our Library import and export guide explains how that format moves between websites.

Download the Files

Download For Free

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

DOWNLOAD

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

Start with the design closest to your project and compare two icon families before changing anything else. When you can see the difference in context, choosing icons becomes a more deliberate design decision.

The post Give Your Divi Designs A New Look With The Icon Manager appeared first on Elegant Themes Blog.

Divi 5 gives you several ways to build that structure. Variables hold reusable values, text settings shape individual roles, and presets carry those combinations across your site. You can start with readable headings and paragraphs, then add responsive sizing, variable font controls, and text effects where they serve the design.

Begin with your text roles, connect them to variables, and save the combinations you want to repeat. The steps below take you through that setup and show what to check before using it across your site.

How Typography Guides Readers

Typography gives a page its reading order. A clear heading tells visitors where a section begins; consistent body text lets them settle into the explanation. Font choice, spacing, and contrast influence how comfortable that reading experience feels.

Consider the consultant layout below. The name carries the most visual weight, the section heading introduces the next topic, and the supporting text occupies a separate role. Those differences help readers understand the page without making every line compete for attention.

When similar headings change size between pages, readers have to interpret the hierarchy again. Consistent styles give them familiar cues as they move through the site.

Screen size introduces another constraint. A long heading needs room to wrap on a phone, while a wide paragraph needs a controlled reading width on desktop. Changing font size alone may leave awkward line breaks or cramped spacing. A useful typography system considers the text and its container together.

How Divi 5’s Typography Tools Work Together

Divi’s typography workflow connects shared values with reusable combinations of settings. Understanding those layers helps you choose where each decision belongs.

Design Variables For Shared Fonts, Colors, And Sizes

Design Variables store named values that you can reference in compatible fields. Open the Variable Manager from the Visual Builder‘s left sidebar to manage them.

For typography, the most useful types are Fonts, Numbers, and Colors. A font variable holds the family, a number variable can hold a size or other numeric value, and a color variable holds a shared color. Divi also supports variables for other design and content values, including gradients, images, text, and links.

A variable affects the fields that reference it. Creating a heading-size variable makes the value available; assigning it to a heading connects that heading to future changes. Presets help you repeat those assignments across compatible elements.

Static Fonts And Variable Fonts

A static font supplies distinct styles, such as Regular, Bold, and Italic, commonly in separate files. When a requested weight is unavailable, the browser follows font-matching rules to select an available face. Browsers can also synthesize bold or oblique treatments when allowed. Check that your intended faces are available and preview the result in the browser.

Variable fonts contain variation data that supports a range of styles in one font resource. An axis controls an aspect of that variation, such as weight or width. Intermediate values are calculated from the font’s designed data, allowing finer adjustments within its supported range.

The available axes depend on the typeface. One font may offer weight alone; another may include width, slant, optical size, grade, and additional controls. In Divi 5, choosing a supported Google variable font exposes its applicable controls in the module’s text settings.

The clip below changes the consultant heading’s Roboto Flex Weight from 800 to 400, then restores 800. Other fonts can expose different axes and ranges.

Text Layout, Flow, And Effects

Font settings determine the appearance of letters. Flow controls determine how those letters occupy the available space. Divi’s relevant text groups include options for columns, wrapping, direction, hyphenation, and paragraph spacing. Body text also supports drop caps.

These controls suit different roles. Balanced wrapping can help a short heading, while a longer article may benefit from paragraph spacing and carefully chosen column widths.

The clip below turns on a gradient fill for the consultant heading, showing one display effect in the same layout.

For display text, Divi also offers gradient and image fills, transparent fills, and strokes. A gradient variable can connect a heading’s fill to other uses of that gradient. The heading remains editable text.

Option Group Presets And Element Presets

Option Group Presets save settings from a compatible group, such as heading typography. That preset can combine a font reference, a size reference, weight, line height, and letter spacing into one reusable treatment.

Element Presets collect the styling of a particular element type. A Text module preset can include its heading and body typography treatments alongside spacing and other settings. It becomes available to other Text modules; a different element type has its own presets.

Editing a shared preset updates connected elements, subject to their other presets and local overrides. Variables hold values, settings reference those values, and presets distribute the combinations you want to repeat.

Build A Typography System In Divi 5

Start with the text roles your site needs, then create shared values and apply them to representative content. The consultant layout gives us a useful mix of display text, section headings, descriptions, and supporting details. It uses native Divi settings throughout.

Plan Your Typography Roles

Choose a manageable set of roles before adjusting individual modules. A portfolio might need a display heading for the person’s name, section headings for experience and projects, body copy for descriptions, and smaller text for dates or contact details.

Give each role a purpose. H1 identifies the main page heading; H2 introduces a major section; H3 introduces a subsection. Use further levels when the content structure requires them. Choose the semantic heading level for its place in that structure, then style its visual size separately.

One font family can cover several roles. A second family may provide a useful contrast between headings and body copy. Begin with the smallest selection that gives your content a clear hierarchy, then test it with real text.

Set Your Heading And Body Font Variables

Open the Variable Manager and expand Fonts. The screenshots use Heading and Body variables, pairing Roboto Flex for headings with Georgia for body copy. Choose the family for each role, click Save Variables, then confirm Apply Changes.

On an established site, check where an existing font variable is used before changing it. Add separately named variables if this typography system should remain independent of the site’s current styles.

The font picker provides access to Google Fonts and any custom fonts available on your site. Choose a supported variable font when you want to use its axis controls. You will configure those controls in the module’s relevant text group after selecting the family.

Keep the variable names tied to roles. Heading and Body remain understandable if the chosen typeface changes later. A font variable establishes the family; the rest of the typography treatment comes from settings and presets.

Generate And Save A Responsive Type Scale

A type scale establishes sizes for your text roles, with smaller and larger steps built around a base value. Open the Numbers group in the Variable Manager, hover over its heading, and choose Generate Fluid Sizing Variables. In the Variable Generator, set Variable Type to Font Size.

Choose how those sizes should adapt using Scale Type. Divi offers three options:

• Fluid Scale (CSS Clamp): Uses clamp() values to scale between defined bounds as the viewport changes.
• Fixed Scale (Responsive): Creates separate sizes for the configured breakpoints.
• Fixed Scale (Single): Creates values that stay the same across screen widths.

Start with a fluid scale when headings should grow smoothly with the layout. If a design calls for an exact size at a particular breakpoint, use fixed responsive values and set those changes explicitly. The fixed-size example below uses 72px for desktop, 40px for tablet, and 24px for phone. The clip opens those values in the heading’s Responsive Editor.

Review the base sizes, ratios, and viewport range in the generator. Set the Variable Prefix to text-. Use a 1.125 minimum scale and a 1.25 maximum scale, with a 360px viewport lower limit, an 80% desktop row width, and a 1080px desktop row maximum. Keep rem units with 1rem equal to 16px. With a base minimum of 16px and a base maximum of 18px, text-m spans 16–18px, while text-xl spans approximately 20.25–28.13px.

Adjust the base size or ratios and the values change, so the same variable name can represent different sizes on another site.

Choose each step by its actual size and intended role. You might use text-m for body copy, a larger step for section headings, and another larger step for display text. The labels describe scale steps, so check the actual range before assigning a role. Reserve smaller values for supporting content only when they remain comfortable to read.

Click Add Variables To My Site when the scale looks suitable. Review the imported values in Numbers, then click Save Variables and confirm Apply Changes. The sizes are now available for assignment in compatible fields. Creating the scale leaves the choice of which step belongs on each heading to you.

Configure Heading, Body, And Link Colors

Expand Colors in the Variable Manager. The example contains Primary Color, Secondary Color, Heading Text Color, Body Text Color, and Link Color. Set Heading Text Color to a value that works against your intended background. The screenshot uses #191919.

For a related body color, open the Body Text Color picker and select Heading Text Color under Global Colors. The field should show the named color as a chip. Set its opacity to 80%, save the variables, and confirm Apply Changes.

Typing the same hex value creates an independent color; selecting the global color keeps the relationship. Changing Heading Text Color then changes its derived body color. At 80% opacity, the foreground is twenty percent transparent.

Treat that opacity as a design example. A translucent foreground combines with the background beneath it, so the result needs checking on every surface where it appears. Normal text generally needs a contrast ratio of at least 4.5:1; qualifying large text needs at least 3:1 under the WCAG minimum contrast criterion.

For links, select Primary Color as the reference for Link Color if it gives suitable contrast. Assign that link-color variable to the module’s link-color field and enable an underline in the Link tab. Check the result against its background and surrounding text. Add a separate light-text variable when the design needs one for dark sections.

Add Text And Set Meaningful Heading Levels

For a passage with headings and paragraphs, use the Text Module. Its rich text editor also handles lists. Add the module to your layout and enter enough copy in the Content tab to judge the spacing between complete paragraphs.

Select the relevant text and choose its heading level from the editor’s formatting menu. The heading and its supporting paragraphs can stay together in one module.

The Heading Module is useful for a standalone heading. In its Design tab, open Heading Text and use Heading Heading Level to select H1 through H6. Choose the level that fits your page structure; its visual size can be configured separately.

Choose other modules when the text needs a surrounding structure. A Blurb pairs it with an image or icon, while a Call To Action brings a heading and body copy together with a button. Apply your styles through the text groups each module provides.

Apply Variables And Refine Your Text Styles

Open the module’s Design tab and the text group for the content you want to style. The Heading module uses Heading Text; the body controls shown in our Text-module example are under Text.

Use the variable or dynamic-content icon beside a supported field to select its shared value. Assign the heading or body font variable to the font field, then choose the corresponding number and color variables for size and color.

You can also enter a fluid expression directly in the size field. Below, Heading Text Size contains a clamp() expression. For a reusable system, select the named number variable so this role stays connected to the shared scale. A direct expression is useful for a local example, but it is not linked to a number variable.

Size is one part of readability. Adjust Line Height while reading a complete paragraph, and give adjacent paragraphs enough space to remain distinct. Body copy often benefits from a line height around 1.5 as an initial design choice; test the actual typeface, size, and line length before settling it.

Keep the paragraph’s container narrow enough that your eye can find the next line comfortably. Long desktop lines may need a smaller content width. Tight mobile layouts may need more available width, fewer columns, or a different heading size. Use letter spacing carefully, especially on small body text.

Refine Supported Variable Font Axes

With a supported variable font selected, Divi exposes its applicable controls beneath the standard font settings. Adjust one control at a time while looking at the text in context.

• Weight: Changes stroke weight along the font’s supported range, giving a section heading more presence even when its size stays the same.
• Width: Changes the letterforms’ proportions. Check long headings and button labels after adjusting it.
• Slant: Adjusts the angle of the forms. True italic can involve different glyph designs, so choose an appropriate italic face or axis when that is the intended style.
• Optical Sizing: Allows supported fonts to adapt details for their display size. Auto is a useful starting point; judge the result with your content.
• Grade: Changes stroke density while preserving character advance widths, helping you adjust visual weight without the same spacing changes a weight adjustment can introduce.

In the following example, Roboto Flex’s Weight stays at 800 while Grade changes from -25 to 100 and back. Adjust one axis at a time, inspect the rendered heading, and restore the value if the change does not help the role.

Some fonts expose additional axes for features such as roundness, stroke proportions, or letter heights. Use the controls that serve a repeatable role in your design. A body paragraph and a display heading can share the same family while using different axis settings.

Below, the About section heading uses Roboto Flex with a Weight of 500 and Optical Sizing on Auto. Read the heading at its intended size before adopting those values. The demo keeps Georgia for its body copy.

Adjust Responsive Values And Optional Text Effects

A fluid variable changes size within its configured range. Inspect the result at intermediate widths as well as your main device views. Long names, narrow cards, and unexpected line breaks may require an adjustment to the scale or a local override.

The Responsive Editor lets you inspect available responsive values together. Click the Edit Responsive Values icon beside the font-size field to open its panel.

For a separate fixed-size example, the panel below shows a 72px desktop heading, a 40px tablet heading, and a 24px phone heading. The Responsive Editor also includes interaction-state rows; distinguish those from the device rows. Enter a value in the breakpoint row you want to override. A blank field follows the applicable inheritance chain, which can include another breakpoint’s override. Check the displayed inherited value before assuming it still uses your original fluid size. Reset an unwanted breakpoint override if that row should inherit again.

Shape Text Flow And Add Display Effects

For longer passages, text flow controls give you more ways to shape the reading experience. Choose them for the content they help organize:

• Text Columns: Flows content through CSS columns. Keep the columns wide enough to read, and reduce their count when the layout becomes narrow.
• Drop Caps: Enlarges an opening letter, with surrounding text flowing around it. Check the first paragraph on a phone, where the letter occupies more of the available width.
• Line Wrap Style: Balanced wrapping helps distribute heading lines. Pretty wrapping can improve paragraph endings, depending on browser behavior.
• Hyphenation: Can help break words in narrow measures when the document language is set correctly and the browser supports hyphenation for that language.
• Text Direction And Capitalization: Provide treatments for labels and other display text. Keep longer reading passages easy to follow.

Add A Drop Cap

To create the opening drop cap, open the Text module’s Design tab, expand Text, and select the Drop Cap tab. Set Drop Cap Line Size to 3 and Drop Cap Spacing to 8px. Choose the drop cap’s font and color to suit the opening paragraph, then check its spacing on a narrow screen.

Adjust Paragraph Flow

Return to the body-text tab for paragraph spacing, line wrapping, direction, hyphenation, and columns. Try Pretty wrapping on a paragraph and compare its line endings. Hyphenation needs an appropriate document language and browser support. Set Text Columns to 2 only when the content area gives both columns enough width; return to one column on narrower layouts.

Text direction controls reading direction, including right-to-left content. Capitalization changes the visual case. Choose the direction that matches the content and use capitalization for the intended visual treatment.

Style Display Text

Choose the heading’s Fill Type and configure the gradient or image field that appears. Open the gradient picker, then add the background gradient and color stops. To repeat the treatment, reference a gradient variable so related headings stay connected when you adjust its colors.

For outlined text, choose Transparent fill and set a nonzero Stroke Width. Start with a 2px stroke and adjust it to suit the text size. Stroke color and position controls appear once the stroke has a width. Choose a visible color and use Stroke Position for centered or outside placement.

Transparent fill without a visible stroke can make the letters disappear. Keep these effects selective and check legibility against the actual background, especially where gradients introduce lighter areas. Use responsive values only on fields that expose that capability.

Save And Reuse Your Typography Presets

Once a role works with representative content, save its settings as a preset. In Heading Text, hover over the group title and click the Assign Presets icon.

Choose New Preset From Current Styles, give it a role-based name such as Heading H2, review the included settings, and save the preset. Repeat for other roles that recur across your site.

To reuse it, open the compatible text group on another element and select the saved preset. Review the heading level alongside the visual styling. A local heading level or size can take precedence over the assigned preset, so applying a preset does not guarantee that an existing module will adopt every value.

The video below selects Heading H2 — Editorial for the About heading in the consultant layout.

Set a preset as the default when it should be the base treatment for that compatible group. Existing elements inheriting the default can change too. Local values and other assigned styles may take precedence, so check representative instances after changing a default. Select the appropriate preset for each role and check its heading-level setting.

For a reusable Text module configuration, combine the relevant text presets with its other shared styling. Click the Element Preset icon at the top of the module settings panel, create a preset from the current styles, name it, and save it. The Heading-module screenshot below shows the element-level control in the module header.

The two layers remain connected when an Element Preset references Option Group Presets. Edit the shared text preset to adjust its connected uses, or change a referenced variable when the underlying value should change. Review any local overrides that make an instance behave differently.

Check Your Typography Before Reusing It Site-Wide

Give the system a small set of representative content before applying it broadly. Include a short heading, a long heading, several paragraphs, a list, a link, and a caption or supporting detail. Check both light and dark sections if your site uses them.

Inspect the rendered page as well as the builder’s previews, moving through intermediate widths between desktop and phone. A heading may fit at either end but break awkwardly between them. Look for clipped letters and paragraphs that become difficult to track.

Check the page after its web fonts finish loading, then compare it on the devices your readers use. System fonts such as Georgia depend on local availability; a fallback can change line breaks and spacing. A saved font-family setting does not guarantee identical letterforms on every device.

Try enlarging text to 200% and confirm that content and controls remain available. The WCAG resize-text guidance explains that requirement. Fluid sizing still needs this check because changing viewport width and enlarging text can interact.

User spacing adjustments need room too. WCAG’s text-spacing criterion checks whether content remains available when readers increase line and paragraph spacing, along with the spaces between letters and words. Those override tests assess the layout’s flexibility; you can choose different values for its default appearance.

Troubleshoot Styles That Do Not Update

When a style behaves differently from the rest of the system, inspect its connections first:

• A size stays unchanged: Check whether the field references your number variable or holds a separate static value.
• Preset changes are missing: Confirm the element’s assigned preset, then inspect its local values. A local setting can take precedence over the preset.
• Axis controls are absent: Check that the selected font supports the axis and that you are viewing the relevant text group.
• Mobile text uses an unexpected size: Inspect the Responsive Editor for inherited values and explicit breakpoint settings.
• Body text loses contrast: Check its opacity and resulting color against the actual background.

These checks help uncover practical problems in your typography system. They are part of a wider accessibility review that also considers navigation, controls, content structure, and other page behavior.

Keep Your Typography Consistent As Your Site Grows

A useful typography system gives each decision a clear home. Font, color, and size variables hold shared values. Text settings define readable roles. Presets let you carry those roles into the next page without rebuilding every combination.

Start with a few roles your content needs in Divi 5, test them across screen sizes, and save the combinations that work. As the site grows, update those shared values and presets, then check representative pages for overrides and unexpected wrapping. That routine keeps everyday typography changes manageable while leaving room for a distinctive display treatment when the design calls for one.

The post The Ultimate Guide To Typography In Divi 5 appeared first on Elegant Themes Blog.

This article compares EmDash with WordPress based on the kind of site you are building and who will edit it. I have read up on EmDash and watched demos. Some of it does not impress me yet, but the project is early. We like many of Cloudflare’s products and value what the company does for the web. For our own sites, we would start with a pilot before committing to a migration.

What EmDash Is And Who Is Behind It

Cloudflare stewards EmDash under the MIT license, while WordPress uses GPLv2 or later. Cloudflare’s launch post says that no WordPress code went into it and that AI agents built much of it over two months. EmDash maintainer Matt Kane is also an Astro core maintainer. The Astro Technology Company team also joined Cloudflare.

An EmDash site can run on Cloudflare Workers with D1 and R2, or on a supported Node.js host with SQLite, libSQL, or PostgreSQL. The current Node.js deployment guide requires version 22.23.4 or newer; 22.16.0 is sufficient for Astro 7.3 or earlier. The admin has five roles: Admin, Editor, Author, Contributor, and Subscriber. Passkeys are the default login method. Its sidebar groups content with tools for menus, redirects, widgets, content types, plugins, and imports.

Posts open in a TipTap editor and are stored as Portable Text, a JSON format for content. The editing screen keeps publishing and the slug in a sidebar beside the content. Bylines and categories live there too.

TipTap is an open-source, headless editor framework. EmDash uses it for the Content field and saves what you write as Portable Text.

WordPress edits the same kind of post in its block editor, with post settings in its own sidebar.

Themes are Astro projects built from routes, layouts, and components. They query content through the EmDash runtime; they are not sandboxed like registry plugins. This development model shapes what happens when you move a site, as the migration section explains.

What EmDash Includes And What Still Needs Planning

EmDash 1.0 established a stable release, and later versions have expanded it. Its current features include:

• Collections with 17 built-in field types, including reference fields that link entries and repeater fields for structured rows.
• Sandboxed plugins on Cloudflare Workers and on Node.js.
• A WordPress import that takes either a WXR file or the output of an exporter plugin installed on the live site.
• A built-in MCP server, a command-line tool, and Agent Skills for building, upgrading, and porting sites and plugins.
• Optional per-request payments through the separate x402 integration.

Compared with WordPress, the official registry offers a much smaller selection of plugins. Cloudflare’s 1.0 announcement described paid registry support as a future goal. EmDash uses Astro templates rather than WordPress-style theme switching, and third-party themes are available. Its block composition system lets editors add and reorder developer-defined sections, but it is not a general-purpose visual page builder like Divi.

The registry’s home page lists each plugin with its author, its version, and its license with tags.

Cloudflare moved its own blog to EmDash. Its migration write-up describes gaps the team addressed around media, search, bylines, localization, SEO, and editor usability. Scheduled publishing arrived in version 0.19.0; it is supported in current releases.

Plugin Security On Each Side

Plugin isolation is a central part of EmDash’s design. Each sandboxed plugin runs with the capabilities it declares and the administrator approves. On Cloudflare, it runs in a Dynamic Worker; on Node.js, a separate workerd process provides isolation. Cloudflare deployments need the Workers Paid plan for this sandbox. Native plugins run in the server process without that isolation. Approved permissions still allow real changes, so sandboxing does not remove the need to trust a plugin’s publisher.

WordPress’s plugin risk is measurable. Patchstack’s security report counted 11,334 new vulnerabilities in the reporting period, a 42% increase over the previous period, with 91% in plugins, 9% in themes, and 6 in core. Of those, 46% were still unpatched at disclosure.

I vet every plugin before it goes on a site. I keep a closed repertoire, the same short list on all my sites, and I use Patchstack where I can. Vulnerabilities are increasing, at least in the number being found. I think I am not as exposed to them, because I have strong infrastructure around each site.

For WordPress, use a maintained set of plugins from trusted sources, remove plugins you no longer need, and test updates on staging. Review security advisories and the developer’s response to them. Install counts and the date of the last update can inform that review, but neither proves that a plugin is secure.

Patchstack’s plugin listing describes free vulnerability alerts; active mitigation requires a paid plan. Its Developer plan is listed at $69 per month for 25 sites when billed annually. Check current plan terms before budgeting.

The sandbox only helps when the required plugin can operate within it. WordPress has a far larger plugin ecosystem, but a small vetted list does not provide runtime isolation. Vetting, timely updates, backups, and monitoring manage risk; they do not eliminate it.

Building Structured Sites: Content Types, Fields, And Settings

I build sites around options pages and custom post types with custom fields. Clients edit settings on the options pages and add new posts with a defined set of obvious fields. EmDash comes close in the second half. You create a collection in the admin under Content Types or with the command-line tool, and the schema is read from the database at runtime.

The Add Field dialog lists all 17 field types. They include reference fields that link entries across collections and repeater fields that hold structured rows.

WordPress includes APIs for custom post types and post metadata in core. Code or plugins provide the editing interface. The free Secure Custom Fields plugin can register post types and taxonomies as well as field groups, repeaters, and options pages.

Site-wide options need a different setup. EmDash’s built-in Settings screens cover site identity, social profiles, and SEO defaults. Custom client controls can be implemented through plugin settings and admin pages. That makes a phone number, booking link, or banner toggle possible, but it requires development and template integration rather than an options-page workflow already configured in a fields plugin.

On WordPress, an options page comes from a fields plugin, and the client edits it in the same admin as everything else.

A phone number, a booking link, and a banner toggle all live on that one screen.

Routine WordPress Features That Need Rethinking On EmDash

Some WordPress features are routine because a plugin covers them in minutes. EmDash builds several into core. It covers an SEO panel with sitemaps, redirects with a 404 log, comments, and menus. Full-text search, multilingual content management, scheduling, and revisions are also supported. Multilingual content management does not mean that the CMS automatically translates the site. Forms and stores are where the routine changes, and so are email and premium add-ons.

Forms illustrate the difference in setup. EmDash has form plugins, but check each one’s rendering instructions: some require a companion package in the Astro project and an initial build and deployment. Installing a registry plugin alone does not necessarily put a form on the public page. On WordPress.org, Contact Form 7 lists 10+ million active installations, and WPForms Lite lists 5+ million. Forms can be placed through the supported block or shortcode. A builder such as Divi also provides a Gravity Forms module when that plugin is installed.

EmDash commerce is developing too. Urumi now offers Otta, an open-source commerce layer for EmDash. Before choosing it, verify the payment, shipping, tax, and integration requirements of the particular store. WordPress’s WooCommerce has a much longer-established ecosystem and lists 7+ million active installations. Divi adds WooCommerce modules for building product and store layouts.

The separate x402 package can charge for access to a resource through HTTP payment requests. It is not a shopping cart and should be evaluated separately from Otta or WooCommerce.

Visual Editing, Email, And The Rest

The distinction is between editing content and designing layouts. EmDash supports inline editing on the page, and editors can compose predefined blocks or select layouts when a developer has configured them. New layouts and styling still involve Astro development. On WordPress, Divi’s Visual Builder gives clients visual controls for designing the page itself.

Email needs a provider plugin in production. Without one, invites must be copied by hand. For paid add-ons, check the vendor’s licensing, update, and support terms separately; a free registry listing does not establish those services.

Moving A WordPress Site To EmDash

The WordPress import screen accepts a WXR export file, an EmDash Exporter migration key, or a site URL. The URL route still needs the exporter for an authenticated import; without it, EmDash only probes the public REST API. WXR imports use the data present in the export, and attachment URLs must remain accessible so media can be copied. The exporter can bring supported custom meta and SEO fields; comments, menus, the logo, and favicon require exporter 1.2.0 or later. Review field mappings and references rather than assuming a complete one-to-one conversion.

Themes are not imported. You port them by hand, and the migration docs tell you to check shortcodes, page-builder markup, and plugin-defined blocks after the import. A site built with a page builder moves as content, and its layouts are rebuilt as Astro pages.

Current imports use bounded chunks, but a successful import still needs verification. Compare content counts, review representative pages, check media and authors, and test redirects and any imported settings. EmDash’s theme- and plugin-porting Agent Skills can help with the rebuild; they do not make WordPress plugins or layouts directly compatible.

AI Agents On Each Side

AI has made me far more productive on WordPress. EmDash treats agents as a first-class user, with an MCP server built in at /_emdash/api/mcp. It authenticates with OAuth 2.1 or personal access tokens and never grants more than the user’s role. Its tools cover content, schemas, media, taxonomies, menus, revisions, and settings, and plugins can expose additional MCP tools.

WordPress builds the pieces in core. The Abilities API arrived in version 6.9 and lets core register what it can do in a machine-readable form, and plugins and themes can do the same. Version 7.0 added the AI Client, a PHP API for plugins, with providers supplied by official plugins from Anthropic, Google, and OpenAI. The official MCP Adapter exposes appropriately registered abilities to compatible clients such as Claude Code. It ships separately from core and does not automatically give an agent access to every WordPress operation. AI Engine, which we reviewed, is another route to a WordPress MCP server. Builders add agents of their own, too. Divi AI Agents works inside the Visual Builder, where you describe a change in plain language and it adds and edits modules and creates pages.

EmDash includes an agent interface that covers its whole content model. On WordPress, what an agent can do depends on the abilities that core and your plugins register.

What Each Costs To Run

WordPress runs on hosts that meet its PHP, database, and HTTPS requirements, potentially including one a client already uses. Both WordPress and EmDash are free, open-source software; hosting, development, maintenance, and selected services determine the total cost.

EmDash can run on Node.js hosting. On Cloudflare, sandboxed plugins require Workers Paid, which starts at $5 per month. That is a platform minimum, not a guaranteed complete site bill: usage, database, storage, and other services may add costs. WPMU DEV also offers managed EmDash hosting; its entry server is advertised at $30 per month, or $15 for Premium Pro members. Check membership costs and current terms when comparing the offers.

On WordPress, budget for hosting and the paid plugins or monitoring you select. On either platform, include the cost of ongoing development and support, especially if the client cannot maintain the stack.

Early Reactions Worth Weighing

Early reactions concerned the initial preview. Matt Mullenweg, WordPress’s co-founder, called the product “very solid” with “excellent engineering.” He called Agent Skills “a brilliant strategy” and said WordPress needs “to do the same.” His objection was that the plugin sandbox “only works on Cloudflare.” That comment concerned the launch preview; current EmDash also supports sandboxing through workerd on Node.js.

Yoast founder Joost de Valk welcomed the agent-oriented design while warning that rapid AI-assisted development is not a substitute for production experience. His reaction is useful context, but it predates the stable release and subsequent improvements.

Which One To Pick For Your Next Site

The right pick depends on the job the site has to do and who will edit it.

For a site that depends on established plugins, visual page design, or a client editing workflow you already support, WordPress is usually the more practical starting point. Custom fields alone do not decide the comparison: both systems support structured content. A content site maintained by a TypeScript developer who already works with Astro is a stronger case for an EmDash pilot. Confirm required integrations and editing controls before committing.

Where To Go From Here

I have concerns and questions about moving any of my sites to EmDash. It seems exciting, but I have invested heavily in the WordPress plugin and theme ecosystem and established SOPs, and I have seen large gains in productivity from AI. I still see so much untapped potential in WordPress, even with its quirks, that switching is hard to justify.

If you are staying on WordPress, the next step is a short list of vetted plugins and monitoring you trust. Our guide to WordPress AI plugins covers the agent side. If you are curious about EmDash, try the public playground or a small pilot site before you plan a migration. For the bigger picture, see Is AI Going To Kill WordPress?

For a visual WordPress workflow, explore Divi 5 and see how its builder fits the way you and your clients want to work.

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

Divi AI Agents gives you access to hundreds of AI models inside the Divi 5 Visual Builder. Whether you’re correcting a typo, creating a section, or building an entire page from a screenshot, you can choose a model that fits the job and your budget.

In this post, we’ll explain how Divi AI Agents pricing works, compare its model-selection options, and share practical ways to get the best results without overspending.

Let’s dive in.

How Much Does Divi AI Agents Cost?

Divi AI Agents uses usage-based pricing. Rather than paying a fixed amount per task, you’re charged according to the AI processing required to complete your requests. Costs depend on the model selected, the amount of information processed, and the complexity of the work.

Understanding AI Wallet And Usage-Based Pricing

Every Divi AI subscription includes $5 in monthly AI Agent usage through the AI Wallet. This allowance resets on your subscription renewal date, and unused monthly funds don’t roll over.

Your AI Wallet is shared across websites associated with your Elegant Themes account. If you exhaust your included allowance, you can purchase additional funds to continue using the Agent.

Divi AI Agents connects to AI models through OpenRouter, which provides access to models from multiple AI companies. Providers set their own rates, and Elegant Themes adds a small percentage to cover transaction and business costs.

You can view your balance and add funds using the Wallet icon in the AI Agent chat window.

What Determines The Cost Of Divi AI Agents?

Several factors influence the cost of an Agent request. Understanding them makes it easier to balance model capabilities with your budget.

AI Model Selection And Token Pricing

AI models differ in capability, speed, and pricing. Some are economical choices for straightforward requests, while others offer advanced reasoning and problem-solving capabilities at higher rates.

Models process information in units called tokens: Input tokens include your instructions, relevant website content, and conversation context. Output tokens represent the information the model generates in response.

Input and output tokens can have different prices, with output generally costing more. Divi AI Agents displays estimated rates per one million input tokens and per one million output tokens. These rates include the Elegant Themes markup unless otherwise stated; they are not prices per request. A single request can involve multiple model calls.

Task Complexity And Conversation Context

Changing a button label typically requires less processing than recreating an entire page from a screenshot. Larger tasks may involve more context, more generated output, and multiple requests to the model.

Conversation history can also increase usage. As a conversation grows, previous messages may become part of the context for new requests.

Some models also support adjustable reasoning effort. Higher settings can help solve difficult problems but may increase processing time and cost.

The goal isn’t simply to choose the cheapest model. It’s to find one that can complete the task efficiently, without unnecessary retries or manual corrections.

Comparing The Five Divi AI Agents Model Selection Options

Divi AI Agents offers four automatic model-selection options, including Auto Deep Value, Auto Value, Auto Balanced, Auto Premium, and Custom, which lets you choose specific models.

Each option provides a different balance of cost and capability. The following graphic shows example pricing estimates captured when it was created. All amounts are per one million input or output tokens. Model choices and estimates can change, so check the current rates in your Builder before choosing:

Auto Deep Value

In the example above, Auto Deep Value has the lowest displayed pricing among the automatic options: approximately $0.15 per million input tokens and $0.47 per million output tokens. It’s worth testing when keeping model costs low is a priority.

Despite its name, Auto Deep Value displays lower pricing than Auto Value. Compare the results of both options rather than assuming one is more expensive or capable based on its name.

Auto Value

The example shows Auto Value at approximately $0.35 per million input tokens and $1.94 per million output tokens. It’s a cost-conscious option to consider for everyday tasks such as rewriting content, updating buttons, and making minor design adjustments.

Auto Balanced

The example shows Auto Balanced at approximately $0.90 per million input tokens and $4.64 per million output tokens. It provides a middle ground between the Value options and Auto Premium, making it a useful starting point for creating sections, modifying multiple modules, and coordinating design changes.

Auto Premium

In the example, Auto Premium has the highest displayed pricing among the automatic options: approximately $2.00 per million input tokens and $11.79 per million output tokens.

It’s worth considering for demanding tasks such as recreating complex layouts, troubleshooting difficult design problems, or completing work that requires extensive reasoning. Although its rates are higher, stronger results may reduce the need for repeated attempts.

Custom

Custom gives you direct control over which AI models Divi AI Agents uses. Pricing depends on the specific models you select.

This option is useful for experienced users who want to experiment with models suited to coding, visual interpretation, content generation, or other specialized work. It also allows you to compare individual models rather than relying on automatic selection.

Ultimately, the best option depends on the job. A lower-priced model may handle simple work perfectly, while a more capable model may prove economical for difficult tasks by getting the result right sooner.

Choosing The Right AI Model For Different Divi Tasks

Divi AI Agents can handle everything from quick content edits to complete website builds. Matching the model to the task is one of the simplest ways to control costs.

Simple Tasks: Content Edits And Minor Adjustments

For rewriting headings, correcting spelling, updating button labels, or making basic styling changes, start by testing Auto Deep Value or Auto Value.

These tasks usually have a limited scope and may not require advanced reasoning. Add the target Heading module to the chat context before submitting this prompt so the Agent knows which heading to change:

Moderate Tasks: Building And Editing Website Sections

Creating feature sections, adjusting responsive layouts, and modifying several modules require more coordination. Auto Balanced is a reasonable starting point for these jobs.

For example:

However, Auto Balanced isn’t required. If a Value option consistently produces satisfactory results for similar tasks, there’s no reason to spend more.

Complex Tasks: Full Page Builds And Troubleshooting

Recreating a design from a screenshot, building an elaborate landing page, or troubleshooting a complicated responsive layout may benefit from Auto Premium.

These jobs can require the Agent to interpret visual references, understand existing page structures, plan multiple changes, and apply consistent styling.

Still, not every full-page build needs a premium model. A straightforward design may work well with Auto Balanced or a Value option. Evaluate the results before deciding whether additional processing power is necessary.

Specialized Tasks: Using Custom Models

Custom is useful when you want to choose models with particular strengths. For example, you might compare models for custom CSS troubleshooting or test different models when creating layouts from visual references.

By comparing their results and actual usage costs, you can identify which models provide the best value for your workflow.

Comparing Model Options By Task

The following graphic summarizes suggested starting points for common Divi tasks.

These are recommendations, not strict rules. Different models can perform well on the same task. The objective is to find the least expensive option that consistently delivers acceptable results.

How To Optimize Divi AI Agents Costs

Model selection is only part of the equation. The way you write prompts, manage conversations, and use the Agent’s features can also affect your spending.

Start With An Appropriate Model

Choose a model based on the difficulty of the task rather than defaulting to Auto Premium. If a lower-priced option delivers satisfactory results, use it for similar work.

When a model struggles, consider switching to a more capable option instead of repeatedly submitting the same request. Multiple unsuccessful attempts can cost more than completing the job with a stronger model.

Keep Your Prompts Specific And Focused

Vague requests can lead to unnecessary changes and additional attempts. Add the target section to the chat context and make sure a primary color variable already exists before using this example:

Specific instructions help the Agent understand the desired outcome and avoid modifying unrelated elements. You can also reference particular modules or sections using the Agent’s context tools.

Use Ask Mode When You Don’t Need Changes

Divi AI Agents includes Ask and Build modes. Ask mode answers questions and examines your page without making changes. Build mode allows the Agent to create elements, update settings, and modify layouts.

Ask mode avoids actions that modify your website, but its model usage is still charged. The cost depends on the selected model and the context it processes.

If you need to understand a setting or diagnose an issue, consider starting in Ask mode. Once you know what needs changing, switch to Build mode with a focused instruction.

Start New Conversations For Unrelated Tasks

Long conversations may consume additional tokens because earlier messages can be included in subsequent requests.

Keep related work together, but start a fresh conversation when moving to an unrelated task. This reduces unnecessary context and helps the Agent focus on the new request.

Save Repetitive Tasks As Commands

Divi AI Agents lets you save reusable Commands for recurring workflows. These might include accessibility reviews, responsive design checks, content cleanup, or design consistency audits.

Commands help you reuse clear, consistent instructions instead of rewriting them each time, making repetitive work easier to manage.

Monitor Your AI Wallet Usage

Check your AI Wallet regularly, especially when experimenting with models or completing larger projects. Tracking usage helps you monitor your remaining allowance. Because the balance is shared across sites and may be rounded or delayed, a balance change alone is not an exact per-task cost measurement.

Remember that your wallet is shared across websites associated with your Elegant Themes account. If you’re working on client sites, account-wide usage is worth monitoring.

Comparing The Cost Of Divi AI Agents

The cheapest individual request isn’t always the most economical way to finish a task.

A lower-priced model might require several attempts to produce an acceptable result, while a more capable model could complete the same job immediately. In that situation, the higher-priced model may cost less overall.

Your time matters, too. Repeated corrections, rewritten prompts, and manual adjustments add effort to the workflow.

When evaluating models, consider total usage, result quality, and the number of attempts needed to finish the job. That gives you a more meaningful comparison than model pricing alone.

Get More Done With Divi AI Agents Without Overspending

Divi AI Agents can help with everything from simple content updates to complex website-building projects. With four automatic model-selection options and Custom model configuration, you can choose the level of AI capability that suits your work.

Start with a cost-effective option, write focused prompts, and use more capable models when the task demands them. Most importantly, evaluate the cost of completing a job successfully rather than focusing only on individual request prices.

Ready to experiment? Explore Divi AI Agents and use your included $5 monthly allowance to discover which models work best for your website-building workflow.

The post Comparing And Optimizing The Cost of Divi AI Agents appeared first on Elegant Themes Blog.

Divi’s legacy Filterable Portfolio module can filter Projects by category. For a custom card layout, a search field, service and industry filters, and stored project metrics, we can use Divi 5‘s Loop Builder. It turns any layout you design into a repeating Projects feed. Loop Filter modules sit next to that feed and let visitors refine it. Flexbox handles the structure, and Advanced Custom Fields (ACF) supplies the numbers and labels that make each card a case study instead of a screenshot.

In this post, we’ll walk you through creating the necessary custom fields for the portfolio, building the Loop, and configuring the Loop filters.

Let’s dive in.

What Is The Loop Builder?

Loop Builder is Divi 5’s way of turning any layout you design into a repeating feed. You are not stuck with the structure of a Blog or Portfolio module. You build one item with Divi modules, connect it to a query, and Divi outputs that item once for every matching result.

What It Can Loop

A loop is not limited to blog posts. It can pull from posts and custom post types, including Divi’s built-in Projects post type.

You can also loop terms such as categories, tags, and custom taxonomies, as well as users and ACF repeater fields. The Repeater field requires ACF PRO; the fields used in this tutorial are available in the free version. In practice, that means the same feature can power a blog grid, a project archive, a team directory, or a list built from repeater data. You choose the source when you enable the Loop.

How It Works

The workflow stays the same no matter what you’re querying.

Design a single item first. Enable Loop on the element that should repeat, usually a column or a group. Set the query type, post type, terms, order, posts per page, and a meta query if you need one. Then swap static text and images for Dynamic Content, such as Loop Post Title, Loop Featured Image, and any other available tags. Divi renders that template once for every item the query returns.

You do not need a special content module or custom CSS to make that work. A featured image can be a background, and a title can sit on top of it. A custom field can be a heading, a label, or a number. If you can design the item once, you can loop it.

Give the Loop an Element label while you are there. Filters, pagination, and anything else that has to talk to this Loop will target it by that name.

Loop Builder handles the default results and how each result looks. It does not add search, taxonomy controls, or sorting for visitors. That is what the Loop Filter modules are for. They sit outside the Loop, target it by label, and refine the query as people use the form.

What Are The Loop Filter Modules?

Loop Filter modules give visitors a way to search, narrow, and reorder a Loop Builder feed without leaving the page. They do not design the repeating item or decide what the Loop is querying. They refine an existing query.

That split is the entire point. Loop Builder owns the results and the template. Filters own the front-end controls.

How The Two Modules Work

The system is a parent and its items. A Post Filter module is the form. You place it on the page and point it at one Loop by Element Label.

In that form, each Post Filter Item is a single control: a text field, a radio list, a dropdown, a checkbox group, a sort option, an apply button, or a reset button.

The field type controls the interface. Text becomes a search box. Radio and Select expose a list of values, either as a visible set of choices or as a compact menu. A checkbox allows multiple values at a time. Order By and Order change how the existing results are sorted. Submit and Reset apply or clear the form, depending on whether you want filters to run as soon as they change.

How A Filter Connects To Data

Each Post Filter Item is configured in the Content tab under the field, with four settings that do all the work.

Field Label is what visitors see above the control. It does not query anything and only gives a label to it.

Field Type is the interface, and the menu is grouped by behavior. Text creates a search input. Single Selection includes Select and Radio, both of which pick one value, either from a dropdown or from a visible list. Multi Selection is a checkbox that lets visitors select more than one value. Sort includes Order By, Order, and Multiple Order, which control how the Loop is ordered. Buttons include Apply and Reset, which apply to the form or clear it. The Field Type only decides how the control looks and behaves. It has not yet chosen the data.

Field Value Type tells Divi how to interpret the stored value when the field is querying data. The options are Text, Number, Date, Date Time, and Time. Leave this on Text for titles, taxonomies, and most labels. Switch it when the value is actually a number or a date, so comparisons work correctly.

Field Option is the connection to WordPress. It tells the item which piece of data to query. What appears in that menu depends on the Field Type, the target loop, and the data attached to those posts. You might connect it to a taxonomy such as Category, Tag, or Project Category, to an author, to standard post data, or to a custom field.

Once those settings are in place, the item knows what to show, how to treat the value, and which data to query.

How To Create A Filterable Portfolio

Here’s where we put it all together. We’ll design a Flexbox section, build one card, turn that card into a loop, then connect a Post Filter form to it. The front end will allow visitors to search by client, narrow the grid by service or industry, and reorder the results.

By the end, you’ll have a fully functional Project loop that you can drop into your next Divi 5 project.

Plan The Content First

Before opening the Visual Builder, ensure that you have created the necessary Project Categories for the Loop. These will serve as the Loop’s Service field.

We’ll use ACF in the next step to create the Industry select field and the data displayed on the individual cards.

Set Up Taxonomies And ACF Fields

Create the terms before you design anything. Ensure that you have installed the free version of ACF and head to the Field Groups tab. Create a new Field Group and title it Projects.

Before creating any fields, ensure that the field group’s location rule is set to Post Type is equal to Project in the Settings.

Next, we’ll need to add three new custom fields: industry, percentage growth, and growth metric. For industry, choose Select as the Field Type, use industry as the Field Name, and assign values in the Choices field. Keep it as a single selection.

The final two fields should be set to Text as the Field Type. Use percentage_growth and growth_metric as their Field Names. These store the metric and its label; they do not calculate or update analytics automatically.

Once all custom fields are created, click Save Changes.

Create The Projects And Theme Builder Template

With our custom fields and Field Group created, we can start adding projects. Ensure that each Project has a Title, Featured Image, an assigned Category, and all custom fields filled out with your information. Once complete, click Publish so the Project appears in the public Loop. Create more than six Projects if you want to test pagination.

We won’t cover creating a Project template for this tutorial, but to make things easier on yourself, we recommend creating a Project template with the Theme Builder. This is what the visitor will see when they click on a Project in the grid. Go to Divi > Theme Builder, click + Add New Template, and when the modal appears, assign the template to All Projects.

Next, click on Add Custom Body, then Build Custom Body to open the Visual Builder.

You can use Divi 5’s full suite of modules to build the template and assign Dynamic Content where necessary, like Post Title, your custom fields, and the Featured Image.

Once finished designing the template, click Save in the top right corner of the Builder.

Build The Portfolio Section With Flexbox

With all data and the Theme Builder template in place, we can start building the structure that will house our loop and post filter form. Create a new page and open the Visual Builder. Add a 1/4 + 3/4 Flex Row to the section.

In the Row’s Design tab, expand the Layout option group and assign 20px to the Horizontal and Vertical Gap fields.

Click into the 1/4 Column, expand the Background option group, and assign a Background Color.

In the Design tab, expand the Spacing group and assign 20px Padding to all four sides. Then, add a 10px Border Radius.

In the 2nd Column (3/4), click the black + icon and add a single-column Nested Row.

Click the Nested Row to edit it. Navigate to the Design tab, expand the Layout group, and add 10px Horizontal and Vertical Gap. Then, enable Layout Wrapping to Wrap.

Now, click into the Nested Row’s single Column. Expand the Meta group in the Content tab and assign an Element Label, such as Projects Loop. This will allow you to easily assign the Target Loop to the Post Filter module in the next steps.

In the Design tab, expand the Layout group and set Justify Content to Space Between. Set the repeated Column’s Layout Wrapping to No Wrap, keeping Wrap on the parent Nested Row only. This prevents the lower card content from flowing outside the card.

Expand the Sizing group and set the Column Class to 1/2 and the Aspect Ratio to 3:2. Add a 260px Min Height to give the content enough room on narrower screens.

Add 20px Padding to all four sides in the Spacing group, and 10px Border Radius in the Border group.

Build The Loop Card

With the structure in place, we can build the first loop card. We won’t go through a full design here, but there are a few important modules to add to the Nested Row’s Column.

Start by adding a Module Group with a Text module for the service badge and a Heading module for the metric to the repeated Column. In the Module Group’s Design tab, expand the Layout group and set Layout Direction to Row, Justify Content to Space Between, and Align Items to Center.

Use Divi 5’s Design settings to style the first Text module.

For the Heading module, assign an H4 tag and style it. Then, expand the Elements group in the Content tab. We’ll add a Nested Module (text) to the Heading for the metric’s label.

Once styled, head back to the parent Heading module and go to the Design tab. Adjust the Vertical Gap in the Layout option group to 5px.

We will add another Module Group to the Column similar to the first, with two Text modules for the Project title and industry. Set Layout Direction to Row, Justify Content to Space Between, and Align Items to Center.

Style the last two Text modules as desired and save your progress.

Enable The Loop Builder

Go back to the Column (Projects Loop) using Divi 5’s Breadcrumbs feature and expand the Loop option group in the Content tab. Toggle Loop Element on.

Leave the Query Type set to Post Type, and in the Post Type field, select Projects. Remove Posts if it is also selected.

Scroll down to reveal the Posts Per Page field and enter 6. Leave Order By on Publish Date and Order on Descending to show the newest Projects first.

Assign Dynamic Content

With the Loop Builder enabled, we can assign Dynamic Content to each of our fields. Start at the Column level by navigating to the Background option group in the Content tab. Tab over to Background Image, hover over the + Add Background Image field to reveal the Insert Dynamic Content icon.

Select Loop Featured Image from the available options.

Then, tab over to the Background Gradient tab and apply a partially transparent gradient to the image so the text pops. Enable Place Gradient Above Background Image so the gradient appears over the featured image.

Before leaving the Column settings, expand the Link option group, click the Insert Dynamic Content icon, and insert the Loop Link dynamic field.

Navigate through each module and assign Dynamic Content to the remaining fields. Clear any placeholder text before inserting the dynamic value. Connect the service badge to Loop Post Terms and set its Taxonomy to Project Categories. Connect the Project title to Loop Post Title.

For the ACF fields, use the Insert Dynamic Content icon in the metric Heading’s Heading field or the Text module’s Body field. Choose Loop Post Custom Field, then select percentage_growth for the metric, growth_metric for its nested label, and industry for the industry text. Apply the variable settings.

Once all Dynamic Content is connected, your layout should look similar to the image below.

Add The Post Filter Module

Start by adding a Heading and Text module to help the user understand what the form does.

Then, drop a Post Filter module into the left Column and set its Target Loop to the Projects Loop Column. Keep Apply Mode on Submit and Relation on And so the active Service and Industry filters work together.

The Post Filter module automatically adds four Post Filter Items when you add the module, including Search, Category, Reset, and Apply. For the form to work correctly, map each query field to the corresponding post data, taxonomy, or custom field.

For Search, keep Text as the Field Type and confirm that Field Value is Post Title and Content. Set a Field Label and Field Placeholder.

For the Category field, swap the Field Type to Checkbox and select Project Category as the Field Option. Set the Field Label to Service after choosing the Field Option.

We need to add one more Post Filter Item for Industry. Click + Add Element to add a new field.

After adding the new field, click to edit it. Choose Select as the Field Type and the industry custom field as the Field Option, then set the Field Label to Industry. Keep Field Value Type on Text, Field Comparison on Equals (=), and Options Method on Automatic. Add a Field Placeholder if desired.

Now we need to reorder the field to be above the buttons, so click and hold the Industry Post Filter Item and drag it just below Project Category.

To let visitors reorder the results, add another Post Filter Item with Order as its Field Type and place it before Reset and Apply. With the Loop ordered by Publish Date, Ascending shows older Projects first and Descending shows newer Projects first. Order By is a separate field type for choosing the sort key.

Style The Form

You can style the Post Filter module just like you would any other Divi 5 module. Although you can style individual Post Filter Items, it’s best to make styling changes at the parent element level. Go to the Design tab on the main Post Filter module. Here, you’ll find option groups for Fields, Checkboxes, Radios, Multiple Order Buttons, Buttons, and basic settings for Sizing, Spacing, etc.

Go through each option group to add styles to the form, starting with the Field option group. For this particular form, these settings control the Search and Industry fields. There are options for Input, Label, and Placeholder Text, along with Background, Border, and Box Shadow.

Make sure to take advantage of Divi 5’s State Picker controls that allow you to change styles based on Hover, Focus, Checked, or Active states.

Add Pagination

The last module to add to the section is Pagination. This will allow visitors to cycle through the results if there are more than six. In the right outer Column, below the results grid, click to add a new single Column Nested Row. Then, add the Pagination module to the Row. Keep this outside the repeated Projects Loop Column. In the Content tab, expand the Target option group and select the same Projects Loop Column used by the Post Filter in the Target Loop field.

Next, expand the Text option group and place your preferred text into the Previous Link and Next Link fields.

Finally, swap to the Design tab, expand the Link Text option group, and style the links.

Configure Responsive Behavior

With all modules present and styled, we’ll use Divi 5’s Customizable Responsive Breakpoints to make any necessary changes to the layout. Start by enabling the Tablet Breakpoint.

The most glaring problem is how the Project grid is displaying at the Tablet breakpoint. To fix it, select the Nested Row containing the Projects Loop Column and click Apply Structure Template. This is the results Row, not the outer Row containing the sidebar.

When the Reset Tablet Column Structure modal appears, choose a single Column Flex Row.

Divi 5 will resize the Row to improve the layout’s appearance on Tablet devices. Next, swap to the Phone Breakpoint.

On Phone, ensure both outer Columns are full width so the filter form stacks above the results. Keep the repeated Projects Loop Column full width on Tablet and Phone, with No Wrap and the 260px Min Height. Enable Wrap on the two Module Groups inside each card so long titles and metric labels fit on narrow screens.

Reduce the space between rows as necessary by adjusting the Vertical Gap at the section level.

Test The Build

The last step in the build is to test the functionality on the front end. Save the page, then select the Exit dropdown. Click on View Page and open the page in your browser.

Use the Post Filter form to select a specific service, choose an Industry, or reorder the search results. Tap the Apply button to filter the results and the Reset button to clear all search criteria.

Download The Files

To give you a head start, we’ve created a zip file with the filterable Portfolio loop we built in this post. Fill out the form below to download the file and extract the ZIP on your computer. Then head to Divi > Divi Library and click the Import & Export button.

Choose the Import tab, select the layout’s JSON file from the extracted folder, and click Import Divi Builder Layouts.

Ensure that you have created all of the required custom fields and Projects on your WordPress site, then open or create a new page. The layout does not include your Project posts, service terms, ACF field group, or the featured images and custom-field values attached to those Projects. When the Visual Builder loads, click to add a new section to the page.

Choose the Add From Library tab and select your saved layout.

Finally, click Use This Section to load the layout into the Visual Builder. Check each module’s Dynamic Content and confirm that Post Filter and Pagination both target the Projects Loop.

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!

Build Dynamic Portfolios With Divi 5

Moving beyond static thumbnail grids is essential for showcasing work that converts prospects into clients. By combining the power of Divi 5, the Loop Builder, the Loop Filter modules, and Flexbox, you can transform a standard portfolio into dynamic, filterable case studies.

With this setup in place, visitors can search by client, filter projects by service or industry, and examine the performance metrics you enter for each Project directly on the cards. By following the steps in this post, you now have the tools to build a fully functional, highly interactive portfolio that elevates your work and delivers a professional user experience.

Let us know what you think in the comments below or reach out on our social media channels.

The post How To Create A Filterable Portfolio With Divi 5’s Loop Builder appeared first on Elegant Themes Blog.

The Icon Manager in Divi 5 puts our icon library in one place. We can add custom artwork and group the symbols a project needs into collections. Those collections appear in Divi’s icon picker, ready to use as we build.

We’ll use a city-walk design to explore that workflow, from choosing a single icon to taking a whole collection to another website.

What The Icon Manager Does And Where To Find It

The Icon Manager organizes the icons available across your website. Divi Icons and Font Awesome provide starting collections. We can also create our own collections, grouping symbols to suit a client’s brand or a specific part of the site.

For a city guide, a small collection could hold navigation symbols and landmark icons. The same collection would be available when editing another walk, a neighborhood directory, or a contact section on that site.

To reach the Manager from an Icon Module:

1. Open the module’s settings in the Visual Builder.
2. Under Content, expand the Icon option group.
3. Click the selected icon’s preview to open the picker.
4. Click Icon Manager at the bottom of the picker.

Use the picker to choose an icon for the current field; open the Manager when you need to work on the library itself. Both are available inside the Builder.

Choose Icons With The Updated Picker

An icon field displays a compact preview of its current selection. Click that preview to browse the grid, search for a symbol, or narrow the results with collection filters. Choose All Collections to browse enabled collections together.

Open a field that already has an icon and its collection can open first, keeping related choices nearby when we want a replacement. The compass field in our example opens on its current icon collection.

Search works best when the library has useful names and search terms. For our walking guide, words such as coffee, navigation, and water describe the role each symbol plays. Choose a matching icon, then check its appearance in the layout.

The picker also groups filters such as Theme Icons, Custom Icons, and Styles. These help narrow a broad library before choosing the final symbol. If the symbol is missing, open the Manager to organize or import it. When opened from a picker, the Manager offers Insert for one compatible selected icon in an enabled collection; selecting several icons exposes collection actions instead.

Create A Collection For Your Website

A collection gives editors a set of icons chosen for the project. For the city-walk design, we could gather the compass, coffee, location, and water symbols into one collection of essential icons.

Open the Icon Manager, click New Collection, enter the collection name, and click Create. We can populate it by copying included icons or importing our own files. A collection can contain SVG icons and font icons together.

Keep the name understandable to the next person editing the website. A client who sees Brand Essentials or Walking Routes has a better starting point than someone faced with an unexplained file name. Collections can be renamed as the project takes shape.

Import Custom SVGs And Icon Fonts

Custom imports let us use a client’s own artwork through Divi’s icon fields. SVGs suit a small set of individual symbols. An icon font suits a library already packaged as a font file.

Add SVG Icons To A Collection

For a city guide, we might commission matching compass, coffee, and route SVGs. Importing that set gives editors a consistent family to choose from as they create more walking routes.

1. Click Import Icons in the Icon Manager.
2. In the Add Icons window, click Choose Icon Files and select the SVGs.
3. Choose an existing Collection, or choose a new collection and enter its Collection Name.
4. Click Import and wait for the import to finish.

The upload window also offers Add More SVGs when working with SVG files. We can assemble the set before submitting the import, rather than opening a separate upload for every symbol.

After importing, return to an icon field and find the collection in the picker. Inspect a symbol in its intended setting: a delicate outline that works as a large compass may need more weight when used beside a small landmark label.

Import An Icon Font And Optional Names

The uploader accepts WOFF2, WOFF, TTF, and OTF icon-font files. Choose the font through Choose Icon Files, select its destination collection, and import it. Supply a supported font file directly rather than the ZIP package from an icon provider.

When a font is selected, the optional Name Mapping File field appears. This accepts a JSON file containing an icons array with Unicode values, names, and optional search terms. The mapping associates readable labels with the font’s glyphs.

A compass glyph could include navigation and bearings as search terms. That makes the library easier to browse than a set of unexplained character codes. The JSON supplies naming information; the font supplies the actual artwork.

Your site’s upload limit applies to these files. If an import fails, check the format and the error shown in the upload window before trying the same file again.

Organize Icons With Copy, Move And Remove

We don’t have to import artwork to create a useful collection. We can gather included icons into a smaller set that fits the website.

Expand a collection and select an icon to reveal its available actions. Hold Ctrl on Windows or Command on Mac while clicking additional icons to build a selection. Modifier-clicking a selected icon removes it from that selection.

Choose the operation according to the result you want:

• Copy: Add the selected icons to another collection while keeping them in the source collection.
• Move: Transfer the selected icons to another collection and remove their membership from the source collection.
• Remove: Take the selected icons out of the current collection.

For our city guide, Copy is a useful starting point: gather the needed symbols into a dedicated collection while preserving their original organization. Both Copy and Move offer another collection as the destination, so create that destination first.

An icon’s right-click menu also exposes available actions. Check the selection before confirming a removal. Removing collection membership preserves icons already used in layouts and the underlying custom files in the Media Library. With no icons selected, Reset restores the collection’s original icon assignments while retaining icons added to it.

Set A Default And Control Picker Visibility

A default collection gives new icon choices a useful starting point. Expand an enabled collection and clear any icon selection to reveal Make Default. Click it to make that collection the starting choice; the button then reads Default. An existing icon can still open its own collection when its field is edited.

Each collection also has a toggle controlling whether it appears in icon pickers across the site. For a focused client handoff, enable the approved collections and turn off sets that would distract from those choices. The default collection must remain enabled; choose another default before disabling it.

Turning off a collection preserves the icons already placed on pages. This lets us simplify future choices without replacing existing artwork. It also means changing the default collection doesn’t automatically restyle the icons throughout a website.

Export And Import Collections

Once a collection fits a project, we can reuse it on another website. For example, a city-guide publisher could prepare its approved landmark symbols once and take that collection to a separate regional site.

Open Import & Export Icon Collections in the Manager’s header. Select the collections to include and choose Export Icon Collections. On the destination website, open the same control and use Import Icon Collections to bring them into its library.

The collection export includes icon assignments and referenced custom icon files, including font name mappings when present. It transfers the library resources; the page’s layout, spacing, and colors belong to the page design. Check both the imported collection and its intended icon fields on the destination site.

Use Divi AI Agents To Manage Icons

Divi AI Agents can help find icons in the library and organize them. The agent can create or rename a collection and turn it on or off in pickers. It can also import supported attached files or files already in the Media Library.

For a larger library, use search to identify suitable symbols before requesting changes. Name the destination collection when asking the agent to organize icons, and review the proposed selection. Imports, moves, removals, and collection deletions request confirmation.

The visual Manager remains useful for checking the outcome. Open the collection, inspect its contents, and try the icons in a field. An agent can help with library tasks, while the page preview shows whether the choices suit the design.

What To Know Before Editing A Shared Icon Library

Collections affect the whole website. If we rename a collection or change its contents, everyone working on that site sees the change. Library changes are saved separately from the page being edited in the Visual Builder.

Managing icons requires permission to manage theme options and upload files. Collection portability also depends on Divi’s portability permissions. Someone may be able to select icons while lacking the controls to manage the library. If management controls are missing, ask the site administrator to check those permissions.

To delete a custom collection, clear its icon selection, click Delete, and review the confirmation. Built-in collections have no Delete control. Existing page uses and the underlying Media Library files are preserved when a custom collection is deleted, so file cleanup remains a separate job.

When several people manage the same library, Divi may ask you to Reload Library after a conflicting change. Reload to see the current contents before trying the action again. The Icon Manager documentation provides a reference for these shared-library behaviors.

Build A More Consistent Icon Library In Divi 5

A compact collection can make a design easier to extend. In our example, the large compass establishes the walking-map theme, while labeled landmark symbols give each stop a recognizable identity. The staggered route gives those icons a purpose within the composition.

Start with the symbols your website needs and gather them into a collection editors will recognize. Add custom SVGs or an icon font in Divi 5 when the project calls for its own artwork. A focused library gives the next person building a page a useful set of choices from the start.

The post Everything You Need To Know About The Icon Manager In Divi 5 appeared first on Elegant Themes Blog.

It’s also a great way to leave contextual notes for yourself so you never forget a TODO.

A request to update a headline belongs beside that headline. A question about a button belongs with that button. Notes keep those conversations connected to the design, giving everyone a clearer picture of what needs attention.

You can organize feedback with categories, control your notifications, and ask the Divi AI Agent to work through tasks using the attached discussion.

Let’s take a look. 👇

Leave Notes On Relevant Elements

Right-click an element and choose Add Note. The Add Note window lets you confirm the element, write your note, choose an Assignee, and select a Category before clicking Submit.

You can also open Notes from the builder bar and use Add Note, then click on or search for the element you want to discuss.

Imagine reviewing a client’s services page. Attach “Replace this headline with the approved copy” to the heading, leave a spacing request on the surrounding row, and add a question to the contact button.

Each conversation has its own target.

Find Notes On The Page And In Layers

With Notes open, numbered badges identify elements with open notes on the canvas. The Layers panel also displays note counts beside element labels. Click a badge to view the discussions associated with that element.

You can also hover and click on elements on the canvas to highlight relevant notes in the Notes panel.

Use Go To Element from a note’s menu to return to its target, or choose Copy Link to share a direct link to the discussion with another authorized editor.

Notes remain private to authorized website editors and do not appear on the public page.

Give Every Request An Owner

Choose an Assignee when creating a note, or leave it unassigned until you know who should handle it. You can change the assignee later from the conversation without posting another reply.

Type @ in a note or reply to mention an eligible website user. That makes it easy to bring your copywriter into the conversation about a content question or ask your designer to review a specific element.

The For Me tab gathers open notes that are assigned to you or mention you. On a busy project, it gives each person a focused view of the feedback that needs their attention.

Assignments and mentions use eligible WordPress accounts with access to the relevant page. Divi’s Role Editor also includes View Notes, Add and Reply to Notes, and Manage Notes controls so you can configure access for your team.

Keep The Discussion With The Work

Open a note to read its conversation, post a reply, or add an emoji reaction. Follow-up questions, assignment changes, and resolution updates stay together in the thread.

When you finish a request, choose Resolve with Reply to explain what changed and close the task in one step. The discussion moves into the Resolved tab, preserving its history for later reference.

If another revision is needed, use Reopen with Reply to bring it back into the open list with an explanation.

For example, a designer could adjust a product image and reply, “Updated the crop to keep the entire product visible.” If the next review calls for a different crop, the reviewer can reopen that same discussion.

Organize Your Review Around Your Workflow

Notes include Design, Content, Development, Accessibility, and Question categories. Use them to distinguish copy revisions from layout adjustments or technical questions.

You can also create your own labels and customize their colors.

Users with the required Notes permissions can open Manage Labels from the Category picker to create, rename, recolor, reorder, or remove labels. These labels are shared across the website.

You could add a “Launch Checklist” category for final revisions or a “Client Question” category for decisions that require an answer before work can continue.

Find The Right Conversation

Switch between Open, For Me, and Resolved, then search the notes and their replies. Filters let you narrow the list by author, assignee, or mention, category, read status, follow status, notification status, and element type.

You can also work with several notes together. Use Ctrl-click or Command-click to select individual notes, or Shift-click to select a range, then open the context menu to resolve, reopen, mark unread, or mute notifications for the selection.

You can even ask the AI Agent to solve all notes at once!

Choose Which Updates Reach Your Inbox

Open Email notifications in the Notes panel to choose which events send you email. Options cover assignments, mentions, replies, and resolution or reopening updates for notes you created, follow, or are assigned to.

Use Follow to keep track of a discussion, or Mute Notifications to silence a particular thread. You can also mark a note unread when you want to return to it later.

Notification emails include conversation context and an Open in Divi link. That gives a teammate a direct route back to the discussion when they are ready to respond.

Turn Feedback Into Tasks For The Divi AI Agent

Notes also connects with the Divi AI Agent. We added a wide range of notes-related tools, allowing the agent to add, update, delete, resolve, assign, and respond to notes.

Assign Tasks To Your Agent And Have Them Resolve Notes For You

Choose Resolve With AI Agent to hand over a note’s discussion and attached element as a task.

The handoff asks the agent to read the latest conversation, make the requested changes, verify its work, and reply in the same thread before resolving the note. If the task is blocked or uncertain, the agent is instructed to explain the problem and leave the note open.

For example, attach “Reduce this heading’s size on phones” to a heading, then use Resolve With AI Agent to ask it to handle the adjustment with the discussion as context.

You can select several open notes and send them together. The agent receives instructions to handle each task separately and continue through the remaining notes when one is blocked.

Ask The Agent To Audit Pages And Leave Notes

The agent can also audit a page and leave notes on the issues it finds, turning its recommendations into feedback attached to the relevant elements.

Try asking, “Review this page for inconsistent spacing and unclear calls to action. Leave a note on each element that needs improvement, explaining your recommendation.”

You can review those suggestions, assign them to teammates, or use Resolve With AI Agent to ask the agent to work through them. It’s a useful way to build a list of improvements before deciding which changes to make.

Did You Miss Divi 5’s New Variable Features?

We recently released Nested Variables, Variable Math & Variable Combinations for Divi 5 variables: combine them, nest them within other variables, and use them directly in calculations within your settings. 🎉

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.

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 Divi Notes: Collaboration For Your Team, Clients and Agents appeared first on Elegant Themes Blog.

Choose a search topic that matches your offer, then use it to guide the edits. Each change should help visitors understand your service or take the next step.

We’ll use a fictional web design service page to show the process, with prompts and before-and-after examples you can adapt to your site.

How Website Copy And On-Page SEO Work Together

Clear writing helps visitors assess your service; on-page SEO helps search engines identify the page’s subject. A headline that names your offer and headings that organize the details support both goals.

Use relevant search phrases where they help explain the service. Repeating them in every heading adds little for the reader. Google’s people-first content guidance emphasizes useful information written for readers.

How Divi AI Agents Help Optimize Website Content

Once you’ve clarified the offer, the rest of the page needs to support it. Service descriptions should explain what visitors receive, and the closing invitation should help them act on that information. Divi AI Agents let you coordinate those changes inside the Visual Builder, with the conversation and edited page side by side.

Begin in Ask mode to share your business details and discuss improvements before anything changes. Once the suggestions fit your offer, switch to Build mode to apply them. If you’re editing a particular heading or button, add it as Context so the agent has a precise target.

For recurring work, saved Rules can carry your writing preferences into relevant tasks while you supply each page’s facts. You can then review the result against your brief and check its metadata in an SEO plugin, keeping the page text and search description connected.

How To Improve Page-Wide Copy And SEO Using Divi AI Agents

Work through these steps on one existing page. You’ll need Divi 5 and an active subscription that includes Divi AI Agents access.

Sign in with your Elegant Themes account when prompted, and check your AI Wallet balance before beginning. To follow the metadata example, you also need Rank Math installed and activated, or equivalent fields in your existing SEO plugin.

1. Choose An Existing Page To Optimize

Choose a page with a defined service and a clear next action. With one offer to focus on, you can judge each edit by whether it helps visitors understand the service and decide to contact you.

Our example offers WordPress websites to small businesses, but “We Create Amazing Websites” leaves those details out. Naming the platform and audience will help visitors recognize whether the service fits their needs, while the descriptions explain what is included.

We’ll start with the hero and service cards shown below, then follow the message through to the inquiry form. Work on a draft or staging page, keeping a backup and before-and-after captures so you can review what changed.

2. Identify Target Keywords And Search Intent

A keyword is a word or phrase someone enters into a search engine. Start with your service and audience to choose a relevant target. “Web design” covers a broad topic, while “small business web design services” gives our example a more specific focus. We’ll use that phrase as a working target and check it against research data.

Next, consider what that searcher wants to do. Someone hiring a designer needs service details and a way to inquire, while someone learning to build a website needs instructions. This intent guides the information you include, giving the rewrite a purpose beyond using the keyword.

Search your candidate phrase and look at the types of pages that appear. Service pages can suggest a different expectation from instructional articles, although results alone do not measure demand. If you already use Google Search Console, its query data can also show which phrases bring visitors to your site. Use that evidence or your keyword research data to refine the target.

Now turn the topic into a short business brief the agent can work from:

• Audience: Small-business owners looking for a WordPress website or redesign.
• Offer: Website design with mobile layouts and contact forms.
• Process: Discovery, design review, and launch preparation.
• Primary action: Submit a project inquiry through the existing contact form.

The brief gives the agent facts to work with. Use related wording such as WordPress website design naturally, and include locations, prices, or timelines only when they match your business.

3. Configure Divi AI Agents For Content Optimization

Open the page in the Divi 5 Visual Builder and click the Divi AI Agent icon in the sidebar. Select Ask mode for the initial review.

Provide your business brief in the conversation and identify the current page as the editing target. If an element Scope chip is present above the prompt field, click its clear icon before requesting a review of the whole page.

A saved Rule helps you reuse the same writing preferences as you move between sections or pages. Add that guidance through Rules > Add New Rule. In Title, enter “Service Page Copy.” Use this proposed instruction in the Rule field:

Set When To Use to “When writing or editing service page copy.” Leave Always Use off for this task-specific Rule, then click Save Rule. With Always Use off, the agent uses When To Use to decide whether the Rule applies to each request.

For more examples of reusable guidance, see our guide to Divi AI Agents Rules.

The Rule editor below shows these fields with the revised page in the background. Set up the Rule before starting your edits.

4. Analyze And Improve The Existing Copy

Before revising the wording, use Ask mode to see how the agent understands your page. This lets you catch suggestions aimed at the wrong audience or based on facts you never supplied. Share your business brief, then ask for a review:

Read the suggestions alongside the page so you can see what each change would improve. In our review, a closing “Learn More” button linked back to the section it already occupied, giving visitors no useful next step. Check the heading hierarchy separately from the wording; a clearer label does not necessarily need a different heading level. If the agent identifies the wrong heading, add the intended element as Context before continuing.

Click the Context icon beside the prompt field and choose the relevant element. The screenshot below shows a Section reference; select the specific module when the edit concerns one heading or button.

Once the plan matches your intent, switch to Build mode and start with the hero and service descriptions:

Review the text in its modules before expanding the edit to the remaining sections. The prompt requests content changes; check whether the result stays within that scope. Read the agent’s completion summary for skipped edits or uncertain targets. If two modules have the same label, select the intended module on the canvas and retry only that edit.

The video below replays the headline and service-description edits using the saved Service Page Copy Rule.

5. Refine Headings, Keyword Usage, And Content Structure

Headings help visitors scan the page and find answers without reading every paragraph. Review the outline before changing the wording so the service details and next steps have a clear place. The main headings in our example follow this outline:

• H1: WordPress Web Design for Small Businesses
• H2: Our Services
• H2: Our Process
• H2: Our Work
• H2: Get In Touch

Use the main heading for the page’s subject and section headings for the supporting answers. Check the actual heading levels, including any title supplied by your template; large text is not necessarily an H1.

Clear any element Scope before returning to a page-wide check. Ask the agent to inspect the existing structure in Ask mode before making changes:

Review the outline, then use Build mode to request the approved heading and text edits. Keep typography unchanged unless you’re also planning a design adjustment. Explain an omitted service detail using verified information rather than adding paragraphs to reach a word count.

The video below changes the service-card heading from “Website Features” to “Mobile Layouts and Contact Forms,” retaining H3. It demonstrates a wording change within the existing hierarchy.

6. Strengthen Calls To Action

Make the next step clear wherever a visitor is ready to contact you. In the hero, “Start a Project Inquiry” tells visitors what they can do next and leads them to the inquiry section. That is more useful than a generic “Learn More” label.

To target the hero button precisely, double-click its Button module on the canvas to open its settings. Confirm the prompt area shows Scope: Button, then request this edit in Build mode:

The revised hero below shows the new label alongside a description of the offer. Check that the button still takes visitors to the inquiry section after the edit.

Clear the Button Scope before moving to the inquiry section. Select that section as Context or Scope so the next request can include both its introductory Text module and Contact Form.

Carry that wording through to the form. Use “Send Project Inquiry” for its submit button and introduce it with “Tell us about your website project using the form below.” Ask the agent to preserve the form settings while changing those text fields, then test the submission separately.

The recording leaves the separate closing “Learn More” button in place to isolate the form edits. If it only links back to the section containing the form, remove that redundant Button module or give it a distinct purpose and destination.

7. Review The Changes And Validate The Page’s SEO

Read the full page from top to bottom. Compare each service statement with your business brief and remove unsupported additions.

Use the Desktop, Tablet, and Phone controls in the top Builder bar to preview the layout, especially where longer text wraps inside buttons or cards. Enter a narrow width, such as 320px, in the preview width field and inspect the hero, service cards, and form. The screenshot below locates the preview controls; repeat the check at each relevant width on your page.

Review the page’s title tag and meta description in Rank Math or your preferred WordPress SEO plugin. The title tag identifies the page for search, while the meta description summarizes what it offers. They are separate from the visible hero headline and help describe the page before someone visits it.

You can ask the agent to suggest wording in Ask mode, then enter the approved text in the plugin:

For the demonstration page, Ask mode suggested this title tag: “Small Business WordPress Web Design & Redesign.” Its proposed meta description was: “WordPress website design and redesign for small businesses, including mobile layouts and contact forms. Send a project inquiry through our form.” These suggestions describe the supplied offer without adding business claims.

To enter the approved wording in Rank Math, save your Builder changes and open the page in the WordPress page editor.

1. Click the Rank Math icon to open its panel.
2. In General, click Edit Snippet to open the Preview Snippet Editor.
3. Enter the approved text in Title and Description.
4. Save the draft or update the page, then reopen those fields to confirm that the values persist.

The captured Title and Description fields below match the example wording. Inspect the saved frontend’s title and meta description to confirm that the published output matches those fields.

Google can draw title links and snippets from several sources, so the saved fields may differ from the search result. Use your plugin’s checks to flag issues, then review each suggestion against the page. A higher plugin score does not establish better rankings.

Before publishing, check the rendered headings and test the inquiry form. Confirm the recipient settings, send a test inquiry with dummy details, and verify both the success message and delivery to the intended inbox. Our on-page SEO checklist covers internal links, image descriptions, and indexing checks for a broader review. After publication, use Search Console to monitor the page’s search performance.

Before And After: Optimizing A Web Design Service Page

The revised page explains the service and audience more clearly, then gives visitors a specific next step. Compare the original and revised wording to see how those changes work together.

Hero Headline

Before: “We Create Amazing Websites.”

After: “WordPress Web Design for Small Businesses.”

Visitors can now recognize the platform and intended audience immediately. The opening paragraph builds on that message with the working target phrase and the services included.

Hero Description

Before: “We provide quality solutions to help your business succeed online.”

After: “Our small business web design services cover new WordPress websites and redesigns, with mobile layouts and contact forms.”

Naming mobile layouts and contact forms gives potential customers something specific to evaluate. Make sure those inclusions match your service before using similar wording on your own page.

Inquiry Button

Before, hero button label: “Learn More.”

After: “Start a Project Inquiry.”

The revised label tells visitors what to expect when they click, and the existing link still leads to the inquiry section. The form’s “Send Project Inquiry” label completes that flow when visitors are ready to submit their details.

Look for that consistency between the opening offer and the action you ask visitors to take.

Before: Original Hero And Services

After: Revised Hero And Services

Tips For Editing Service Pages With Divi AI Agents

As you apply this workflow to other pages, keep each request small enough to review and tie it to a visitor’s question.

Limit Each Edit

Start with one section or group of modules. Name what should change and what should stay, such as the layout or button links. Review the result before moving to the next section; this makes an unwanted change easier to spot.

Separate Brand Rules From Business Facts

Use a saved Rule for tone and writing preferences. Supply the offer, audience, and service details in the current chat so those facts match the page you’re editing. Check any added price or performance claim against its source before keeping it.

Answer Customer Questions

Read each section as a prospective customer. Does it explain what’s included, who the service suits, or how to inquire? Add a missing answer using verified details, and remove repeated phrases that make the explanation harder to follow. Google’s guidance on generative AI content emphasizes accuracy and relevance.

Track Search And Inquiry Results

Record the publication date and the sections you changed. Compare later Search Console data and form inquiries with your baseline, noting other changes to the site or offer. Use those observations to plan your next edit; the rewrite alone doesn’t prove a performance gain.

Improve Your Website Content With Divi AI Agents

Start with one service page and a business brief you can trust. With Divi AI Agents in Divi 5, you can review the page in Ask mode, apply your chosen changes in Build mode, and check how the message reads across the page.

For your next pass, use Context to reference the sections or modules that need attention. Bring your verified service details into the conversation and review the result before publishing, so visitors understand your offer and know how to get in touch.

The post Page-Wide Copy And SEO Improvements Using Divi AI Agents appeared first on Elegant Themes Blog.