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.

Each design combines images of different sizes and proportions to create a distinct visual rhythm. Import a section, replace the example images with your own, adjust the grid or styling when needed, and add a polished gallery-style composition to your page.

Preview

Here’s a quick look at the 16 Gallery Grid Layouts included in the pack. The download is further down the post.

Download 16 Gallery Grid Layouts For Divi 5

Get all 16 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 (17 Exports)

After you download and unzip the file, you’ll find 16 individual Gallery Grid section exports, plus 1 file containing all layouts.

Gallery Grid Template Section 1 to 16 (16) → Sixteen gallery layouts featuring different image arrangements, proportions, spacing patterns, and grid compositions that you can use as-is or customize.

Gallery Grid Template Sections (All) → Imports all 16 designs into your Divi Library at once.

How To Use The Gallery Grid Layouts

Keep your download folder handy. We’ll import the files, add a Gallery Grid section to a page, replace the example images, and customize the composition for your content.

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 Gallery Grid Template Section JSON file if you only want one design. To import every layout at once, choose Gallery Grid Template Sections (All).json instead.

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

2. Add A Gallery Grid Section To Any Page

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

Click Add From Library and select one of the Gallery Grid sections you imported.

The complete design will be added to the page with its original images, proportions, spacing, and grid composition intact.

3. Replace The Gallery Images

Start by replacing the example imagery with your own photos, product shots, artwork, project visuals, team photography, or other media that suits the page.

Work through the layout one image at a time. Depending on how an image is added to a particular block, open the relevant image or background settings and select your replacement from the Media Library.

Choose images with enough resolution for the space they occupy. Larger focal areas need stronger source images than compact supporting tiles, especially on wide desktop screens.

As you replace each image, review how its subject sits within the available frame. A photo that works well in a wide area may not translate to a narrow or square tile without adjusting its crop or focal position.

4. Adjust The Grid Structure

You can keep each layout exactly as provided or adapt its structure to your image collection. Select the container that holds the gallery items and open the Grid Editor to visualize the current composition.

From the Grid Editor, you can resize and reposition items, adjust row and column sizes, and refine horizontal or vertical gaps. Use these controls when you want to give one image more emphasis, change the balance between tiles, or make the layout better suit the proportions of your photography.

If you need another image, duplicate an existing gallery item and replace its content. If you want a simpler composition, remove an unnecessary item and review the remaining layout to make sure it still feels balanced.

Make structural changes gradually. Resizing one item can affect the visual weight of its neighbors, so review the full gallery after each adjustment instead of judging individual tiles in isolation.

5. Refine Image Cropping And Styling

The Gallery Grid Layouts are already styled, but you can customize their image presentation, spacing, backgrounds, borders, and other design settings to match your website.

When an image needs a different proportion, use Divi 5’s Aspect Ratio and Image Framing settings where applicable. Aspect Ratio defines the shape of the rendered image area, while Image Framing helps control how the image fills and is positioned inside that space.

Use consistent border radii, borders, or image treatments when the gallery needs a more unified appearance. For a more editorial composition, you can preserve differences in scale and proportion while repeating a smaller set of styling choices throughout the layout.

If you change the gaps or outer spacing, use values that create a deliberate relationship between the images. Tight spacing creates a denser collage, while larger gaps allow each photo to read more independently.

6. Check The Gallery On Smaller Screens

Multi-column image grids can change considerably when they adapt to narrower screens. Use Divi’s responsive editing tools to review the layout on desktop, tablet, and phone before publishing.

Pay particular attention to stacking order, image crops, item heights, gaps, and any intentional empty areas. The desktop composition may rely on images appearing beside one another, so confirm that the mobile order still presents the gallery logically.

If necessary, adjust grid settings, spacing, sizing, or image framing at smaller breakpoints. Check the live page as well as the builder previews to confirm that the final gallery is balanced and easy to browse on different screen sizes.

Tips For Effective Gallery Grid Layouts

An effective gallery does more than place images next to one another. Use these tips to create a cohesive composition that supports the imagery and guides visitors through it.

Choose A Clear Focal Image

Give one or two images more visual weight through size, placement, contrast, or subject matter. Smaller supporting images can then add context and variety without competing for equal attention.

Build A Cohesive Image Set

Choose images that feel connected through subject, lighting, color, editing style, or narrative. They do not need to look identical, but they should make sense when viewed as one collection.

Mix Image Proportions Intentionally

Combining portrait, landscape, and square areas can create movement across the gallery. Match each photo to a frame that complements its subject instead of forcing every image into the same shape.

Keep Gaps Consistent

Consistent gaps help separate individual images while holding the complete composition together. If you adjust the spacing, repeat the same horizontal and vertical values unless a deliberate variation supports the design.

Protect Important Focal Points

Faces, products, typography, and other important details should remain visible after cropping. Review every image at each breakpoint and reposition it when the frame cuts off essential content.

Use Whitespace Purposefully

Not every area needs to be filled. Intentional whitespace can break up a dense image collection, create pauses between visual groups, and direct more attention toward key photographs.

Optimize Images Before Publishing

Large galleries can add significant page weight. Resize and compress images appropriately before uploading them, use modern image formats when suitable, and add concise alternative text that describes meaningful images for visitors who cannot see them.

Check The Visual Order On Mobile

When a gallery stacks or changes structure on smaller screens, its visual sequence becomes more noticeable. Make sure related images remain grouped and that the strongest photographs still appear in positions that support the intended story.

Start Building In Divi 5 Today!

These 16 Gallery Grid Layouts give you a flexible starting point for photography websites, portfolios, creative agencies, product showcases, travel pages, lookbooks, project galleries, and more. Import your favorite design, replace the images, refine the crops and spacing, and create a polished gallery composition with Divi 5’s Visual Builder.

The post 16 Gallery Grid Layouts For Divi 5 (Free Download!) appeared first on Elegant Themes Blog.

You can choose from nine chart types and manage their data through a new tabular editor inside the Visual Builder. You can enter values directly or populate the chart by uploading a CSV file, then style the result with Divi 5’s design controls.

In this post, we’ll explore the available chart types, data tools, and design options before walking through how to create and customize a chart in Divi 5.

Let’s dive in.

What Is The Charts Module In Divi 5?

The Charts Module lets you display data as interactive, customizable charts directly inside the Visual Builder. Instead of embedding scripts or preparing static graphics elsewhere, you can build and refine a chart in the same environment as the rest of your page.

A clear chart can make trends, proportions, comparisons, and relationships easier to understand at a glance. Because the module uses Divi’s design system, its typography, colors, Spacing, and responsive behavior can remain consistent with the rest of your site.

Key Advantages Include:

• Native Visual Builder integration with a live preview.
• Nine interactive chart types with tooltip support.
• Flexible data entry through the tabular editor or CSV import.
• Design controls for chart text, legends, tooltips, and the module container.
• Useful applications for reports, statistics, comparisons, dashboards, and product analytics.

The Nine Chart Types

The module supports line, area, bar, radar, pie, doughnut, polar area, scatter, and bubble charts. Each format presents data differently, so the right choice depends on the relationship you want visitors to understand.

Line

Line charts connect data points to show changes across a sequence. They work well for sales growth, temperature readings, and other time-based data where direction and rate of change matter.

Area

Area charts fill the space beneath a line, giving the magnitude of change more visual weight. Use them when both the trend and the volume represented by the values are important.

Bar

Bar charts compare values across categories. Their side-by-side structure suits data such as revenue by product, survey responses, or performance metrics.

Radar

Radar charts plot several variables on axes that radiate from a central point. They are useful for comparing skills, product features, or performance across multiple criteria.

Pie

Pie charts divide a whole into proportional slices. They work best with a limited number of categories whose relative shares need to be understood quickly.

Doughnut

Doughnut charts present proportions in a ring. They communicate the same type of part-to-whole relationship as pie charts while providing a lighter visual treatment.

Polar Area

Polar area charts arrange categories around a circle, with each segment’s radius representing its value. They combine a radial layout with a clearer emphasis on differences in magnitude.

Scatter

Scatter charts plot points across two axes to reveal relationships, clusters, correlations, and outliers. They suit datasets such as price versus popularity or height versus weight.

Bubble

Bubble charts extend scatter plots with a third value represented by bubble size. For example, one chart could compare sales volume and profit margin while using bubble size to show market share.

You can change the chart type in the module settings and compare different presentations of your data in the live preview. Some formats require different data structures, so review the result and its labels whenever you switch types.

Managing Chart Data With The New Tabular Data Editor

One of the most useful parts of the Charts Module is its tabular data editor. Instead of spreading values across separate settings or leaving the builder to prepare every update, you can view and edit the chart’s data in a table inside the Visual Builder.

The editor shows labels and values in a structured format, making it easier to see how the data maps to the selected chart. This is especially useful for charts with multiple series because related values remain visible side by side.

There are two ways to populate the Charts Module. The first is to enter and edit data directly in the table. Add rows, adjust labels and values, and watch the chart update in the Builder.

The other option is to upload a CSV file. This is the faster route when the data already exists in a spreadsheet or export.

You can reopen the table whenever the data changes, update cells, add or remove entries, or import a revised dataset. The chart updates from the data stored in the module, so routine edits do not require rebuilding the design.

This approach keeps the workflow self-contained: prepare the values, preview the visual, and refine both without leaving the Visual Builder.

Design Settings And Customization Options

The Charts Module includes familiar Divi option groups for styling its content and container. Common groups include Layout, Title Text, Subtitle Text, Legend, Tooltip, Sizing, Spacing, Border, Box Shadow, Filters, Transform, and Animation.

Title And Subtitle Text

Use the Title Text and Subtitle Text option groups to style the labels that provide context for the chart.

Both groups include controls for font, font weight, text size, color, line height, alignment, and more. They also support Variable Fonts, giving you additional control over the chart’s typography.

Legend

The Legend option group controls the key used to identify each data series. You can style its title and labels, adjust its position and alignment, and customize marker properties such as point style, padding, width, and height.

Tooltip

When a visitor hovers over a data point, a tooltip displays additional details. The Tooltip group includes controls for its title and body text, container, and color boxes, allowing the popup to match the rest of the chart.

Module-Level Design

The remaining groups work like those in other Divi 5 modules. Sizing and Spacing control the module’s footprint, while Border and Box Shadow frame its container. Filters, Transform, and Animation can add further visual polish.

Because these are standard Divi option groups, you can use Design Variables and Presets to keep multiple charts consistent with the rest of the site.

How To Use The Charts Module

To create a chart, add a Charts Module to a Section in the Visual Builder. Its settings open with the familiar Content, Design, and Advanced tabs.

In the Content tab, choose one of the nine chart types. You can return to this setting later to compare other formats.

Next, click Import CSV if you already have a dataset, or click Edit Data to enter values directly. You can return to the table at any time to edit cells, add entries, or import updated data.

Once the data is in place, compare compatible chart types and choose the format that communicates it most clearly.

Add a Title and Subtitle when the chart needs more context. These fields appear with the chart and can be styled in the Design tab.

Open Edit Data again to verify the imported values, check the legend labels, and assign colors to the data series.

Switch to the Design tab to refine the title, subtitle, legend, and tooltip. Then use Sizing, Spacing, Border, and Box Shadow to fit the module into the surrounding layout. Add Animation only when it supports the presentation.

Use Divi’s Live Preview to test the chart’s interactivity and confirm that its labels and data remain legible.

Finally, review the chart at each of Divi’s Customizable Responsive Breakpoints to make sure it works at every screen size.

Tips And Best Practices

A useful chart depends on both the data and its presentation. The following practices will help keep each visual clear and consistent.

Start With Clean, Well-Structured Data

Before uploading a CSV or using the table editor, keep column names consistent and remove empty cells or unnecessary formatting. Clean source data helps labels map correctly and makes the chart easier to update.

Note: Keep value cells numeric. Remove currency symbols, percentage signs, and thousands separators before importing, while retaining decimal points where needed.

Choose The Right Chart Type

Match the format to the point you want visitors to understand. Use line or area charts for changes over time, bar charts for category comparisons, pie or doughnut charts for simple proportions, and scatter or bubble charts for relationships between values. If the story is unclear, compare another compatible format before committing to the design.

Keep Designs Consistent With Variables And Presets

Style titles, subtitles, legends, and tooltips with the same Design Variables used elsewhere on the site. Then save Option Group or Element Presets so future charts can reuse the same typography, colors, and Spacing.

Use Clear Labels, Legends, And Tooltips

Give the chart a title and subtitle that explain its subject in plain language. Keep legend labels short and specific, and make the tooltip easy to read on hover. Visitors should be able to understand the chart without a paragraph of supporting copy.

Avoid Overcrowding The Visual

Too many series, categories, or labels can make a dataset difficult to scan. If a chart becomes crowded, split the information into two focused visuals instead of forcing everything into one.

Use The Table Editor For Fast Updates

When values change, reopen the tabular editor and update them in place. You do not need to rebuild or restyle the module for routine edits, making the Charts Module practical for reports, quarterly statistics, and other frequently updated pages.

Download The Files

We’ve created a zip file containing every example used in this post. It includes 12 JSON files: one Chart module – All.JSON file containing all 11 examples and 11 individual JSON files.

To use them, 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.

After adding the Section, replace its chart data by importing a CSV file or editing the table directly.

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!

Try The Charts Module In Divi 5 Today

The Charts Module makes data visualization a native part of Divi 5. You can choose from nine chart types, enter values in the tabular editor or import them from a CSV file, and style the result using the same design system as the rest of your site.

If you are already using Divi 5, update to the latest version and add a Charts Module to a page. Compare chart types, refine the data, and adjust the design until the information is easy to understand.

Let us know what you think in the comments below or on our social media channels. We look forward to hearing your feedback!

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

With Divi 5, that structure can begin with the CSS Grid system. The new Grid Editor adds a visual canvas where you can adjust tracks, gaps, placement, and spans while viewing the result directly in the Visual Builder.

In this post, we will use those tools to build four asymmetrical layouts: the Full-Left Banner, Z-Pattern Split, Weighted Corner, and Tetromino. Each design begins with a clear grid and introduces imbalance only where it supports the composition.

How Asymmetry Works As A Design Choice

Symmetrical layouts distribute visual weight evenly. They can feel stable, familiar, and easy to scan, which makes them a strong choice for many interfaces. Asymmetrical layouts use a different kind of balance. Instead of mirroring elements, they balance objects with different sizes, colors, positions, or amounts of negative space.

Consider a page where the Heading is centered, the images match on both sides, and the supporting content follows an even rhythm. The structure feels orderly because the visual weight remains close to the center.

Now move a large image to the left, place a dark color block on one side, or leave more open space on the right. The composition no longer mirrors itself, but it can still feel balanced. The difference in visual weight creates tension, and that tension can direct the eye from one area to the next.

Visual weight does not come from size alone. A small black block can attract more attention than a large gray image when its contrast is stronger. Typography, color, texture, placement, and negative space can all influence which element visitors notice first.

The goal is not to make one side feel unfinished. A successful asymmetrical composition still has equilibrium, but the balancing elements are not identical. A large photograph might be balanced by a compact area of bold typography. A dark block on one side might be balanced by several lighter elements and more open space on the other. Alignment and repetition keep those different pieces connected.

Content order should guide the visual decision. Decide what visitors need to notice first, what should explain it, and where the action belongs. Then use scale, contrast, and placement to support that sequence. When the visual hierarchy and message hierarchy agree, the imbalance feels intentional.

That first point of attention matters. Research summarized by CXL found that it took viewers about 2.6 seconds for their eyes to settle on a key area of a web page. Asymmetry is not automatically more effective than symmetry, but it gives you another way to establish a focal point and create a deliberate reading path.

What Is CSS Grid?

CSS Grid is a two-dimensional layout system. It lets you organize content across rows and columns at the same time, making it especially useful for editorial compositions, galleries, card systems, and layouts with items that span multiple tracks.

Flexbox and Grid solve different layout problems. Flexbox is generally strongest when content needs to flow along one primary axis. Grid is designed for layouts where both horizontal and vertical relationships matter.

At the parent level, a Grid Container defines column and row tracks, gaps, alignment, and the general placement flow. Its direct children become Grid Items. Those items can follow the automatic flow or receive their own placement rules, such as a specific starting line or a span across several rows or columns.

The tracks do not have to be equal. You can combine flexible fr units, fixed values, percentages, and other supported CSS units to create wider and narrower areas. Rows can follow their content automatically or use a manual template when the design needs a more controlled rhythm. Gaps then create consistent separation without adding individual margins to every child.

That combination makes asymmetry easier to control. The parent grid provides a consistent framework, while selected Grid Items can break the repeated pattern without abandoning it. The result can feel uneven by design while remaining aligned underneath.

How Grid Works In Divi 5

Divi 5 brings CSS Grid controls into the Visual Builder. Open a supported Container, such as a Section, Row, Column, or Group, select the Design tab, and set Layout Style to Grid.

You can begin with one of Divi’s prebuilt Grid Templates or define the Column Tracks, Row Tracks, gaps, and alignment settings yourself. The four layouts in this tutorial can be built visually without writing custom CSS.

Grid Offset Rules give you more control over individual or repeating Grid Items. A rule can target the first item, last item, every fourth item, or a custom nth-child pattern, then change properties such as Column Start, Row Start, Column Span, or Row Span.

This gives each asymmetrical layout two levels of control: the overall Grid Container establishes the structure, and selected Grid Items create the deliberate imbalance.

Build Grids Visually With The Grid Editor

Divi’s Grid settings already control columns, rows, gaps, alignment, and item placement. The Grid Editor adds a visual canvas for editing those same settings directly.

When you open the editor inside a Grid Container, a floating panel displays the tracks and Grid Items. You can drag track boundaries to change Column Widths or Row Heights, adjust horizontal and vertical gaps, reposition items, and use the corner handles to make an item span additional tracks.

The canvas and the settings remain synchronized. A visual adjustment updates the corresponding grid rule, while a value changed in the settings appears on the canvas. You can also add preview Grid Items to test a longer pattern before the Container holds that many actual child elements.

When a Grid Item has a placement rule, the editor displays a rule pill that identifies the affected item. Those pills are also editable. You can change a rule that targets one item into a repeating offset, such as Every Fourth Item, without recreating the span across each Column manually. The editor highlights the other items affected by that rule, making the repeated pattern easier to inspect.

That full-layout view is particularly helpful for asymmetrical work. You can see how a span or position change affects the entire composition instead of adjusting one Grid Item without the surrounding context.

How To Open The Grid Editor In Divi 5

There are two ways to begin: create a new Grid layout or open the editor for a Container that already holds content. When building from scratch, select the green plus icon and choose one of the available Grid Templates.

To define your own structure, select Build Custom Grid.

The Grid Editor can open before the new Container contains child elements. Add preview Grid Items to visualize the intended pattern, define its tracks, and then add the real Columns or other child elements in the builder.

This is useful when the structure is easier to plan than the content. You can decide that a layout needs two Columns, three Rows, and one tall anchor before choosing the Heading, images, or Buttons that will occupy those areas. The preview remains a planning aid until corresponding child elements are added.

For an existing Container, open its settings, select the Design tab, and set Layout Style to Grid.

Then select Open Grid Editor.

The panel appears beside the Visual Builder with the Container’s current child elements represented on the canvas. Changes to tracks, gaps, placement, and spans update the actual layout immediately.

Both paths lead to the same visual interface. The important distinction is that preview Grid Items help you test a pattern, while the actual content still comes from the Columns, Modules, or other child elements inside the Grid Container.

Style The Grid In Divi 5

Once the structure is in place, use the horizontal and vertical gap controls to set the space between tracks independently. Wider gaps create more separation, while smaller gaps make the Grid Items feel like parts of one composition. The canvas updates while you work.

The Columns inside a Grid Row retain their own design controls. You can style their backgrounds, borders, spacing, and content individually. Pair those settings with Design Variables to reuse colors, typography, sizing, and spacing values across the composition.

We will combine those structural and visual controls in each of the four layouts below.

Four Asymmetrical Layouts To Build In Divi 5

Each example starts with a simple Grid Container, then introduces one dominant move: a tall item, a repeating diagonal, a weighted corner, or an interlocking span. Color and spacing reinforce that structure after the placement is established.

As you follow the steps, make sure the Row contains the required number of actual Columns. The extra Grid Items displayed in the Grid Editor are visualization aids and do not add content Containers to the layout.

The Full-Left Banner

The Full-Left Banner places one large visual on the left and stacks three supporting blocks on the right. The difference in scale creates a clear focal point, making the layout useful for hero sections, product introductions, and feature callouts.

Open the Grid Editor and set the Grid to two Columns. Add four preview Grid Items so the canvas represents the four Columns the finished layout will use. This produces a two-column structure with four item placeholders, not four side-by-side tracks.

Preview Grid Items do not create actual Columns. If the Row currently contains only three Columns, open the Row’s Content tab and add a fourth. The new Column will become another Grid Item and follow the parent Grid settings.

Back in the Grid Editor, drag the bottom-left handle of the first item downward until that item spans three Rows. The other three items remain one track tall and stack in the right Column. This single span creates the layout’s dominant visual anchor.

Use the large left Column for an image or graphic. The three right Columns can hold a Heading, supporting copy, and a Call To Action. Keeping each content role in its own block makes the hierarchy easy to scan.

Style The Full-Left Banner

Start with the gaps. A 15px horizontal and vertical gap lets the Section background show through as a consistent divider between the four surfaces.

Set a background image on the large left Column. In this example, the background image uses Fit so the complete artwork remains visible within the available space.

Next, give the Column a background color that matches the image. Referencing a Color Variable keeps that value connected to the broader design system and prevents an unintended edge from appearing around the fitted image.

Use the first supporting Column for the Heading and apply the strongest brand color. The higher contrast gives the primary message enough weight to balance the large visual.

Place the supporting copy in the next Column and use a lighter tint of the brand color.

We created this tint with Divi 5’s Variable Generator, then saved it as a Color Variable for reuse.

Use the final supporting Column for the Call To Action. Its background can use the lightest tint, while the Button returns to the main brand color. This creates a visible endpoint without competing with the Heading.

Finally, apply the darkest brand shade to the Section background. Because that color appears through the 15px gaps, it visually frames the four Columns and connects the asymmetrical pieces.

The Z-Pattern Split

The Full-Left Banner concentrates most of its weight on one side. The Z-Pattern Split distributes that weight across diagonal points. In a left-to-right reading context, the eye can move from the upper left toward the upper right, then continue through the lower portion of the layout.

This structure works well for feature lists, service collections, and other repeating content where selected cards need more emphasis without separating them from the wider set.

Open the Grid Editor and begin with two Columns and at least four Grid Items. Drag the bottom handle of the first item downward so it spans two Rows. That tall item establishes the upper-left anchor.

Give the fourth item the same two-row span. Then hover over its rule pill and select the edit control.

Change Target Offset to Every Fourth Item. The Row Span rule can now repeat on items 4, 8, 12, and onward, which preserves the pattern when more content is added.

Keep the source order meaningful when using repeated offsets. Grid placement can change where an item appears visually, but it should not turn an understandable content sequence into a confusing reading or keyboard order. Build the Columns in a logical sequence first, then use the offset pattern to add emphasis without changing the meaning.

Use Color To Reinforce The Diagonal

The repeating Row Span establishes the geometry. A consistent 20px horizontal and vertical gap gives each Grid Item enough separation for the pattern to remain visible.

Keep the base treatment consistent across the repeating cards, then use one controlled accent on the tall items. That accent might be a border, Button, image treatment, or background color. Repeating it along the offset pattern strengthens the diagonal without giving every card a competing focal point.

The Weighted Corner

The Weighted Corner concentrates the strongest visual element in one corner. Smaller surrounding cards create a quiet field, while one larger item becomes the destination of the composition.

This layout works well for pricing sections, portfolio collections, dashboards, and feature grids where one offer, project, or action needs more emphasis than the rest.

Open the Grid Editor and set four Columns with nine Grid Items. The first eight items fill two complete Rows, while the ninth begins a third Row.

Drag the ninth item to the lower-right corner. Then drag its top-left handle upward and to the left until the item spans two Columns and two Rows. The browser places the other Grid Items around that explicit area, leaving the larger block anchored in the corner.

You can apply the same idea to any corner. A bottom-right anchor follows the natural completion point of many left-to-right interfaces, while a top-left anchor creates a more immediate focal point. Choose the position that matches the content order and the surrounding page.

Create Contrast With Color

The anchor needs enough contrast to remain dominant, but the smaller cards do not have to disappear. Give the surrounding items a consistent neutral treatment with lower-contrast backgrounds and restrained typography. Their repetition creates the field around the anchor.

The corner item can then use a stronger background color, a prominent image, or a dark fill with light text. In this example, removing its Border Radius reinforces the Grid’s geometry and distinguishes the anchor from the softer surrounding cards.

The Tetromino

The Tetromino layout borrows its visual logic from geometric pieces that lock together edge to edge. Two smaller blocks occupy the top Row, while a third spans the full width below them. Shared color then makes selected areas read as one interlocking shape.

This structure suits content that builds toward a broader conclusion, such as two features leading into a summary, two statistics followed by context, or a pair of testimonials above one Call To Action.

Open the Grid Editor and set two Columns, two Rows, and three Grid Items. The first two items fill the top Row, and the third begins in the lower-left cell.

Drag the right handle of the third item across the second Column. It now spans the full bottom Row and matches the combined width of the two items above.

Set both gap values to 0. Removing the horizontal and vertical gaps turns the three separate Grid Items into one connected surface.

Design The Combined Shape

The zero-gap structure connects the blocks, but color determines how the final shape reads.

Give items 1 and 3 the same fill. Because the first item sits above the left side of the full-width item, the repeated color creates an L-shaped piece. The relationship comes from the styling rather than an additional structural change.

Use a contrasting fill for item 2. It occupies the upper-right cell and appears to lock into the shared shape formed by items 1 and 3. Reference Color Variables for both fills so the relationship stays connected to the site’s design system.

Keep the seam between the first and second items clear. Sharp corners reinforce the assembled geometry, so this example removes the Border Radius from all three items. You can still use internal Padding to keep the content comfortably separated from the edges.

To explore the concept further, download our five free Tetris Designs for Divi 5. The pack includes ready-made landing page, feature, portfolio, and content sections based on similar interlocking structures.

Build Asymmetrical Layouts With A Clear Structure

Each layout in this tutorial began with a simple Grid. The distinctive result came from one deliberate change to a span, placement rule, or repeated offset pattern. The Grid Editor keeps those relationships visible while you work, making it easier to introduce tension without losing alignment.

Before publishing, review each design at tablet and phone breakpoints. A four-column desktop composition may need fewer Columns on smaller screens, while large Row or Column spans may need to be reduced or removed. Preserve the content hierarchy even when the geometry changes.

Also review the layout without relying on color alone. Contrast can strengthen the asymmetry, but the Heading structure, content order, labels, and Call To Action should still communicate the same hierarchy. If an offset moves a visual element far from its place in the source order, test the keyboard and screen-reader experience before keeping that arrangement.

Open a Row in Divi 5, set Layout Style to Grid, and use the Grid Editor to test one of these patterns. Start with the structure, establish the focal point, and let the surrounding elements support it.

The post How To Design Cool Asymmetrical Layouts With The New Grid Editor appeared first on Elegant Themes Blog.

Divi 5 brings those controls into the Visual Builder for supported Google variable fonts. To help you explore them, we created seven free variable font section designs that you can import into the Divi Library, add to a page, and customize for your own site.

In this post, we’ll explain how variable fonts work in Divi 5, introduce the text styling options that complement them, and show you how to use the downloadable designs.

What Are Variable Fonts?

Traditional font families usually provide a fixed selection of styles, such as Regular, Medium, Bold, and Italic. Each style may be delivered as a separate font file. If the exact weight or style you need is unavailable, you have to choose the closest option or rely on a browser-generated approximation.

Variable fonts work differently. One font file can contain a range of styles controlled through axes. Each axis changes a particular aspect of the typeface. Common examples include Weight, Width, Slant, Italic, Optical Size, and Grade. Some fonts also include custom axes for characteristics such as roundness, shape, or casualness.

This additional range gives you more control over typographic hierarchy and fit. A heading that feels too heavy at 700 could work better at 640. Body text that needs more presence could use 520 instead of jumping to the next fixed weight.

Some fonts also include an Optical Size axis. When supported and enabled, it allows the typeface to adjust its letterforms for different text sizes. Smaller text can become sturdier and easier to read, while display text can gain more detail and contrast.

A variable font can sometimes replace several static font files and reduce the number of font files a design needs. That does not automatically make every variable font setup smaller or faster, however. The result depends on the font file, the axes included, and which static styles it replaces.

How Variable Fonts Work In Divi 5

Divi 5 makes variable font axes available inside the Visual Builder. Choose a supported Google variable font, and Divi reads the font’s available axes and displays the matching controls in the relevant text option group under the Design tab.

The available controls depend on the font. A simple variable font may expose only a Weight axis. A typeface such as Roboto Flex can provide controls for Weight, Width, Slant, Optical Sizing, Grade, and several other axes. Divi shows only the controls supported by the selected font.

You can use Font Variables, part of Divi’s Design Variables system, to manage the font family itself. Define a heading font, body font, or another reusable font choice in the Variable Manager, then reference it across modules and Presets. If you change that Font Variable later, every element that references it can inherit the new font family.

Font Variables do not store a complete set of variable font axis values. To reuse a combination of Weight, Width, Slant, and other typography settings, save those settings in a Preset.

The Google Fonts website is a useful place to find variable fonts. Apply its variable fonts filter to narrow the library to typefaces with one or more variable axes.

Open a font’s detail page before choosing it for a project. The page lists the axes and ranges the font supports, which can differ significantly from one typeface to another.

Note: The Divi 5 font picker does not include a dedicated variable font filter. Select a supported Google variable font as you would any other font, and Divi will display the axes that font provides.

For a helpful starting point, explore our list of the 10 best variable fonts available in Divi 5.

Pair Variable Fonts With Divi 5’s Text Styling Options

Variable font axes change the construction and appearance of a typeface. Divi 5’s text styling options control how the text sits, flows, and wraps within a layout. These features work with any font, but they give variable typography even more creative range without requiring custom CSS.

Here is a closer look at the options introduced alongside Variable Fonts.

Text Columns

Text Columns split a block of copy into magazine-style CSS columns without requiring separate Text Modules. The content flows naturally from one column to the next, and you can change the number of columns at different breakpoints.

Use the Text Column Gap field to adjust the space between columns. Its default unit is em, and the field also supports Divi 5’s Advanced Units.

Drop Caps

The Drop Caps tab in a body text option group lets you style the first letter of a text block. You can set its line size and spacing, then use the available text settings to shape the treatment. The surrounding copy wraps around the enlarged letter automatically.

Text Direction

Text Direction lets you display text horizontally or along a vertical axis. Because the setting can be adjusted responsively, you can use vertical text for editorial labels and decorative accents on larger screens, then switch to a more compact treatment on smaller devices.

Stroke Position

Stroke Position determines whether a text stroke sits in the center of the letterform or outside it. Placing the stroke outside preserves more of the original letter shape and prevents the stroke from covering the fill. You can combine Stroke Position with Stroke Width and Divi’s state options to create interactive text effects.

Capitalization

Divi 5 separates text styling from capitalization. In addition to Uppercase, Capitalize, and Lowercase, you can choose Small Caps or All Small Caps when the selected font supports those letterforms.

Paragraph & List Spacing

Paragraph & List Spacing controls the space between paragraphs and between list items within the same text area. The default unit is em, and you can use other supported units when the design requires them.

Hyphenation

The Text Hyphenation setting lets the browser hyphenate long words when they exceed the width of their container. This can improve wrapping in narrow columns, although the result also depends on the page language and the browser’s hyphenation support.

Line Wrap Style

Line Wrap Style controls how text breaks across lines. Default uses the browser’s normal wrapping behavior, Balance distributes text more evenly across lines, and Pretty aims to improve line endings and reduce awkward final lines. Browser support and the exact result can vary.

Preview The Seven Designs

The pack includes seven variable font section designs. Each one combines variable font axes with layout, spacing, and text styling choices that you can study or adapt. The free download appears below the preview.

Download Seven Variable Font Designs For Divi 5

Download all seven section designs for free, import them into the Divi Library, and add any of them to a 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: Eight JSON Files

After downloading and unzipping the package, you will find seven individual section exports and one combined export.

Styled: Variable Font Section 1 through 7 (seven files): Each file contains one fully styled variable font section with layered type treatments, image areas, text blocks, buttons, and a flexible structure that you can use as-is or customize.

Styled: Variable Font Sections (All) (one file): This file imports all seven designs into your Divi Library at once.

How To Use The Variable Font Designs

Keep the unzipped download folder nearby. You will import one or more JSON files, add a saved section to a page, and replace its example content.

1. Import The Sections Into The Divi Library

In the WordPress Dashboard, go to Divi > Divi Library. Select Import & Export at the top of the screen.

In the Import & Export Layouts modal, open the Import tab and select Choose File. Choose one of the individual section JSON files or the combined file, then select Import Divi Builder Layouts.

2. Add A Variable Font Section To A Page

Open a page in the Visual Builder and add a new Section.

Select Add From Library, then choose one of the imported Variable Font sections.

3. Replace The Content

Start by replacing the headings, body copy, labels, captions, and supporting text with your own content. These designs rely heavily on typography, so watch how the new copy responds to the existing Weight, Width, Slant, Optical Sizing, and other axis values.

Next, replace the example images, icons, and supporting visuals where needed.

Work through one area at a time. This makes it easier to preserve the relationship between the variable font settings, text styling options, spacing, and overall composition.

If your copy is significantly longer or shorter than the placeholder text, review the hierarchy and line breaks. Variable Font Width and Weight can change how text wraps. Use the relevant spacing and Line Wrap Style controls when the composition needs further adjustment.

To expand or simplify a section, duplicate or remove existing Rows, Columns, Text Modules, Heading Modules, or Image Modules. Reusing the existing structure helps preserve the section’s spacing and typographic rhythm.

4. Adjust The Styles

You can use the designs as provided or customize them to match your site. To change the typography, open a Text Module or Heading Module, select the Design tab, and expand the relevant text option group. Depending on the module and selected font, you can adjust:

• The font family or Font Variable
• Variable Font Weight, Width, Slant, Optical Sizing, Grade, and other supported axes
• Text Size, Letter Spacing, and Line Height
• Text Columns, Drop Caps, Text Direction, Stroke Position, Capitalization, Paragraph & List Spacing, Hyphenation, and Line Wrap Style

Small axis adjustments can noticeably change hierarchy, density, and fit. Move one control at a time while viewing the text in the layout, then keep only the adjustments that serve the design.

For spacing, sizing, borders, and backgrounds, use the standard Design tab controls at the Section, Row, Column, or Module level.

Finally, use Divi’s responsive editing controls to review each design at desktop, tablet, and phone widths. Weight and Width values can affect wrapping, so adjust only the breakpoints that need a different treatment.

Tips For Effective Variable Font Designs

Variable fonts offer plenty of creative freedom, but a few deliberate constraints will keep a typography system consistent and maintainable.

Check The Axis Ranges First

Before committing to a typeface, open its Google Fonts detail page and review its available axes and ranges. One font may offer only Weight, while another includes Width, Slant, Optical Size, Grade, or custom axes. Knowing what the font supports helps you choose the right tool before it becomes part of the design system.

Reuse A Small Set Of Axis Values

Avoid choosing a different Weight or Width value for every Module. Select a small set of deliberate values for body copy, labels, navigation, section headings, and display text, then reuse them. Presets can help you apply those complete typography combinations consistently.

Pair Variable Fonts With Number Variables

Variable font axes control the letterforms, while fluid font sizes control how the typography scales across viewports. Divi 5’s Variable Generator can create responsive clamp() values and save them as Number Variables. Reference those variables in Modules and Presets to build a type scale that is easier to reuse and update.

Make Purposeful Axis Adjustments

A font may expose many axes, but you do not need to change all of them. Use Weight to refine hierarchy, Width to improve fit, Grade to change visual density with less effect on layout width, Slant for controlled emphasis, and Optical Sizing when the font supports it. If an adjustment does not solve a specific design problem, leave it at its default value.

Test Every Breakpoint

Weight and Width values can change line breaks and the space text occupies. A display setting that works on a wide desktop may become cramped on a phone. Review headings, buttons, navigation, and narrow text columns at desktop, tablet, and phone widths. Adjust the responsive settings only where the hierarchy, fit, or readability needs correction.

Explore Variable Typography In Divi 5

Variable fonts add useful range to Divi 5‘s typography controls. Their axes let you fine-tune the design of the letterforms, while Text Columns, Drop Caps, Text Direction, Stroke Position, Capitalization, Paragraph & List Spacing, Hyphenation, and Line Wrap Style control how the text behaves in the layout.

Download the free pack and open the sections in the Visual Builder to see how those controls work together. Use a Font Variable to manage the font family, Presets to reuse complete typography treatments, and Number Variables to build a consistent sizing system. With a small set of intentional values and a responsive review, the designs can become a practical starting point for a broader site-wide type system.

The post 7 Variable Font Designs 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.12 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.12?

We implemented 71 bug fixes and improvements, along with an incredible new feature: AI Agents. It’s the most significant update of the year, introducing an entirely new way to work in the builder.

Divi AI Agents

We released AI Agents in Divi 5.12!

This is a big one. 🤯 Agents understand natural language and can take real actions inside the builder. Instead of clicking through settings panels and performing repetitive tasks one by one, you can simply tell Divi what you want and let agents do the work.

They can build layouts, edit modules, update design settings, create pages, manage menus, work with Theme Builder templates, and much more. They can even look at screenshots, websites, and other reference materials and use them as inspiration for their designs.

To celebrate the launch, we are offering an unprecidented 60% discount on Divi AI, and an even bigger discount when you upgrade to Divi Pro.

The discount will be available for the next few days only.

Take the full tour. 👇

Changelog

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

• Introduced AI Agents, a new way to work in Divi using natural language and autonomous agents that can work alongside you in the builder.
• Updated D5 Extension Example Modules to use scoped @divi/* npm type packages per Divi 5.1, with updated Node.js requirements and build configuration for a clean install and compile experience.
• Fixed WooCommerce variation image switching in Theme Builder responsive layouts and added regression coverage.
• Fixed Tab navigation between module settings fields when Dynamic Content is enabled, so pressing Tab moves directly to the next field input instead of stopping on Dynamic Content buttons and chips.
• Fixed Group Carousel background videos being cropped after carousel layout and slide changes.
• Fixed global Heading and Body fonts not loading on Post Filter filtered frontend pages.
• Reduced Charts module frontend JavaScript bundle size by removing unnecessary validation from the Chart.js config parsing path.
• Fixed Icon List Item icon spacing not applying in Theme Builder templates.
• Fixed Theme Builder canvases not staying deleted after removing them from a page in the Visual Builder.
• Added Theme Builder archive query regression coverage for Blog, Post Slider, Portfolio, and Post Navigation modules.
• Fixed Blog sticky posts from other categories appearing on Theme Builder category archives when Posts for Current Page is enabled.
• Fixed Blog module pagination on Theme Builder category archives with category-based permalinks.
• Fixed Portfolio Current Category showing all projects on Theme Builder project tag archives.
• Fixed Blog Current Category showing all posts on Theme Builder post tag archives.
• Expanded Theme Builder archive template assignment test coverage for taxonomy.
• Module presets that define interactions, custom main-wrapper attributes, or CSS classes now emit those values on the frontend module wrapper, while preset CSS IDs and preset Custom Attributes named id are omitted to prevent duplicate DOM IDs, including when a Custom Attributes group preset occupies the same attribute index.
• Fixed global number variables entered without a unit in Variable Manager not appearing in most Visual Builder number field pickers.
• Fixed Post Excerpt dynamic content showing legacy Divi 4 shortcodes in the Visual Builder when the page excerpt field was empty.
• Fixed Group Carousel Automatic Animation not working inside inactive Tab panels.
• Fixed a TinyMCE branding link to tiny.cloud appears when hovering the bottom of the Text Module rich text editor in the Visual Builder.
• Fixed Post Slider and Slider automatic animation, speeding up after clicking navigation arrows or dots.
• Fixed divi/placeholder block validation on WordPress 7.1 after toggling between the default editor and Divi Builder, saving, and reloading the page.
• Fixed Blog module auto-excerpts showing raw dynamic content token JSON instead of resolved values for D5 dynamic fields.
• Fixed an issue where a CSS class from an Element/Attributes preset would override the local module CSS class on the frontend.
• Fixed Link module icon and text being hidden behind background overlays.
• Improved the Custom Attributes Target Element list so elements controlled by show toggles only appear when they are enabled.
• Fixed an issue where Timeline Item responsive content always displayed the desktop version on the front end.
• Added a tutorial on handling static CSS and JS files in Divi 4 and Divi 5 module extensions.
• Contact Form field Design Border, Box Shadow, and Filters now apply to the field wrapper.
• Testimonial Description now keeps its flex layout and vertical gap on tablet and phone when Layout Style is set to Flex.
• Fixed Fullwidth Slider arrows and dots that could disappear on the front end when another slider sat below the fold.
• Fixed Divi so saving a page or opening the Visual Builder no longer clears the entire third-party page cache on Cloudways and similar hosts.
• Updated Divi’s shared color styles to use the modern Sass color functions, keeping every color exactly the same while removing deprecation warnings from the build.
• Fixed an issue where module-level background gradients could output invalid CSS and fail to override element preset gradients on the frontend.
• Fixed Portfolio and Filterable Portfolio image height being applied to the image wrapper instead of the image.
• Fixed WooCommerce checkout timing out or showing a payment method error on the order confirmation page.
• Fixed Default Website Template duplicating in Theme Builder after reloading an unsaved template layout.
• Fixed Post Filter Item search and other control fields not rendering on the front end when field settings were changed on responsive views.
• Fixed the Pricing Tables Horizontal Gap setting so its default placeholder shows 0px, matching the module’s actual spacing.
• Fixed the Chart module title typography so the default Title Font now inherits the global Heading Font when no explicit title font is selected.
• Fixed the Divider module Min Height option so it applies in the Visual Builder.
• Fixed Bar Counter child items so custom Sizing width applies in the Visual Builder and on the front end.
• Fixed Contact Form 7 Styler submit button width not applying in the Visual Builder.
• Added Divi 5 Layout Systems L2 scenario snapshots for Group grid and flex layout cases.
• Added a Divi 5 tutorial explaining how to customize nested :hover selectors for custom CSS module elements.
• Fixed Blog module grid layout featured images rendering at 400×284 instead of the correct 400×250 size.
• Fixed Product Rating review links not opening the Reviews tab on Divi Visual Builder and Theme Builder product layouts.
• Fixed incorrect Dynamic Loop Featured Image backgrounds in Theme Builder loops when Order By was set to Random.
• Improved Divi 5 third-party module fixture and snapshot test coverage.
• Added Theme Builder Template Editing preference to Divi.
• Fixed the first Blog loop post being converted to Divi Builder when a Theme Builder template with a Loop was saved from the page.
• Fixed the Blog module showing incorrect posts for custom post type archive and category pages in Theme Builder Visual Builder.
• Fixed an issue where Theme Builder header and footer loops with the same Loop ID would paginate together instead of independently.
• Fixed Theme Builder Current Page loops on year and month date archives so they correctly filter posts by the archive date when conditional tags are unavailable during layout rendering. Fixed loop excerpt word limits, linked comment counts, and featured-image alt text on module background images in Loop Builder.
• Fixed Global Link Variables rejecting SMS links that include a percent-encoded message body in the URL.
• Contact Form Radio Buttons and Checkbox fields now retain their saved Design > Spacing padding after reload in both the Visual Builder and the frontend.
• Fixed custom attributes so boolean attributes like itemscope normalize to truthy presence values, render correctly for structured data in React and non-React paths, and remain filtered for empty non-boolean attributes. Added render-level regression coverage and cached PHP boolean-attribute checks.
• Fixed WooCommerce and other module button hover icons not scaling correctly when the button text size was reduced.
• Fixed an issue where the parent Column’s Align Items setting (Design > Layout) had no visible effect on the Icon Module.
• Text modules now keep their desktop alignment on hover when hover alignment is not a supported configuration path, including imported content that still carries saved hover orientation.
• Added backdrop blur, invert, and sepia controls to Divi 5 Filters options with matching builder/frontend CSS output.
• Fixed Tab navigation between module settings fields when Dynamic Content is enabled, so pressing Tab moves directly to the next field input instead of stopping on Dynamic Content buttons and chips.
• Fixed Video Slider custom overlay images not appearing on the main video player when Show Image Overlays on Main Video was enabled.
• Fixed Group Carousel background videos being cropped after carousel layout and slide changes.
• Fixed Visual Builder button design defaults so that module decoration values, like text color, apply even when button icon defaults are not set.
• Fixed a frontend crash in the Blurb module (and other MultiView-powered modules) when hover icon data was saved in an invalid attribute format.
• Fixed WooCommerce product bulk edit timeouts caused by repeated Divi CSS cache clearing on every product save.
• Fixed Divi block editor styles and assets loading in WordPress 7.1’s iframed editor.
• Fixed Divi Placeholder block styling in WordPress 7.1’s iframed block editor.
• Fixed missing Use The Divi Builder and Return To Default Editor buttons in the WordPress 7.1 block editor header when switching between Divi and the default editor, including when re-editing published Gutenberg content. Fixed a console error on WordPress 7.0 when switching back to the Divi Builder from the default editor.
• Fixed Divi Layout block editor styling and library modal display in WordPress 7.1’s iframed block editor.

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.12 Release Notes appeared first on Elegant Themes Blog.

This is a big one. 🤯 The Divi AI Agent is an intelligent command interface built directly into Divi that understands natural language and can take real actions inside the builder. Instead of clicking through settings panels and performing repetitive tasks one by one, you can simply tell Divi what you want and let the agent do the work.

It can build layouts, edit modules, update design settings, create pages, manage menus, work with Theme Builder templates, and much more. It can even look at screenshots, websites, and other reference materials and use them as inspiration for your designs.

Everything has changed, and there is a lot to explore, so let me jump into Divi and give you the full tour. 👇

Build And Edit Divi Websites By Asking

The fastest way to build in Divi is now to say what you need and let AI do the work.

The Divi AI Agent lives inside the builder, where it can understand your page structure and interact with Divi just like you can. Add, edit, clone, move, and delete elements. Change design settings, update presets, configure canvases, and navigate the builder without digging through menus.

You can start with a blank page and describe what you want in plain language, or give the agent something to work from.

Build Layouts From Almost Anything

The Divi AI Agent can turn different types of reference material into complete Divi layouts.

You can:

• Describe a page in plain language and let Divi build the layout from your brief.
• Upload a screenshot or mockup and turn it into a real Divi layout.
• Give it a website URL and ask it to recreate a similar design.
• Upload a collection of reference images or a moodboard and let the agent turn their shared style into something new.

The result isn’t a static image or a pile of generated code. The agent builds real Divi sections, rows, modules, content, and styles that you can continue editing normally.

Edit Existing Layouts With Natural Language

The agent is just as useful after the initial layout has been created.

Ask it to redesign a hero section, rearrange modules, change colors, adjust typography, rewrite content, or update spacing. It understands Divi’s structure, so you don’t need to explain where every setting lives.

It can also work with Divi’s design systems. Ask it to use your global variables, consolidate repeated styles into presets, or replace hardcoded values with reusable variables to make an existing website easier to maintain.

In many cases, something that previously required dozens of clicks is now one sentence away.

Knock Out Repetitive Work In Seconds

Building the big pieces of a website is only part of the job. It’s often the hundreds of little tasks that eat up your time.

The Divi AI Agent is particularly useful for sweeping changes because it can inspect an entire page and make coordinated updates in one pass.

You can ask it to:

• Add missing alt text and improve accessibility settings.
• Find inconsistent colors and consolidate them into global variables.
• Standardize typography, spacing, buttons, and other repeated styles.
• Improve responsive layouts across desktop, tablet, and phone.
• Fix spelling, grammar, punctuation, and capitalization.
• Refine messaging and calls to action across an entire page.
• Find oversized images and other inefficient assets.
• Review custom CSS and JavaScript and clean up unnecessary code.

Instead of opening twenty modules to make the same adjustment twenty times, describe the end result and let the agent figure out the work required.

That’s where this workflow starts to feel very different from traditional website building.

Give The Agent Context, Rules, And Reusable Commands

The chat window isn’t just a place to type prompts. It’s a workspace designed for more complex website-building workflows.

You can save rules that tell the agent how you like to work, create reusable commands for tasks you perform regularly, attach reference images, and pull specific website content into the conversation.

Save Rules For Your Website

Rules provide the agent with persistent guidance on your website and how it should approach its work.

For example, you might define your brand voice, specify your preferred layout conventions, or tell the agent which design variables and presets to use.

Instead of repeating those instructions every time, save them once and let the agent reference them when needed.

Turn Repeated Prompts Into Commands

If you find yourself asking for the same thing over and over, save the prompt as a reusable command.

Commands can be triggered directly from the chat, turning complicated multi-step instructions into repeatable workflows.

You could create commands for common accessibility checks, responsive cleanup, content reviews, design system audits, or anything else you do regularly.

Add Context From Your Website

You can also reference specific modules, pages, media, and other site content so the agent knows exactly what you are talking about.

If you want to discuss something on the current page, simply click the element and add it as context. You can also attach screenshots and reference images when showing the agent what you want is easier than explaining it.

The more relevant context you provide, the more useful the agent becomes.

220+ Divi Skills And Counting

Under the hood, the Divi AI Agent has more than 220 purpose-built skills for interacting with Divi and WordPress.

These aren’t generic AI capabilities. They are specific tools for understanding Divi modules, modifying settings, working with layouts, managing global design systems, controlling the Theme Builder, interacting with WordPress, searching Divi documentation, and much more.

That’s an important distinction.

Instead of asking a general-purpose chatbot to guess how Divi works, the agent has tools that let it inspect your website and perform the same types of actions available throughout Divi and WordPress.

That toolset is what allows natural-language commands to reliably translate into real changes.

Manage WordPress Without Leaving The Builder

The Divi AI Agent isn’t limited to the builder, although its “outside the builder” skills are currently limited (our main focus for this launch was helping you inside the builder).

But, there are still many things it can do.

It can reach beyond the current page and perform site-level tasks that would normally require jumping back and forth between Divi and the WordPress dashboard.

Manage Pages And Posts

Create, update, duplicate, publish, unpublish, and schedule pages and posts directly from the conversation.

You can ask the agent to find content across your site, retrieve page links and custom fields, or perform multi-step publishing workflows.

For example:

• “Create a new Services page as a draft and add it to the main menu.”
• “Schedule this blog post for next Tuesday at 9 am.”
• “Find all unpublished pages and give me their edit links.”
• “Duplicate the About page and rename the copy to Our Team.”

The agent handles the underlying WordPress work while you stay focused on what you are building.

Manage Menus, Theme Builder Templates, And Global Settings

You can also work with navigation menus, Theme Builder templates, Divi Library items, Theme Options, and other site-level settings through the same conversational interface.

Create and assign Theme Builder templates, inspect your site’s configuration, update supported Theme Options, or reorganize navigation without digging around in the wp-admin.

The line between “building the page” and “managing the website” becomes much less important when the same agent can work across both.

Built-In Divi Support While You Work

The Divi AI Agent isn’t only a builder. It’s also a Divi expert whom you can ask for help.

Instead of leaving the builder to search for documentation or opening a support ticket for a simple question, ask the agent directly.

It can search Divi documentation, inspect the modules and settings on the page you’re working on, explain how features work, and help diagnose problems with the context of your actual website.

Ask questions like:

• “Should I use Flexbox or Grid for this section?”
• “What’s the difference between presets, variables, and global elements?”
• “Why isn’t my Theme Builder template applying to this page?”
• “How do Divi’s aspect ratio options work?”

In many cases, it can go one step further. After identifying the problem, you can tell it to fix the issue for you.

Choose The AI Model That Works Best For You

Different AI models have different strengths, speeds, and costs, so the Divi AI Agent isn’t tied to a single model.

You can choose from hundreds of available models or let Divi automatically select an efficient model based on the task.

That means you can use stronger models for complex work and faster, less expensive models for simple tasks, without changing your workflow.

Divi AI Agent Is Available With Divi AI

The Divi AI Agent is included with Divi AI and is also part of Divi Pro.

One subscription gives you access to the agent, opening up an entirely new way to build and manage Divi websites.

When you update to Divi Pro during our active sale, you get Divi AI for less than $5 per month. That membership includes a new bonus: $5 per month of complementary agent spend.

This is only the beginning. As the agent gains new skills and Divi continues to expand, more and more of the website-building process will become accessible through simple conversational commands.

The age of agentic website building has arrived, and I can’t wait to see what you build with it.

The post Introducing Divi AI Agents appeared first on Elegant Themes Blog.

Google Fonts includes several variable fonts that look too unusual for body copy but can work well as display type. The six designs below use expressive Google variable fonts in Divi 5, with each font assigned a specific role.

Why These Fonts Get Skipped

At first glance, it is easy to see why these fonts are often overlooked.

• Bitcount constructs its glyphs from repeated, pixel-like elements.
• Sixtyfour Convergence layers color and scanline-based elements to create CRT-inspired glyphs.
• Handjet builds glyphs from modular elements that can resemble an LED display.
• Shantell Sans uses its Bounce and Informality axes to create an irregular, hand-drawn feel.
• Kablammo combines a Morph axis with contextual alternates, allowing repeated characters to take different forms.
• Honk is a color font with built-in palettes and shadows.

At 16px, the more decorative fonts quickly lose clarity, while even the more readable options can feel too active across a long paragraph. That makes them easy to dismiss as novelty fonts. However, paragraph size is the wrong test for a hero heading. Body text has to stay readable across hundreds of words. A hero heading may only need to hold a few.

Nabla, another expressive variable font, shows this contrast clearly. Its layered structure works well at a large heading size but becomes difficult to read as the text gets smaller.

Used in the right place, these fonts can give a page a distinct look without carrying the entire design.

Where Divi 5 Fits In

Each variable font has its own axes. Kablammo has one, Handjet has three, and Honk has two in addition to its built-in color palettes. Axis names such as MORF, ELGR, and XELA are not always immediately descriptive, and values that look good in a font specimen do not always work in a real layout.

When you choose a supported Google variable font in a Divi 5 text option group, Divi reads the axes included in the font and displays the relevant controls alongside the standard text settings.

You still need to know which fonts support variable settings before selecting one. Google Fonts makes this easier with its variable font filter. We also covered seven more examples in our post on variable font combinations in Divi 5.

6 Expressive Variable Font Designs To Build In Divi 5

Each design uses a different variable font. You can copy the settings directly or adjust the axes once you understand what they control.

1. A 404 Page With Sixtyfour Convergence

A 404 page does not need much copy. The visitor already knows something went wrong, so the design can do more of the work. Here, a 400px number built from layered, colored elements becomes the main visual.

Add a Heading Module and set the content to 404. Open the Design tab, expand Heading Text, set the Heading Level to H1, and choose Sixtyfour Convergence from the Heading Font dropdown. Four variable font controls appear. Use these values:

• Variable Font Bled: 0
• Variable Font Scan: -2
• Variable Font Xela: -33
• Variable Font Yela: 39
• Heading Text Size: 400px
• Heading Line Height: 1em

Bled controls the horizontal bleed of the pixel elements. At 0, the forms stay crisp. Scan changes the scanline treatment. Setting it to -2 keeps the internal lines relatively restrained.

Xela and Yela control the horizontal and vertical alignment of the font’s elements. At -33 and 39, the color layers separate enough to show the convergence effect while the number remains recognizable.

Leave Heading Text Color at #000000. In browsers that support the font’s color format, the numerals still appear in orange, pink, and green because Sixtyfour Convergence stores its colors inside the font file. Divi’s text color setting does not override them.

Add two lines of plain white sans-serif text to finish the page. Place ERROR! above the number and PAGE NOT FOUND below it.

Next, switch the Variable Font Xela and Variable Font Yela controls to the Hover state. Set both values to 100 and leave the other settings unchanged. Divi transitions between the default and hover values, making the colored elements move apart when the cursor reaches the heading.

At 100 on both axes, the number becomes difficult to read during the hover effect. That works here because 404 is clear before the animation starts. If the text needs to stay readable throughout the interaction, keep the hover values closer to the default settings.

2. A Hero Section With Bitcount

Bitcount works well for large headings because of its pixel structure. In this hero section, the white heading sits on a deep navy background with a hot pink text shadow. The rest of the section uses simple sans-serif text so the heading stays the focus.

Add a Heading Module, set the content to Build Aloud, and choose Bitcount from the Heading Font dropdown. Five variable font controls appear. Use these values:

• Variable Font Weight: 404
• Variable Font Slant: -4
• Variable Font Crsv: 1
• Variable Font Element Shape: 49
• Variable Font Element Expansion: 50
• Heading Text Size: 200px
• Heading Text Color: #FFFFFF
• Heading Letter Spacing: -7px
• Heading Line Height: 0.9em

Element Shape changes the form of the repeated elements, while Element Expansion changes how those elements fill out the glyph. At 49 and 50, the elements form stronger strokes while keeping the stepped edges visible.

Slant ranges from -8 to 0. Setting it to -4 gives the heading a slight forward lean. Crsv at 1 enables the cursive letterforms.

The pink layer comes from Divi’s text shadow, not Bitcount itself. Scroll down to Heading Text Shadow, choose the fifth preset, and use these values:

• Horizontal Length: 0.04em
• Vertical Length: 0.07em
• Blur Strength: 0em
• Shadow Color: #FF00D1 at 100%

Keep the blur at 0em to create a sharp second layer behind the text. Using em values for the offsets also keeps the shadow proportional as the heading size changes across breakpoints.

3. A Sale Banner With Honk

Honk combines irregular letterforms, built-in colors, and an internal shadow, making it a natural fit for a short promotional heading.

Add a Heading Module, set the content to Big Sale Up To 50% Off, and choose Honk from the Heading Font dropdown.

Leave Heading Text Color unchanged. Honk includes its own color palettes, so the letters appear yellow and pink without using Divi’s color setting. Two variable font controls appear. Use these values:

• Variable Font Morf: 22.5
• Variable Font Shln: 18
• Heading Text Size: 222px
• Heading Line Height: 0.7em

Morf changes the shape, size, and position of the parts that form each letter. The axis ranges from 0 to 45. Setting it to 22.5 places it at the midpoint and gives the letters a more angular form.

Shln controls the length of the shadow built into Honk. It ranges from 0 to 100. At 18, the shadow stays short and adds depth without looking like a second copy of the text.

Set the line height to 0.7em to keep the three lines close together.

Honk already adds a shadow to the letters. You can add another Divi text shadow to separate the full heading from the photograph behind it.

Choose the second preset under Heading Text Shadow and use these values:

• Horizontal Length: 0em
• Vertical Length: 0.06em
• Blur Strength: 0.07em
• Shadow Color: #FFC2E9 at 100%

The two shadows have different jobs. Honk’s built-in shadow changes with the letterforms. Divi’s 0.07em blur spreads pale pink around the full heading and helps separate it from the background.

This design also uses a busier background than the other examples. The heading remains visible because the supporting text and button are small, while the main subject in the photograph sits mostly on the right side of the section.

4. A Coming Soon Page With Handjet

This page uses four main elements: a Countdown Timer Module, a Heading Module, a line of body text, and an Email Optin Module. Handjet is used for the heading, countdown numbers, and button label. The paragraph stays in a simple sans-serif font.

Start with the heading. Add a Heading Module, set the content to Coming Soon, and choose Handjet from the Heading Font dropdown. Three variable font controls appear. Use these values:

• Variable Font Weight: 900
• Variable Font Element Shape: 8
• Variable Font Elgr: 1.5
• Heading Text Size: 180px
• Heading Text Color: #FFFECB
• Heading Line Height: 1em
• Heading Letter Spacing: 6px
• Heading Capitalization: Uppercase

Handjet builds each glyph from smaller elements, and its variable axes control those elements. Weight controls their size. At 900, the elements become large enough to form strong strokes. Element Shape ranges from 0 to 16, with different values producing different modular forms. Setting it to 8 selects the Circle instance and creates a dot-matrix structure.

Elgr controls how many elements fit inside one grid unit. It ranges from 1 to 2, moving from a single element to a group of four smaller elements. Setting it to 1.5 places the design between those two extremes and adds more detail to the letterforms.

Handjet creates the modular structure, but the glow comes from Divi’s stroke and text shadow settings. Set Heading Stroke Width to 3px and use #48AA01 for the stroke color.

Then add a text shadow with these values:

• Horizontal Length: 0em
• Vertical Length: -0.02em
• Blur Strength: 0.11em
• Shadow Color: #B4F68D at 50%

The negative vertical value moves the glow slightly upward. Keep the shadow opacity at 50% or lower so the blur does not hide the modular structure.

Apply the same font, color, stroke, and shadow treatment to the countdown numbers, separators, and Notify Me button. Keep the paragraph small, white, and set in a simple sans-serif font.

5. A Thank You Page With Shantell Sans

A thank you page only needs a simple message. Shantell Sans works here because its irregular letterforms make the heading feel more personal and hand-drawn.

Add a Heading Module, set the content to Visiting Our Store, and choose Shantell Sans from the Heading Font dropdown. Four variable font controls appear. Use these values:

• Variable Font Weight: 754
• Variable Font Bnce: 100
• Variable Font Infm: 100
• Variable Font Spac: 0
• Heading Text Size: 108px
• Heading Line Height: 1em
• Heading Text Color: #FFFFFF

Bnce moves glyphs above and below the baseline to recreate the bounce of handwriting. Infm changes their shapes and proportions. Setting both to 100 makes the line look less uniform and more hand-drawn. Weight ranges from 300 to 800. At 754, the strokes stay thick enough to support the irregular letterforms at 108px.

Leave Spac at 0 because the letters already have enough room between them.

Keep the two supporting lines small and white so they remain secondary to the heading. The illustration sits along the bottom in a lighter blue and adds detail without competing with the text.

6. A Landing Page With Kablammo

Kablammo’s decorative letterforms suit short headings on simple backgrounds. This example pairs a dark green heading with an illustrated forest scene.

Add a Heading Module and enter your heading. Open the Heading Text option group, select H1, and use these values:

• Heading Text H1 Font: Kablammo
• Heading Text H1 Font Weight: Bold
• Variable Font Morf: 0
• Heading Text H1 Text Size: 139px
• Heading Text H1 Text Color: #1D3210
• Heading Text H1 Line Height: 1.2em

These settings style the H1 inside this Heading Module. To reuse the same treatment elsewhere, save the Heading Text settings as an Option Group Preset and apply it to the other headings.

Kablammo has one variable axis called Morf. Increasing it moves the decorative elements around the letters while shifting their weight and contrast. At 0, you get the least distorted version. Higher values make the letters more decorative, so they work better for short headings on simple backgrounds.

The dark green heading also matches the trees in the illustration.

Kablammo also includes contextual alternates for repeated characters. The two Es in TREE are different, and so are the 4s in the date block below. With contextual alternates enabled, the font automatically swaps forms when the same character appears within a span of ten glyphs.

Test your actual heading before committing to the font. Decorative letterforms can become difficult to recognize at some sizes, especially characters such as a capital I. Use your real copy in the builder so you can see how every letter behaves.

What To Check Before Publishing

These fonts can work well, but there are a few things worth checking before you build a page around them.

• Test Color Fonts In Safari: As of this writing, COLRv1 renders in Chrome, Edge, and Firefox but is not supported in Safari on macOS or iOS. Test Honk and Sixtyfour Convergence in Safari and choose an acceptable fallback before publishing.
• Divi’s Text Color Does Not Override The Palette: Color fonts control their own palettes, so Divi’s standard text color setting cannot replace their built-in colors. Make sure the font remains legible against your chosen background.
• Add Responsive Text Sizes: The large text sizes in these examples are desktop values. Use Divi’s responsive controls to set appropriate tablet and phone sizes, then check the line breaks at each breakpoint.
• Retest The Axes After Editing The Copy: Variable font settings that work for one heading may not work as well after the words change. Add a note to the Module’s Admin Label so the next person knows to recheck the font settings.

Try One Before You Rule It Out

It is easy to dismiss these fonts from a specimen page. Try them in the builder at the size you would actually use. Add your own words, adjust the available axes, and judge the result within the full layout. Divi 5 displays the available variable font controls as soon as you select a supported font. If it does not suit the page, switch back. If it does, you have another option for creating a heading that looks different from the usual display fonts.

The post 6 Expressive Google Variable Fonts For Bold Divi 5 Headlines appeared first on Elegant Themes Blog.

One of the module’s biggest advantages is how deeply it connects with Divi 5’s newer image tools. Instagram feeds naturally mix square, portrait, and landscape media, but Aspect Ratio and Framing let you give those posts a consistent shape without editing the original images. You can define the frame, control how each image fills it, reposition the crop, and reuse that treatment with Image Option Group Presets.

The rest of the feed follows the same principle. Feed and Item controls shape the gallery itself, the Follow button uses Divi’s familiar Button settings, and the module can be styled as part of the same design system as the page around it.

Connecting An Instagram Account

Before the feed can display anything, Divi needs an Instagram Access Token. Open the Instagram Feed Module and go to Content > Account.

On a site without a connected account, you’ll see a Select An Account dropdown and an Add button. Click Add and Divi asks for two values: an Account Name and an Access Token. The Account Name is simply the label Divi uses to identify the connection, which is useful if you work with multiple Instagram accounts. The Access Token is the credential that allows the module to retrieve media from Instagram.

Click Submit to save the connection.

Once the account is connected, select it from the dropdown and the module can begin displaying its posts. The interface also gives you controls for fetching the feed again and removing a saved account when you no longer need it. The Access Token itself is generated through Meta’s developer tools. Setting that up involves creating a Facebook App, configuring the Instagram use case, connecting the Instagram account, and generating the token.

Rather than condensing that entire Meta workflow here, follow our step-by-step guide: How To Connect The Instagram Feed Module With An Instagram Account In Divi 5. Meta’s setup interface and requirements can change over time, so using the current connection documentation is the safest way to generate a working token.

Control What The Instagram Feed Displays

Once the account is connected, the Content tab controls what the feed displays and how visitors interact with it. The Instagram Feed Module includes groups for Account, Feed, Link, Button, Elements, Background, and Meta, but the main feed-specific controls are straightforward.

Choose How Many Posts To Display

Inside the Feed group, the Posts control determines how many Instagram posts appear in the module. Choose a number that suits the role of the feed rather than simply displaying as many posts as possible.

A compact social section might only need a few images, while a dedicated Instagram gallery can display a larger selection. The Feed Layout settings in the Design tab determine how those posts are arranged once they are on the page.

Choose What Happens When Visitors Click A Post

The module provides an Open In Lightbox option for individual feed images. When enabled, visitors can view the media in an overlay instead of immediately leaving the website.

That gives you two useful approaches depending on the purpose of the feed. A lightbox works well when the Instagram images are part of the page’s visual experience and you want visitors to keep browsing the site. Linking to Instagram makes more sense when the feed is primarily there to direct people to your social profile and content.

The module’s broader Link group can also make the Instagram Feed Module itself clickable, directing visitors to another URL when that fits the surrounding layout.

Add A Follow Button

Inside the Button group, Show Follow Button determines whether the feed includes a call to action, while Follow Button Text lets you customize its label. That gives the module a clear next step when the goal is to turn website visitors into Instagram followers. If the feed is primarily decorative or editorial, you can leave the button hidden and let the images stand on their own.

Add Nested Elements

The Instagram Feed Module also supports Divi 5’s nested-element system through the Elements group. That means the feed does not have to exist as an isolated image gallery. You can add other Divi elements inside the module and build a larger composition around the social content.

Combined with the standard Background and Meta groups, this gives you more freedom to treat the Instagram feed as a designed section of the page instead of a self-contained embed.

The Four Unique Styling Groups

The Instagram Feed Module becomes especially interesting in the Design tab. Alongside Divi’s standard controls for Layout, Sizing, Spacing, Border, Box Shadow, Filters, Transform, and Animation, four styling groups give you direct control over the parts that make up the feed: Image, Button, Feed, and Item.

Feed and Item are specific to the structure of the Instagram Feed Module, while Image and Button bring familiar Divi styling controls into the feed. Together, these four groups let you treat the Instagram gallery as a designed part of the page rather than a fixed social embed.

Feed Arranges The Grid, Item Styles Each Tile

Feed controls the container that holds the Instagram posts themselves. It includes controls for Layout, Background, Border, Box Shadow, Sizing, and Spacing. Its nested Layout group is where you control the structure of the Instagram gallery, including how the posts are arranged and how much space sits between them.

Adjust the Grid to suit the section, then use responsive values to rethink the arrangement on Tablet and Phone. A wider desktop gallery can be simplified to a two-column or single-column feed as available space decreases.

Item works one level deeper and controls each Instagram tile individually. It includes Background, Border, Box Shadow, Sizing, and Spacing, allowing you to establish a consistent card treatment for every post in the feed.

Add rounded corners, a subtle border, extra internal spacing, or a soft shadow once, and that same styling carries across the complete gallery. The separation between Feed and Item makes the structure easier to understand: Feed styles the collection, while Item styles the repeated tile.

Image Controls The Shape, Crop, And Framing

Image is one of the most useful styling groups in the Instagram Feed Module because Instagram media rarely comes in one consistent format. One post may be square, the next portrait, and another landscape. If every image simply follows its original proportions, the feed can quickly lose its visual rhythm.

Divi 5’s Aspect Ratio settings solve the first part of that problem by defining a consistent frame for every image. You might use 1:1 for a classic Instagram-style grid, 4:5 for a taller editorial treatment, or another ratio that better suits the surrounding page. Because the ratio belongs to the website design rather than the original Instagram media, differently shaped posts can occupy the same proportional space.

Framing controls what happens inside that frame. Set Object Fit to Cover when you want each image to completely fill its tile while preserving its original proportions. Divi crops whatever extends beyond the defined frame instead of stretching the image.

Then use Object Position to control which part of the media remains visible. If a portrait subject sits toward the top of the original image, for example, Top Center may produce a better crop than Center.

This combination is one of the features Elegant Themes specifically highlighted when the Instagram Feed Module launched. Aspect Ratio defines the shape, Framing determines how differently proportioned Instagram media sits inside it, and Composable Settings help bring Divi’s wider design options to module sub-elements.

Because the Image option group supports Option Group Presets, you can also turn the complete treatment into something reusable. An Instagram Image preset could contain the Framing settings alongside a Border Radius, Border, Box Shadow, Filters, and other shared image styling.

Button Connects The Feed To Your Existing CTA Style

Button controls the Follow button that can appear alongside the feed. It uses Divi’s familiar Button styling options, so you can control its typography, background, borders, spacing, sizing, and other supported settings without treating it as a separate social-media interface.

Option Group Presets are especially useful here. Apply the same Button treatment used by other calls to action on the site, and the Instagram Follow button immediately feels like part of the wider design system instead of an unrelated element.

Remember To Refresh Your Instagram Access Token

There is one maintenance detail to know before relying on the feed long term: the Instagram Access Token generated through Meta is valid for 60 days. When that period ends, the token needs to be refreshed or regenerated. If it expires without being replaced, the Instagram Feed Module can no longer retrieve the account’s posts.

The current refresh workflow is:

• Open the Facebook App used for the Instagram connection.
• Return to the Instagram access-token section.
• Generate a new token.
• Copy the new token.
• Open the page containing the Instagram Feed Module.
• Go to Content > Account.
• Remove the existing account connection.
• Add the account again using the new Access Token.

We cover the complete process in How To Refresh The Instagram Access Token.

Because the expiration window is predictable, it is worth adding a reminder before the 60 days are over, especially on client sites where nobody may be opening the module regularly.

A Feed That Is Stylable Like The Rest Of The Page

The Instagram Feed Module in Divi 5 works especially well because the Instagram-specific setup is only one layer of the workflow. Once the account is connected, Divi 5’s design system takes over.

Aspect Ratio establishes a consistent image shape. Framing controls how mixed Instagram media fits inside it. Feed determines how the gallery is arranged, Item controls the repeated tiles, and the Button group brings the Follow CTA into the same styling system as the rest of the site. Image and Button Presets can then turn those decisions into reusable design treatments.

That makes the module useful in more places than a dedicated social section. Add it to a homepage, About page, creator site, restaurant layout, ecommerce landing page, portfolio, or any other design where recent Instagram content adds useful visual context.

Connect the account, choose the content, define the image system, and design the feed like any other part of your Divi 5 website.

The post Exploring Divi 5’s Instagram Module appeared first on Elegant Themes Blog.