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

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

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

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

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

Let me jump into Divi and show you what’s new. 👇

Better AI Throughout The Divi Builder

Divi AI is integrated throughout the builder, putting generative AI exactly where you need it.

You’ll find AI tools inside image fields, text fields, code modules, CSS fields, and other areas of the builder. Instead of leaving Divi to generate something elsewhere, copying it over, and then adjusting it to fit your design, you can create what you need in context.

With this update, those tools are now powered by newer and more capable AI models.

The workflow hasn’t changed. The tools you already know are still in the same places. They produce much better results.

Generate Better Images With Divi AI

Divi AI can generate images directly in the builder, and the latest model upgrade takes image quality to the next level.

You can describe what you want and generate beautiful imagery on the fly without interrupting your design process.

Use Divi AI to:

• Create stunning, photo-realistic background images.
• Turn candid or low-quality client photos into professional headshots.
• Take an existing image, swap out the background, add elements, and make any other modifications with a simple prompt.
• Change image dimensions and automatically fill the space.

You can also use Divi AI’s image editing tools to modify existing images instead of starting from scratch.

Paint over specific areas you want to change. Expand images and automatically fill the negative space. Upscale and enhance low-quality images.

With Divi AI’s image generation and editing tools, you’ll never need to visit stock photo websites or open Photoshop again!

Write And Improve Website Copy In Seconds

Divi AI’s text tools also received a significant upgrade.

Whenever you are editing text in Divi, AI is right there to help you generate new content or improve what you already have.

You can use it to:

• Generate headlines, paragraphs, calls to action, and other website copy.
• Rewrite existing content to improve its clarity or tone.
• Shorten or expand text to better fit your design.
• Fix spelling and grammar.
• Translate content.
• Improve SEO.

If you have ever reached the end of a design only to realize you are still staring at placeholder text, Divi AI can fill in the blanks in seconds.

It’s also useful when most of the content is already there. Highlight something that isn’t quite right, tell Divi AI how you want it improved, and keep moving.

Build Custom Elements And Styles With AI

The upgraded code model makes Divi AI an even more useful companion when you want to push a design beyond the builder’s standard options.

Divi already offers extensive visual controls, but sometimes the perfect design calls for something custom (though that’s increasingly rare in Divi 5, given its new features).

Instead of writing everything yourself, you can describe what you want and let Divi AI generate the code.

For example, you can:

• Generate completely custom elements in the code module.
• Generate custom CSS directly inside a module’s CSS fields.
• Add special effects, animations, and styling.
• Improve or modify the code you have already written.

This opens the door to designs that break the mold without requiring you to be an expert developer.

If you can describe the result you want, Divi AI can help you build it.

Divi AI Agent or Divi AI Quick Tools?

With the recent release of the Divi AI Agent, Divi now has two very different ways to work with AI.

The Divi AI Agent is designed for broader and more complex tasks. It can understand natural language, inspect your website, interact with the builder, and perform multi-step actions. You can also choose from a huge selection of AI models depending on the task.

It’s incredibly powerful, but not everything needs an agent.

If you are building a page and need an image, a paragraph, or a piece of CSS, starting a conversation would be overkill.

That’s why Divi AI’s quick tools remain so useful.

Think of them as two complementary workflows:

• Use the Divi AI Agent when you want AI to understand a larger goal, make decisions, and perform actions throughout Divi.
• Use Divi AI’s quick tools when you know exactly what you need and want to generate it immediately.

Together, they give you the flexibility to use AI in whatever way makes the most sense for the task at hand.

Try The Upgraded Divi AI Tools Today

The upgraded text, image, and code generation tools are now available in Divi AI.

Jump into the builder, generate an image, rewrite some content, or see what kind of custom element you can create.

If you haven’t tried the new Divi AI Agent yet, give that a spin too. Between the agent and Divi AI’s newly upgraded quick tools, Divi AI’s toolkit has never been more capable.

And we aren’t stopping here. There is plenty more coming to Divi 5, so stay tuned. 😁

The post Divi AI Just Got Smarter (New Image, Text & Code Models) appeared first on Elegant Themes Blog.

Paste in a screenshot of a page you like and ask for a similar layout. The agent builds with sections, rows, and modules you can open, restyle, and keep editing by hand. The new feature uses Divi-specific tools to work with the builder’s structure and settings. It also supports selected WordPress tasks outside the builder, such as managing pages, posts, and menus.

That gives you several ways to use it: creating a first draft, updating an existing page, organizing styles, or getting help with a Divi setting. In this post, we’ll connect a site and explore these workflows, along with the controls that help you guide and review the work.

Where To Find Divi AI agents

Open a page in the Visual Builder and look at the left sidebar. Click the agent icon to open the chat panel beside your page. Before sending your first request, you’ll need to connect your account and have an available agent balance.

Access is included with Divi AI and Divi Pro, so an existing Pro subscription gives you access to Divi AI agents. Agent requests use a metered balance, which we’ll look at below.

The first time you open the agent on a site, it asks you to sign in with your Elegant Themes membership account. This connects the site to your account so its requests can use your agent balance. Complete this connection on each site where you want to use the feature.

The sign-in screen displays the requesting site’s address and name, so you can check them before approving the connection. Select Keep this site connected without signing in again if you want to retain the connection for future sessions.

Before you ask it to change anything, notice the two modes. Ask mode can inspect your page, Design Variables, Presets, and Divi’s knowledge base to help you understand a setting or plan a change. Switching to Build mode allows the agent to carry out the work on your page.

In Build mode, the agent works in visible steps. As it processes the request and calls tools, you can follow the progress in the chat. The work report gives you a readable record of the actions taken, which is useful when a request involves several changes.

You can keep tasks in separate chat sessions. When you’re moving to a different job or want to start with fresh conversation context, click New Chat. This gives the next request its own conversation instead of continuing the previous thread.

Use the Fund Your AI Wallet icon in the top-right corner of the agent panel to view your current balance and add funds.

Here, you can see your available balance and any complimentary funds from your Divi AI or Divi Pro subscription. If you need more funds, you can purchase them further down the page. This is also where you can check what’s available before starting a larger task.

With the site connected and a balance in place, you’re ready to give the agent its first instruction. Build mode reports its progress through the chat, including the steps it takes and the tools it calls. The example below shows a prompt, work report, added media, and task list.

1) User Prompt, 2) Agent Work Report, 3) Media Added, 4) Agent Task List, 5) Further Progress Updates

Build A Layout From A Description, A Screenshot, Or A URL

There are four main ways to start a new layout, and each produces a Divi page you can continue editing with or without the agent. Divi AI agents work with native sections, rows, modules, and design settings, so the result remains part of your normal builder workflow. You can inspect the structure and refine individual settings after the initial layout is built.

You can start:

• From a description. Tell it what the page is for and what it should include. For example, request a pricing page with three tiers and a comparison table, or a services page for a landscaping company with a hero, four service cards, and a contact section. A specific brief gives the agent a clearer starting point.
• From a screenshot or mockup. Paste or attach the image to the chat and ask the agent to build from it. Explain whether you want to follow the overall layout, particular sections, or the visual style, and mention any content that should change.
• From a live URL. Point it at a webpage and explain what you want to use as a reference. The agent can inspect the page and work from its content and design.
• From reference images. Attach several images and ask for a layout that shares their style. Use them to communicate a direction for the colors, typography, imagery, or composition.

You can also combine these inputs. A screenshot might provide the layout, while a written brief supplies the content and brand requirements. The model you choose needs to support the types of input you provide.

Here is the screenshot route in practice. In the recorded example, one large image of a page layout, running on Auto Deep Value, produced nine sections with a reported cost of about $0.10. That figure applies to this example; costs vary with the model and task.

However you start, the canvas contains native Divi structure: sections, rows, modules, content, and styles that you can open and change in the usual settings panels. You can keep working through chat, edit the result manually, or use both approaches as you refine the page.

Edit An Existing Page

You won’t always be starting from an empty canvas. You may have a site that needs a new design direction, updated content, or a few adjustments before handoff. Divi AI agents can work with that existing layout, making them useful for ongoing work on sites you manage.

Ask the agent to redesign a hero, rearrange the modules in a section, rewrite the copy, or fix inconsistent spacing. Describe what you want to achieve and identify the area to change. You don’t need to name every setting involved, but a clear request makes the result easier to review.

One example is updating a page originally built in Divi 4 after opening it in Divi 5. If you want to convert its rows from Block to Flex, the column spacing needs attention too. Spacing previously applied through margins may need to become horizontal or vertical gaps. The following request explains both changes:

Convert all Rows with a Block Layout to have a Flex Layout. Know that Block Layouts apply a margin on the columns for spacing, whereas Flex Layouts need the spacing applied as a horizontal and sometimes vertical gap. Retain other visual spacing decisions, but make sure they work within the new flex layout paradigm.

This updates the layout structure rather than performing a complete site migration. Review the converted rows at different screen sizes to check that their alignment and spacing still work.

Referencing an element directly is often easier than describing its position. Click it on the page and add it as context so the agent has a specific target. You can also refer to a module by its content, such as the text in a heading, to help it locate the right element.

The agent can inspect the page structure, how elements are nested, and their module settings before making a change. That context helps it work with the layout already on the page.

Work Within Divi’s Design System

Presets and Design Variables help keep a Divi site consistent and maintainable. Divi AI agents can work within that system, using existing Presets and variables when you ask them to. Include those requirements in your prompt so new styling follows the site’s conventions and remains editable through Divi’s settings.

You can also work in the other direction. Point the agent at a layout built from individual values and ask it to turn repeated values into Design Variables or repeated styling into a Preset. This can include colors, fonts, gradients, images, and sizes. Ask it to list its suggestions first so you can choose which ones to apply. The example below focuses on converting static values into global Number Variables.

You don’t need to identify every inconsistency yourself before asking for help. Start in Ask mode with a prompt such as “What’s inconsistent on this page?” and review the suggestions. You can also give it more focused tasks:

• Find missing image alt text and suggest descriptions.
• Replace inconsistent colors with appropriate global colors.
• Standardize typography, spacing, and buttons.
• Review how the page behaves across breakpoints.
• Correct spelling, grammar, and capitalization.
• Review the calls to action across the page.
• Find oversized images.
• Review custom CSS that may no longer be needed.

After reviewing the suggestions, decide which changes to apply in Build mode. For shared styles, ask the agent to use the appropriate variable or Preset so the update remains manageable across the elements that use it.

How To Ask For What You Want

A few habits help you give clearer instructions and make the results easier to check:

1. Be specific about the outcome. “Make this section better” leaves a lot open to interpretation. “Tighten the spacing here and make the heading the same size as the one above it” identifies both the change and its reference.
2. Keep the scope manageable. A single change is easy to check. Larger requests are useful too, but include enough detail and break the work into stages when you want to review decisions along the way.
3. Show it when a visual would help. Paste a screenshot or mockup when it explains the layout or style more clearly than a long description. Add a sentence about which parts of the reference matter.
4. Give it constraints as well as a goal. Tell it which variables to use, which conventions to follow, and what should remain unchanged. Saved Rules can help you reuse this guidance across tasks.
5. Know when to edit manually. Some adjustments are faster and cheaper to make yourself. Use the agent where it helps with the work, and use the builder controls directly when that’s the simpler option.

Review Questions And Confirmations

The agent can ask for clarification when a request is missing important details. It can also pause for approval before destructive or high-impact actions.

When it asks a follow-up question, supply the missing information before continuing. For a larger request, you can explicitly ask it to outline a plan first. This gives you a chance to check its interpretation before it begins changing the page.

Read confirmation requests carefully when they involve deleting a template, trashing a page, removing a menu, or changing shared settings. If a menu location already has an assignment, check what will happen to that assignment before approving a replacement. In the screenshot below, the agent pauses for approval before saving changes to global variables.

If You Do Not Like The Result

Previous messages provide a restore option for returning the page to an earlier checkpoint. Click the restore icon beside the relevant message, then review the Restore to This Point dialog before confirming. This lets you return to the layout state associated with that point in the conversation.

Restoring rewinds the page rather than selectively reversing one edit. Manual changes you made to that layout after the selected point are removed along with the agent’s subsequent changes. Check what you’ve done since that checkpoint, especially if you’ve been editing by hand alongside the agent.

Small, checkable steps make this easier to manage. If you review a single section change before moving on, you have a clearer checkpoint to return to. A restore after a larger redesign may undo considerably more work, including later adjustments you wanted to keep.

Give The Agent Context, Rules, Commands, And Tools

The chat panel includes more than a prompt field. Context supplies references, Rules save guidance, Commands let you repeat tasks, and Tools expose the actions the agent can use while working.

Add Context From Your Page

Click an element and add it to your request to show the agent exactly where to focus. You can also reference another page on your site, which is useful when you want a new section to follow a design you’ve already approved elsewhere.

Save Rules For Your Website

Rules are saved instructions that the agent can use when relevant to a task on your site. They can describe your brand voice, layout conventions, or which variables and Presets to use with particular modules. This gives recurring requirements a place outside individual chat messages.

If you find yourself typing the same guidance repeatedly, consider saving it as a Rule. For example, specify the existing variables to use for headings and backgrounds. Keep Rules up to date as the site’s design system or content requirements change.

Turn Repeated Prompts Into Commands

When you regularly run the same request, save it as a Command. You can then invoke it from the chat by typing / and choosing the saved Command, instead of writing out the instructions again.

Good candidates include the reviews you run before a page goes live: an accessibility check, a responsive layout review, a design system audit, or a final content check. Describe what to inspect and whether you want suggestions or changes. Reusing the Command helps you keep those requests consistent across pages.

Commands describe jobs you want done, while Rules guide how those jobs should be carried out. You can include the relevant Rules as context for a Command, so a repeated task follows the site’s requirements.

Explore The Tools Button

The Tools button opens a searchable list of actions the agent can use. Some inspect information, such as page structure, modules, or global colors. Others make changes to supported Divi settings or perform WordPress tasks outside the builder.

Selecting a tool lets you reference it in your prompt when you want to direct the agent toward a particular action. You can also see tool calls in the progress log as it works.

We’ll cover the complete list and explain each tool’s purpose in a separate post. For now, this panel gives you a useful view of the actions behind the conversation.

Ask It How Divi Works

The agent can consult Divi’s documentation and knowledge articles to help answer questions. With relevant page or site context, it can also help you investigate a specific issue, such as a Theme Builder template that isn’t applying, rather than only explaining the feature in general.

Questions to ask include:

• Should this section use Flexbox or CSS Grid?
• Should I assign Design Variables to these settings or use a Preset for the shared styling?
• Why isn’t my Theme Builder template applying to this page?
• How do the aspect ratio options behave?

Once you understand the suggested solution, you can ask the agent to apply it in Build mode. This keeps the explanation and the follow-up work in the same conversation.

Ask mode is the starting point when you want to explore settings or plan a change without editing the layout. Read the answer, ask follow-up questions, and switch to Build when you’re ready to act on it.

Choose The Model For The Job

Different AI models have different strengths, speeds, and costs, so Divi AI agents aren’t tied to a single model. Choose from hundreds of supported models or use an automatic selection option. This lets you adjust the model to the task instead of using the same one for every request.

A more capable model may suit design work and longer tasks with several dependent steps. A faster, less expensive model may be enough for straightforward proofreading. For work involving screenshots or image descriptions, choose a model that supports image input. Your choice affects usage costs, so the model selector is worth getting familiar with.

The agent can also create sub-agents to run independent work in parallel and assign a model to each. This allows separate parts of a larger task to use different models. It can be useful for dividing the work, though the total cost still depends on the models selected and the requests they process.

Divi AI agents Are Included With Divi AI

Divi AI agents come with Divi AI and are also part of Divi Pro. Your subscription can be used across the sites you build, and both plans currently include $5 in complimentary agent usage each month.

Access and usage are separate: agent requests are metered according to the model and the amount of input and output processed. You can add funds when you need more than the included allowance. Divi AI’s unlimited generation features do not make agent usage unlimited. Check the Divi AI agents page for current pricing details.

Start with one page. Open it in Ask mode, ask what’s inconsistent in a particular section, and review the response. Choose a change to apply in Build mode, then check the result on the canvas. That gives you a practical first task without handing over an entire redesign.

As you work, save useful instructions as Rules and repeated requests as Commands. You can build up a set of workflows for the tasks you do most often, from refining a page’s design to reviewing its content before publishing.

The post Exploring Divi 5’s AI Agents appeared first on Elegant Themes Blog.

In this tutorial, we’ll connect a filter form to a blog post loop, configure its search and category fields, add sorting controls, and style the form for desktop and mobile. The filtering tools are built into Divi 5, so this blog example needs no additional filtering plugin or custom code.

What Do Search, Filters, And Sorting Do?

Each control helps visitors browse a loop in a different way:

• Search finds content using a typed keyword.
• Filters narrow the results by criteria such as a category, tag, or custom field value.
• Sorting changes the order of the matching results, such as newest first or title A to Z.

Baymard Institute’s research on product lists and filtering highlights how these tools help shoppers find relevant products. A blog or directory can use the same browsing pattern to make a large collection easier to explore.

For example, a visitor could search for a recipe, select a category, and then sort the matching posts by date. Each control has a separate role in refining the results.

Native Search, Filtering, And Sorting In Divi 5

The Post Filter Module contains the form controls and connects them to a target loop. This tutorial uses a custom post loop built with Divi 5’s Loop Builder. For WooCommerce products, build a custom product loop rather than trying to attach the form to WooCommerce’s standard shop loop.

The module offers seven item types. Text provides a search input. Select displays choices in a dropdown, while Radio displays a list of single-choice options. You configure which post data, taxonomy, or custom field each relevant control uses.

Checkbox allows multiple selections. Order By sets the sorting criterion, and Order sets its direction. Button items provide the form’s submit and reset actions.

Build and style the form in the Visual Builder, then check its behavior on the front end after saving.

Adding Search, Filters, And Sorting To Your Loops In Divi 5

Start with a working loop, place the filter form beside it, and connect the two. We’ll use blog posts for the example below.

Build Your Loop

Choose the content the loop should display, such as blog posts, WooCommerce products, or another custom post type. Then create the card that Divi will repeat for each result.

With Divi 5’s Loop Builder, you can enable Loop Element on an element or container. For a card with several modules, use a container such as a Group or Column. Add the image, title, excerpt, and link using the corresponding loop Dynamic Content values.

Our custom blog post loop guide covers designing the cards, enabling the loop, and configuring its query.

Arrange The Filters And Results

Add a two-column row with a narrow left column for the filters and a wider right column for the results. An approximately 30/70 split gives the posts most of the available width.

Place the blog loop in the wider column. Keep the narrow column available for the Post Filter Module.

Divi 5’s Flexbox layout system lets you adjust this split. In a Flex row, the row is the flex container and its columns are flex items.

Use each column’s Design > Sizing > Column Class setting to adjust its share of the row. You can start with a row template and refine the column sizes to suit the form and cards.

With Nested Rows, you can also place a row inside the results column to organize the cards. At smaller breakpoints, adjust the parent row’s Layout Direction and column sizing to stack the filters above the results.

This sidebar layout is a starting point. The same filter form can also sit above the loop if that better suits your page.

Add And Connect The Post Filter Module

Insert the Post Filter Module in the narrow column.

Open Content > Target and choose your loop under Target Loop. Select the element with looping enabled, which is the Group in this example.

The default form in this example contains Search, Category, Reset, and Apply items.

In the same Target group, review Apply Mode and Relation.

Apply Mode determines when the form updates the results. Submit applies the criteria when visitors click the submit button. Automatic updates results as visitors change the controls. Use Submit here so visitors can choose several criteria before applying them.

Relation determines how the filter conditions are combined. And requires matching conditions together, while Or allows alternatives. Keep And for this example. This form-level setting is separate from the choices made within an individual field.

Expand Content > Elements to add, remove, edit, or drag the filter items into a different order.

Configure The Search Field

Click the edit icon beside the existing Search item. Keep it as a Text field using the post search option for this blog example.

Set a helpful Field Placeholder, such as “Search Posts.” For a recipe blog, “Search Recipes” would be more specific. Changing the placeholder changes the prompt visitors see, not which content the field searches.

Set the Field Label to Search. Divi provides separate controls for the label’s text and visibility. Keep a clear label so the field remains identifiable after a visitor starts typing.

Configure The Category Filter

Return to the parent module’s Elements group and edit the existing Category item. For the checkbox list shown in this example:

• Keep the Field Label as Category.
• Use Checkbox as the Field Type.
• Under Field Option, select the category taxonomy for the posts in your target loop.
• Use Automatic options to populate the choices from the taxonomy.

The category names will reflect your site’s content, so they will differ from the sample terms in the screenshots. For a single-choice filter, use Select or Radio instead. Choose the taxonomy belonging to the target post type; product categories and blog categories are different taxonomies.

Add Sorting Controls

To let visitors choose both the sorting criterion and direction, add Order By and Order fields. Order By determines what to sort on, and Order determines whether the results run in ascending or descending order.

Use Add Element to add two Post Filter Items.

Drag the new items above the Reset and Apply buttons, then open each item’s settings.

Set one item’s Field Type to Order By and its Field Label to Order By. Set the other item’s type and label to Order. Use distinct labels so visitors can tell the two controls apart.

Under Order By Options, choose the criteria visitors can use. For this blog loop, keep Publish Date and Title. You can also retain Default to let visitors use the loop’s configured order, and deselect options that are not useful for this page.

Available choices depend on the target loop and its data. A custom product loop can use a price-related sorting option where available; this blog example uses publish date and title.

The controls work together: Publish Date with Descending puts newer posts first, while Title with Ascending sorts titles from A to Z.

Configure The Submit And Reset Buttons

The default form includes Apply and Reset items. Open each item’s settings to review its button action and text.

Keep Apply as the submit button. With Apply Mode set to Submit, it applies the current search, filter, and sorting choices together.

Keep Reset as the reset button. It returns the form to its starting state. Resetting visitor filters does not remove restrictions already configured in the loop’s base query, such as its post type or category limits.

Use Button Text to change the visible labels if needed. “Apply Filters” and “Reset” are clear choices.

Style Your Search And Filters

Style the search input, category options, sorting controls, and buttons to match the rest of the page. You can make shared changes at the parent module level and refine individual items where needed.

Use the parent Post Filter Module’s Design tab for shared field styling, including text, colors, borders, and shadows. These settings provide a consistent starting point for the form’s items.

Open an individual Post Filter Item’s Design tab to style that item separately. This is useful when the submit button needs a stronger treatment than the reset button.

You can also connect the form to the rest of your site’s design system using variables and presets.

Use Design Variables For Consistent Styling

Design Variables let you reuse named values instead of entering the same color, size, or font repeatedly.

Open the Variable Manager and create color, number, and font variables for your form. Use number variables for values such as spacing, border width, and corner radius. In supported settings, use Insert Dynamic Content to select the appropriate variable.

Variables are reusable across the site, but they affect only settings that reference them. For example, the same color variable can be used on this filter form, a contact form, and a pricing table. Updating that variable changes each linked setting.

A value entered directly in a field remains independent; a variable keeps that value connected to your shared design system.

Style Focus, Checked, And Hover States

Use state styling to make it clear which field has focus and which options are selected. Relevant controls support Focus, Checked, and Hover styling.

The Variable Generator can create tints and shades from your primary color. Use a light tint for a field background and a stronger shade for a visible border or selected state.

Open the responsive/state menu at the top right of the settings panel and select Focus.

In the relevant field’s Design settings, assign a tint variable to its background. Use a contrasting border color to make focus easy to see. Keep the text readable in both the default and focused states.

For Checkbox and Radio controls, switch to Checked and style the selected state. Choose a fill that keeps the checkmark or selection indicator visible.

Use Hover to style the buttons when a pointer moves over them. Keep a visible focus treatment for keyboard users as well. Our guide to accessible form focus states explains the same principles using a contact form.

Save The Styling As Reusable Presets

Option Group Presets save settings from a particular option group, such as text, spacing, or borders. Reuse them on elements that support the same group.

In this example, a button in the loop already has the style we want. Hover over its relevant option group and click the presets icon to save those settings as an Option Group Preset.

Apply that compatible preset to the filter’s Apply button. Style Reset separately with a more understated treatment so the primary action stands out.

Use an Element Preset to save a broader collection of settings for the same element type. It can include variable references and assigned Option Group Presets.

Apply the Element Preset when you create another filter element of the same type. Review its content and target settings for the new loop.

Editing a shared preset updates the elements using it, subject to any local overrides. Option Group Presets can be shared across compatible groups; Element Presets are tied to their element type.

Style The Filter Container

Style the parent Post Filter Module to give the whole form a background, padding, and border.

Set the panel color under Content > Background. Select a color variable to keep it connected to your palette. Then use Design > Spacing to add padding around the fields.

Use the Border settings to add a border color and rounded corners. Add a subtle Box Shadow if you want to separate the form from the page background.

The module also provides Flexbox layout controls. Use Layout Direction to arrange the fields vertically or horizontally, depending on the space available.

Use the gap settings to control spacing between items. Justify Content distributes items along the main axis; Space Between spreads available space between all items, rather than moving only the buttons to the bottom. It needs spare space in the container to have that effect. Align Items controls the cross-axis alignment. Our guide to Divi 5’s Flexbox settings explains each control.

Make The Filters Easier To Use On Mobile

A tall filter sidebar can push the results far down the page on a phone. Put the mobile form inside a collapsible Toggle so visitors can open the filters when needed.

Divi 5’s Toggle Module supports nested elements, including the Post Filter Module. Give it a clear title such as “Filter Your Posts” and set its initial State to closed.

Keep the existing sidebar filter for desktop. Add a Toggle for phones and tablets, then duplicate the Post Filter Module into the Toggle’s content area. Keep the duplicate connected to the same Target Loop.

In the Toggle’s Advanced > Visibility settings, disable it on Desktop.

On the original sidebar Post Filter Module, open Advanced > Visibility and disable it on Phone and Tablet.

At phone and tablet breakpoints, check the parent row’s layout and column widths so the Toggle and results use the available width. Hide an otherwise empty desktop-only sidebar column if it still occupies space.

Save the page and check the form on the front end. Try a search term and category, apply a date or title sort, and use Reset to return to the starting view. On a phone or tablet, open the Toggle and repeat those actions to confirm that the visible form controls the intended loop.

Give Visitors More Ways To Browse Your Loop

Use search for keywords, category filters to narrow the results, and sorting to change their order. With the form connected to your custom loop, you can reuse the approach for other post types and adapt the controls to the content visitors need to find.

Download Divi 5 to build your own searchable, filterable loop.

The post How To Add Search, Filters, And Sorting To Any Divi 5 Loop appeared first on Elegant Themes Blog.

Subgrid allows a nested grid to use track sizing from its parent grid along a selected axis. This is especially useful for repeated cards because corresponding areas can remain aligned across the layout even when headings, descriptions, images, or other content vary in length. Import your favorite section, replace the example content, customize the styling, and adapt the structure to your website.

Preview

Here’s a quick look at the 10 CSS Subgrid Layouts included in the pack. The download is further down the post.

Download 10 CSS Subgrid Layouts For Divi 5

Get all 10 sections for free. Import them into your Divi Library and add them to any page in the Visual Builder.

Download the Files

Download For Free

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

DOWNLOAD

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

What’s Included (11 Exports)

After you download and unzip the file, you’ll find 10 individual CSS Subgrid section exports, plus 1 file containing all layouts.

CSS Grid Subgrid Section 1 to 10 (10) → Ten fully styled layouts featuring different combinations of repeated cards, imagery, headings, descriptions, labels, numbers, buttons, and supporting details arranged with CSS Grid and Subgrid.

CSS Grid Subgrid Sections (All) → Imports all 10 designs into your Divi Library at once.

How To Use The CSS Subgrid Layouts

Keep your download folder handy. We’ll import the files, add a CSS Subgrid section to a page, replace the example content, and customize the design while preserving its alignment system.

1. Import Sections Into The Divi Library

Go to Divi → Divi Library. Click Import & Export at the top of the screen.

In the Import & Export Layouts modal, switch to the Import tab, then click Choose File. Select any individual CSS Grid Subgrid Section JSON file if you only want one design. To import every layout at once, choose CSS Grid Subgrid Sections (All).json instead.

Click Import Divi Builder Layouts and wait for the import to complete.

2. Add A CSS Subgrid Section To Any Page

Open a page in the Visual Builder and add a new Section where you want the layout to appear.

Click Add From Library and select one of the CSS Subgrid sections you imported.

The complete design will be added to the page with its original modules, nested containers, Grid settings, Subgrid relationships, colors, typography, and spacing intact.

3. Replace The Example Content

Start by replacing the example headings, descriptions, labels, numbers, names, roles, buttons, images, and other supporting details with your own content.

Work through one repeated item at a time. Replace every piece of content inside that item, then move to the next card or block. This makes it easier to keep the structure consistent across the full section.

The layouts are designed to accommodate natural differences in content length while keeping corresponding areas aligned. However, extremely short or long copy can still change the balance of a card, so review the section as a complete composition after adding your content.

When replacing buttons or linked elements, update their destination URLs and make sure the labels clearly describe the action visitors can take.

4. Understand The Parent Grid And Subgrid Structure

Each design uses a parent grid to establish the larger layout and nested grid containers for the repeated content. Subgrid allows those nested containers to follow the relevant row or column tracks defined by the parent instead of creating unrelated tracks of their own.

This shared structure helps corresponding elements line up across neighboring cards. For example, headings can occupy the same track, descriptions can begin and end within coordinated areas, and buttons or author details can remain aligned toward the bottom.

When exploring a layout, use Divi’s Layers panel or Element breadcrumbs to understand which elements belong to the parent grid and which sit inside the nested grid containers. Identifying that hierarchy before making structural changes will help you preserve the intended alignment.

Avoid removing a nested container solely because it appears to add another layer. That container may be responsible for the Subgrid relationship that coordinates its internal content with neighboring items.

5. Adjust The Grid Without Breaking Alignment

If you want to change the number or width of the main columns, begin with the parent grid container. Use its Grid settings or open Divi 5’s CSS Grid Editor where appropriate to review the larger structure, track sizes, and gaps.

Make one structural change at a time and then check every repeated item. Because the nested grids depend on tracks established by the parent, changing the parent can affect alignment throughout the section.

To add another service, testimonial, feature, or other repeated item, duplicate the complete item container rather than copying only its visible modules. This preserves the nested structure and gives the new item the same alignment behavior as the existing ones.

If you remove an item, check whether the parent grid still has the right number of columns for the remaining content. Adjust the column structure when necessary so the section does not leave an unintended gap.

6. Customize The Styling

These CSS Subgrid Layouts are already styled, but you can customize their colors, backgrounds, typography, borders, images, spacing, buttons, and other design settings to match your website.

Start with shared visual decisions such as the section background, card colors, heading styles, border treatments, and button appearance. Repeating a focused set of values helps the individual items read as parts of one system.

When changing internal padding or gaps, apply the values consistently across comparable items. Subgrid coordinates track alignment, but inconsistent spacing inside individual elements can still make the design feel uneven.

For layouts that use contrasting cards, you can vary background and accent colors while keeping typography, borders, spacing, and component order consistent. This adds visual variety without weakening the shared structure.

7. Check The Layout On Smaller Screens

Repeated multi-column layouts often need a different structure on narrower screens. Use Divi’s responsive editing tools to review the section on desktop, tablet, and phone before publishing.

Pay particular attention to the number of columns, stacking order, nested alignment, card spacing, text length, button placement, and image sizing. A row of four cards on desktop may work better as two columns on tablet and one column on phone.

If you change the parent grid at a smaller breakpoint, review the nested items at that same breakpoint. Confirm that each card still contains its content in a logical order and that the Subgrid structure continues to support the intended alignment.

Check the live page as well as the builder previews. This will help you confirm that the content remains readable and the repeated items feel balanced at different viewport widths.

Tips For Effective CSS Subgrid Layouts

Subgrid is most useful when multiple nested components need to share a larger alignment system. Use these tips to preserve that relationship while adapting the designs to your content.

Keep The Component Structure Consistent

Repeated items should generally contain the same types of elements in the same order. A consistent internal structure makes it easier for corresponding headings, descriptions, metadata, and buttons to align across the grid.

Let The Parent Grid Lead

Treat the parent grid as the main source of structure. Decide how many columns the section needs, how wide those tracks should be, and how much space belongs between them before fine-tuning individual content elements.

Use Subgrid Where Alignment Adds Value

Subgrid is especially helpful for testimonials, service cards, feature comparisons, team profiles, and other repeated components where matching internal rows make the content easier to scan. Simpler elements without shared alignment needs may not require the same nested structure.

Allow For Real Content Differences

Test the layout with realistic copy rather than identical placeholder text. Different heading and description lengths will reveal how the structure behaves and whether any item needs editorial tightening.

Keep Calls To Action Aligned

When cards include buttons or links, consistent placement makes the section easier to scan and interact with. Preserve the track that holds the calls to action so varying description lengths do not push each button to a different position.

Avoid Spacing Fixes That Fight The Grid

Large fixed heights, excessive padding, and manual offsets can hide an alignment issue at one screen size while creating another elsewhere. Adjust the parent tracks, nested structure, or shared gaps before adding isolated spacing corrections.

Preserve A Logical Reading Order

The visual arrangement should support the underlying content order. This becomes particularly important when several columns stack vertically on smaller screens, where visitors encounter each item in sequence.

Test Every Responsive Breakpoint

Do not assume the desktop alignment will translate automatically to every screen size. Review the parent and nested grids together on tablet and phone, and make responsive adjustments wherever the column count or content flow changes.

Start Building In Divi 5 Today!

These 10 CSS Subgrid Layouts give you flexible starting points for testimonials, services, features, team members, projects, comparisons, process steps, and other repeated content. Import your favorite design, replace the example content, customize the styling, and use the coordinated Grid and Subgrid structure to create polished sections with Divi 5’s Visual Builder.

The post 10 CSS Subgrid Layouts For Divi 5 (Free Download!) appeared first on Elegant Themes Blog.

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

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

What’s New In Divi 5.13?

This is purely a maintenance release; no big features this time, just lots of little updates. The update includes 65 bug fixes and improvements.

But we have some exciting things in the works! 👇

What’s Coming Next?

There are some great updates in the pipeline. New modules, major AI improvements, and most excitingly: Components and Slots!

Components are a reimagining of Divi’s existing Global Elements. They retain the power of globally synchronized elements while introducing a much more flexible system for controlling what stays global and what can be customized on each instance.

You can detach individual settings from modules nested inside a Component, making those settings editable at the instance level while everything else remains globally synchronized. You can also add Slots, which create free-form areas inside Components where unique content can be built for each instance.

We’re also giving Components a much more prominent place in the builder, alongside systems such as Presets and Variables, with new interfaces for creating, managing, editing, using, and detaching Components.

Watch this video to get an early look. 👇

Changelog

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

• Dropdown panels now distinguish static content from clickable triggers and controls with appropriate cursors.
• Gallery modules no longer show a false Design → Image modified indicator after image selection, and real Image sizing edits now expose matching modified and reset states.
• Fixed Loop Builder pagination showing an empty last page when Post Offset is used.
• Added Theme Builder (`is_tb`) propagation coverage for WooCommerce cart, checkout, and product VB modules, and shipped the protected taxonomy singular-resource fix for #46838.
• Fixed Group Carousel item alignment so custom-width Groups can be positioned left, center, or right.
• Hidden modules no longer contribute frontend runtime assets or extracted-font webfont loads when Conditional Display discards them or when they are fully disabled, including container-hidden descendants, while their styles can still be collected for Dynamic Assets.
• Added expanded Divi 5 LayoutStyle unit coverage for display, gaps, and flex layout CSS emission.
• Fixed some theme builder module-specific regressions and wrote tests.
• Fixed Theme Builder header and footer content-area backgrounds affecting native page content, Theme Builder body row gutters, and custom CSS disappearing on pages with random-order loops.
• Added third-party APIs so that plugins and child themes can register custom icon fonts in the Divi 5 icon picker and on the frontend.
• Fixed an issue where default module preset design changes did not live-preview in the Visual Builder for modules such as Group Carousel and Accordion.
• Fixed a security issue that allowed logged-in Divi Cloud users to make the site server send requests to unintended addresses during token refresh.
• Fixed Map and Fullwidth Map module height not applying when set from a preset in the Visual Builder.
• Added a Show Labels option to the Contact Form module and fixed Label Text styles so they apply to field labels when labels are enabled.
• Fixed the default gap between Contact Form field labels and inputs to match the Field Layout 10px setting.
• Prevent preset options from inheriting parent values as the default value.
• Fixed Global Colors used in Off Canvas not appearing on 404 pages.
• Fixed Testimonial module Grid layout so column count applies to the description area only and no longer nests inside the module wrapper.
• Fixed an issue where the Blog module’s auto-generated page excerpts could expose unresolved loop-variable payload text.
• Fixed MailPoet block email editor failing to load when Divi is active because Divi Gutenberg integration assets were loading on unsupported custom post type editor screens.
• Fixed the issue where the Settings Modal didn’t reflect the module settings update on History state changes (undo/redo).
• Frontend content migrations now register Theme Builder layout rewrite callbacks with named methods gated by `has_filter()`, so repeated migration setup cannot restack layout rewrites, and workers still re-register after each request hook reset.
• Theme Builder template ID lookup and WooCommerce body-layout checks tolerate templates that override the header or footer without a body layout entry.
• Fixed the AI Agent installing custom fonts without asking for confirmation.
• Fixed Divi AI so updating a page, updating an AI rule, or creating a menu requires the same in-chat approval token as similar high-impact actions.
• Fixed AI Agent font upload authorization to validate chat ownership before processing.
• Fixed Contact Form 7 Styler Label Text Alignment not applying in the Visual Builder and on the frontend.
• Fixed SVG nested-module grid columns not reflowing when the number of Columns is changed in Divi 5 (#51872).
• Fixed nested default header submenus opening off-screen when a page had no Menu Module.
• Fixed an issue where deleting a nested option group preset while editing an element preset would unexpectedly close the Element Preset panel.
• Free-form custom CSS migrated from Divi 4 now applies to the module on the frontend and matches the Visual Builder result.
• Fixed global section editing in Wireframe Mode by ensuring the global layout is fetched when the Visual Builder loads directly into the wireframe view.
• Fixed SVG Module uploaded SVGs that use class-based styles, rendering as solid black instead of their intended colors.
• Fixed broken Column Class dropdown layout when `No Column Class` is selected in Divi 5 Visual Builder.
• Fixed Blurb image height sizing in the Visual Builder so height, min-height, max-height, and aspect-ratio render on the image element to match the front end.
• Fixed AI Agent image uploads failing when attaching a file or pasting from the clipboard.
• Fixed Woo Products modules appearing blank when editing WooCommerce shop and product archive templates via frontend Theme Builder Visual Builder.
• Fixed AI Agent chat stuttering while replies stream, including when many past chats are in History.
• Fixed Visual Builder failing on WordPress VIP because CodeMirror styles were loaded from blocked node_modules URLs.
• No customer-facing change in this repository. The Visual Builder WordPress VIP CodeMirror CSS fix ships from the paired common and ai-app PRs.
• Fixed Post Content module headings displaying the body font family instead of the heading font family in the Visual Builder when editing Theme Builder body templates.
• Fixed Tabs module parallax, video, mask, and pattern backgrounds so they stay in the content panel in the Visual Builder and on the frontend.
• Fixed a permission issue that allowed users without administrator capabilities to change site-wide AI layout default fonts, colors, and descriptions.
• Fixed Post Filter items so they can be added inside other modules nested in the Post Filter module.
• Fixed a Theme Builder frontend issue where using preset interactions with off-canvas interactions could cause main-canvas elements to inherit off-canvas styles.
• Fixed preset custom ID attributes not appearing on the front end for modules using a module preset or custom-attributes option-group preset.
• Fixed the modified indicator not appearing on the Title and similar composite option groups when text shadow settings were changed in the Visual Builder.
• Fixed a layout export security issue that could allow remote image URLs to reach internal network addresses.
• Fixed a Visual Builder security gap where text-effects image fill could emit unsanitized stored values into generated CSS.
• Fixed Pricing Tables horizontal gap spacing by applying `clearfix` only for block layouts.
• Added a third-party registration hook after the AI Agent store is ready.
• Fixed legacy saves so that encoded Builder 5 Dynamic Content cannot preserve Raw HTML for unprivileged users.
• Fixed a Dynamic Content security issue that could preserve Raw HTML through encoded save data.
• Fixed an issue where Theme Builder Visual Builder displayed body font instead of heading font on module headings when the heading font was set to Default.
• Fixed a Visual Builder security gap where module background image URLs could emit unsanitized stored values into generated CSS.
• Fixed a security issue where looped custom field content could render as unescaped HTML when a non-default date format was selected, even with raw HTML disabled.
• Fixed an issue where looped custom field content with raw HTML enabled was not sanitized the same way as regular custom fields.
• Fixed an issue where a CSS class from an Element/Attributes preset would override the local module CSS class on the frontend.
• Fixed an issue where internal development tools were included in the public Divi zip, causing some malware scanners to flag the theme.
• Fixed sticky posts appearing on every Blog module pagination page instead of only the first page.
• Fixed Text module Visual-mode oEmbed URLs not converting to embeds on the front-end.
• Fixed the SVG Module ignoring per-path fill colors set with inline styles.
• Fixed Extend Attributes so field-level Text Shadow and Box Shadow copies include all related values (offset, blur, color, and Box Shadow spread/position), not only the selected preset.
• Fixed Inspector Layout Style reset so it affects only the selected layout value’s modules, not sibling layout settings.
• Added a Divi 5 Slider swipe controls bar with formatted slide counts, segmented progress, and a customizable swipe label. Existing sites keep dot navigation by default after conversion; new sliders use swipe controls with an option to switch back to dot navigation.

Jump Into Divi 5 Today

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

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

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

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

Static fonts give you a set of fixed styles. Variable fonts give you the continuous range between them, and Divi 5 brings those controls directly into the Visual Builder through its Variable Fonts feature.

In this post, we’ll use practical combinations to solve common typography challenges. We’ll configure Design Variables, tune headings, subheadings, buttons, and body text, save those decisions with Presets, and replace existing static styles without editing every module individually.

What Are Variable Fonts?

Static font families are divided into separate files or styles, such as Light, Regular, Semibold, and Bold. If the precise weight or width you need falls between those options, you have to compensate with another setting or settle for the closest available style.

Designers often work around those gaps by adjusting letter spacing, increasing the font size, or choosing a nearby weight that does not quite produce the intended relationship.

A variable font stores one or more continuous design axes inside an OpenType file. Instead of offering only isolated styles, it can let you move through a range of weights, widths, slants, optical sizes, or other characteristics defined by the font designer.

Regular and Bold can still serve as familiar reference points, but you are no longer limited to them. If a heading needs a weight of 520, the font can render that coordinate instead of rounding the design to the nearest static style.

The available axes depend on the font. Some include only Weight, while more extensive families may also include Width, Slant, Grade, Optical Sizing, and font-specific controls.

Why Should You Use Variable Fonts?

Designers often start using variable fonts for their precision, but file consolidation can be useful too. One variable font file can replace several static files when a design uses multiple weights or widths.

That can reduce the number of font requests a page needs to make. However, a variable font file may be larger than one individual static file, so the performance benefit depends on how many styles your website would otherwise load. The advantage is usually clearest when one variable file replaces several static weights or widths.

The same source file also creates a consistent visual foundation. A heading at Weight 600 and body text at Weight 380 still come from the same underlying typeface, so both retain the family’s shared proportions and characteristics.

You do not have to check whether a separate bold file still feels related to the regular style. That relationship is built into the family.

Variable fonts are also supported by current versions of Chrome, Firefox, Safari, and Edge. As with any web font, it is still worth defining appropriate fallbacks and testing the result across the devices your audience uses.

Introducing Divi 5’s Variable Font Settings

Divi 5 adds Variable Font controls to the Visual Builder. You’ll find them in the Design tab within text-related option groups such as Heading Text, Body Text, Title Text, and Meta Text.

The available controls appear below the standard font settings and depend on the variable font you load.

Weight moves through the font’s available weight range. Width makes the glyphs narrower or wider, while Slant adjusts their angle without necessarily switching to a separate italic design.

Grade can make text appear heavier or lighter with little or no change to the space each character occupies. This makes it useful when you need more contrast without noticeably shifting the layout.

Optical Sizing adjusts letterform details for the size at which the text is displayed. When supported by the font, smaller text may receive more open forms and sturdier details, while larger text can use finer proportions.

Some variable fonts include additional custom axes. Divi reveals the controls included in the selected font, which may include CRSV, ROND, Casual, Element Shape, Element Expansion, Thick Stroke, Thin Stroke, Counter Width, Lowercase Height, Uppercase Height, Ascender Height, Descender Depth, Figure Height, and Monospace.

Axes that are not included in the font remain hidden, so the panel only displays controls the selected font supports.

Getting The Most Out Of Variable Fonts In Divi 5

Variable fonts can expose a wide range of axes, and Divi 5 places those controls inside the Design tab. The following workflow covers how to configure your fonts before building, combine axes for common typography relationships, save the results with Presets, and apply the system across an existing website.

Setting Up Design Variables

You can select a variable font directly inside any module’s Design tab. That may be enough for a quick experiment or an isolated layout.

For a website intended to grow, Design Variables provide a more maintainable foundation.

Open the Variable Manager from the left sidebar of the Visual Builder and select the Fonts tab. Divi provides default Heading and Body font variables that you can configure for the website.

After defining a font variable, click the Insert Dynamic Content icon in a compatible font field and select it. Every element connected to that variable will inherit the selected family. Changing the font in the Variable Manager will then update those connected elements throughout the website.

The Fonts tab includes Heading and Body variables by default, but you can create additional font variables for other roles, such as display text, labels, or accent typography.

Sizing can follow the same reusable logic. Instead of assigning one fixed pixel size to a heading, you can use a clamp() value with a minimum, fluid range, and maximum.

The Numbers tab in the Variable Manager includes an option for generating fluid sizing variables. This can create a reusable clamp() scale across heading levels. You can use Divi 5’s Variable Generator to build the scale more quickly.

Defining the font families and type scale before building gives every connected element a consistent starting point while preserving the flexibility to update the system later.

Creating Variable Font Combinations

The following examples cover three typography relationships that appear frequently on real websites. Each one uses Roboto Flex, whose extensive axis range makes the differences easy to see.

Treat the values as practical starting points for Roboto Flex rather than universal settings. Another variable font may expose different axes, use different ranges, or respond differently at the same coordinate.

Example 1: Pairing A Heading With A Subheading

Headings and subheadings should feel related without becoming visually identical. If their styling is too similar, the hierarchy fades. If the contrast is too strong, they can feel as though they belong to different systems.

One common solution is to introduce a second typeface. That can create contrast, but it also adds another family to load and another set of decisions to maintain.

A variable font with several axes can create the separation within one family. Each heading level remains visibly connected while receiving a distinct weight, width, and voice.

For the H2, set Weight near 660 and keep Width at 100. Leave Optical Sizing on Auto and Slant at 0 to create an upright, structured heading.

Give the H3 a lighter treatment. A Weight near 520 reduces its visual mass, while increasing Width to around 130 opens the letterforms and distinguishes it from the more compact H2.

A slight Slant near -3 introduces another layer of contrast without switching to a separate italic style. Lowering Grade to approximately -15 softens the density further, helping the subheading read as secondary without relying on a smaller size alone.

The result is a clear hierarchy created with one family. The H2 feels grounded, while the H3 remains related but lighter, wider, and more expressive.

Example 2: Scaling Buttons Without Losing Consistency

Many websites use at least two button sizes. A larger CTA may anchor a hero section, while a smaller button sits inside a card or appears inline.

If both buttons inherit exactly the same typography, the larger one may feel balanced while the smaller label becomes thin, cramped, or difficult to scan. Variable axes let you calibrate the text for each context instead of relying only on padding and font size.

Using Roboto Flex, open the Button module’s Design tab and expand the Button Text option group.

For a standard or large button, start with Weight near 700 and Width at 100. This creates a firm, stable label.

Set Letter Spacing near 0.06em to open the label slightly and give the larger button more presence without adding another level of weight.

A Grade near +10 can add enough density for the label to hold its own against a light background while producing less layout movement than another weight adjustment may introduce.

For a smaller button, try Weight near 620 and reduce Width to around 80. The narrower forms use the available horizontal space more efficiently, while the adjusted weight keeps the label from feeling too delicate.

Letter Spacing near 0.08em adds separation between the narrower characters. With Optical Sizing active, Roboto Flex can also adapt its details to the smaller text size, supporting legibility through changes such as sturdier strokes and more open forms.

Both buttons still read as part of the same design system, but each configuration responds to a different scale and amount of available space.

Example 3: Balancing A Heading With Body Text

Headings and body text serve different purposes. A heading is usually scanned quickly, while body text must remain comfortable across complete sentences and paragraphs.

Variable fonts let you tune each style for its specific job rather than treating body text as a smaller version of the heading.

For the heading, start with Weight near 660, Width at 100, Slant at 0, and Optical Sizing on Auto. This gives it the same solid foundation used in the first example.

To add more display presence without relying entirely on Weight, raise Uppercase Height to around 720.

Set Thick Stroke near 110 to reinforce the primary strokes. A Grade around +10 can add a little more density while helping the heading sit cleanly against a light background.

Body text needs a different kind of support. Weight near 450, Width at 100, and Optical Sizing on Auto provide a practical starting point.

From there, set Lowercase Height near 545. Increasing the apparent height of lowercase letters can help their shapes remain distinguishable during sustained reading.

Set Thin Stroke near 85 to prevent finer lines from becoming too delicate. A Counter Width near 510 opens the internal spaces in letters such as “o,” “n,” and “d,” helping them remain clear at smaller sizes.

The heading is tuned for immediate impact, while the body text is tuned for longer reading. Font size still contributes to the hierarchy, but the axis settings give each text style proportions suited to its purpose.

Locking It All In With Presets

Once a heading, button, or body-text configuration feels balanced, you should not have to rebuild it manually for every module.

Divi 5’s Preset system turns those axis combinations into reusable styles, making it easier to keep the typography consistent as the website grows.

Creating And Reusing Option Group Presets

Axis values applied directly to a heading remain local to that module. That works for one element, but it becomes inefficient when the same heading appears in several sections or a teammate needs to reproduce it inside another module type.

An Option Group Preset saves the complete configuration of one settings group as a named style.

A typography preset can include the font family, variable axis values, font size, line height, letter spacing, and other settings from that option group.

Because the preset belongs to the option group rather than one module type, a compatible Body Text preset can be reused across modules such as Text, Blurb, and Accordion modules.

To create one, open the relevant option group on a styled module. Hover over the group title until the Preset icon appears.

Click the icon and select New Preset From Current Styles. Give the preset a descriptive name and save it.

Build a focused library from there. You might create Card Title for headings used inside repeated cards, Section Intro Heading for section-level subheadings, and Primary Button Text for larger calls to action. Each preset can carry its own variable-axis configuration.

To apply one to another module, open the matching option group, click the Preset icon, and select the saved style.

Setting Up A Preset Library Before You Build

Creating Presets from existing modules works well when a website is already underway. When starting a new build, you can define the typography system before adding the full layout.

The Preset Manager lets you create and organize those styles away from the live canvas. Open it from the left sidebar of the Visual Builder.

Open the Groups tab and select the option-group type you want to configure, such as Heading Text. Click Add New Preset to open a live preview where you can adjust the axis values before applying the preset to an element on the page.

Work through the typography roles your website needs: one preset for each heading level, one or more body-text styles, and a preset for each button size.

Once a preset is ready, click the star icon to make it the default for that option group. New compatible modules will then inherit the selected typography automatically, allowing the build to remain focused on content and structure.

You can repeat this process for other shared design decisions, including backgrounds, borders, and shadows. This guide on creating reusable Border and Box Shadow Presets explains how to extend the same approach beyond typography.

How Element Presets Take It Further

An Option Group Preset controls one group of related settings. That focused scope makes it reusable across compatible module types, but it does not style the rest of the element.

Applying a Heading Text preset to a Blurb module can configure its heading. The module’s background, border, box shadow, spacing, and other option groups remain separate.

An Element Preset captures the styling of the complete module. It can include the heading, background, border, box shadow, spacing, and any Option Group Presets used inside the element.

Apply the Element Preset to another Blurb, and the complete design arrives together. If you later update an Option Group Preset referenced inside that Element Preset, the connected elements inherit the updated group-level style.

To create one, click the Element Preset icon in the upper-right corner of the module settings panel. Name the preset, save it, and make it the default when that module type should use it as its standard starting point.

How The Full System Works In Practice

Design Variables, Option Group Presets, and Element Presets operate at different levels. Used together, they create a maintainable typography system:

• Design Variables store reusable values. A Font Variable can hold the selected font family, while Number Variables can hold font sizes or line heights. Color Variables can store text and border colors. Updating a variable changes every connected setting.
• Option Group Presets define how a settings group should be styled. A Subheading preset can combine the Font Variable with Weight, Width, Grade, Optical Sizing, font size, and line height. Because the preset belongs to the option group, it can be reused across compatible module types.
• Element Presets assemble those decisions into a complete module style. They can combine typography Presets with backgrounds, borders, shadows, spacing, and other settings. Updating a referenced Preset or Variable allows the change to propagate through the system.

Local overrides remain possible. You can change one module’s border or typography setting without automatically rewriting the shared Preset. The connected system establishes consistency while still allowing intentional exceptions.

Pro Tip: Replacing Existing Styles With The New Font System

Adding a variable font does not automatically replace static font settings already applied throughout a website. Divi 5 includes several tools that can help you migrate those styles without opening every module individually.

Find And Replace

Find And Replace is useful for broad, repetitive changes, such as replacing the same static font value across several modules.

Right-click a font field in the Design tab and choose Replace Value. You can replace the existing font with a Font Design Variable and select the appropriate scope.

Each distinct font value or style may require its own pass. Enable Only Replace Identical Fields to avoid changing unrelated settings that happen to contain the same value.

Extend Attributes

Extend Attributes starts with an element that is already styled correctly and copies its attributes to compatible elements.

Right-click the updated module, choose the option to extend its attributes, select which styles or Presets should be copied, and define how far the change should reach.

This approach is useful when one correctly configured module should become the source for similar elements elsewhere in the section, page, or website.

Inspector

The Inspector is suited to more targeted work, such as finding a module with a unique local font value or reviewing which Presets affect repeated elements.

Right-click an element and select Inspect. The Styles tab surfaces settings that carry custom values, making it easier to find and replace a static font. The Presets tab helps you review the Presets connected to the inspected elements and identify where a shared style should be updated.

For a closer comparison of these three tools, read Inspector Vs. Find And Replace Vs. Extend Attributes.

Get More From Every Variable Font Axis In Divi 5

Static fonts offer a limited set of predefined styles. Variable fonts fill the space between those options, turning each supported axis into a practical design decision rather than a workaround.

Divi 5 places those controls directly in the Design tab, so you can tune variable fonts without writing custom CSS. Design Variables establish the shared font families and sizing values, Option Group Presets preserve the axis combinations, and Element Presets apply them as part of complete module designs.

Start with the purpose of each text style. Give headings the presence they need, optimize body text for sustained reading, and adjust button labels for the space available. Then save the successful combinations so the system remains consistent as the website grows.

Download Divi 5 below and start exploring the full axis range available in your favorite variable fonts.

The post How To Get The Most Out Of Divi 5’s New Variable Fonts appeared first on Elegant Themes Blog.

Components are a reimagining of Divi’s existing Global Elements. They retain the power of globally synchronized elements while introducing a much more flexible system for controlling what stays global and what can be customized on each instance.

You can detach individual settings from modules nested inside a Component, making those settings editable at the instance level while everything else remains globally synchronized. You can also add Slots, which create free-form areas inside Components where unique content can be built for each instance.

We’re also giving Components a much more prominent place in the builder, alongside systems such as Presets and Variables, with new interfaces for creating, managing, editing, using, and detaching Components.

The following video covers it all. Let’s take a closer look. 👇

Components Are The Evolution Of Global Elements

Divi was ahead of its time when we introduced Global Elements and selective synchronization nearly a decade ago. The ability to reuse elements across your website, keep them globally connected, and selectively detach individual settings gave Divi users a powerful way to build more consistent and maintainable websites.

Now, it’s time to take that concept to the next level.

Detach Nested Attributes For Instance-Level Editing

One of the most important additions to Components is the ability to detach individual attributes from modules nested inside the Component.

Imagine creating a reusable testimonial Component that includes an image module, an icon module, text modules, and other design elements.

You might want the Component’s typography, spacing, colors, borders, sizing, and layout to remain synchronized globally. At the same time, every testimonial needs a different photo, name, job title, and quote.

With Components, those individual attributes can be detached.

Once an attribute has been detached, it becomes editable at the instance level. The rest of the Component remains connected to the global Component definition.

For example, you could detach:

• The text inside a Text Module.
• The image used by an Image Module.
• A Button Module’s link URL.
• A background image or background color.
• Specific design settings that should vary between instances.

You decide which attributes remain global and which attributes become local.

This gives Components a much more practical balance between global synchronization and instance-level customization.

Local And Global Settings Are Clearly Separated

We’re also updating the Divi Builder interface to make the distinction between local and global Component settings much clearer.

When editing a Component instance, the settings panel will surface the attributes that have been detached and are available for local editing.

These settings are unique to the current instance.

The globally synchronized attributes remain separate from local settings and are edited directly in the Component.

This makes it immediately clear which changes will affect only the current instance and which changes will affect every instance of the Component across your website.

When you enter Component editing mode, you can work with the global structure and settings without mixing them with instance-specific values.

Components Become First-Class Citizens In The Divi Builder

Components are also getting a dedicated place in the builder interface.

Rather than treating global elements as an extension of the existing module workflow, this update elevates Components alongside other foundational features such as Presets and Variables.

The new Component interface will make it easier to:

• Create Components from existing Divi elements.
• Find and insert Components while building.
• Identify Component instances on the page.
• Manage detached attributes.
• Detach a Component instance when you no longer want it synchronized.
• Convert existing elements to existing components.

The goal is to make reusable design a core part of the Divi 5 workflow, rather than something hidden behind individual element settings.

As websites become larger and design systems become more sophisticated, Components will provide a much better foundation for building and maintaining reusable layouts.

The Upcoming Slot Module

Components become even more powerful with the introduction of Slots.

A Slot is a special module that can be added inside a Component. The Slot itself is part of the globally synchronized Component, but the content placed inside it is unique to each Component instance.

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

For example, imagine creating a site-wide call-to-action Component. The heading, description, background, spacing, typography, and overall layout could remain globally synchronized, ensuring every instance shares the same design and messaging.

Within that Component, however, you could add a Slot specifically for the call to action.

On one page, the Slot might contain a Button Module. On the other hand, it could contain an Email Opt-in Module. Somewhere else, it could contain a Contact Form or an entirely different collection of modules.

Everything surrounding the Slot remains part of the global Component and updates everywhere at once, while that one designated area can contain something uniquely suited to each instance.

The Component defines what stays consistent. The Slot defines where you’re free to build something unique.

Components, Presets, And Variables Work Together

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

• Variables let you define reusable values.
• Presets let you define reusable sets of element settings.
• Components let you define reusable collections of elements and determine which parts remain synchronized.
• Slots let you introduce unique content within those Components.

These systems solve different problems, and they become especially powerful when used together.

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

What do you think? Drop us a comment on the YouTube video and let us know how we can make Components even better!

The post Divi 5 Sneak Peek: Components and Slots appeared first on Elegant Themes Blog.

Divi 5‘s Grid Editor makes those choices easy to explore. You can resize and reposition items directly on a visual canvas, then see how each change affects the layout before you move on.

In this guide, we will build five creative Grid layouts, each designed to direct attention in a different way.

How CSS Grid Works

Before CSS Grid, designers commonly built page layouts with tables, floats, positioning, and, later, Flexbox. Those methods still have valid uses, but complex two-dimensional layouts often required extra markup or careful workarounds.

CSS Grid provides a layout system built around columns and rows. Their intersections form cells, and child items can be placed automatically or assigned to specific positions within that structure. By default, items follow the Grid’s auto-placement behavior, but you can change their starting points, spans, and flow.

An item can span multiple columns, multiple rows, or both. You can also preserve empty cells, align items to shared tracks, and place multiple items in the same Grid area when a design calls for overlap. The browser still follows the rules you define, which makes asymmetrical layouts easier to control.

Grid tracks can use fixed values, flexible units, content-based sizes, or combinations of all three. That flexibility helps the same structure adapt across different screen sizes, although complex Grids still need responsive adjustments at Divi’s breakpoints.

Why Grid Works For Creative Layouts

Creative layouts often rely on contrast, intentional empty space, varied proportions, and elements that break a uniform rhythm. CSS Grid supports those choices without abandoning an underlying structure.

Empty cells can remain open by design. One item can span several tracks while another stays compact. Items can also share cells for layered effects. These controls make it possible to create magazine spreads, stair-step compositions, pinboards, and other expressive layouts with one two-dimensional system.

How To Build A Grid Layout In Divi 5

When writing CSS by hand, you define properties such as grid-template-columns and grid-template-rows, then add placement or span rules for individual items. Divi 5 exposes the same core concepts through Grid settings in the Visual Builder.

You can begin with one of Divi’s premade Grid templates or create a custom structure.

To turn a Section, Row, Column, or Module Group into a Grid container, open its Design tab, expand Layout, and set Layout Style to Grid. You can use this setting on a new container or an existing one.

Grid Offset Rules let you target child positions from the container. A rule can change where a matching item starts or how many columns and rows it spans. Because the rule belongs to the container rather than the child element, the pattern can continue when matching items are added, duplicated, or generated by a Loop.

How To Use The Grid Editor

The Grid Editor turns those settings and rules into a visual canvas.

When Layout Style is set to Grid, an Open Grid Editor button appears in the Grid settings. Click it to view the container’s columns, rows, gaps, preview items, and offset rules in one place.

Drag a column or row edge to resize a track. Adjust the horizontal and vertical gaps by dragging or entering exact values. To resize an item, drag one of its corner anchors so it spans additional rows or columns. You can also drag and drop an item into another cell to change its position.

These visual changes create or update Grid Offset Rules behind the scenes. The editor also highlights the rules and the positions they affect, making complex patterns easier to understand.

The Grid Items control deserves one clarification: it adds sample items to the editor for visualization. It does not add Columns, modules, or other child elements to the container. Once the preview looks right, add the actual child elements separately in the builder.

Building Five Creative Layouts In Divi 5

Each of the following layouts uses the same Grid Editor tools, but changes the placement strategy. Some establish a clear focal point, some create rhythm through repeated spans, and others use empty cells as part of the composition.

1. The Magazine Lead

The Magazine Lead places one story ahead of the rest. It works well for news pages, blog indexes, portfolios, and any section built around one primary feature with several supporting cards.

Magazine and news sites can use the large block for the lead story. Agencies can place a flagship project there while recent work fills the smaller positions around it.

Add a new Row and choose Build Custom Grid from the structure options.

In the Grid Editor, set Columns to 4, Rows to 3, Grid Items to 12, and Gap to approximately 15px to 20px. The sample items let you see every position while you shape the layout.

Select the sample item in the top-left position. Drag its right anchor one column to the right, then drag its bottom anchor down one row. The item now spans columns 1 and 2 and rows 1 and 2, creating a two-by-two feature area.

Leave the supporting positions at their default one-column, one-row size. Their uniform proportions keep the main feature visually dominant.

Remember that these Grid Items are previews. They show the intended pattern, but they do not create content. Add the required child Columns from the Row’s Content tab, then place your modules inside them.

As the real child elements are added, the container’s Grid and offset rules determine where matching positions appear.

2. The Cascade

The Cascade creates a staircase that moves the eye down and to the right. It suits sections with a clear sequence or a progression from broad information to a concise result.

Useful applications include:

• Process flows: Give the first step the most room, then reduce each following step as the sequence approaches its outcome.
• Feature tiers: Lead with the broadest offering and use shorter cards for progressively focused additions.
• Sequential reveals: Build a narrative across four visual beats.

Add a new Row and choose Build Custom Grid. Set Columns to 4, Rows to 4, Grid Items to 4, and Gap to 0px. With no gap, the cards read as one connected stepped shape.

Resize and position the four sample items as follows:

• Place item 1 in row 1 and span all four columns.
• Place item 2 in row 2, start it at column 2, and span columns 2 through 4.
• Place item 3 in row 3, start it at column 3, and span columns 3 and 4.
• Place item 4 in row 4 and column 4.

Each drag updates the corresponding Grid Offset Rule at the container level.

The open cells in the lower-left area are intentional. They create the diagonal edge that gives the composition its direction. Because the eye finishes at the final card in the lower-right corner, that card is a natural place for an outcome, next step, or call to action.

3. The Pinboard

The Pinboard gives a collection more rhythm by mixing wide, tall, and standard cards. It is useful when items have similar importance but a uniform Grid would feel too repetitive.

Photography and design portfolios benefit from varied crops. Team pages can mix standard profiles with a wide group photo or introduction. Resource libraries and mixed-media feeds can also use the pattern to distinguish formats without creating a strict hierarchy.

In the Grid Editor, set Columns to 4, leave Rows set to auto, and set Grid Items to 8. Use a Gap of approximately 8px to 12px so the cards feel closely grouped while remaining distinct.

Create the pattern by combining three item sizes. Leave standard cards at one column by one row. For a wide card, drag its right anchor across a second column. For a tall card, drag its bottom anchor down across a second row. Reposition the sample items as needed to match the arrangement shown below.

Creating A Repeatable Pattern With Grid Offset Rules

Rules that target individual positions work well for a fixed collection. If a Loop or feed will add items over time, use a repeating target so the visual rhythm continues as the content grows.

Hover over a rule pill and click its edit icon to open the targeting options.

Edit the rule’s target so it applies to every fourth item instead of one fixed position. The two-row span will then repeat for every matching child position.

You can use the same approach for wide cards and other recurring placements. When new child items are added or generated, each matching position receives the container-level rule.

4. The Bookend

The Bookend places two tall anchors on the outer edges and four smaller cards between them. The strong boundaries frame the middle content and keep the composition balanced.

Editorial features can use the anchors for opening and closing images. Sponsor rows can frame standard logos with two featured partners. Comparison sections can also use the outer cards to mark two endpoints while the middle cards hold the options between them.

Set Columns to 4, Rows to 2, Grid Items to 6, and Gap to approximately 10px to 12px. Select the first sample item and drag its bottom anchor down one row so it spans both rows in column 1.

Move the last sample item to column 4, then stretch it across both rows. Leave the four middle items at their default one-column, one-row size so they fill columns 2 and 3 across the two rows.

The completed structure contains six positions: two tall anchors on the outside and four equal cards in the middle.

5. The Feature Wall

The Feature Wall opens with a full-width statement, follows with four equal cards, and closes with a shorter three-column card. The unfilled final cell gives the bottom row an intentional stopping point.

On a landing page, the top band can hold a headline, the middle row can present features or benefits, and the bottom card can carry a closing note or call to action. A case study could use the same positions for a headline result, supporting metrics, and a concise summary.

Add a new Row. In the Grid Editor, set Columns to 4, Grid Items to 6, and Gap to 10px. Select the first sample item and drag its right anchor across all four columns to create the top band.

Leave items 2 through 5 at their default one-column, one-row size so they fill the second row.

Move item 6 to column 1 in the third row, then stretch it across columns 1 through 3. Stop before column 4 to preserve the open final cell.

The top and middle rows establish an edge-to-edge rhythm, so the shorter bottom row reads as a deliberate variation. The slight asymmetry gives the layout a clear finish.

The fourth cell can also hold a small testimonial, supporting statistic, or Button Module. Add another child item if the content benefits from filling that position.

Make Each Grid Responsive

The desktop structures above should be adjusted for tablet and phone breakpoints. A four-column Grid that works on a large screen may feel compressed when the same track count and spans are carried onto a narrow viewport.

Use Divi’s responsive controls to reduce the number of columns, change item spans or starting positions, and tighten gaps at smaller breakpoints. A practical starting point is four columns on desktop, two on tablet, and one on phone, but the content should determine the final structure. Preview every breakpoint and confirm that the reading order still makes sense when decorative empty cells are removed or the layout is simplified.

Styling Your Grid Layouts In Divi 5

Once the structure is set, use styling to reinforce its hierarchy. A dominant card might use a stronger fill, larger type, or both. In an evenly weighted layout such as the Pinboard, variations in image crop, type size, or font weight can create rhythm without making one item feel disproportionately important.

Divi 5’s Design Variables make those choices easier to maintain. A Design Variable is a reusable color, font, number, image, text string, or URL that can be referenced in compatible fields throughout a site.

Card colors, typography, spacing, gaps, and other supported values can reference variables instead of repeating static values. When you update a variable, every field that uses it updates as well.

Create and manage these values in the Variable Manager in the Visual Builder.

For color systems, the Variable Generator can create a palette of related color variables from primary and secondary colors. Because those generated colors retain their relationships, changing a base color can update its related shades across the design.

Build Your Grids Visually In Divi 5

These five examples, built in Divi 5, use the same small set of actions: define tracks, resize items, reposition them, preserve intentional gaps, and target repeating positions when the content may grow. The visual result changes because the placement strategy changes.

Start with the layout that best matches your content, then adjust its proportions, responsive behavior, and styling in the Grid Editor. Once the structure works, save it as part of your design system and reuse the pattern wherever it supports the story you want the page to tell.

The post 5 Creative CSS Grid Editor Layouts & How To Create Them In Divi 5 appeared first on Elegant Themes Blog.

In this post, we’ll build that kind of filterable listings page using Divi 5 and Advanced Custom Fields (ACF). We’ll combine two Divi 5 features, the Loop Builder and the Post Filter module introduced with the Loop Filter Modules, to create a fully custom property grid that visitors can search and filter on the front end. ACF will handle the custom fields, including price, city, bedrooms, bathrooms, square footage, amenities, and agent name, that power the loop cards and filter form.

By the end, you’ll have a polished real estate layout you can use on your next project, along with a downloadable JSON file of the completed design.

Let’s get started.

What Is The Loop Builder In Divi 5?

The Loop Builder is one of the most flexible features in Divi 5. It lets you turn any Divi element into a dynamic loop of content pulled from your site’s database. That content can be posts, custom post types, terms (categories or tags), or users.

In simple terms, you design one item exactly the way you want it to look, tell Divi which content to cycle through, and the builder automatically repeats that design for every matching item.

Here’s how it works:

1. Design The Template

Build a single loop item using any combination of Divi modules and design settings. You aren’t limited to a premade Blog or Portfolio module, so you have complete creative freedom.

2. Enable Looping And Configure The Query

Turn looping on for the container that holds your design. Then set the query options: choose the post type (or terms/users), filter by categories or tags, include or exclude specific items, set the order, decide how many items appear per page, apply an offset, or create custom meta queries.

3. Insert Dynamic Content

Replace static text and images with dynamic content from the loop, including the post title, Featured Image, excerpt, custom fields, and more. Each repeated item automatically displays its own data.

Because the Loop Builder works with any Divi element, you have full control over the design of each repeated item. It supports custom post types, ACF fields, WooCommerce products, taxonomy terms, and users. This makes it suitable for many types of dynamic content.

Why It’s Perfect For Real Estate Listings

For a real estate website, you can design a custom property card that pulls in the exact fields you need, then have Divi automatically generate a responsive grid of those cards. This gives you control over the layout while keeping it connected to the listing data.

What Are The Loop Filter Modules?

The Loop Filter Modules add front-end controls to the Loop Builder. They let visitors search, filter, and sort looped content without leaving the page or relying on a separate third-party filtering plugin.

The foundation is the Post Filter module. It serves as a form wrapper with one or more Post Filter Item modules that create the controls visitors interact with.

There are a variety of field types associated with the Post Filter module, including:

• Text: A search field that queries post titles, content, or selected custom fields. We’ll use it to let visitors search by address or city.
• Select: A dropdown menu that pulls taxonomies or meta values.
• Radio: A list of single-choice buttons.
• Checkbox: Multi-select options that let users combine filters.
• Order / Order By: Controls that let visitors choose how the results are sorted.
• Buttons: Submit and Reset buttons that apply or clear the filters.

Once you connect the Post Filter module to a specific Loop Target, the visitor’s submitted choices update the query that powers the loop. The matching results then refresh without requiring the visitor to leave the page.

Divi 5 also includes a Tooltip module. You can nest it inside any module, including an item within a loop. Hovering over or clicking the parent element reveals the Tooltip, making it useful for the additional information often included on property listing cards.

Prerequisites & Setup

Before we start building the listings page, we need a solid foundation of data. Here’s everything you’ll set up first.

Create A Custom Post Type

Using Advanced Custom Fields, register a new post type called Listings. This keeps your property data separate from regular blog posts and gives you control over its admin interface.

Add Taxonomies And Custom Fields

Still inside ACF, create a Taxonomy for Property Types. Make sure the Listings Post Type is selected before saving. This will power the Property Type control in the Post Filter form.

Next, create a new Field Group and name it Real Estate Listings.

From there, you’ll create the following Custom Fields:

• Tooltip Text (Text): This is the content that will appear in the info tooltip.
• City (Text): This stores the location visitors can search alongside the listing address.
• Price (Text): This will hold the listing’s price in the loop card.
• Bedrooms (Radio Button): This will display the number of bedrooms (2-5) on the listing card and serve as a Radio field in the Post Filter module.
• Bathrooms (Radio Button): Displays the number of bathrooms (2-5) in the card and Post Filter module.
• Amenities (Radio Button): Stores one amenity value, such as Garage, Pool, Waterfront, or New Construction, for the card and filter.
• Agent (Text): Displays the listing agent’s name in the listing card.
• Square Footage (Text): Displays the listing’s total square footage on the listing card.

Create Sample Listings

Add several listings (we’ll add 12) using your new custom post type.

Fill in the Title using the listing’s address, add the Featured Image, complete all the custom fields, and assign a Property Type. The more varied your sample data is, the better you’ll be able to test the filters later.

Create A New Page

In the WordPress admin dashboard, create a new page, name it Listings, and open it with the Visual Builder. This is where we’ll build the entire filterable real estate layout.

Once these four steps are complete, you’re ready to start designing the loop and the filter form.

Build The Real Estate Listings Loop

Now that the data foundation is in place, it’s time to design the heart of the page: the listings loop itself. In this section, we’ll create a clean, fully custom property card and turn it into a dynamic loop that pulls in real listing data. By the end, you’ll have a responsive grid that looks like the finished layout below, ready to be filtered and searched in the next steps.

Create The Foundation

Start by adding a 1/4 + 3/4 Column Row to the page.

In the Row’s Design tab, expand the Layout option group and assign a 0px Horizontal Gap and a 30px Vertical Gap.

Next, expand the Border option group. Under Border Styles, select the Top Border tab, assign a 1px Top Border Width, add a Top Border Color, and set the Top Border Style to Dashed.

Configure The First Column

Now, open the first Column of the Row and navigate to the Design tab. Expand the Layout option group and assign a 20px Vertical Gap.

While in the Design tab, expand the Spacing option group and add 25px Padding on all four sides.

In the Border option group, add a 1px Right Border to the Column.

Configure The Second Column

Open the second Column in the Row. Go to the Design tab, expand the Spacing option group, and add 20px Padding on all four sides.

Add A Nested Row

With the Gaps, Borders, and Spacing set, add a Nested Row to the second Column. Click the black + icon and select a single-column Row.

In the new Row’s Design tab, expand the Layout option group and assign a 20px Horizontal and Vertical Gap. Also enable Wrap under Layout Wrapping. This will keep the spacing consistent and allow items to flow to the next line once the loop runs out of available space.

Next, click to edit the Column. In the Content tab, expand the Meta option group and add Listings as the Element Label. This will allow you to easily assign a Loop Target when we build the Post Filter form in the next step.

Next, go to the Design tab. Open the Layout option group and set the Vertical Gap to 0px.

In the Sizing option group, set the Column Class to 1/2.

Lastly, expand the Border option group. Assign a 10px Border Radius, 1px Border Width, and enter a Border Color for the Column.

Enable The Loop Builder

With the Column’s structure set, the next step is to enable the Loop Builder. While in the Column, go back to the Content tab and expand the Loop option group. Toggle Loop Element on.

Leave the Query Type set to Post Type, but remove the default Posts under Post Type. Instead, select the Listings post type we created in the previous step.

Scroll to reveal the Order and Posts Per Page fields. Set Order to Ascending and Posts Per Page to 4. This setting controls how many listings appear per page. Because we created 12 sample listings, add a Pagination module and target this loop if you want visitors to access the remaining results.

Add Modules To The Loop

Now that the Loop Builder is enabled, we can start adding modules to the layout.

Insert A Module Group

Start by adding a Module Group to the Column. Within the Group, add an Icon module.

Choose an Info Icon in the Content tab.

In the Icon’s Design tab, set an Icon Size and Icon Color.

While in the Design tab, expand the Sizing option group. Set Alignment to End.

Finally, add a Tooltip module beneath the Icon. In the Content tab, add a Background Color.

In the Tooltip’s Design tab, expand the Tooltip option group and set Show Tooltip On to Click. Set the Tooltip Position as shown in the screenshot below. While in the Design tab, adjust Spacing, Border, and any other design settings as needed.

Now, open the Group’s Design tab. Expand the Sizing option group and assign an Aspect Ratio of 3 by 2.

Next, expand the Spacing option group and assign 15px Padding on all four sides.

Still within the Group settings, navigate to the Content tab. Expand the Background option group and tab over to assign a Background Image. Hover just above the Background Image field to reveal the Insert Dynamic Content icon.

When the list of dynamic content options appears, choose Loop Featured Image. Divi 5 will load the Featured Image from each of your Listings posts.

Add A Second Module Group

With the first Module Group styled, we’ll add another directly beneath it. Within the Group, go to the Design tab and expand the Layout option group. Set the Vertical Gap to 5px.

Next, expand the Spacing option group and add 25px Padding on all four sides.

Click into the Group’s Content tab and expand the Background option group. Assign a Background Color.

Now, expand the Elements option group and add two Heading modules and a Text module to the Group. Style them as desired.

Add another Module Group to the Column, nest three Text modules inside it, and style them as desired. In the Group’s Design tab, expand the Layout option group and set Layout Direction to Row. Apply 5px to the Horizontal Gap and Vertical Gap fields.

Add two more modules to the Column, including a Text module and another Module Group. Style the Text module as desired.

In the newly added Module Group settings, go to the Design tab and expand the Layout option group. Set Layout Direction to Row, Justify Content to Space Between, and Align Items to Center.

Within the Module Group, add a Text and Button module and style them as desired.

Link The Custom Fields

Now, we need to connect the custom fields we created to the modules in the loop Column. Start by selecting the first Heading module we added in the last step. In the Content tab, expand the Text option group and hover next to the Heading field to reveal the Insert Dynamic Content icon. Choose Loop Post Custom Field from the available options.

When the modal appears, click Enter Custom Meta Key in the Select Custom Field dropdown menu.

When the options appear, choose the Price custom field.

Finally, click the Apply button to assign the field to the module.

Repeat these steps to assign the remaining dynamic content to the corresponding modules. For the second Heading module, choose Loop Post Title. For the Text module, choose Loop Excerpt.

For the Module Group with three Text modules, assign the Bedrooms custom field to the first Text module and add a separator in the After field.

Use the Bathrooms custom field for the second Text module and Square Footage for the third.

For the standalone Text module, use the Amenities custom field.

In the final Module Group, assign the Agent custom field to the Text module.

For the Button module, add the button text and assign Loop Link to the Button Link URL in the Link option group.

For the final custom field, use the Layers Panel to locate the Tooltip module. In the Content tab, assign the Tooltip Text custom field to the Body.

Create The Filterable Search With The Post Filter Module

With the listings loop ready to go, the final step is to give visitors control over what they see. We’ll add a Post Filter module that lets them search by keyword, choose a property type, filter by bedrooms and bathrooms, select an amenity, and apply or reset their choices.

Add The Post Filter Module

Place a Post Filter module in the left Column of the Row. This module serves as the form wrapper that contains all the individual Post Filter Items.

Once added, navigate to the Content tab of the Post Filter module. Expand the Target option group and select the Listings loop we created in the last step.

Expand the Elements option group to view and add more fields to the module. By default, the Post Filter module includes a Search field, a Category filter, and Reset and Apply buttons. These are the Post Filter Items.

Assign The Taxonomy And Custom Fields

Start by editing the Search Post Filter Item. Keep Field Type set to Text, then configure the field to query the post title and the City custom field. This will allow visitors to search by the property address or city.

Next, click to edit the Category Post Filter Item. Expand the Field option group and select Radio as the Field Type. In the Field Option dropdown, select the Property Types taxonomy we created in ACF. The Field Label will populate automatically, but you can change it to whatever you like.

We’ll add three new fields to the Post Filter module. In the main Post Filter module’s Content tab, expand the Elements option group and click + Add Element. Choose Post Filter Item from the available options.

Click and drag the new field to place it directly under the Property Type field.

Click to edit the new field. Change Field Type to Radio. For Field Value, select Amenities.

Now, copy the new Post Filter Item twice. Change Field Option to Bedrooms for one field and Bathrooms for the other.

Style The Filter Fields

Now that all fields are in place, we need to style them. In the main Post Filter module settings, go to the Design tab. Expand the Layout option group and set the Vertical Gap to 25px.

Next, expand the Field option group. Expand the Input Text group, choose a field font, font weight, text size, and text color.

Now, open the Label Text group. Assign a label font, label font weight, label text size, label text color, and label line height.

Add styles for the Placeholder Text, including font, font weight, text size, text color, and line height.

Set a Background Color and assign Border Styles as desired.

Style The Radio Options

Expand the Radio Options group in the Design tab. Style the Input Text by assigning its font, text size, text color, and line height.

Similar to the Fields group, assign a Background Color for the Radio Options along with Border Styles.

Add Button Styles

The last step is styling the Apply and Reset buttons in the Post Filter module. In the main Post Filter settings, expand the Button option group in the Design tab. Set a Background Color and Border Styles first.

Next, expand the Text options within the Button styles. Assign a Button Font, Text Size, Text Color, and Capitalization, then make any other necessary styling adjustments.

Lastly, expand the Spacing group within the Button styles. Assign top and bottom Padding.

Make Responsive Adjustments

With the Post Filter form styled, we need to ensure the layout looks good at every screen size. Using Divi 5’s Customizable Responsive Breakpoints, switch to the Tablet view. Start by adjusting the Vertical Gap at the Section level to reduce the amount of space between Rows.

Work your way through Rows and Columns, making spacing adjustments as necessary.

If you need to adjust Column sizes at smaller breakpoints, use Structure Templates to resize them. In the Row settings, open the Content tab, expand the Elements option group, and click Apply Structure Template. From there, select one of the predefined Row templates.

Repeat these steps for the Phone breakpoint, making any necessary tweaks to spacing or row structure.

Preview The Post Filter Form On The Front End

The final step is to preview the completed page on the front end. Test each filter individually by searching for an address or city, selecting a property type, choosing bedroom and bathroom counts, and selecting an amenity. Then, test the fields in combination and use the Apply and Reset buttons to confirm that the loop updates correctly. Once you’ve verified that the filters and loop work together smoothly, your filterable real estate listings page is ready.

Download The Files

To give you a clear picture of how the finished layout works, we’ve created a ready-to-use JSON file of the complete design built in this post.

To use it, navigate to Divi > Divi Library and click the Import & Export button.

Click the Import tab, attach the Real Estate Listings Loop & Filter.JSON file from your computer, and click Import Divi Builder Layouts.

Next, create a new page in the Visual Builder. When the Builder loads, click the blue + icon to add a new Section.

Select the Add From Library tab, choose the layout, and click Use This Section.

For the loop and filters to populate correctly, make sure you have already completed the prerequisite steps, including:

1. Creating the Listings custom post type.
2. Adding the Property Types taxonomy.
3. Setting up the ACF Field Group with all the required custom fields.
4. Publishing real estate Listing posts.

Without published listing data, the loop will remain empty. Once those items are in place, the imported layout will display and filter your properties as shown in this post.

Download the Files

Download For Free

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

DOWNLOAD

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

Start Building Your Filterable Listings Today

Combining Divi 5‘s Loop Builder with the Post Filter module from the Loop Filter Modules gives you control over the listing design and front-end search experience. You can create fully custom property cards and let visitors search and filter them without relying on a separate third-party filtering plugin.

The same approach works just as well for any directory-style site, including job boards, event calendars, team directories, product catalogs, and more. Experiment with different field types, layouts, and queries to see how flexible the system really is.

Give it a try in Divi 5 and let us know how it works for you. Share your questions or feedback in the comments below or on our social media channels. We’d love to see what you build!

The post How To Build A Filterable Real Estate Listings With Divi 5 appeared first on Elegant Themes Blog.

In this post, we’ll explore what the module does and show you how to add, configure, style, and test a Gravity Form across breakpoints. We’ll also explain how to import the downloadable example layouts.

Let’s get started.

What Is The Gravity Forms Module?

The Gravity Forms Module is a native Divi 5 integration for forms created with Gravity Forms. Once the plugin is installed and active, the module appears in the Visual Builder. Add it like any other module, select a form in its settings, and preview the result on the page.

The module removes the need to place a Gravity Forms shortcode in a Code Module. It handles the embed and provides a live preview, allowing you to design the page around the actual form.

The form’s structure and behavior still live in Gravity Forms. Create its fields, conditional logic, notifications, confirmations, and other functional settings in the plugin.

Use the Divi module to choose where that form appears and control how its output looks on the page.

Its design settings cover form text, fields, buttons, validation messages, and paging controls. This gives you control over the form’s empty, interactive, error, and multi-page states without leaving the Visual Builder.

Key Advantages

The primary advantage is a cleaner workflow. You can place and style an existing form through one module instead of moving between a shortcode, CSS, and the front end to check each change.

The live preview also reveals long labels, stacked fields, button placement, and multi-page controls while you work. You can preview validation and confirmation messages, then style them so they feel connected to the rest of the design.

The result is a more consistent experience across contact forms, lead forms, applications, and other Gravity Forms layouts.

Before You Start

A few things need to be in place before the Gravity Forms Module appears and works as expected.

First, install and activate Gravity Forms. The Divi module depends on the plugin and does not appear in the module list when Gravity Forms is inactive.

Build the form in Gravity Forms before styling it in Divi. Add the required fields and configure its conditional logic, notifications, and confirmations. The Divi module embeds the form but does not create its fields.

The native Gravity Forms Module shipped with Divi 5.11, so update Divi before looking for it in the Visual Builder.

Finally, choose the form you plan to use before styling. Working with the actual field structure is faster than designing around one form and replacing it with a substantially different one later.

How To Use The Gravity Forms Module

1. Add The Module

Create a page or open an existing one in the Visual Builder, then add the Gravity Forms Module to a Section.

In the module’s Content tab, open the Gravity Forms option group. Use the Form field to select one of your existing forms.

Check the Canvas to confirm that the form renders correctly.

2. Configure The Settings

In the Content tab, choose whether to enable Ajax. While styling, enable the Validation and Confirmation message previews so you can see and design those states inside the Builder.

3. Style The Form

Open the Design tab and begin with Title Text. Adjust its font, weight, size, color, line height, and other available settings.

Use the Description Text, Section Heading Text, and Sub-Label Text groups to style the form’s supporting text.

Open the Input group to style input, label, and placeholder text, control Spacing, and adjust the background, border, and shadow. Divi’s form field editing modes also let you design hover and focus states, making the active field easier to identify.

If the form includes checkboxes, radio buttons, or image-based choices, style them through their corresponding option groups. Checked-state editing can help distinguish selected choices from unselected ones.

For multi-page forms, use the Progress Bar Text group to style the text associated with the progress indicator.

The Submit Button group is available for every form. Save & Continue, Next Page, and Previous Page apply to multi-page forms, while File Upload styles the upload control when that field is present.

Use Validation Summary Text, Field Validation Text, and Confirmation Text to style the module’s feedback messages. Keep the message previews enabled while designing so you can see the result.

4. Test For Responsiveness And Function

Switch the Builder to Tablet and Phone views and check the form at each breakpoint.

Look for wrapped labels, stacked columns, undersized buttons, and inconsistent padding. On multi-page forms, move through every step and confirm that the paging controls remain easy to tap.

Finally, submit the form on the front end. Confirm that required fields validate, error messages remain readable, conditional fields behave correctly, and the confirmation state fits the layout.

After testing, you can reuse the module or its field presets elsewhere, select another form, and review the output for any differences in field structure.

Tips And Best Practices

These practices will help keep Gravity Forms layouts consistent, responsive, and reliable.

Build The Form First

Finish the fields, labels, required settings, conditional logic, notifications, and confirmation before styling. The module styles the markup Gravity Forms generates, so structural changes may require another design review.

Style Hover, Focus, And Checked States

The empty form is only one state. Define hover and focus styles for fields and buttons, and checked styles for radios and checkboxes. Then review validation and confirmation messages so every stage feels connected to the same design.

Use Design Variables And Presets For Repeated Values

Store repeated colors, spacing, radii, and border widths as Design Variables. You can also create field presets for inputs, radios, and checkboxes so forms across multiple modules share the same base design.

Test The Form On The Front End

Builder previews are useful, but they do not replace a real submission. Send an entry and confirm that validation, file uploads, conditional fields, notifications, and confirmations work as expected. Test every page of a multi-page form on desktop and mobile.

Download And Install The Files

We’ve created two Section layouts based on the examples in this post. The downloadable zip includes three JSON files: one Gravity Forms – ALL.JSON file containing both layouts and two individual files.

Go to Divi > Divi Library and click Import & Export.

Select the Import tab, choose a JSON file from your computer, and click Import Divi Builder Layouts.

Create a page or open an existing one in the Visual Builder, then click the blue + icon to add a Section.

Open the Add From Library tab, choose a layout, and click Use This Section.

Open the Gravity Forms Module in the imported Section. In the Gravity Forms group under the Content tab, select a form and confirm that it loads correctly.

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!

Gravity Forms Now Belongs In The Builder

You no longer need a shortcode to add a Gravity Form to a Divi 5 page. Add the Gravity Forms Module, select an existing form, style its output in the Visual Builder, and test it across breakpoints and submission states.

For a head start, download the example layouts and import one into Divi. Select your form, adjust its colors and Spacing, and review every field and message before publishing. Make sure Divi and Gravity Forms are up to date so the integration is available and works as expected.

Tell us how the Gravity Forms Module works for you in the comments or on our social media channels. Your feedback helps us improve future modules and features.

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