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

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

How Divi AI Agents Pricing Is Calculated

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

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

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

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

What The $5 Monthly Balance Covers

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

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

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

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

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

The Four Auto Tiers

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

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

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

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

Which Model Is Worth Paying For

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

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

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

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

Comparing Results: What You Get For The Extra Cost

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

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

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

Custom Models And Reasoning Effort

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

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

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

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

Keeping Spend Predictable

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

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

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

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

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

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

What Ask Mode Does In Divi AI Agents

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

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

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

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

How To Switch To Ask Mode

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

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

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

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

Ask Whether To Use Flexbox Or CSS Grid

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

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

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

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

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

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

Ask Follow-Up Questions To Find The Exact Setting

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

We followed up with:

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

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

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

Ask What Your Page Structure Needs Before A Redesign

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

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

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

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

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

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

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

Switch To Build To Make The Changes

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

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

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

Use Ask As On-Demand Divi Support

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

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

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

In 2026, AI website-building tools generally take three different approaches. Some create websites hosted on their own platforms. Others generate a codebase you can develop and deploy. And a third category builds directly inside a visual editor, giving you a website you can continue working on without relying on AI for every change.

Each approach has its advantages, but for businesses that want a website they can comfortably manage and grow, a visual builder with an integrated AI agent makes a compelling case. Let’s explore why, where tools like Divi 5 fit in, and what matters when choosing the right foundation for your website.

A Prompt Is Not a Website

A prompt is just a request. What happens after you submit it depends entirely on the tool you’re using.

Two AI builders might produce remarkably similar homepages from the same description, but what you get behind the scenes can be very different. One gives you a website tied to its hosting platform, another generates a software project, and a third creates editable elements inside a visual builder.

That distinction matters more than you might think, especially when it’s time to make changes.

1. A Hosted Website

Tools like Wix Harmony, Hostinger AI Website Builder, Durable, and Framer help you create and publish websites within their own ecosystems.

They’re convenient because the editor, hosting, and publishing tools are all part of the same service. You don’t have to arrange separate hosting or manage a complicated deployment process.

The trade-off is that your website remains tied to the platform’s infrastructure and available editing tools. You can customize your design, but moving the entire website elsewhere may require rebuilding it.

2. A Codebase

Platforms like Lovable, Bolt, and v0 take a different approach. Instead of producing a page within a traditional website builder, they generate the underlying code for a website or application.

That opens up possibilities for projects requiring custom functionality, user accounts, databases, or interactive dashboards. You can also connect projects to GitHub, modify the code, and deploy them using supported hosting services.

These platforms increasingly offer visual editing and AI-assisted updates, too. But the finished project still has a codebase and technical dependencies that someone needs to maintain.

For a complex web application, that flexibility can be invaluable. For a small business website with a few informational pages, it may introduce more complexity than necessary.

3. A Page In A Visual Builder

The third approach brings AI directly into a website-building environment where the result remains visually editable.

For example, Divi AI agents work inside the Divi 5 Visual Builder on WordPress. Rather than delivering a separate code repository or locking the website into a hosted SaaS editor, the Agent can create and modify native Divi elements, including sections, rows, columns, and modules.

Elementor’s Angie offers a related approach within WordPress, with capabilities for generating pages, widgets, design systems, and other site functionality.

The appeal is straightforward: AI helps you create the website, but you can still open the visual editor and make changes yourself.

Hosted Builders Make Launching Easy, But Moving Can Be Harder

If your priority is getting a website online quickly, hosted AI builders have plenty going for them.

You describe your business, choose a direction, and let the platform handle much of the initial work. Hosting and publishing are already integrated, so there’s less technical setup to worry about.

The biggest limitation usually becomes apparent when you want to move away from the platform.

Wix Harmony: Wix combines its visual editor with Aria, an AI assistant that can generate pages, layouts, colors, copy, and images from a description of your business.

You can continue asking Aria to make changes or edit the website manually. That flexibility makes Wix attractive to business owners who want to manage everything in one place.

However, Wix websites depend on the company’s infrastructure. You cannot export the complete site for independent hosting, and an AI-generated Harmony site cannot simply be switched to a different template later. You can transfer a Premium plan to another Wix site, but that’s different from moving the existing design to another platform.

Hostinger, Durable, and Framer: These platforms offer different ways to simplify website creation.

Hostinger combines its AI website-building tools with hosting and a visual editor, making it convenient for businesses that want a bundled solution. However, the website remains dependent on the hosting service and its supported migration options.

Durable focuses on quickly generating business websites, with built-in hosting and editing tools. It’s particularly appealing when you want a relatively straightforward online presence without spending much time on setup.

Framer gives designers more advanced visual control, along with publishing, CMS, and animation capabilities. It’s a capable design environment, but Framer doesn’t offer a complete HTML export for independently hosting the finished website.

None of this makes hosted builders a bad choice. If you’re happy with the platform and its tools meet your needs, there may be little reason to leave.

But if portability and control over your hosting environment are priorities, it’s worth considering that before building your entire website around one service.

App Builders Give You More Control Over The Code

AI app builders approach ownership from another direction. Instead of keeping everything inside a proprietary page editor, they can give you access to the actual code behind your project.

That flexibility is valuable, particularly when you’re building something more complicated than a typical business website.

Lovable: Lovable generates working applications using modern web technologies and supports GitHub integration, allowing you to work with your project’s source code outside the platform.

It’s a good fit for applications that need custom interfaces, authentication, database functionality, or other features beyond a traditional marketing website.

However, owning the source code doesn’t automatically make the entire application portable. If your project relies on hosted database services, storage, authentication, or environment variables, those dependencies need attention when moving to another environment.

Bolt and v0: Both platforms combine AI-generated code with tools for previewing, editing, and publishing applications.

Bolt supports GitHub workflows and deployment options, while v0 integrates closely with GitHub and Vercel. With v0, you can work in a dedicated branch, track changes through commits, and create pull requests before merging updates.

You don’t necessarily need to edit every file manually, either. These tools support conversational changes, and v0 includes visual editing controls for adjusting the interface.

The difference is what you’re ultimately maintaining. Even when AI handles much of the coding, the project still depends on its framework, packages, integrations, and deployment configuration.

For a SaaS product or an application with complex functionality, that’s often a worthwhile trade-off.

But imagine handing a five-page bakery website to its owner. Would they rather open a visual editor to change tomorrow’s specials, or maintain a software project with its own development workflow?

Both can work. The question is whether the additional flexibility serves the project.

A Visual Builder Keeps The Website Editable

This is where building with AI inside a visual editor becomes especially attractive.

Instead of treating the generated website as a finished product that requires another AI prompt or code change to modify, you get a collection of editable elements.

Want to change a button label? Open its settings. Need to rearrange a section? Move the elements around. Want to update the brand colors across multiple pages? Use shared design settings where you’ve established them.

You can work with AI when it’s helpful and make manual adjustments whenever you prefer.

Divi AI agents: The Divi AI Agent is integrated into the Divi 5 Visual Builder and can inspect the structure of an existing page before making changes.

It goes beyond generating content for individual fields. You can ask it to create layouts, restructure sections, edit multiple modules, work with Design Variables and Presets, and perform supported WordPress tasks.

It also offers two interaction modes: Ask, for inspecting a page, answering questions, and offering guidance, and Build, for carrying out changes within the builder.

Because the resulting layouts use native Divi elements, you’re free to continue editing the website manually.

The Agent requires an active Divi AI subscription, which includes a $5 monthly AI Wallet balance for Agent usage. Additional usage can be purchased, and costs vary depending on the AI model and the complexity of the request.

Elementor’s Angie: Angie brings agentic AI capabilities into WordPress and the Elementor editing environment.

It can create structured pages, custom widgets, reusable design resources, and other WordPress functionality using natural-language instructions. It can also help with administrative tasks and work with the site’s existing configuration.

Like Divi, Elementor lets you continue editing supported generated content through its visual interface.

Of course, a visual builder isn’t completely independent of its software. You still rely on WordPress, the builder you’ve chosen, and compatible themes or plugins.

The advantage is having control over your WordPress installation, hosting, and content, with a familiar visual interface for everyday changes.

Choose The Tool Based On What Happens After Launch

Wix Harmony, Lovable, and Divi AI agents can all help you create an attractive homepage. But judging them exclusively by their first result misses an important part of building a website.

Think about what happens six months later. Who will update the content? Will you need additional pages? What happens when your branding changes?

Those questions can make the decision much easier.

1. A Website That Will Stay Put: If you need a small website with a handful of pages and you’re comfortable staying with one provider, a hosted builder may be all you need. Wix Harmony, for example, brings hosting, design tools, and business features together in one environment.
2. An Application, Not Just A Website: If you’re building something with user accounts, interactive dashboards, database records, or complex functionality, consider Lovable, Bolt, or v0. Their development workflows offer flexibility that goes beyond what most traditional website builders are designed to handle.
3. A Website That Will Keep Growing: If your business will regularly update content, add pages, refine its design, and hand editing responsibilities to different people, a WordPress visual builder is a strong option. Shared design resources and native visual editing make ongoing maintenance more approachable.

The choice isn’t necessarily between AI and manual website building. It’s about finding a tool that lets you use both without making everyday changes unnecessarily complicated.

Let’s Build A Bakery Website With Divi AI Agents

To see what that looks like in practice, imagine building a website for a neighborhood bakery called Hearth & Honey.

The bakery needs a welcoming homepage, a menu, some information about the business, and a way for customers to get in touch.

It also needs room to grow. Perhaps the owner wants to add a wholesale page later, change the seasonal colors, or update the menu without asking a developer.

Here’s how you can approach that workflow using Divi 5.

1. Establishing Brand Guidelines

Before building the page, you can give the Agent some guidelines about how the website should look and sound.

With Divi AI agents, you can save Rules that provide persistent instructions for future conversations.

For our bakery, a Rule could look like this:

Rule: Write in a warm, friendly voice for a neighborhood bakery. Use the Secondary Color Variable for brand color, and apply the Primary Button preset to every Button module or CTA module. Do not invent awards, reviews, or years in business.

This establishes some basic expectations without having to repeat them in every prompt.

The instructions reference existing Design Variables and Presets, so those resources should already be configured before relying on them. Rules help guide the Agent, but it’s still important to inspect the results.

2. Generating The First Page

Now we can get to the actual website. Open a blank page in the Divi 5 Visual Builder, launch the Agent, and select Build mode.

Rather than generating a generic homepage, we’ll give the Agent some context about the bakery, its content, and the design direction we’re looking for.

The prompt also uses a screenshot as a visual reference, allowing the Agent to work toward a particular style rather than making every design decision from scratch.

The important part is what happens after generation.

The page is built using regular Divi sections, rows, columns, and modules. If you want to change a heading, adjust a price, or reposition an image, you can open the relevant module settings and edit it yourself.

You don’t need another AI prompt for every small adjustment.

3. Restructuring The Layout And Updating The Design

Let’s say the first version looks good, but the bakery owner wants to change the layout of the hero section.

Instead of rebuilding the page, we can ask the Agent to work specifically on that section. Add the hero section as Context and use the following prompt:

Because we’re working with actual Divi elements, we can inspect the new structure and make any necessary adjustments manually.

Maybe the image needs more space, or the alignment doesn’t look quite right on smaller screens. Those changes are still available through the builder’s normal layout and responsive controls.

Updating Global Styles

Now imagine the bakery decides to change its primary brand color. If the website consistently uses a shared Design Variable, there’s no need to update every individual module.

We can ask the Agent to change that variable instead:

Because this changes a shared resource, the Agent can present a destructive-action warning requiring approval before proceeding.

Once the variable is updated, elements referencing it use the new color. Any elements with separate hardcoded colors or local overrides may still need individual attention.

That’s one of the practical advantages of combining AI with a reusable design system. You can make a coordinated change without rebuilding the layout.

4. Adding A New Page

A few months later, Hearth & Honey starts supplying bread to local restaurants and wants to introduce a wholesale offering. Instead of starting a separate project, we can continue working within the same WordPress website.

Ask the Agent to create a new page:

The new page becomes part of the existing WordPress site. From there, you can build its content using the same Design Variables and Presets, and use the appropriate Theme Builder templates to maintain a consistent header and footer.

Those shared resources provide a foundation for keeping the new page aligned with the homepage. You’ll still need to apply the appropriate layouts and settings, but you won’t have to recreate the entire design system.

And that’s really the difference this approach makes.

The AI can help create the first version, restructure existing content, and take care of larger changes. Meanwhile, the website remains editable through the same visual interface your team already uses.

Final Verdict

There isn’t one AI website builder that’s right for every project. If you want a simple website and prefer having everything managed by one provider, hosted platforms like Wix Harmony can make getting started easier.

If you’re building a complex application with custom functionality, tools like Lovable, Bolt, and v0 offer development capabilities that may be a better fit. But for a business website that needs to grow, evolve, and remain approachable for the people managing it, building with AI inside a visual builder offers an appealing balance.

With Divi 5, you can combine AI-assisted creation with native visual editing, reusable design resources, and control over your WordPress hosting environment. The goal isn’t just to generate a website. It’s to have one you can comfortably keep working on long after that first prompt.

The post The Best Way To Build A Website With AI In 2026 Is Inside A Visual Builder appeared first on Elegant Themes Blog.

With Divi 5’s CSS Grid Editor, you can build this arrangement visually, resizing and positioning tiles directly on the grid canvas.

In this tutorial, we’ll build a twelve-image mosaic across four columns, create four larger feature tiles, and coordinate the image styling with a preset. Then we’ll adapt the layout for tablet and phone.

Why Image Mosaics Need Responsive Adjustments

A mosaic gets its shape from spans. A tile can stretch across two columns, two rows, or both, creating an arrangement of larger and smaller images.

Those spans need attention when the screen narrows. A tile spanning two columns cannot fit within a single-column grid without an adjustment. An inherited starting position can also place an item outside the intended columns. These settings can create extra grid tracks, gaps, or horizontal overflow.

The goal is to review the placement rules at each breakpoint, keeping the spans that still fit and adjusting those that do not.

Where The Grid Editor Comes In Handy

The CSS Grid Editor shows the grid’s tracks, gaps, and item placement together. Drag a corner to resize a tile or move an item to another position. Divi records these changes as Grid Offset Rules on the container, which is the Row in this example.

Use the device icons at the top of the builder to switch between Desktop, Tablet, and Phone. At each breakpoint, review the inherited layout and add the column, gap, and placement adjustments it needs.

What The Mosaic Looks Like At Each Size

Here are the three layouts before we build them. Desktop uses four columns, with larger feature tiles alternating between the left and right.

Tablet uses two columns. The feature tiles span the full grid width, while the smaller images sit in pairs between them. Phone uses a single column, giving every image its own place in a vertical sequence.

Step 1: Add The Row And Open The Grid Editor

Add a new Row to your Section and give it 12 Columns, as shown below. Each child Column will hold one image.

These twelve content Columns are separate from the grid’s track count. We’ll arrange them across four grid tracks on desktop.

Open the Row settings, go to the Content tab, and click Open Grid Editor. If the button is not available, set the Row’s Layout Style to Grid under Design > Layout first.

The editor opens as a floating panel that you can reposition while you work.

Set Columns to 4 and leave Rows on auto so the grid can create rows as needed. Set both Horz. Gap and Vert. Gap to 40px.

Use 12 in the Grid Items field to preview the twelve child Columns. This field controls the editor’s preview items; it does not add content Columns to the Row.

Turn on Show Grid Lines and Show Track IDs using the controls on the right. These visual guides make it easier to follow the tracks and check where each tile sits.

The canvas now shows four equal tracks, each sized at 1fr, with twelve numbered items. Next, we’ll turn four of those items into larger tiles.

Step 2: Shape The Feature Tiles On The Canvas

Start with item 1. Grab its bottom-right corner handle and resize it to cover two columns and two rows. It should occupy the top-left block of the grid.

As the item expands, the surrounding items reflow according to their placement rules. A chip labeled Rule 1 appears to identify the new rule.

Next, resize item 4 to cover two columns and two rows on the right. Position it across the last two columns in rows two and three.

This gives the first two feature tiles a staggered arrangement, with smaller images filling the spaces beside them.

Continue with items 7 and 10, giving each a two-column, two-row span. Place item 7 on the left below the first group, then item 10 on the right, offset one row lower.

Follow the arrangement below, leaving space for the smaller tiles and checking that none of the feature tiles overlap.

You now have four larger tiles alternating between the left and right, with eight smaller tiles arranged around them. Check the numbered preview items against the example before adding the images.

The placement rules belong to the Row. The Image Modules we’ll add next provide the content inside each tile.

Step 3: Add The Images And Style Them Once

Add an Image Module to each of the twelve child Columns and select a photograph for each one. Item 1 supplies the first feature image, items 2 and 3 fill the smaller tiles beside it, and the remaining images follow the numbered arrangement.

Images with different proportions may not initially line up as intended. We’ll coordinate their sizing, corners, and framing on one Image Module, then reuse those settings across the mosaic.

Open the first Image Module and go to Design > Sizing. Enable Force Fullwidth so the image fills the available width.

Leaving Height on auto avoids a fixed pixel height, but it does not automatically make the image fill its grid area vertically. Use Aspect Ratio when you need a consistent image shape.

For the square tiles used in this mosaic, set the Aspect Ratio fields to 1 for Width and 1 for Height. This establishes a square frame that scales with the image’s width.

Next, open Border and set all four rounded corners to 20px. This gives the larger and smaller tiles a consistent finish.

Open Framing and set Object Fit to Cover. This fills the image’s frame while preserving the photograph’s proportions, cropping the parts that extend beyond its edges.

Use Object Position to adjust which part of the photograph remains visible. This is useful when a face, product, or other subject sits away from the center.

The settings have different jobs: Aspect Ratio establishes the frame’s proportions, while Cover controls how the photograph fills it. Cover alone does not create a square frame or set the grid’s row heights.

To reuse the styling, open the preset dropdown at the top of the Image Module settings and create an Element Preset named Mosaic Image from the current design settings.

Right-click the module and choose Extend Attributes. Select the preset assignment and extend it to the other Image Modules within this Row, as shown below. Keep the extension limited to the preset so each module retains its own photograph.

You can now update the shared styling through Mosaic Image. For example, changing the preset’s corner radius updates the images using that value, unless an individual module overrides it.

Review the crops after applying the preset. Keep photo-specific Object Position adjustments on the individual modules so you can position each subject independently.

Finally, check the tile edges. With equal-width grid tracks, square image frames, and matching horizontal and vertical gaps, the larger two-by-two tiles can align with the smaller tiles around them. If an edge is out of line, check for conflicting image heights, margins, or Column padding.

Step 4: Adjust The Mosaic For Tablet

Switch to Tablet view using the device icons at the top of the builder. Make the following adjustments at this breakpoint so the desktop layout stays intact.

In the Grid Editor, set Columns to 2. The larger images should span both columns, while the smaller images sit in pairs.

Check the inherited placement rules as well as the spans. A feature tile positioned in desktop columns three and four needs a new position within the two-column tablet grid.

Using two columns gives the photographs more room at this width. The layout retains a mix of larger and smaller images without squeezing four tiles across the screen.

Reduce both Horz. Gap and Vert. Gap to 20px.

Review the canvas for empty spaces, overlaps, or items outside the two intended columns. If a desktop placement leaves a gap, adjust that item’s position or span for Tablet.

Keep the numbered image sequence in mind while repositioning tiles. The aim is to place the larger images between pairs of smaller images, as shown below.

Step 5: Adjust The Mosaic For Mobile

Switch to Phone view. We’ll simplify the mosaic into a single-column image sequence at this breakpoint.

Set Columns to 1. Then resize each feature tile so its Column Span is 1. You can drag its corner inward on the canvas or edit its rule directly.

Also review any inherited Column Start, Column End, and row placement values. Keep every item within the first column, use a single-row span for each tile, and remove or override placements that prevent the images from stacking in sequence.

Simply reducing the column count is not enough if the remaining rules still place an item beyond that column. Checking both spans and positions avoids unwanted tracks and gaps.

Each image should now occupy the available grid width in its own row. The interlocking desktop arrangement becomes a simpler vertical gallery, while the image order remains consistent.

Preview the page at desktop, tablet, and phone widths before saving. Check for horizontal overflow, unintended gaps, and photographs whose subjects have been cropped out.

Adjust an individual image’s Object Position where needed. Also resize the preview between the main breakpoint widths to make sure the layout remains balanced as the available space changes.

Reuse The Mosaic With Different Images

The Row holds the grid structure and placement rules, while the Image Modules hold the photographs. You can replace the images without rebuilding the arrangement, then adjust their crops to suit the new subjects.

The feature rules target item positions. If you reorder the child Columns, the images occupying positions one, four, seven, and ten receive those feature placements.

The Mosaic Image preset keeps the shared image styling manageable, while the breakpoint adjustments let the same collection work as a four-column mosaic, a two-column layout, and a single-column gallery.

Once the structure is in place, you have a reusable starting point in Divi 5 for product photography, an editorial image collection, or a visual portfolio.

The post How To Create A Responsive Image Mosaic With Divi 5’s CSS Grid Editor appeared first on Elegant Themes Blog.

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.

Have You Tried Divi 5’s New Components and Slots?

Last week we released Components and Slots for Divi 5!

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. 👇

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.