Slots in Divi 5 provide an area for those different layouts inside the same Component. Keep the shared structure and design connected, then build the content each instance needs inside its Slot.

We’ll turn a workshop section into a Component, add a Slot to its right column, and use that area for a schedule in one instance and a booking form in another.

What Are Slots In Divi 5?

A Slot is a container inside a Component that holds content belonging to an individual instance. The Component defines where the Slot goes in the shared layout. Each instance defines the modules placed inside it.

An instance is a use of the Component on a page. Its source is the saved version that controls the shared structure and settings.

A Slot can contain a different collection of modules in each instance. You can use headings and Groups to build a schedule in one instance, then use a form or another arrangement of modules in a second instance. The surrounding Component stays connected to its source.

We introduced Slots alongside Components in our Components and Slots release. Components handle the reusable design; Slots provide room for local layouts within it.

The Shared Container And Its Local Content

It helps to think about the Slot in two parts:

• The container: Its place in the Component and its shared design are configured in the source.
• The contents: The modules inside it belong to the instance you are editing.

For example, a Slot can occupy the right column of every workshop section, while the schedule or booking layout placed inside it can be different on each page. In our example, a local Group provides the white card around the schedule.

Slots vs Editable Component Settings

Editable Component settings are useful when the module structure stays the same. A reusable Button module can keep its design while allowing a different label and link. A testimonial can keep its arrangement while allowing a different quote and author.

Use a Slot when the modules themselves need to change. A schedule, a form, and a video layout are more than different values in the same fields. They contain different elements and may need different arrangements.

The two approaches can work together. A Component can expose a heading for local editing and include a Slot for a larger area of custom content. Choose the amount of freedom that matches the purpose of the section.

For the workshop, editable settings would be enough if every instance used the same three schedule items with different times and titles. A Slot becomes useful when one instance needs those schedule items and another needs form fields. You can change the contents without creating a separate source for the entire section.

What Changes Across Instances?

Where you make a change determines its scope. In our example, the shared introduction sits outside the Slot, while the white card Group and its modules sit inside it.

Edit the Component source to update shared elements:

• Workshop introduction: Changing this text in the source updates the introduction in connected instances.
• Slot position and container spacing: Changing these settings in the source updates the shared Slot container across connected instances.

Edit the modules inside an instance’s Slot to update local content:

• A schedule item’s time or title: Edit its local Text or Heading module to change that instance’s schedule.
• The schedule’s module arrangement: Replace its local modules with a form or another layout to change that instance without replacing the shared section.
• The white card’s background: Edit the Group inside the Slot to change that local card. Each copied Group has its own settings, so another card’s background stays unchanged.

Before You Start

Use a Divi 5 installation that includes Components and Slots, and open a page in the Visual Builder. You can follow along with a two-column section of your own; matching our illustration isn’t required to learn the feature.

Click the stacked-layers Layers icon in the left builder sidebar. Expand the arrows beside Section, Row, and Column to see their children. Select a layer to open its settings, and right-click it to access actions such as Copy or Duplicate. Our guide to adding and organizing elements explains these controls if they are unfamiliar.

A Section contains the overall workshop layout. Its Row arranges two Columns. A Group inside the right Column keeps the card’s modules and styling together. We’ll save the Section as a Component, then put that Group inside a Slot.

Download And Import The Starter Layout

Download the starter layout to follow along with the workshop design. It contains an ordinary workshop Section and its schedule card, with no Components or Slots. You’ll create those connections during the tutorial.

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!

1. Create a blank practice page and open it in the Divi Visual Builder.
2. Open the Page Menu and choose Import to open the page’s Import & Export window.

Select the starter file and configure the import for your blank practice page:

3. Click Choose File and select slots-starter-layout.json.
4. Leave Replace Existing Content checked. Leave Download Backup, Import Presets, Import Components, and Import To New Canvas unchecked.
5. Click Import Layout. When the workshop section appears, save the page with the top-right builder Save button.

This file uses the page’s import controls. You don’t need to import it through the Divi Library. Use a blank page for replacement import. To preserve an existing design, export a backup first or enable Import To New Canvas for a separate canvas.

After importing, open Layers and inspect the right Column’s complete schedule Group. Keep it in place until step 1 asks you to copy it.

Our Example: A Creative Workshop Section

For this walkthrough, we’re starting with a workshop section already built using native Divi modules. It uses a cream background, charcoal text, and burnt orange accents. At this stage, it is an ordinary section on the page. We haven’t saved it as a Component or added a Slot yet.

If you imported the starter, its structure and styling are already in place. Read this section to identify the elements, then continue to step 1. To prepare your own starting layout, add a Section and a two-column Row. In the left Column, add a Heading and Text module for the workshop introduction. In the right Column, open Content > Elements > Add Element and choose Group. Select that Group and use its own Content > Elements > Add Element controls to add a Heading, introductory Text, and Button.

Between the introduction and Button, add a nested Group for the schedule items. Within it, use three Groups containing a time Text module, a Heading, and a short Text description. Apply the white background, padding, and rounded corners to the outer card Group. This gives you a complete card to copy later. Use your own spacing and colors; avoid a fixed card height.

Our finished starting section contains one Row with two columns:

• The left column: A workshop introduction with the heading Small rooms. Big ideas., supporting text, and an abstract geometric illustration. This is the content we want to share across instances.
• The right column: A white schedule card built inside a Group. It contains an introduction, three timed sessions, and a button. This is the area we’ll replace with a Slot so each instance can use a different layout.

You don’t need to reproduce our design exactly. To follow along, create a two-column section with an introduction on the left and a Group containing several modules on the right. A Heading, Text, and Button module inside that Group are enough to demonstrate the process.

A Group is a container that holds other modules together. Keep the right-hand content inside one outer Group. In our example, this Group also provides the schedule card’s white background, rounded corners, and padding. Grouping the content lets us copy the entire card and later place it inside the Slot without rebuilding its modules or styling.

Open Layers view and expand the section to check its structure. The schedule Group should appear inside the right column, with its introduction, session Groups, and button nested beneath it. Expand the inner Groups to inspect their Heading and Text modules.

We’ll turn the complete section into a Component named Creative Workshop, then replace the schedule Group in its shared source with a Slot named Session Content. Finally, we’ll place the schedule inside one instance’s Slot and create a booking form inside another.

How To Add A Slot To A Component

1. Copy The Content You’ll Move Into The Slot

Before creating the Component, find the right Column in Layers and expand its children. Right-click the outer Group that contains the complete white card and choose Copy. This uses Divi’s element clipboard, which stores the layout and settings; copying the card’s visible text is a different action.

Copy the outer card Group to preserve its nested modules and styling together. Copying an individual heading would leave out the rest of the card; copying the Column would include the parent container we want to keep in place.

Leave the original Group in place for now. We’ll remove it from the shared Component source after saving the section, then paste the copied Group into the page instance’s Slot. Avoid copying another element in between, so the schedule Group stays available to paste.

2. Save The Section As A Component

A Component is a reusable element connected to a shared source. Saving our complete section as a Component will let us reuse its surrounding design and update that design from one place.

Right-click the outer Section and choose Save To Library. Name it Creative Workshop, enable Save As Component, and click Save To Library.

Save the entire Section so the Component includes the introduction and illustration alongside its two-column layout. Saving only the schedule Group would exclude those shared elements.

The section on the page is now an instance connected to the saved Component source. It still contains the original schedule Group. Next, we’ll replace that Group in the source with a Slot.

3. Open The Shared Component

Select the connected Section in Layers to open its settings. Click the Component menu beside the element name at the top of the settings panel, then choose Edit Component. This opens the source, where you define the common structure and the Slot’s position.

Source editing includes Component Settings and bottom Save and Cancel controls, alongside the Content, Design, and Advanced tabs. Purple styling identifies connected elements in both source and instance contexts, so check those source controls to confirm where you are working.

Changes made here affect connected instances, so keep the introduction and illustration in place while preparing the right column for local content. When you select another element in Layers, check whether the source controls remain visible. If they do, continue editing the source. Otherwise, choose Edit Component for the selected element. Saving and confirming a source update returns you to instance editing; reopen the source when another shared change is needed.

4. Add The Slot In The Right Column

With the complete card already copied, select its parent right Column in Layers. If Component Settings and the bottom Save and Cancel controls are still visible, continue in that source context. Otherwise, open the Column’s Component menu and choose Edit Component. Under Content > Elements, find the outer card Group and click its trash icon. Remove the Group from this source child list; keep the parent Column in place to hold the Slot. Removing only a nested session item would leave the remaining card in the shared layout.

Stay in the right Column’s source settings and click Add Element in the same Elements list. Search for Slot in the module picker and select it. The Slot should appear directly beneath that Column in Layers. Save and confirm the source update before changing its label.

Select the new Slot in Layers and choose Edit Component to open its source settings. Under Content > Meta > Element Label, name it Session Content. This identifies its purpose in Layers. The shared source now contains an empty Slot in the right column.

The Slot can provide shared container styling, while its local modules can have their own design. For this walkthrough, the copied schedule Group already provides the white background, rounded corners, and internal spacing. Keep that Group inside the Slot rather than rebuilding those styles on every schedule module.

Keep content height automatic. A schedule and a form can have different lengths, so a fixed height can leave unnecessary space or squeeze the local content.

Decide Where The Card Styling Belongs

There are two useful ways to style this area:

• Style the shared Slot container: Put the background, border radius, and padding on the Slot when every instance should have the same card treatment.
• Style a local Group inside the Slot: Put those settings on an inner Group when each local layout needs control over its own card.

Our example keeps the Slot transparent with zero padding and uses a local Group for the white card. This preserves the original schedule design when we paste it back. The booking card starts with the same copied styles, but each Group’s background can be edited independently.

Avoid applying the same padding to both the Slot and its inner Group. Those values add together and can leave too little room for form fields on smaller screens.

5. Save The Shared Slot Container

Click Save at the bottom of the Component settings and confirm the update to its instances. Close the source settings with the X at the top right. In Layers, select Session Content beneath the page’s Section again.

The Slot may show a message that all its settings are managed at the Component level. That is expected in this example: its container remains shared, while the modules you add inside it will be local. Use those child modules’ settings to edit their content and design.

The Slot’s child content is local. Build it in the page instance; the source defines the Slot’s container and position. A newly added Slot provides an empty area for the instance’s modules in the builder. Add local content to display a card in that area on the front end.

The parent column and section spacing remain in place when a Slot is empty. If an instance leaves that area empty, review the complete section and adjust its surrounding layout as needed.

6. Build The Local Schedule

After leaving source editing, right-click Session Content in Layers and choose Paste Group. Its copied headings, text, nested Groups, and Button now form this instance’s local content.

If Paste Group is unavailable because another element replaced the copied layout, rebuild the card inside the empty Slot using its Add Element control. Add the outer Group first, then insert its child modules through that Group’s Content > Elements settings.

Our schedule includes three session items:

• 09:30: A fresh perspective. Warm-up & unexpected connections.
• 10:00: Make it tangible. A guided, collaborative challenge.
• 11:15: Share what you found. Show, tell & take your next step.

Use Layers view to check that the pasted Group appears beneath Session Content. Expand it to inspect the schedule’s nested modules. If it appears beside the Slot under the right Column, it is outside the local content area.

Click the page Save button in the top-right builder bar to retain its local layout. The bottom Save button used earlier updates the Component source; the top page Save retains this page’s instance content and layout.

Use A Different Layout In Another Instance

With source editing closed, right-click the outer connected Section in Layers and choose Duplicate. Duplicate the whole workshop Section, not its Slot or an inner Group. The new section is a second instance of the same source on the page.

Duplication copies the instance’s current local Slot content. Open the second instance’s Session Content Slot and replace the copied schedule layout with the modules needed for booking. The first instance remains a schedule.

In Layers, find Session Content beneath the second Section and expand its outer white card Group. Keep that Group and its introductory modules. Right-click its nested schedule Group and choose Delete, then delete the original Button module. Select the local Heading and Text modules to change their contents. Change the local heading to There’s a seat with your name on it. and the description to Join our next studio session. Leave your details and we’ll send the invitation.

Replace the removed schedule modules with a native Contact Form in the second Slot’s local layout. Our example uses Name and Email fields with a Save my seat button.

To prepare the booking form:

1. Select the outer local card Group beneath the second Session Content Slot. Open Content > Elements > Add Element, search for Contact Form, and select it.
2. Open the new Contact Form’s Content > Elements list. Click the trash icon beside Message, leaving Name and Email Address.
3. Expand the form’s Content > Text settings and change Submit Button to Save my seat.
4. Return to Content > Elements and click the pencil icon beside Name. This opens that individual Field‘s settings.
5. In the Field settings, open Design > Sizing > Column Class and choose 100% from the picker. The selected value displays as Fullwidth. This puts Name on its own line.
6. Use the Contact Form breadcrumb at the top to return to the form. Open the Email Address field with its pencil icon and apply the same Fullwidth setting.

The pencil opens the Field editor, where Design > Sizing contains the Column Class setting shown below. Apply Fullwidth to each field individually.

Leave the form’s Layout Style set to its default Flex so Column Class controls its field widths. Our form field widths guide covers other arrangements and device-specific widths.

The first instance keeps its schedule. You have two local layouts within one shared section design. Click the top-right page Save to retain the new local form. Before using it on a live website, open the Contact Form’s Content > Email settings and enter its recipient address. Review the success message and spam protection, then test submission and delivery. The Contact Form documentation explains those settings. Here, it demonstrates a different local module arrangement.

Update The Shared Design

In Layers, select the introduction Text module outside Session Content. Open that module’s Component menu and choose Edit Component, then open Content > Text > Body. This edits the shared introduction. Our example uses A little time away from the everyday. Meet, make, and leave with a fresh perspective.

Both instances now display that introduction while retaining their different local content: the first has its schedule, and the second has its booking form.

Click the bottom Component Save button and confirm This will update all instances across your entire site. Close source settings with the X, then click the top-right page Save to retain its local layouts. Our saved example retains the updated introduction and its different Slot contents.

If you want to change the design of a module inside one Slot, edit that local module. Changing the shared Slot container and changing a heading within its contents are different operations.

Check Each Layout On Smaller Screens

Use the tablet and phone icons in the top builder bar to preview each device layout. Responsive settings for the shared section and Slot container provide the common foundation. The local modules still need their own review.

Our workshop stacks the introduction above the Slot in its 874px tablet preview and 375px phone preview. The section’s responsive layout settings control that arrangement. Check the modules within each Slot too, since their content and widths can differ.

The booking form needed a local adjustment: its original half-width fields clipped the Email placeholder within the phone card. Setting both fields to full width made Name and Email clear at 375px. The button text wraps within the card without extending outside it.

The schedule also needs a phone adjustment. Its side-by-side time and session details can overflow the narrow card. Stack those two elements within each session row on phones:

1. Select the builder’s Phone preview at 375px.
2. In the first instance’s Session Content Slot, expand the local schedule card and its nested schedule Group. Select the first session-row Group containing a time Text module and an inner Group for the session heading and description. Edit this local Group directly.
3. Open Design > Layout, keep Layout Style set to Flex, and change the phone Layout Direction to Column. Leave desktop and tablet at Row.
4. Repeat the phone-only change for the other two session-row Groups, then use the top-right page Save button to retain these local responsive settings.

Check every variation. A schedule’s narrow time column and a form’s fields have different needs even when they share the same outer container. Look for text wrapping, crowded controls, and horizontal overflow. Reduce padding and typography where appropriate and let each local layout determine its own height.

When Should You Use Slots?

Slots work well when a repeated design needs a defined area for flexible content:

• Event sections: Use the same introduction with a schedule, registration form, or recording.
• Service sections: Pair a consistent service overview with a gallery, enquiry form, or detailed list.
• Campaign sections: Keep the surrounding design while changing the promotional content and its module arrangement.
• Resource sections: Reuse a shared presentation while each instance contains different supporting media.

If only the text or image needs to vary within a fixed arrangement, editable Component settings may be enough. Add a Slot when you want to make room for a different layout.

Common Questions About Slots

Why Can’t I Find Slot In The Module Picker?

Slot insertion depends on context. Select a parent that accepts nested Group content, such as the right Column inside our Component. Check for Component Settings and the bottom source Save and Cancel controls. If they aren’t visible, choose Edit Component for that Column. Then open Content > Elements > Add Element and search for Slot.

Slots cannot be nested inside other Slots or used as Carousel slides. Use Groups to organize the modules within a Slot, and add separate Slots to the shared source when you need additional independent content areas.

Will A New Instance Include My Schedule?

The schedule belongs to the page instance, not to the source Slot. Inserting a fresh instance of the Component gives you its shared design and an empty Slot to fill. Duplicating the populated page instance copies its local schedule, which is why our second example started with the same card and session items.

Duplicating a Slot in the Component source is another operation: it creates a new empty Slot. It does not copy every page’s existing local content into that new area. Choose the operation according to whether you want another instance of the design or another content area within the design.

Can One Component Have Multiple Slots?

Yes. Each Slot provides an independent area for instance content. A workshop Component could have one Slot for the main session details and another for supporting resources. Name them by purpose so it is clear where each layout belongs.

Keep the shared structure useful. If nearly everything needs to vary, consider whether a smaller Component would be easier to maintain. Slots work best when the surrounding design still provides a meaningful common foundation.

Can A Slot Contain Another Component?

Yes, provided the nesting does not create a circular relationship. For example, a local booking layout could include a reusable call-to-action Component alongside its form. That nested Component keeps its own connection to its source, even though its placement is part of this instance’s Slot content.

Local Slot content therefore does not mean every element inside it must be independently styled. You can combine local modules with nested Components and reusable styling tools, choosing the appropriate scope for each part.

Does Renaming A Slot Replace Its Content?

Changing its Element Label changes how you identify the Slot in the builder. Its local content is associated with the Slot itself, rather than that display label, so renaming it does not turn it into a new content area.

Removing a Slot from the shared source has a wider effect: it removes that area from connected instances. Before removing one, preserve any local content you still need elsewhere.

Keep Local Modules Visually Consistent

You can use Presets and Design Variables to coordinate the styling of your local modules. Our guide to using Design Variables with Presets explains how those reusable styling tools fit together.

For example, the schedule and booking layouts can use the same heading and button Presets while containing different modules. This lets you reuse their visual treatment without expecting a copied local Group to behave like a shared Component.

Build More Flexible Components With Slots

Slots let you keep a reusable design while giving each instance room for the modules it needs. In our workshop example, one shared section can support a schedule and a different booking layout without requiring separate sources for the surrounding design.

Start with one Component, one Slot, and two meaningfully different layouts. That gives you a clear way to explore how shared design and local content work together in Divi.

The post Exploring Slots For Components In Divi 5 appeared first on Elegant Themes Blog.

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

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

Let’s take a closer look. 👇

Select Exactly The Elements You Need

Now you can work with multiple elements at once, no matter where they exist on the page.

Pick Individual Elements Or A Range

Hold Cmd on Mac or Ctrl on Windows while clicking elements to add them individually to your selection. This is useful when the elements you want to edit are scattered throughout a layout.

To select a range, start with one element, then Shift-click another element in the same container. Divi selects the siblings between them. Modifier-click an already selected element to deselect it.

Imagine updating a services page with six cards. You could select every card in a range to adjust their spacing, or pick just three cards that need a different background. Your selection matches the task.

Make Selections In The Layers Panel

The same selection controls work in the Layers panel. Cmd/Ctrl-click individual layers or Shift-click a range; highlights indicate which elements are selected.

This is especially helpful when elements are nested, overlap, or are difficult to target on the page. You can find them in the layout hierarchy, build your selection there, and edit them together.

You can also drag selected layers together to a compatible location. Reorganizing several modules becomes one coordinated move.

Edit Multiple Elements From One Settings Panel

With multiple editable elements selected, the settings panel becomes a shared editing interface.

Change a setting once, and Divi applies it to the applicable elements in your selection. You can select matching modules or combine different element types, with shared controls brought together in the panel.

For example, select several Button Modules on a landing page and change their presets. Or select different modules that need matching outer spacing and update the relevant spacing controls in one place.

Each setting targets the selected elements that support it. You can work across a varied selection without treating every module as though it has identical settings, while still accessing settings unique to each selected module type.

See Mixed And Inherited Values More Clearly

We improved the way inherited values from presets, components, and parent breakpoints appear in the settings panel, and added new UI conventions for mixed values across a selection.

Know When Your Selection Contains Different Values

Bulk editing needs to show you where your elements agree and where they differ.

When selected elements have different values, the supported text fields and dropdowns display “Mixed”. Other controls use an appropriate mixed appearance, so a color preview, toggle, or alignment choice does not imply that every element shares a single value.

Suppose three selected elements have different spacing values. The mixed display makes that difference visible. Enter a new shared value, and the applicable elements update together.

Selecting elements lets you examine their differences. Changing a field is what applies your new value across the selection.

Distinguish Inherited Settings From Local Overrides

The settings panel also improves how controls represent inherited values, including those supplied by presets and those from responsive inheritance.

Inherited choices retain their placeholder styling rather than appearing as explicit local selections. Mixed-value detection also considers inherited values, helping you understand differences even when the selected elements have no local overrides.

This makes it easier to decide whether to add an override or reset a setting, letting each element inherit its own value again.

Manage Preset Assignments Across Your Selection

Bulk editing works with Divi’s preset-based design system, including element presets and option group presets.

The settings panel brings together assigned presets from the selected elements, allowing you to apply a preset across your selection. You can add or remove assignments across compatible targets, with element presets applied to their matching element types.

For example, select the buttons throughout a pricing section and assign your primary button preset together. You can also manage an option group preset for a shared design detail across the elements that support that group.

Existing preset stacks are represented in the combined interface, so working with multiple elements does not require opening each element just to manage its assignments.

Use Familiar Actions Across Multiple Elements

Right-click actions and keyboard shortcuts now handle more of your selection together.

Copy selected elements, cut and paste them into a compatible destination, duplicate them, move them, or reset their design attributes. You can also lock and unlock eligible elements together. You can also drag selected elements together between columns directly on the page, or move them through the Layers panel.

Imagine moving a heading, description, and button from one column to another. Select the three modules and move them together. Or copy that collection to repeat the composition elsewhere in the layout.

Actions continue to follow the layout’s placement rules, locks, and editing permissions.

Act On Settings Groups And Individual Fields

Bulk actions also extend within the settings panel.

Right-click a settings group or field to perform supported actions on the selected elements it applies to. Reset a shared field or group together, paste compatible attributes, or use Convert To Variable on supported fields to turn static values into Design Variables.

For example, select several modules with custom spacing overrides and reset their spacing group together. Copy and Extend actions are available when the selection contains the same element type.

Give The Inspector And AI Agent A Selected Scope

When scope matters, Divi’s panels will respect your specific selection.

Inspect A Chosen Collection Of Elements

The Inspector now supports multiple selected elements as its scope.

With the Inspector open, select the elements you want to examine and bulk edit. It aggregates attributes from those elements and their children, and follows changes to your selection.

For example, select two promotional sections to examine their colors, fonts, images, and other supported attributes together. You can then make Inspector edits within that selected scope.

Ask The AI Agent To Work Across Your Selection

The Divi AI Agent also recognizes a multi-selected scope.

Selected elements appear as individual scope chips in the composer. Your request provides context for the full selection, allowing you to request changes across the applicable elements and their descendants.

You could select several call-to-action buttons and ask the agent to update their labels. Check the scope chips before sending your request to see which elements are included.

You can remove an individual chip from the chat scope without changing your selection in the builder.

Keep Moving With Selection Shortcuts

Three useful shortcuts help you finish one task and move into the next:

• Cmd/Ctrl+A selects everything in a container.
• Cmd/Ctrl+D clears the current selection.
• Cmd/Ctrl+G converts the selected modules into a Module Group when grouping is permitted.

Grouping gives a collection a lasting container. For example, select an image, a heading, and a description, then group them so you can manage their composition as a group.

Put Bulk Editing To Work On Your Next Layout

Start with a repeated part of a page: a collection of buttons, service cards, or text modules. Select a few elements, examine their mixed values, and change one shared design setting.

Then try building the selection in Layers, moving it together, or bringing it into the Inspector or AI Agent. Each workflow starts with the same simple action: choose the elements you want to work on.

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

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

The post Introducing Multi-Select And Bulk Editing For Divi 5 appeared first on Elegant Themes Blog.

With Divi 5‘s CSS Grid Editor, you can build that arrangement visually. Drag items into position, adjust their spans, and refine the spacing without writing custom CSS.

In this tutorial, we’ll build a four-card bento hero, add content to each card, style it with Design Variables, and adapt the layout for smaller screens.

What Is A Bento Grid?

The name comes from Japanese bento boxes, where different foods occupy separate compartments inside a shared container. Each compartment has its own space, but the arrangement works as a whole.

A bento layout applies that idea to web design. Cards of different sizes hold images, text, statistics, or actions within a shared grid. Consistent spacing and alignment connect the cards without making every piece of content look equally important.

Apple’s product presentations provide a familiar example. Larger cards highlight a major feature, while smaller cards present supporting details. The variation in size helps distinguish the main message from the information around it.

The same approach can work on a product page, agency homepage, or software landing page. The goal is to give each piece of content an appropriate amount of space while keeping the composition cohesive.

The Logic Behind The Design

A bento grid uses differences in size to support visual hierarchy. A large image card can become the focal point, while a smaller card holds a statistic or a short call to action.

Size is only one part of that hierarchy. Contrast, typography, imagery, and placement also influence where visitors look. A large card with little contrast may attract less attention than a smaller card with a strong headline or bright button.

For this hero, we’ll give each card a clear role: a main visual, a headline with supporting text, a statistic, and a call to action. That keeps the layout focused and gives visitors enough context to understand the offer before choosing what to do next.

Building Grids In Divi 5 Is Visual

Divi 5’s CSS Grid controls let you define a layout at the container level. The container determines the grid structure, and its child elements occupy positions within that structure.

This makes it easier to reuse an arrangement and experiment with its proportions. You can change the layout without rebuilding the content inside every card.

The Grid Editor gives those controls a visual interface. It opens as a floating panel alongside the Visual Builder, where you can work directly with a representation of the grid.

Drag an item’s corner to change how many rows and columns it spans, or move the item to another position. You can also adjust track sizes and gaps visually.

As you edit the grid, the layout updates in the builder. This lets you compare different arrangements while keeping the actual page in view.

You can also start with one of Divi’s premade grid templates and customize it in the Grid Editor. A template gives you an initial structure; its proportions and item placement remain editable.

Build A Bento Grid Hero In Divi 5

A hero section needs to introduce the page and make its main message easy to understand. A bento arrangement gives you space for a strong visual, a headline, supporting evidence, and an action without putting everything into one text block.

Our example uses four cards: one large card on the left, one wide card at the top right, and two smaller cards beneath it.

Add A New Section

Start with a blank page in the Visual Builder. If it already contains an empty Section, use that as your starting point. Otherwise, click the blue plus icon to add a regular Section.

Inside the Section, click the green plus icon to open the Row insertion options. You’ll see the available column structures and grid templates.

Scroll to Build Custom Grid and select it. This opens the Grid Editor so you can define your own arrangement.

Build The Grid Structure

At the top of the Grid Editor, enter these settings:

• Columns: 4
• Rows: 3
• Horizontal Gap: 20px
• Vertical Gap: 20px
• Grid Items: 4

The Grid Items field controls the number of preview placeholders shown in the editor. It does not add actual Columns or modules to the page. We’ll check the Row’s child Columns after defining the arrangement.

Resize the first item so it spans columns 1 and 2 across all three rows. This becomes the main visual card, occupying the left half of the grid.

Place the second item in the upper-right area. Resize it to span columns 3 and 4 across rows 1 and 2. Its top edge aligns with the main visual card, with the configured gap separating them.

Place items 3 and 4 in the remaining cells: item 3 in column 3, row 3, and item 4 in column 4, row 3. Each occupies one column and one row.

The finished structure has one large card, one wide card, and two smaller cards.

Open the Row’s Content tab and expand Elements to check its actual Columns. Add or duplicate Columns, or remove unused ones, until there are four.

These four child Columns become the cards represented by the editor’s four preview items. Keep their order consistent with the arrangement you created.

The Grid Editor remains available as you build. You can revisit the spans, track sizes, and gaps once the content is in place. The empty structure establishes the arrangement, but the finished content will help you judge its proportions.

Add Content To Each Card

The four cards have different roles, so they do not need the same amount or type of content. Use the large card for the main visual, the wide card for the message, and the two smaller cards for supporting information and an action.

Keep the content concise enough to fit those roles. A larger card does not need more words simply because it has more space.

The Main Visual Card

The first card spans the left half of the grid across all three rows. In this example, it contains an image showing Divi’s layout-building tools.

Add an Image Module to the first Column and select your image. A product visual, team photo, or interface preview can work well here, depending on the page.

You can also use a Column background image when the image is decorative. An Image Module is useful when the visual needs its own image settings and descriptive alternative text.

The card can hold other content as well. For example, a portrait and a short testimonial could make social proof the main visual focus. A Video Module is another option when a demonstration would explain the offer more effectively.

Choose content that benefits from the larger space, and check that its crop or proportions work within the card.

The Headline And Supporting Text Card

The second card occupies the top-right area, spanning two columns and two rows. Both the headline and its supporting text belong inside this card.

Add a Heading Module for the main message. Keep it direct and specific to the offer. For a page’s main hero heading, use an appropriate heading level, typically H1.

Below it, add a Text Module with one or two supporting sentences. This gives the headline context without requiring a separate card or changing the four-card structure.

Use the spacing between these modules to make their relationship clear. They should read as one message, with the headline introducing the idea and the body text explaining it.

The Stat Or Feature Card

The third card sits below the headline card on the left. Its smaller footprint suits a single statistic or a short feature highlight.

For a statistic, add a Text Module containing the number, then another Text Module beneath it with a brief explanation. Use a figure you can substantiate and enough context for visitors to understand what it represents.

A feature highlight can use the same structure. Replace the number with a short label, then explain the capability underneath. For example, a service page might use this card to highlight its turnaround time or the main deliverable.

Choose one of these approaches for the third card. The fourth card remains available for the call to action.

The CTA Card

Add a Button Module to the fourth card. Use a label that describes the destination or action, such as “Get Divi 5,” “View Plans,” or “Book A Call.”

The example also includes a short heading and supporting text above the button. These give visitors a final piece of context before they act.

Keep one primary action in this card. Additional links are not always necessary, especially when the rest of the hero already explains the offer. The aim is to make the next step easy to identify.

Style The Cards

The cards already differ in size. Styling helps connect them while distinguishing their roles.

Start with consistent internal padding and rounded corners. Then choose backgrounds and text colors that make each card readable and give the main message appropriate emphasis. The largest card does not also need the strongest background color to stand out.

You can enter values directly into each setting, but shared Design Variables make repeated values easier to manage. A common card radius, font, or brand color can be changed centrally instead of being updated in several places.

Open the Variable Manager from the Visual Builder’s left sidebar. Create or select the variables you want to use, then connect them to the relevant fields.

When a variable changes, settings connected to it use the updated value. Settings that still contain manually entered values are not automatically linked, so apply the variables wherever you want that shared control.

What Design Variables Support

Divi 5 supports seven variable types:

• Colors: Reusable brand colors, background tones, and text colors.
• Fonts: Typefaces for headings, body text, buttons, or other text roles. Changes affect the font fields connected to the variable.
• Numbers: Values for compatible settings such as font size, spacing, width, and border radius. These can include supported CSS functions such as clamp() for fluid sizing.
• Text: Repeated content such as a short label or CTA message.
• Images: Shared assets used in compatible image or background fields.
• Gradients: Reusable gradients, which can also use Color Variables for their stops.
• Links: Shared URLs that can be updated from one place.

To add one, open the Variable Manager, choose the type, enter a descriptive name, and set its value. For this layout, names such as “Card Border Radius,” “Hero Heading Size,” and “Card Padding” make their purpose easy to recognize.

Use the variable control beside a compatible field to select the appropriate variable. For example, connect the corner-radius settings on each card to the same Number Variable.

Use The Variable Generator

If you want related shades for the cards, the Variable Generator can help build a palette from a starting color.

Hover over the Colors group in the Variable Manager and open the generator. Choose a primary color, then adjust the palette settings to create related variations.

The generator can produce tints, shades, tones, and transparency variations using relative color adjustments. Palette options also let you explore relationships between the primary and secondary colors.

A Complementary palette can create a stronger difference between colors, while an Analogous palette keeps them closer together. Use the Color Style Guide Preview to review combinations, then check the readability of the text on your actual cards.

The Variable Generator also supports number scales for spacing and typography. You can use these to establish related sizes instead of choosing every value independently.

In this example, the headline card uses a deep blue background with light text. The statistic card uses a brighter blue, while the CTA card uses a pale tint and a blue button. The image card provides visual contrast alongside them.

Apply the shared radius to all four cards and use a Section background that complements the palette. Check the card padding and module spacing after adding the backgrounds, since those edges make uneven spacing more noticeable.

The result should feel like one composition, with enough contrast to distinguish the cards without making them compete for attention.

Adjust The Hero For Smaller Screens

The desktop arrangement relies on having enough width for two smaller cards beneath the headline. On a phone, that same structure can make the text cramped and the button difficult to use.

Switch to the Phone breakpoint in the Page Bar at the top of the Visual Builder. Open the Row’s responsive layout settings and configure a single-column arrangement for that breakpoint.

When using a structure template, make sure you are changing the responsive layout rather than deleting or merging the four content Columns. All four cards should remain in the page.

Check the placement rules as well as the column count. If desktop column starts or spans remain active, override them at the phone breakpoint so every card fits the single-column layout. Review row spans and heights so each card has enough room for its content.

The phone view should form a clear vertical stack. In this example, the image leads, followed by the headline, statistic, and CTA. Keep the content order logical rather than relying only on visual positioning.

Finish by checking heading sizes, card padding, image cropping, gaps, and button width. Review the tablet breakpoint too; it may support a different arrangement from either desktop or phone.

These responsive adjustments let the desktop retain its bento composition while smaller screens present the same content in a more readable format.

Build A Bento Hero Visually With Divi 5

A bento hero combines several content types within a shared layout. Different card sizes establish emphasis, while consistent spacing, color, and typography help the cards work together.

With Divi 5‘s Grid Editor, you can build the arrangement visually and refine it as the content takes shape. Design Variables keep shared values manageable, and responsive settings let you adapt the composition without rebuilding its content.

Start with this four-card structure, then adjust the proportions and content to suit your page. Keep the main message clear, give each card a purpose, and check the finished layout across screen sizes.

The post How To Build A Bento Grid Hero With Divi 5’s CSS Grid Editor appeared first on Elegant Themes Blog.

We’ll build three service cards for Brand Identity, Web Design, and Creative Direction. They share their spacing, image frames, typography, and button design, while each card has its own photo, title, description, and link.

We’ll save one card Group as a Component, then customize its connected copies. You’ll also learn how to reset local values, detach elements, and manage the saved source.

What Are Components In Divi 5?

A Component is a reusable element with a shared source stored in the Divi Library. It can be a single module or a larger element containing several modules, such as a Group, row, or section.

Each use of that Component on a page is an instance. Think of the source as the design you maintain and the instances as its connected uses throughout your website.

For our service cards, the source will control the card structure, padding, rounded corners, image proportions, typography, and button design. Each instance will be allowed to change its image, category, title, description, button label, and destination.

The Evolution Of Global Elements

Components extend Divi’s global elements with more granular control over synchronization inside nested layouts. You can expose a Heading module’s text inside a reusable card while keeping its font, size, and color managed by the source.

This makes one reusable design suitable for several content variations. You don’t need a separate Component for Brand Identity, Web Design, and Creative Direction when their cards share the same structure.

Components, Presets, And Variables

Divi’s reusable design tools have different roles:

• Components reuse elements and layouts, including their structure and synchronized settings.
• Presets reuse collections of settings, such as a heading style or button design.
• Design Variables reuse individual values, such as a brand color or spacing measurement.

You can use presets and variables inside a Component. For example, a button preset can supply its styling while the Component lets each instance use different button text. Our guide to using Design Variables with Presets explains the styling foundation.

Understand Shared Settings And Local Content

Before saving the first card, let’s distinguish the two editing contexts you’ll use throughout this tutorial.

Edit The Source To Change The Shared Component

Source editing gives you the complete settings for the reusable design. First select the module you want to change, then choose Edit Component from the Component menu beside its name. The source editor includes Component Settings and bottom Save and Cancel controls. Purple styling appears in both source and instance editing, so use those controls to check your editing context.

You use this mode to change the shared card design and decide which fields can be edited locally. Saving a source change asks you to confirm that it will update instances across your website. Check the source name before confirming.

Edit An Instance To Change Its Allowed Fields

Opening a connected instance shows the fields its source allows you to edit locally. A Heading might show only its Content tab, for example, because its typography stays under source control.

To return from source editing, save and confirm any source changes, then close its settings window with the X. Select the child module in the page instance again. You don’t need to detach it to edit an allowed content field.

Select the relevant child module to find its local fields. The outer Group might have no editable settings even though its Image, Heading, Text, and Button modules contain editable content.

Changing the Web Design card’s title in instance mode changes that card. Editing the source’s heading typography changes the synchronized typography across its connected instances.

Editable Fields Inherit Until You Override Them

Making a field editable allows customization; it doesn’t immediately give every instance a separate value. The field can continue inheriting its source default until you enter a local override.

Our source card starts with the title Brand Identity. A newly inserted instance can inherit that title. Changing one instance to Web Design gives that instance its own heading while leaving the source and other instances unchanged.

Resetting the local field removes its override and restores inheritance. This is different from typing the current source text manually: an inherited field continues following future source changes.

Before You Start

Use a Divi 5 installation that includes Components and open a page in the Visual Builder. You can follow along with a service card you already have or build the starting Group described below.

We’ll use Layers to select the correct containers and modules. Click its stacked-layers icon in the left builder sidebar, then use the arrows beside each layer to expand its children. If these controls are new to you, our guide to adding and organizing elements explains the builder’s section, row, column, and module hierarchy.

Download And Import The Starter Layout

Download the starter layout to follow along with the same design. It contains three ordinary service-card Groups, with no Components or Slots. We’ll create the Component connections during the tutorial.

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!

1. Create a blank practice page and open it in the Divi Visual Builder.
2. Open the Page Menu and choose Import to open the page’s Import & Export window.

Select the starter file and choose the import settings for your blank practice page:

3. Click Choose File and select components-starter-layout.json.
4. On this blank practice page, leave Replace Existing Content checked. Leave Download Backup, Import Presets, Import Components, and Import To New Canvas unchecked.
5. Click Import Layout. When the cards appear, save the page with the builder’s top-right Save button.

Use the page’s import controls for this file. The Component export and import controls covered later manage saved sources separately.

Use a blank page for this replacement import. If you need to preserve an existing design, export a backup first or enable Import To New Canvas to import onto a separate canvas.

The imported layout contains Brand Identity, Web Design, and Creative Direction as standalone cards. Keep all three until step 3, which explains when to remove the second and third Groups and replace them with connected instances.

Prepare The Service-Card Example

The starter contains three ordinary service-card Groups. Each holds an Image, category Text, Heading, description Text, and Button module.

In Layers, expand the first card Column and find the Brand Identity Group. We’ll save this Group as our Component. Its background, spacing, and module styling will be shared; the section introduction and three-column row remain ordinary page elements.

If you imported the starter, continue to step 1. For your own design, finish one card Group first; our equal column heights guide covers aligning cards of different lengths.

How To Create And Use A Service Card Component

We’ll save the Brand Identity Group as our source and make its content fields locally editable. Then we’ll insert it into the other two columns and customize those instances. Keep their visual settings synchronized so all three cards share one maintained design.

Terminology: A field is one setting, such as Heading text or Button Link URL. Making it locally editable allows an instance to use its own value. It does not detach the module or make its other settings independent.

1. Save The Card Group As A Component

Open Layers in the builder sidebar. Expand the service section, its card row, and the first column. Select the Group that contains the Brand Identity card’s five modules.

Click the Group’s layer to open its settings. At the top of that window, click the menu beside the element name and choose Save As Component.

In the Library window, name the item Service Card and keep Save As Component enabled. Save the Group as one reusable item; you don’t need to save its child modules as separate Library items for this tutorial.

Click Save To Library. Divi creates the shared source and connects the Group already on the page to it.

Be sure you selected the Group. Saving the entire section would also include the introduction and surrounding card layout, which is a larger reusable element than we need here.

2. Make The Card’s Content Editable

In Layers, select the Image module inside the first card Group. Open its Component menu and choose Edit Component, then expand Content > Image. You are now editing that module’s source settings.

When you select another module in Layers, check its editing context again. That selection opens the module’s page-instance settings. Save and confirm each source change before moving to another module, then choose Edit Component for the next module. This keeps the synchronization controls available for every field you need to expose.

Use the synchronization control beside the Image field, labeled Make this field editable on component instances. Hover over the field to reveal its controls. This allows each card to replace its photo while retaining the source’s image styling.

After enabling local editing, the control offers Use the source component value for this field. Leave that option untouched; clicking it would synchronize the field again. The screenshot shows the field with local editing enabled.

Alt text describes a photo for people using screen readers. Our example sets it through Custom Attributes, so each replacement photo needs a matching description.

In the source Image module, open Advanced > Attributes. If an alt attribute already exists, click its settings icon. Otherwise, click Add Attribute and create one with these settings:

• Admin Label: Image Alt.
• Target Element: Image.
• Attribute Name: alt.
• Attribute Value: A description of the source photo.

The label identifies this attribute in the builder; the alt name gives it its function. Keep one alt attribute for the Image element.

Close the Edit Attribute window using its X. Back in the Image module’s Attributes settings, make the Attributes collection editable on instances. This control belongs to the collection, not to the Attribute Value inside the smaller editing window.

Save and confirm the Image module’s source changes using the bottom Save button. Next, select the category Text module in Layers and choose Edit Component from its Component menu. Open Content > Text and make Body editable using the same synchronization control.

Body is the Text module’s content editor. Use its Visual tab to enter ordinary text, or its Text tab to inspect HTML. Save and confirm this source change before selecting the next module.

Select the Heading module in Layers, choose Edit Component, and open Content > Text. Make its Heading field editable, then save and confirm the source change.

Select the description Text module, choose Edit Component, and make its Body field editable under Content > Text. Save and confirm before selecting the Button module. In that module’s Edit Component settings, expose Button Text under Content > Text and Button Link URL under Content > Link.

You should now have these locally editable fields:

• Image: Image and the Attributes collection containing Image Alt.
• Category Text: Body.
• Heading: Heading.
• Description Text: Body.
• Button: Button Text and Button Link URL.

Leave the Group’s background, padding, corners, shadow, and layout synchronized. Keep image proportions, typography, and button styling synchronized too. We want different content inside the same card design.

Save the Button module’s source changes with the bottom Save button, then click Confirm when Divi explains that the update affects instances across your website. This saves the two Button fields you just made editable.

3. Insert Another Card From The Library

Close the Component source settings after saving and confirming. If you imported the starter layout, remove the ordinary card Groups from the second and third columns in Layers. Keep the columns themselves and the first card Group that you saved as the Service Card Component.

Select the now-empty second card Column, open Content > Elements, and click Add Element. In the picker, choose Add From Library and find Service Card in My Library.

Start with the Column’s insertion control, rather than one inside the first card Group. The new Group belongs directly inside its own column.

Open the item’s details and click Use This Module. The saved Group and its five child modules are inserted together as another instance of Service Card.

Repeat this in the empty third column. Keep one card Group per column. The optional conversion workflow below explains how to connect a compatible ordinary Group instead of replacing it.

You can also duplicate a connected Group on the page for another instance. A page duplicate carries its current local values, so review and change those values for the new service. Duplicating an instance keeps it connected to the same source.

4. Customize The Web Design Card

Select the Image module beneath the second card Group in Layers. The layer labels may still use the source’s Brand Identity names; use their position beneath the second Column to identify the Web Design card. You should be editing the page instance, without choosing Edit Component. Under Content > Image, click Edit on the image preview. Choose a suitable website or laptop photo from your Media Library, or use Insert From URL, then click Insert Into Page. Keep the image frame inherited from the source.

For its alt text, open Advanced > Attributes. If Image Alt is listed, click its settings icon and change Attribute Value to describe the new photo. If no entry is listed, click Add Attribute, choose alt, and use these settings:

• Admin Label: Image Alt.
• Target Element: Image.
• Attribute Name: alt.
• Attribute Value: A description of the replacement photo.

Close the attribute window after editing. Keep only one alt attribute targeting Image; remove any duplicate entry before continuing.

For a laptop photo, use a description such as Laptop on a wooden table displaying a mountain landscape. Choose words that describe your own replacement image.

Select the category Text module and enter 02 / DIGITAL in Body. Then select its Heading module and enter Web Design in Heading.

Select the description Text module and enter Thoughtful websites built around your goals. in Body.

Select the Button module and enter Explore websites in Button Text. Open Link and enter your actual Web Design service page URL in Button Link URL. If you use an anchor, make sure its matching ID exists on the page.

Our demonstration uses #web-design with a matching anchor on the page. Use your service page’s URL for a card that should open another page. If you want the same anchor behavior, follow our anchor links tutorial to create its destination first.

These values belong to the second instance. Its settings window shows the locally editable Heading field, while the card’s shared design stays connected.

Close the module settings using the X and click Save at the top right of the builder to save the page. You don’t use the source’s confirmation dialog for these local changes.

5. Customize The Creative Direction Card

Repeat the instance-editing process for the third card, using these values:

• Image: A different photo appropriate to creative work, with its own descriptive alt text.
• Category: 03 / CONTENT.
• Heading: Creative Direction.
• Description: One cohesive vision across every touchpoint.
• Button Text: Explore creative.
• Button Link URL: Your Creative Direction service page.

The first card can keep the source defaults for Brand Identity. The second and third cards now demonstrate local content variations inside the same shared design.

Save the page again after customizing the third card. There are two save operations in this workflow:

• Source changes: Use Save at the bottom of the Component editor, then confirm the site-wide update.
• Page changes: Use Save at the top right of the builder to retain instance content and the page layout.

6. Update The Shared Button Design

Select a connected card’s Button module in Layers, then choose Edit Component from that module’s Component menu. Change its shared button background from charcoal to a burnt orange that matches the section’s accent color.

Open Design > Button > Background and set the button background color to #B94F32. Keep this design field synchronized. Save and confirm the source update.

All three connected cards now receive the same button styling. Their local content and button URLs stay intact because those fields allow instance editing and retain their overrides.

You can now update the shared card design without editing each service’s content again.

7. Check Tablet And Phone Layouts

Use the builder’s tablet and phone previews to inspect the complete section. Our card row stacks into one column on smaller screens, and each Group fills its available column width.

The row’s responsive column arrangement belongs to the surrounding page layout. The card’s padding, image frame, and typography belong to its Component. Check both when adapting this example to another page.

Check for unexpected text wrapping using each card’s actual content; the source’s shortest default text won’t reveal every spacing problem. Save responsive source changes through the Component controls, then save any page layout changes on the page.

Reset A Local Value To The Source Default

An instance override is useful when a card needs different content. If you later want that field to follow the source again, reset it.

1. Open the Web Design card’s Heading module in instance mode.
2. Expand Content > Text and find Heading.
3. Use the field’s Reset control.
4. The heading returns to the source’s Brand Identity default.

The field now inherits future source changes. For this tutorial, enter Web Design again to restore the service-specific title before saving the page.

Changing a source field back to synchronized is a broader action. It makes the source authoritative for that field across connected instances, so review existing local content before changing synchronization rules.

Connect A Compatible Existing Card

You may already have several ordinary service-card Groups on a page. Divi can offer an existing Component as a conversion choice when the selected element has a compatible structure.

1. Select the ordinary Group you want to connect.
2. Open the menu beside its name in the settings window.
3. Under Convert To Component, choose Service Card.
4. Review every locally editable field and replace any content that adopted a source default.
5. Save the page.

Conversion connects the Group to the chosen source. Review every editable field afterward, including the image and button URL. A value from the ordinary Group may adopt the source default instead of becoming a local override. If the source is not offered, insert it from the Library and transfer your content into its editable fields.

Detach One Element Or The Entire Component

Detaching is useful when an element needs to become independently editable. Choose the smallest scope that suits the change.

Detach A Child Module

For example, suppose only the Creative Direction heading needs different typography. Right-click its Heading module in Layers and choose Detach From Component.

That Heading becomes locally editable with its full settings, including Design and Advanced. The rest of the card stays connected to Service Card.

To reconnect the same child module, right-click it and choose Attach To Component. Review the result, since reconnecting returns synchronized settings to the source’s control.

Detach The Whole Card

Right-click the outer card Group and choose Detach Component to make the entire card an ordinary page element.

The detached card keeps its current appearance and content, but future source updates no longer maintain it. Use this for an intentional one-off design. Keep recurring cards connected when they should continue sharing updates.

Manage Your Component Sources

Open the Components panel from the builder sidebar to manage saved sources. This is different from Layers: Layers shows elements on the current page, while Components lists reusable sources.

Name And Preview The Source

Choose Service Card to edit its source. Under Component Settings, give it a descriptive title. Use the preview icon beside the source title in its settings header to inspect the saved design and default content.

A Library title identifies the reusable source. A local heading such as Web Design identifies a particular card’s content. Changing one does not require changing the other.

Duplicate A Source For A Separate Design

Use the source’s Duplicate control in the Components panel when you want a separate reusable design. Rename the copy, for example Service Card — Variant, and save it.

Duplicating the source creates another Component you can maintain independently. Duplicating an instance on a page creates another connected use of the same source. Choose between them based on whether the new card should share future design updates.

Export And Import Components

Open Import & Export from the Components panel. In Export, give the file a recognizable name, such as Service Card Collection, and click Export Components to download the JSON file.

On the destination site, open the same window’s Import tab, choose the exported file, review the Import Presets option, and click Import Components. Including presets is relevant when the exported designs depend on them.

Review the imported design on the destination site, including images and links. Component portability and Design Variable portability are separate parts of moving a complete design system.

Where Components Are Most Useful

The service card is one practical example. The same approach works whenever several uses should share a structure while allowing selected content to vary:

• Team cards: Shared photo framing and typography with different names, roles, and biographies.
• Testimonials: Shared quote styling with different quotations and customer details.
• Promotional sections: Shared layout and button design with different headlines, images, and destinations.
• Pricing cards: Shared visual structure with editable plan names, prices, and descriptions.
• Reusable page sections: A maintained section design with carefully chosen local content fields.

Components can also be part of a wider system using presets and variables. Our guide to building a design system with nested and stacked presets covers the styling side of that workflow.

Tips For A Clear Component Workflow

• Finish one useful example first. Resolve spacing, button design, and responsive behavior before reusing it widely.
• Expose the fields that should vary. For these cards, that means content and destinations while the card design stays shared.
• Keep source defaults useful. A newly inserted instance should give you a sensible starting point.
• Check the editing context. Source changes affect connected uses; instance changes affect the selected use’s editable fields.
• Review synchronization changes. Returning a field to source control can replace local values.
• Give each image accurate alt text. Replacing a photo also requires checking its description.
• Test the longest real content. A design that fits Brand Identity still needs to accommodate Creative Direction.
• Save both contexts when necessary. Confirm source updates, then save page-specific content and layout changes.

Build Reusable Designs With Components

Our three service cards share their layout, image frames, spacing, typography, and button styling. Their images, titles, descriptions, and destinations can vary. One source update maintains their common design while each card continues presenting its own service.

Start with an element you already repeat, save it as a Component, and make its variable content editable. For more background, read the Components release announcement, or explore the rest of Divi’s website-building tools.

The post Exploring Components In Divi 5 appeared first on Elegant Themes Blog.

That structure is the strongest reason to look beyond a simple feature comparison. Below, we’ll explain the layers, compare them with other builders’ approaches, and show where Divi’s combination of reusable settings and visual controls can make a difference.

What Are Presets In Divi 5?

Presets save supported builder settings so you can reuse and manage them from one place. Instead of adjusting the same border, button treatment, or Scroll Effects settings separately, you edit the shared preset. Elements using those settings can then receive the change.

Divi provides two main preset types, supported by a separate system of reusable values.

Design Variables

Design Variables are the value layer. Define a primary brand color, give it a name, and reference it in supported fields. Presets can use those references, connecting reusable settings to centrally managed values.

Divi 5 supports six variable types: Colors, Fonts, Numbers, Images, Text, and Links. Content such as your company logo, a CTA URL, or a phone number can all be stored as variables, so the system handles both content management and design.

Open the Variable Manager from the left toolbar, choose a type, name the variable, and set its value. To use it, open the Dynamic Content picker on a supported field and select the variable.

Update the variable in the Variable Manager, and the fields referencing it use the new value.

Option Group Presets

Option Group Presets save settings from an individual group, such as typography, spacing, borders, shadows, or backgrounds. Open the group’s preset menu and choose New Preset from Current Styles to save a treatment you’ve created. The preset can then be selected on compatible groups elsewhere.

These presets follow a compatible option group rather than a single module type. For example, a Border preset can be reused wherever the matching Border group is available. Open that group’s preset menu and select it. You can also choose a default for the applicable group.

Editing the shared preset updates its connected uses. Local overrides or higher-priority settings can take precedence, so changing a preset does not necessarily replace every value on an element.

Element Presets

Element Presets bring supported settings together for a complete element. A Button preset, for example, can combine its typography, spacing, background, and border treatment. Open the element’s preset menu and choose New Preset from Current Styles to create one from your current design.

Element Presets belong to a particular element type. A Text module preset applies to Text modules; a Button module preset applies to Button modules. Option Group Presets provide the smaller, reusable pieces that can be shared between compatible groups on different elements.

Element Presets are available for sections, rows, columns, and modules. Select one from the matching element’s preset menu, or make it the default starting point for that element type.

How Other Builders Approach Reusable Design

Elementor, Bricks, Breakdance, and Oxygen all provide tools for consistent design. Their strengths deserve an accurate comparison: visual class editing is still visual editing, and reusable styles are not exclusive to Divi.

The useful distinction is how each builder organizes shared settings and variations. Divi’s case rests on the connections between its preset layers, rather than on other builders lacking design systems.

Elementor: Global Classes And Variables

Elementor’s earlier system included global colors, fonts, Theme Style settings, and Global Widgets. V4 expands reusable styling with global classes.

With Elementor’s classes, you can define styles visually and apply them to multiple elements. Editing a shared class updates the elements using it.

Image by Elementor on YouTube

Variables provide reusable values for those styles. For example, a color variable can supply several classes, so a brand color change does not require editing each class individually.

Image by Elementor on YouTube

This separates shared values from shared style rules, much as Divi separates variables from presets. The two systems pursue similar consistency goals through different editing models.

Elementor’s Class Manager helps organize the class library. It supports class management and ordering, while the editor lets you choose between a shared class and local styling.

Image by Elementor on YouTube

Clear names help make the intended use of each class understandable, just as meaningful preset names do in Divi.

Elementor also lets you convert local styles into a global class. A locally created variation does not have to be rebuilt to become reusable.

Image by Elementor on YouTube

Divi’s alternative is to organize reuse around option groups and element presets, then connect them through nesting and stacking. The difference is the structure of the workflow, not whether Elementor can reuse styles.

Bricks: A Visual Class-Based Workflow

Bricks’ Style Manager brings together classes, variables, theme styles, and tools for colors, typography, and spacing.

Image by Bricks – Visual Site Builder for WordPress on YouTube

This gives users a native place to organize their design system. Third-party frameworks may still offer their own conventions and features, so the manager should not be treated as a complete replacement for them.

Global classes can be styled visually and applied across elements. Shared class edits then carry through to their uses.

The active styling target matters. Selecting a class directs edits to that shared class; editing the element itself creates local styling. Checking the target helps avoid unintended overrides.

That distinction requires attention, but it is not a problem unique to Bricks. Divi users also need to distinguish editing a preset from changing an individual element.

For teams comfortable organizing styles as classes, Bricks offers a direct workflow. Divi’s option-group structure may be preferable when a team wants reusable settings organized around the builder’s controls.

Breakdance: Element And Typography Presets

Breakdance’s element presets save Design tab settings for reuse on elements of the same type. Changes to a preset update its linked elements, making them useful for maintaining consistent buttons, headings, and other elements.

Image by Breakdance on YouTube

Breakdance also offers typography presets, alongside global settings and class-based styling tools. It would be inaccurate to describe its reusable design features as limited to element presets alone.

Divi’s additional distinction is its general Option Group Preset system: compatible groups can be reused across element types and referenced inside larger presets, including other option presets.

Oxygen: Classes And Variables

Oxygen provides visual class editing alongside variables. Named values can be referenced within styles, separating the values from the rules that use them.

Image by Oxygen on YouTube

Apply a class to multiple elements, and shared edits affect those elements. Change a referenced variable, and the styles using that reference receive its updated value.

This is a natural fit for people who prefer a CSS-oriented design workflow, though writing CSS is not required for every change. Divi approaches reuse through preset-enabled builder settings, including settings that are not simply CSS declarations.

Where Divi 5’s Preset System Goes Further

Divi still uses CSS to render styles, and other builders also support reusable design. Its distinction is the combination of cross-element option groups, nested references, stacked variations, and composable controls in one preset workflow.

These features are most useful together. A small shared setting can become part of a button treatment, which becomes part of a complete module preset, while a separate preset supplies a variation.

Option Group Presets Work Across Compatible Elements

An Option Group Preset lets you reuse a specific treatment without importing an entire module design. A shared border or shadow can remain consistent even when the surrounding content, typography, and layout differ.

Create the treatment in its option group, then save it through the group’s preset menu.

You can then select that preset on another element with the matching option group. The example below shows an Option Group Preset being reused from an Image module on a Column.

Presets Go Beyond CSS

Divi 5 presets can store behavior settings as well as visual styles. Scroll Effects are a practical example: the settings that control how an element moves or changes as visitors scroll can also be saved and reused through presets.

For example, configure a subtle vertical movement on an Image module and save the Scroll Effects settings as an Option Group Preset. Apply that preset to other elements with the matching group to reuse the same motion settings without configuring each one separately. Editing the shared preset updates its connected uses, unless those settings have been overridden.

This goes beyond saving CSS declarations. Divi’s Scroll Effects use script-driven behavior to respond to scrolling, and presets preserve the builder settings that configure that behavior. You can manage a reusable motion treatment through the same preset workflow you use for borders, spacing, and typography.

That Scroll Effects preset can also be referenced within an Element Preset, bringing shared appearance and behavior together in a larger design. The benefit is a connected system for both how elements look and how they behave.

Nested Presets Create A Connected Hierarchy

A shared value handles one decision, such as a radius. A shared preset can handle a coordinated set of decisions, such as a border’s width, style, color, and radius. Nesting lets that reusable treatment remain connected inside a larger design.

Stacked And Nested Presets introduced connections between Option Group Presets and Element Presets. Nested Option Presets extend this to option presets inside other option presets.

For example, a Pill Border preset can be selected inside a Solid Button option preset. That Button preset can then be used inside a CTA Element Preset. The CTA contains a reference to the button treatment, and the button treatment contains a reference to the border.

These are connected references, not separate copies of the border settings. Updating the shared Border preset can therefore update buttons within the CTA presets that use it. A local override or a higher-priority preset can still take precedence.

The same Border preset can also be used directly on another compatible Border group. You can share one treatment across several designs without making those designs identical.

Composable Settings Extend The Preset’s Controls

Modules contain smaller elements, such as a Blurb’s title and image or a CTA’s button. Composable Settings let you expose additional controls for these parts.

Open Toggle Options on a supported sub-element group and enable the controls you need, such as Border, Background, Sizing, Transform, or Animation. This lets you work on the inner element directly rather than treating the module as one indivisible design.

You can enable these groups while editing a preset, so elements using it expose the same controls. With nested option presets, the supported inner groups can also reference reusable treatments.

That connects the layers: Composable Settings make a control group available, an Option Group Preset supplies its settings, and an Element Preset brings the design together. The preset can define both the treatment and which additional controls are available to edit it.

Stacked Presets Add Focused Variations

A base design often needs a few variations. Rather than duplicating a complete button preset for every color or size, you can separate the shared foundation from the settings that differ.

Stacking lets you apply multiple presets to the same element or option group. A base button preset can supply typography and spacing, while a focused variation changes its colors. The variation does not need to repeat the entire base design.

When stacked presets define the same setting, their order determines priority: the last preset in the stack wins. Local overrides can still take precedence. Keep variation presets focused on the settings they are meant to change so combinations remain understandable.

Nesting and stacking solve different problems. Nesting connects reusable pieces inside a larger preset. Stacking combines presets at the same level to create a variation. Together, they can reduce duplication without flattening your design system into unrelated saved styles.

The Preset Manager Brings The Layers Together

The Preset Manager lets you create and edit presets without first placing a sample element on the page. Search or filter the library, manage defaults, and preview a preset while working on it.

This makes it practical to build the relationships deliberately. Create a shared Border treatment, reference it within a Button option preset, and use that within a compatible Element Preset. Enable any needed composable groups while editing the preset. You can also build on the canvas and save useful treatments as the design develops.

Defaults provide a starting point for the matching element type or option group. For example, a default Shadow preset supplies its shadow settings; it does not define an unrelated border radius. Choose defaults intentionally, then use named variations where a design needs something different.

We cover how to build that library in our post on reusable Border and Shadow presets, which can serve as a jumping-off point for building libraries for other elements as well.

You can also move reusable work between projects. Both managers support import and export, allowing you to bring a variable and preset library into another Divi 5 site instead of rebuilding it from scratch.

We cover importing and exporting Presets and Design Variables in their respective guides.

What Makes This Approach Worth Choosing?

Divi 5‘s advantage is the depth of the connections. Variables supply reusable values. Option Group Presets share compatible settings across elements. Nested presets preserve those relationships inside larger designs, and stacked presets add variations. Composable Settings extend the controls available within that structure.

A practical system might have one shared Border preset feeding several button treatments, those treatments feeding CTA presets, and a stacked variation adjusting a particular CTA’s colors. A shared Scroll Effects preset can supply motion behavior too, so the system governs more than a site’s static appearance.

For teams that prefer to manage these relationships through builder controls, that is a compelling reason to choose Divi 5. Class-based builders offer capable alternatives; Divi’s strength is giving reusable settings a connected, granular structure that you can manage visually.

The post What Makes Divi 5 Presets Unique (And Better Than The Competition) appeared first on Elegant Themes Blog.

These designs work as starting points for SaaS websites, technology companies, software products, creative studios, agencies, and other digital-first brands. Import a hero, replace the sample copy and visuals, and adapt the colors and interface elements to your own project.

The collection explores several different approaches to UI-focused hero design. Some put the interface itself at the center of the composition, while others use cards, dashboards, grids, and supporting content to build a stronger sense of product context.

Preview

Here’s a look at the seven UI Hero Sections included in the pack. The download is further down the post.

The designs range from restrained layouts with a single interface preview to more layered compositions built from several UI cards. This gives you options for products that need a straightforward introduction as well as pages where the interface itself should become a major part of the visual identity.

Download 7 UI Hero Sections For Divi 5

Get all seven hero sections for free. Download the ZIP file, unzip it on your computer, and import the included JSON files into your Divi Library.

Download the Files

Download For Free

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

DOWNLOAD

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

What’s Included (8 Exports)

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

• UI Hero Section 1.json
• UI Hero Section 2.json
• UI Hero Section 3.json
• UI Hero Section 4.json
• UI Hero Section 5.json
• UI Hero Section 6.json
• UI Hero Section 7.json
• UI Hero Sections (All).json

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

Each section is already styled with example typography, interface imagery, calls to action, spacing, and supporting visual elements. Treat them as starting points rather than finished pages, then replace the example content with assets that represent your own product.

A Closer Look At The UI Hero Designs

The collection uses interface imagery in different ways. In some sections, the product preview acts as one large focal point. Others break the interface into several cards or panels so visitors can understand different parts of the product before they scroll any further.

A Product Dashboard As The Main Visual

One of the darker designs places the headline and supporting feature copy above a large dashboard-inspired composition. Bright gradients behind the interface cards create contrast against the dark section while keeping the product UI at the center of attention.

This kind of hero works well for SaaS platforms, analytics products, AI tools, and other applications where showing the interface immediately helps explain what the product does.

When adapting the section, replace the sample UI imagery with your own screenshots or mockups. Keep the most important interface elements large enough to remain recognizable rather than trying to show every screen at once.

A Modular System Built From Multiple Cards

Another design takes a lighter editorial approach, combining a large headline with several vertically arranged UI cards. Instead of showing one complete dashboard, the composition presents the product through several separate visual components.

This can work especially well for platforms with several distinct tools, workflows, or features. Each card can represent a different part of the system while the headline provides the larger message tying everything together.

The cards also give you more flexibility when replacing the example content. You can mix screenshots, statistics, diagrams, profile cards, or other product visuals without requiring every asset to use the same proportions.

How To Use The UI Hero Sections

Keep your unzipped download folder handy. We’ll import one of the sections into Divi, add it to a page, and then customize the content and UI visuals.

1. Import The Hero Sections Into The Divi Library

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

Open the Import tab and click Choose File. Select one of the individual UI Hero Section JSON files, or choose UI Hero Sections (All).json to import the entire collection. Click Import Divi Builder Layouts and wait for the import to finish. Select the JSON file itself rather than the ZIP archive.

2. Add A Hero Section To Your Page

Open your page in the Visual Builder and add a new section where you want the hero to appear. Choose Add From Library, select the imported hero, and click Use This Section.

The imported section gives you the complete starting composition. Before changing individual modules, take a moment to review its overall structure in the Layers panel. UI-heavy designs often rely on several neighboring or overlapping elements to create the final composition.

3. Replace The Headline And Supporting Copy

Start with the primary message. Open the heading settings and replace the example text with a concise headline that explains the product, service, or outcome visitors should understand first.

Then work through the supporting copy. Depending on the selected hero, this may include a short description, labels, feature descriptions, statistics, or smaller pieces of UI-related text.

Keep the initial wording reasonably close to the amount of content used in the original composition. A significantly longer headline can change wrapping and push the interface preview further down the section.

4. Update Buttons And Calls To Action

Replace the sample button labels with actions that make sense for your website, such as starting a trial, exploring a product, booking a demo, or viewing more information.

Update the destination URLs at the same time. If the hero contains more than one call to action, give each one a distinct purpose rather than sending both buttons to the same place.

Review the visual hierarchy as well. The primary action should remain easier to notice, while secondary links or buttons can use a quieter treatment.

5. Replace The UI Imagery

The interface visuals are one of the most important parts of these hero designs. Replace the sample images with screenshots, mockups, dashboards, cards, or other visuals from your own product.

Pay attention to the role each image plays in the composition. A large central screenshot can contain more detail, while a smaller floating card should communicate one clear piece of information at a glance.

Try to keep replacement assets close to the proportions of the originals. If the aspect ratio changes dramatically, review the image sizing and crop so the surrounding composition remains balanced.

For layered designs, use the Layers panel when an image is difficult to select directly on the canvas.

6. Adapt The Colors To Your Brand

Replace the sample colors with your own palette while preserving the contrast that makes the interface elements readable.

Dark UI heroes can work particularly well with bright accents, gradients, or illuminated interface cards. Lighter layouts may benefit from a more restrained palette where one or two stronger accent colors guide attention toward important elements.

If you plan to reuse colors throughout the site, save them as Design Variables and assign those variables to the relevant settings. This makes later palette changes easier to manage.

7. Refine The Supporting UI Elements

Some of the heroes use more than a simple screenshot. Cards, labels, framed images, decorative panels, buttons, and smaller content blocks all contribute to the interface-inspired look.

Use Divi 5’s Composable Settings when you need additional styling controls for a module sub-element. This can be useful when adjusting backgrounds, borders, spacing, transforms, and other settings without introducing additional elements simply for styling.

Keep decorative UI elements secondary to the actual message. The composition should feel detailed without making visitors search for the headline or primary action.

8. Check The Hero Across Breakpoints

Review the completed section on desktop, tablet, and phone. Interface-heavy hero designs can require more responsive adjustment than a simple text-and-image layout because several visual elements may share the same space.
Check headline wrapping, card sizes, image crops, button placement, spacing, and the order in which supporting UI elements appear.

On smaller screens, prioritize clarity over reproducing the exact desktop arrangement. Reduce oversized interface previews where necessary and give important text and actions enough room to remain easy to read and select.

Preview the page outside the builder as well and confirm that the hero does not introduce unwanted horizontal scrolling.

Tips For Effective UI Hero Sections

UI-focused heroes work best when the interface helps explain the product rather than acting only as decoration.

Show The Most Recognizable Part Of The Product

You rarely need to fit the entire application into the hero. Choose the dashboard, workflow, feature, or screen that communicates the product most quickly.

A focused screenshot usually creates a stronger composition than shrinking a large interface until none of its details can be understood.

Create A Clear Visual Hierarchy

The headline, call to action, and primary interface preview should remain the most important elements. Smaller cards and decorative UI components can provide context without competing with those focal points.

When several cards are used together, vary their scale or placement so they read as one composition rather than several equally important boxes.

Keep Interface Details Legible

A UI mockup may look impressive at full resolution but become unreadable once placed inside a hero. Avoid relying on tiny labels or statistics to communicate essential information.

Let the overall interface shape establish context, then use larger text outside the screenshot to explain what visitors need to know.

Use Contrast To Separate The UI From The Background

Give interface previews enough visual separation from the surrounding section. A subtle border, shadow, background panel, contrasting surface, or gradient can help the UI read as a distinct layer.

The effect does not need to be dramatic. It only needs to make the product visuals easy to distinguish from the page around them.

Replace Generic UI With Real Product Context

The included interface imagery helps establish the composition, but replacing it with visuals from your own product will make the hero substantially more useful.

Use real screenshots where possible, or create simplified mockups that accurately represent the experience visitors will find after clicking through.

Start Building In Divi 5 Today!

These 7 UI Hero Sections give you ready-made starting points for introducing software, products, services, and digital experiences with a strong interface-led visual direction.

Import the design that best fits your project, replace the example UI and copy, and adapt the typography, colors, and calls to action to fit your brand.

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

The post 7 UI Hero Sections 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.15 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.15?

The update includes 89 bug fixes and improvements, as well as a major new feature: Components and Slots.

Introducing Component and Slots

Components and Slots have arrived, introducing a completely new way to build reusable designs in Divi 5. 🎉

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

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

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

Take the full feature tour. 👇

What’s Coming Next?

We’re working on a broad range of improvements that will make Divi 5 faster to work with, easier to collaborate in, and more flexible for building custom websites.

Our focus includes refining everyday editing workflows, expanding design system tools, bringing more intelligence and automation into the builder, and making it easier to create, organize, and reuse content and assets. We’re also exploring new ways to build together and give you greater control over interactive experiences. As this work takes shape, you can expect Divi 5 to help you spend less time on repetitive tasks and more time bringing your ideas to life.

Out of all the new things we are working on, some of my favorites include:

1. Variable modes and groups
2. Site-wide management tools like find-and-replace and asset cleanup.
3. Divi Library/Divi Cloud for more things like AI rules, commands, presets, and variables.
4. Many AI Agent improvements, like plan mode, voice support, AI module creation, and more.
5. New asset library for custom fonts and icons.
6. Lots of new modules.
7. Efficiency enhancements like multi-select and bulk editing.

We are also working on surfacing all of Divi’s AI tools as an MCP, so you can work with your Divi websites using AI agents both inside and outside the builder, with the AI subscription of your choice.

Changelog

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

• Improved AI Agent image replacements so page-wide placeholder and semantic photo updates use far fewer tokens.
• Fixed the Divi Builder button appearing for users without permission to toggle the Divi Builder.
• Fixed inline SVG stroke colors and widths not rendering in the SVG and Code modules.
• Fixed Divi 4 Video play-icon hover CSS applying when hovering the whole module after migration.
• Fixed nested module entrance animations not playing after the first Group Carousel slide.
• Fixed Woo Product Add To Cart modules in Loop Builder so eligible products honor WooCommerce’s archive AJAX add-to-cart setting without leaving the Shop page.
• Fixed Visual Builder freezing when editing large HTML in the Code Module.
• Fixed Gallery Slider Image Design styles so that width, alignment, border, and box shadow render on the photos.
• Fixed enabling the Divi Builder on the WooCommerce Shop page when the Classic Editor is enabled.
• Improved Divi AI agent efficiency by keeping only the latest page layout in later AI requests.
• Fixed the Visual Builder module settings panel appearing to shake when hovering the scrollbar in modules with long settings content, such as the Gallery module with many images.
• Fixed background image blend modes not applying in the Visual Builder and frontend when inherited from presets.
• Fixed Pricing Tables Vertical Gap default of 0 is not applying in the Visual Builder or on the front end.
• Fixed the Woo Product Rating spacing margin-bottom spinner when using three-decimal values and stopped showing a misleading default margin in module spacing settings.
• Fixed Group Carousel equal-height behavior in frontend and Visual Builder by ensuring structural flex layout rules are always emitted.
• Fixed an issue where sticky posts appeared at the top of every paginated Loop Builder page instead of only the first page.
• Fixed Contact Form submissions, allowing line breaks from submitted name or email values to reach mail headers.
• Fixed custom fields assigned to user role forms not rendering in the Person module’s Position field (or any custom field dynamic content) on Theme Builder templates.
• Fixed misleading global module save warning when changing an image on a global module instance with selective sync disabled for that image field.
• Fixed WooCommerce category and stock product filters not updating products when the shop page uses a Divi 5 Theme Builder template with the Woo Products module.
• Hovering empty Responsive Editor CSS rows no longer changes the active breakpoint while you edit custom CSS in the Visual Builder.
• Fixed Price Range fields overflowing narrow Post Filter module containers.
• Fixed the Bar Counters fill animation so it plays smoothly after reloading Visual Builder.
• Fixed Blurb Layout justify content and related flex alignment options not applying when the module had min-height or height, including with left or right icon placement.
• Fixed an issue where Global Colors could not be scrolled in List View when opening the Color Picker from a Background Gradient stop.
• Fixed Divi AI Agent not applying Fade, Blur, Rotate, Horizontal Motion, and Scaling scroll effects.
• ePanel custom keywords no longer log an undefined `$postid` warning on no-post requests, such as 404 and empty-search pages.
• Fixed Gutenberg video URLs appearing in Visual Builder loop excerpts.
• Fixed nested Group modules inside a Group Carousel slide, incorrectly labeled as “Carousel Slide” in the Visual Builder Layers panel.
• Fixed WooCommerce product images disappearing after automatic Post Filter updates.
• Fixed Transform Skew errors in hover and responsive editing when the desktop value was blank.
• Fixed an issue where Grid Offset rules configured in the Gallery module rule editor did not save after closing module settings.
• Fixed generated headers to use the configured site logo or Site Title Dynamic Content.
• Fixed the WooCommerce Return to Shop button shifting when hovered.
• Fixed Tooltip so an open tooltip stays with its target when scrolling instead of sticking to the bottom of the screen.
• Fixed global module instances and selective-sync descriptors not migrating legacy form field focus styling paths.
• Reduced duplicate Dynamic Content options requests when editing modules with many dynamic fields.
• Fixed the Post Filter module showing a select dropdown arrow on mobile when the field type was set to checkbox (or another non-select type) for that breakpoint.
• Added safeguards to avoid variable data loss in the event of an unforeseen future bug leading to incorrect variable array merging.
• Global modules are now components, including a host of new functionality.
• Improved performance of editing sub-elements within a parent component, ensuring the save operation does not cause re-renders that slow down module adding/deleting/duplicating.
• Added a new method for converting static modules into existing components, mapping static attributes to matching unsynced attributes within the component.
• Components now support select sync on nested module attributes.
• Introduced a new component editing mode, which separates the editing of local and global component attributes.
• Fixed a bug where multiple instances of the same component could get out of sync when moving modules nested within the parent component.
• Added the new Slot module, which can be used inside a component to create slots of local-instanced modules within the global component.
• Saving confirmation is no longer required when navigating between different nested modules within the same parent component.
• Presets can now be applied on the local instance on top of presets moused within components.
• The selective sync icon for components was moved from the left of fields into the existing field label icon group for consistency.
• Fixed a bug where the back button didn’t display properly when editing a module within an unsynced elements group within a component.
• Fixed dragging nested modules out of a component and then back into a duplicate instance of the original component; now that removable/addition from and to the same parent module acts as a module move within the parent component.
• Detached global module attributes now inherit default values from the parent component.
• Components now import and export with layouts similar to presets and variables.
• Added dedicated components importer and exporter.
• Added new components manager and editor panels, allowing you to edit, delete, and duplicate components in the visual builder instead of having to visit the Divi library.
• Nested modules within components can now be completely detached and worked with at the instance level within a parent component.
• Improved performance of resizing and moving undocked panels.
• Components can now have other components nested inside them (for example, a section component supports additional module components).
• Fixed components rendering in the wrong order in the wireframe view when the wireframe view was set as the default workspace view mode.
• Fixed broken components when imported via the attached theme builder layouts.
• Added a new AI Agent tool for deleting and duplicating components.
• Added a new AI Agent tool for converting modules to existing components.
• Added a new AI Agent tool for saving modules as components.
• Added a new AI Agent tool for updating component attributes.
• Fixed an issue where Loop Builder meta queries using Field Exists (EXISTS) did not filter posts correctly in the Visual Builder when the meta value was left empty.
• Fixed AI Agent removing before and after text from dynamic content in Text Modules when generated layouts used dynamic dates or years.
• Fixed Divi AI nested submenu options not lining up with the parent item when the WordPress admin bar was enabled in Visual Builder.
• Fixed ConvertKit (Kit) Email Optin not showing account custom fields after Fetch Lists when Kit Settings defined subscriber custom fields.
• Fixed multiple Component issues, including incorrect frontend rendering for nested Components, stale selective-sync values on the frontend, broken Cancel when editing nested Component sources, invalid drag-and-drop across Slots and synchronized structure, and prevention of self-referencing Component saves.
• Fixed the Button module left-aligned custom icons so they no longer overlap the text when a hover icon color is set.
• Fixed canvas images whose filenames contain a `u` followed by four hexadecimal characters.
• Fixed Post Carousel Carousel Item Title Text composable settings applying to the module wrapper instead of the item title.
• Fixed Blog module Read More link text on the frontend so it matches the Visual Builder preview when Show Read More Button is enabled.
• Fixed Call to Action unordered-list styles not being preserved during Divi 4 to Divi 5 migration.
• Fixed frontend Module Elements custom CSS output for Post Filter and Post Filter Item modules.
• Fixed the Tab module child parallax background images so they display immediately when switching tabs.
• Fixed Loop Builder excerpts so HTML and line breaks render on the live page when the Number of Words is set.
• Fixed Row sticky background colors not rendering in the Visual Builder when the Row is inside a sticky Section.
• Fixed frontend styles breaking on a layout when a spacing value contained an invalid character.
• Fixed the Map module address field not clearing its visible text immediately after reset when a location had been found with the Find button.
• Fixed an issue where a custom z-index was ignored while an element was sticky, so sticky elements could not stack in the configured order.
• Fixed missing global color names in module settings after the AI Agent converts repeated colors into global variables.
• Fixed an issue where the Divi Library save action could overwrite a post that the current user is not allowed to edit.
• Fixed Visual Builder crash in the Portfolio module when Post Count contained a space.
• Fixed automatic Post Filter options for ACF choice fields to display configured choice labels instead of stored values.
• Fixed the wrong button icon with uppercase text enabled.
• Fixed Background Patterns and Masks not rendering when applied from an Element Preset or a Background Option Group Preset.
• Fixed Instagram Feed modules being limited to 24 posts.
• Fixed an issue where importing certain pages and layouts from the library wasn’t working in the builder.

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

The settings tell us what each rule does, but it can be harder to picture how several rules affect the same grid.

The CSS Grid Editor makes that relationship visible. We can resize items to create rules, see which items an existing rule affects, and adjust its values as the layout responds.

In this tutorial, we’ll read and edit Grid Offset Rules visually, create individual and repeating targets, and adjust their values for smaller screens.

How Grid Offset Rules Work

Before adding rules, it helps to understand automatic placement. In a basic grid with row-based flow and no placement overrides, child elements fill the available cells in each row before moving to the next. So, eight single-cell items in a four-column grid form two rows of four.

Grid Offset Rules change the placement of selected items. We can give a featured post more room, position a promotional card, or repeat a span across the grid while other items continue filling the available space automatically.

To add a rule, open the grid container’s Design → Layout settings and scroll to Grid Offset Rules.

What A Rule Is Made Of

Each rule has a target and one or more placement values.

The Target Offset dropdown determines which items the rule affects. Options include First Item, Last Item, Even Items, Odd Items, and repeating targets from Every Third Item through Every Tenth Item. For a different position or pattern, choose Custom nth-child Rule.

For example, First Item affects only the first item. Every Fourth Item affects items 4, 8, 12, and so on. Even Items targets items 2, 4, 6, and every second item after that.

Next, enter the values that control placement:

• Column Start and Row Start specify the grid line where an item begins.
• Column Span and Row Span specify how many columns or rows it covers.
• Column End and Row End specify the grid line where it ends.

A start or end value refers to a grid line, while a span counts the tracks between lines. For example, starting at column line 2 with a Column Span of 2 covers the second and third columns.

We’ll mainly use starts and spans in the examples below.

Even a complex pattern comes back to two questions: which items does the rule target, and how does it change their placement?

Rules Live On The Container

Grid Offset Rules belong to the Section, Row, Column, or Group that defines the grid. They target child items within that container, keeping the placement pattern separate from each item’s content.

In the example below, we increase Grid Items from 8 to 11 to preview the pattern with more items. The existing 4n+2 and 4n+3 rules apply to the additional matching positions without needing another rule.

The Grid Items control lets us visualize a pattern with placeholder items. Increasing this count is not the same as adding content modules or changing how many results a Loop returns.

On the page, the container’s rules apply to the actual matching child items as content is added, duplicated, or looped.

Rules Count Items In Source Order

Offset targets count items in their source order, not by their apparent position on the finished grid. For manually added elements, Layers View helps us follow that sequence.

Consider a four-column grid where the first item spans two columns and two rows. With the remaining items using automatic placement and a single-cell span, items 2 through 5 fill the space beside it. Item 6 then begins the third row.

Although item 6 appears to be the first item in that row, it is still the sixth in the sequence. To target it individually, use Custom nth-child Rule with a value of 6.

Spanning or visually repositioning an item does not change its source position. However, inserting, removing, or reordering items in the structure can change which content occupies a targeted position.

Where The Grid Editor Fits

The settings panel gives us direct access to each rule’s target and values. As more rules interact, though, it becomes harder to picture the result from those values alone.

The Grid Editor brings the structure, items, and rule indicators into one view. We can compare the values in the settings panel with the space each item occupies on the canvas.

This makes it easier to identify which rule is widening an item, why another item has moved, or where a repeating pattern leaves an empty cell.

Working With Grid Offset Rules In The Grid Editor

We’ll start with placeholder grids so each change is easy to follow. The same placement principles apply to grids containing modules or items generated by a Loop.

Opening The Grid Editor

For a new Row, choose a Grid structure from the Insert Row window. Open the Row’s settings and click Open Grid Editor.

For an existing container, make sure its Layout Style is set to Grid, then use the Open Grid Editor button in its settings.

The editor opens over the Visual Builder and displays the grid’s structure and numbered items. Rule indicators appear on the affected items, so we can read the layout and its placement rules together.

To test a longer pattern, increase the preview’s item count. In the example below, we change the grid from three to five columns and increase Grid Items from four to twelve. The existing repeating rules continue applying to matching positions.

Changing the column count changes the grid structure. Changing the preview item count helps us see how that structure and its rules handle more content.

Creating Rules By Dragging

Resizing an item on the canvas creates the corresponding Grid Offset Rule on its container.

Hover over an item and drag a corner anchor across the cells it should cover. In the example below, dragging the first item’s bottom-right corner one column to the right and one row down makes it span two columns and two rows.

Open the generated rule to see the target and its Column Span and Row Span values.

We can resize other items in the same way. Here, we stretch item 8 across a four-column row. The resulting rule targets position 8 with a Column Span of 4.

Checking the generated values helps connect the visual action to the rule. We can then refine that rule from the settings panel.

Creating Rules From The Rule List

We can also create a rule directly from the container’s Design → Layout → Grid Offset Rules settings. To match the example below, click Add Grid Offset Rule and enter:

• Target Offset: Custom nth-child Rule
• Custom Nth-Child Rule: 5
• Column Span: 3

This targets only item 5 and makes it span three columns. The other rules already present in this example give items 1 and 8 their wider spans.

For a repeating variation, choose Every Fifth Item instead and set Column Span to 2. That rule targets items 5, 10, 15, and so on. Increase the preview’s Grid Items count if you want to see more than one match.

A spanning item may move to the next row when it cannot fit in the remaining cells. With normal row-based placement, this can leave an empty cell behind. Dense placement can allow later items to fill such gaps, so the result also depends on the container’s flow settings.

Reading Rules On The Canvas

The canvas labels help us identify which rules affect each item. In the example below:

• 4n+2 targets items 2, 6, 10, and so on.
• 4n+3 targets items 3, 7, 11, and so on.

Read these as “start at the second or third item, then repeat every four items.” Only matching positions within the current preview count will appear.

Match the rule in the list with its indicators on the canvas, then check the numbered items it affects. This is especially useful when spans make the visual arrangement differ from the item sequence.

Editing Rules

Open an existing rule from the Grid Offset Rules list while keeping the canvas visible.

In this gallery, a 9n+3 rule gives item 3 a Column Span of 2. That target also matches items 12, 21, and subsequent positions if the grid contains enough items.

Change Column Span to 1 and set Row Span to 2. Item 3 changes from a wide placement to one that occupies two rows, and the surrounding items adjust as the values change.

Use an Admin Label to make a rule easier to recognize later. Names such as “Feature Card Span” or “Wide Every Fifth” are more useful than a generic label when several rules are active.

Deleting a rule removes its placement instructions. The affected items return to automatic placement where no other rule or setting controls their position or span.

Multiple rules can affect the same item. For example, one can set its Column Span while another sets its Row Start. If overlapping rules assign different values to the same property, they compete. Keep those overlaps intentional and check the result on the canvas.

Rules On Tablet And Phone

A grid can use a different column count at each breakpoint. In this gallery, desktop uses four columns, tablet uses three, and phone uses one.

The rules still target the same item positions, but their placement values may need responsive overrides. Switch to the breakpoint you want to adjust, then open the Grid Editor to inspect the layout.

In this example, the existing spans still work within the three-column tablet grid. We can keep them, while checking that the content remains readable and the spacing still suits the smaller screen.

The phone layout needs more adjustment. An inherited two-column span does not become a single-column span simply because the container now has one column. It can introduce an extra grid track and disrupt the intended stack.

For the item shown here, set Column Span and Row Span to 1 at the phone breakpoint. This gives it a single-cell placement in the one-column layout.

Enter explicit phone values where needed. Clearing a responsive value can restore an inherited value from a larger breakpoint rather than remove the span.

If other rules specify start or end lines, review those too. A single-column layout should not retain instructions that place an item in a second or third column.

Finally, check the layout with its actual content at each breakpoint. Placeholder items make the placement pattern easier to read, while the page preview shows how images, text, and spacing fit within it.

Try The CSS Grid Editor In Divi 5 Today

The Grid Editor in Divi 5 connects placement values to their visible effect. We can see which items a rule targets, how their spans change the layout, and whether a repeating pattern still works with more content or fewer columns.

Start with the item’s number, identify the rule affecting it, and adjust the relevant start or span value. That gives us a practical way to understand an existing grid and refine it without keeping the entire layout mapped out in our heads.

For more examples, explore how we built an asymmetric photo gallery with the Grid Editor and how repeating targets work in Build Fancy Loops With Divi 5’s New CSS Grid Editor.

The post How To Read And Edit Grid Offset Rules Visually In Divi 5 appeared first on Elegant Themes Blog.

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

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

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

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

Components Are The Evolution Of Global Elements

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

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

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

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

Customize Component Instances With Selective Sync

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

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

Detach Attributes From Nested Modules

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

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

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

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

You decide what remains global and what becomes local.

Inherit Global Values Until You Override Them

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

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

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

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

Detach And Reattach Nested Modules

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

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

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

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

Local And Global Settings Are Clearly Separated

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

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

Edit Local Settings In Instance Mode

Opening an attached Component starts in instance mode.

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

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

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

Edit Global Settings In Component Mode

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

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

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

Build Unique Local Layouts With Slots

Components become even more powerful with the introduction of Slots.

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

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

Slots Allow Freeform Design Within A Synced Global Structure

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

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

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

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

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

Components Are First-Class Citizens In The Divi Builder

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

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

Create From And Convert To Existing Components

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

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

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

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

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

Manage Everything In The Components Manager

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

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

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

Nest Components Inside Other Components

Components can now contain other Components. 🤯

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

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

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

Components, Presets, Variables, And Slots Work Together

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

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

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

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

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

Import, Export, And Load Components Faster

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

Import And Export Components

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

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

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

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

Load Components Instantly

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

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

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

Manage Components With The Divi AI Agent

The Divi AI Agent can now work directly with Components.

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

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

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

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

Try Divi Components And Slots Today

Components and Slots are now available in Divi 5.

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

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

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

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

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

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

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

Meet Divi AI Agents

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

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

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

How Context And Scope Work In Divi AI Agents

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

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

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

Then send this request in Build Mode:

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

How To Add Context In Divi AI Agents

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

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

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

Choose The Right Context For The Task

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

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

1. Use Presets For Saved Styles

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

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

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

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

2. Use Variables For Reusable Values

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

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

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

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

3. Use Elements As References From The Current Page

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

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

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

4. Use Tools When The Method Matters

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

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

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

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

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

5. Reference Canvases And Other Site Content

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

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

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

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

6. Use Files, Images, And URLs As References

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

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

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

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

Save Context Inside Commands And Rules

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

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

Add Context To A Rule

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

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

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

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

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

Add Context To A Command

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

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

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

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

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

Save Context That Still Makes Sense Later

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

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

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

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

Keep Context Focused

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

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

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

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

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

Give Divi AI Agents Better Context

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

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

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