Different builders have tried to solve that problem in different ways. Some reduce the back-and-forth. Some still separate key parts of the site into distinct editing sessions. Divi 5 takes a more unified approach by bringing more of the site into one builder session.

In this comparison, we’ll look at how Divi 5, Divi 4, Elementor, and Bricks each handle full site editing, and what those differences mean when you’re actually building.

What Complete Site Editing Actually Means

At its best, complete site editing means your site is reachable from wherever you are working. You open a page, and the header, footer, and page content are all available in context. That lets you adjust navigation, refine the content area, and update the footer without leaving the builder or switching to a separate template screen.

There is a design-system side to this too. When layouts, styles, and global elements work together, a single update can carry through every part of the site that shares it. Colors, spacing, typography, and repeated components stop behaving like isolated settings and start behaving like a connected system.

That is what makes full site editing genuinely useful. It is not just about seeing more things at once. It is about reducing context switching and making the whole site feel easier to manage as one working environment.

How Each Builder Approaches Site Editing

In practice, that ideal depends heavily on the builder you are using. Each tool approaches site editing with its own balance of flexibility, structure, and workflow tradeoffs.

Let’s take a closer look at how these builders handle it and what that means in day-to-day use.

1. Elementor: Templates First, Workflow Second

Elementor was one of the first major WordPress builders to take site-part editing seriously through its Theme Builder. It gives you a way to work on headers, footers, and other site parts visually, and its newer Global Editing flow lets you access header, content, and footer areas from the same page-level editing experience. That was a meaningful improvement over having to return to the WordPress dashboard for every structural change.

The experience, however, still depends on switching active contexts. In Elementor’s Global Editing flow, you click into the header area to edit it, then click back into the content area to work on the page body, then into the footer to edit that area. It is more convenient than managing everything from separate admin screens, but it still treats those parts as separate editing regions rather than one continuous canvas.

There is also an access distinction worth noting. Elementor’s Theme Builder is part of Elementor Pro, not the free version. So while the workflow is capable, complete site editing is tied to the paid product rather than included in Elementor’s core free experience.

It solved a big part of the navigation problem, but the underlying workflow still keeps headers, footers, and content in their own editing lanes.

2. Divi 4: Further Along, But Still Layered

Divi 4 pushed the experience further. With full-site front-end editing, the Visual Builder could open with your header, page content, and footer all visible on the same screen. You could click directly into those areas and edit them without having to open a separate Theme Builder screen first.

That made Divi 4 feel noticeably more fluid than older template-based workflows. You could edit multiple template areas in one front-end session, and that was a real step forward.

The limitation was architectural. Divi 4’s full-site editing experience sat on top of its existing Theme Builder structure, so headers, footers, and body templates were still separate template objects underneath the interface. In many cases that worked well, but it could also create friction in more complex setups. For example, responsive header structures could become awkward in the editor because different template states were still being managed through an older layered system.

Divi 4 made full-site front-end editing more practical, but it was still working within a system that had been designed before complete site editing became the central idea.

3. Bricks: Built For Precision, Not Continuity

Bricks takes a different approach. It emphasizes structural clarity, template control, and system-level styling. That has made it popular with developers and advanced users who want a more explicit relationship between templates, classes, and layout structure.

Its Structure panel is a big part of that appeal. It gives you a precise hierarchy of the page, and its styling workflow leans heavily on shared classes, variables, and centralized style controls. For people who like building in systems, Bricks can feel very organized.

The tradeoff is that Bricks does not try to make the whole site feel like one continuous editing session. Headers, footers, and other site parts are managed as templates. If you want to edit a header, you open the header template. If you want to work on page content, you open that page. That keeps the architecture clear, but it also means more jumping between separate editing sessions when you are making site-wide refinements.

Bricks is powerful and precise, but its workflow is more template-driven than unified.

That makes it a strong fit for users who prioritize structure and control, but less fluid for people who want to edit the whole site in one pass.

4. Divi 5: One Site, One Session

Divi 5 was rebuilt around a more unified editing model. With complete site editing, you can edit your assigned header, body, and footer in one builder session instead of opening the Theme Builder separately. The goal is simple: when you open a page, more of the site should already be there in context.

That changes the feel of the workflow. You can adjust navigation in the header, move into the page content, continue down to the footer, and save from the same session without needing to reload another editing environment.

That same idea extends beyond standard pages. Divi 5 makes Edit With Divi available across more template-driven areas, including posts, archives, and other layouts controlled through the Theme Builder. That means you are less likely to step out of context just to reach the structural part of the site you need to change.

The Layers panel helps make that unified view easier to manage. When more of the page is visible at once, clear structural visibility matters more, and Layers gives you a quick way to understand what you are editing and where it sits in the layout.

A Design System Built For Speed

Divi 5 extends this same thinking into styling. Design Variables, Presets, and Extend Attributes make it easier to apply and reuse styling decisions across the site from a visual interface.

That gives Divi 5 a more system-oriented workflow without asking users to manage everything through a strictly class-driven editing model. Because the header, body, and footer can be visible in the same session, the relationship between those global style changes is easier to understand while you work.

Learn Everything About Full Site Editing In Divi 5

Each builder here has real strengths. Elementor has familiarity and a mature ecosystem. Bricks offers precision and a very deliberate structure-first workflow. Divi 4 pushed front-end site editing forward when that shift mattered. But for a more continuous complete site editing experience, Divi 5 is the builder in this comparison that is most clearly designed around the idea of editing the site as one connected working environment.

Divi 5 Brings Full Site Editing Together

Complete site editing is not just a feature label. It changes how a website feels while you are building it. Some builders approach it by layering site-part editing onto existing template systems. Divi 5 takes a more unified route by bringing more of the site into the same builder session from the start.

If you want a workflow where more of the site is reachable, visible, and editable without losing your place, that is exactly the direction Divi 5 is built around.

The post Complete Site Editing: Divi 5 vs Divi 4 vs Elementor vs Bricks appeared first on Elegant Themes Blog.

Additionally, Divi offers the unique concept of option presets that allow you to create shared styles for subcomponents and option types, and to nest them within broader element presets. It’s almost like using a CSS preprocessor and importing mixins; it just makes your website design system so much easier to manage.

Not only can presets be nested, but you can also stack them. You can stack, nest, mix, and match modular presets to quickly style components, similar to common CSS frameworks like Tailwind.

It’s simply the best!

Today’s update makes Divi’s option presets even more versatile, allowing you to apply presets to nested options and nest option presets inside other option presets. 🤯 Sub-options that previously didn’t support presets, such as Call To Action > Button > Border, no longer have that limitation.

You can also create multi-level nested presets. For example, you might create a “Dark Blurb” and “Light Blurb” preset. Inside each of those presets, you could nest your Solid Button preset. Inside that button preset, you could nest your Pill Border preset. If you ever want to change the border style of your site-wide pill shape, you only have to modify that one preset, and all your other presets are updated automatically.

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

Presets For Nested Options

When editing an element in Divi, options are grouped. There are groups of options for borders, sizing, box shadows, and more. Each of these option categories supports presets.

Previously, option presets could only be applied at the element level. Nested options, such as the border options within the button option group, did not support presets. That changes today!

Now you can apply presets to all nested option groups. Considering options can be enabled for any element using Composable Settings, presets can be used for any sub-element as well!

Apply Presets To Nested Options

The concept is simple: nested options now support presets! In practice, this update makes Divi’s preset system infinitely more versatile and really completes the vision.

Now, all module sub-elements that have their own set of options, such as the button in a call to action, the input fields in a contact form, or the image in a blurb, support presets.

Nest Option Prestes Inside Option Presets

Unlike other builders, Divi’s preset system supports nested relationships. Option presets can be nested inside element presets to create a modular design system.

Nesting a button option preset inside a call-to-action element preset, for example, keeps all your button styling in a single option preset rather than spreading it across several element presets.

Now, Divi 5 supports a third layer of preset nesting, allowing option presets to be nested inside other option presets. For example, you could have a single border preset that configures your website’s default borders. This preset can be used within the button group preset and applied to the nested border option group. It can also be used at the element level to add borders to your image module, for example.

A set of border presets can be nested within your collection of option and element presets, which means your website’s entire border style is encapsulated in a small subset of option presets that can be quickly modified.

It’s a lot to wrap your head around, so if you’re confused, check out this long-form tutorial where I explain everything.

Try Divi 5 Today

Complete site editing is now available for Divi 5. Give it a try and let us know your thoughts.

We rebuilt Divi from the ground up and packed it full of dozens of your most requested features. Forget everything you thought you knew about Divi, because Divi 5 is an entirely different beast.

Better Form Styling, Field Presets, Focus Editing, And CF7 Module

In case you missed it, we recently released loads of new features for form-based modules.

We harmonized field options across all form-based modules, adding additional styling options for form elements such as radio buttons and checkboxes.

In addition to hover editing, we added new editing modes for field-based pseudo-classes, such as :checked and :focus, giving you full control over your form field design.

New input, checkbox, and radio groups now support presets, making it easy to style all your forms using Divi 5’s modular design system.

Finally, we added a new Contact Form 7 module that lets you render and style forms with Divi’s full design suite. It’s the first of many new modules to come!

Watch this video for all the details. 👇

More Divi 5 Updates Are On The Way

The features keep coming, and we aren’t slowing down anytime soon!

If you are enjoying these updates, do us a huge favor and let us know 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 Nested Options Presets for Divi 5 appeared first on Elegant Themes Blog.

We harmonized field options across all form-based modules, adding additional styling options for form elements such as radio buttons and checkboxes.

In addition to hover editing, we added new editing modes for field-based pseudo-classes, such as :checked and :focus, giving you full control over your form field design.

New input, checkbox, and radio groups now support presets, making it easy to style all your forms using Divi 5’s modular design system.

Finally, we added a new Contact Form 7 module that lets you render and style forms with Divi’s full design suite. It’s the first of many new modules to come!

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

New Form Field Options

We updated all form-based modules, harmonizing the available design options and adding new options to customize different field types. We cleaned up the randomness and added hundreds of new options in the process.

New Input, Radio, and Checkbox Settings

Previously, Divi’s form-based modules had a single Field group for customizing form fields. The available settings were inconsistent and often applied to some input types but not others. You did not have full control over your form’s design.

Now, field design options have been split into Input, Checkbox, and Radio groups, allowing you to customize these field types individually.

Furthermore, additional options for label text and placeholder text have been added to each.

When combined with Composable Settings, you now have full control over your form design, including additional CSS.

Refactoring and Harmonizing Field Options

Divi has many form-based modules, but the form field settings were inconsistent. Some modules had one-off focus-related settings. Some had options to customize label text, while others didn’t. Furthermore, many options were missing; you could customize field background colors, but you couldn’t use Divi’s wide range of background settings (among other things).

Now, every form-based module comes with the same set of input, checkbox, and radio settings, and each benefits from Divi’s entire suite of design options. You can customize everything! No more limitations, and no more unpredictability.

New Pseudo Class Editing Modes

If you are a Divi user, you will know that Divi lets you customize the :hover state of any module. You can switch to hover editing and customize any of Divi’s design options. When a user hovers over an element, the design transitions to its hover style.

Now, you can customize additional pseudo-classes related to forms, including :focus and :checked.

Divi’s old focus-specific design options have been deprecated and migrated to focus mode.

Form Field Presets

Form field groups now support presets! You can create presets for inputs, radios, and checkboxes to keep your form design consistent across all modules.

Instead of customizing each form-based module individually, simply adjust your form field presets, and all modules will assume that base design.

Contact Form 7 Module

The new Contact Form 7 modules let you choose from any CF7 form and render it inside a Divi block. Then, you can customize every aspect of its design using Divi’s new form field settings and presets.

This is the first of many more integration-based modules to come, tightening Divi 5’s native compatibility with your favorite third-party plugins.

Modified Settings Dot

One more thing! You’ll notice a new blue dot in the settings panel, indicating that a setting has been modified and that an option group contains modified settings.

In addition to the modified settings search filter, this makes it easier to see at a glance which parts of an element have been modified.

It’s just a little dot, but it’s also a major quality-of-life improvement.

Try Divi 5 Today

Complete site editing is now available for Divi 5. Give it a try and let us know your thoughts.

We rebuilt Divi from the ground up and packed it full of dozens of your most requested features. Forget everything you thought you knew about Divi, because Divi 5 is an entirely different beast.

Have You Tried Composable Settings for Divi 5?

In case you missed it, we recently released Composable Settings for Divi 5.

Now, you can enable any of Divi’s design options for any module sub-element.

Composable Settings completely harmonizes the available settings for Divi modules, which means you’ll never have to use CSS to fill the gaps; enable sizing options for buttons, animation options for titles, and everything in between.

It opens up hundreds of new possibilities.

Watch this video for all the details. 👇

More Divi 5 Updates Are On The Way

The features keep coming, and we aren’t slowing down anytime soon!

If you are enjoying these updates, do us a huge favor and let us know 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 Better Form Styling, Field Presets, Focus Editing, And CF7 Module for Divi 5 appeared first on Elegant Themes Blog.

Preview

Here’s a quick look at the 4 Grid Styles included in the pack. The download is further down the post.

Download 4 Grid Styles For Divi 5

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

Download the Files

Download For Free

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

DOWNLOAD

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

What’s Included (5 Exports)

After you download and unzip the file, you’ll find 4 styled Grid Style Layout exports, plus 1 file containing all layouts.

Styled – Grid Styles Layout 1 to 4 (4) → Four fully styled grid-based layouts with modern typography, layered images, structured content areas, and balanced spacing that you can use as-is or customize.

Styled – Grid Style Layouts (All) → Imports all 4 designs into your Divi Library at once.

How To Use The Grid Styles

Keep your download folder handy. We’ll import the files, add a layout to a page, and then replace the content.

1. Import Layouts Into The Divi Library

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

In the Import & Export Layouts modal, switch to the Import tab, then click Choose File and select your JSON file.

Choose any Grid Style Layout JSON you’d like to use, then click Import Divi Builder Layouts.

2. Add A Grid Style Layout To Any Page

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

Click Saved Layout and select one of your Grid Style layouts.

3. Swap The Content

Once the layout is on the page, replacing the placeholder content only takes a few clicks. Start by updating the heading, body copy, buttons, and links so the layout matches your brand and message. Then swap in your own images, featured content, stats, or supporting elements as needed.

Because grid-based layouts rely on alignment, spacing, and visual hierarchy, it’s best to replace content one area at a time. This helps you preserve the balance between text, imagery, and negative space as you customize the design.

If you want to expand or simplify a layout, duplicate or remove existing rows, columns, groups, or modules instead of rebuilding the section from scratch. That’s the easiest way to preserve the original structure and rhythm of the design.

4. Adjust Styles (Optional)

These grid layouts are already styled, so you can use them right away or refine them to better match your site. Update typography, colors, borders, shadows, spacing, and image treatments as needed using the settings in the Design tab.

To change typography, open any Text or Heading module and go to the Design tab. Expand the relevant text settings to adjust Font, Font Weight, Text Alignment, Text Color, and more.

To refine the grid styling, open the row, column, group, or module you want to adjust and use the Design tab to tweak Background, Border Width, Border Color, Border Radius, Box Shadow, Sizing, and Spacing.

If your layout uses overlapping images, stacked content blocks, featured cards, or asymmetrical spacing, keep those relationships in mind as you edit so the composition continues to feel intentional and balanced.

Use Divi’s responsive editing tools to fine-tune spacing, stacking, and alignment on smaller screens so the layout stays polished across devices.

Tips For Effective Grid Layouts

Grid layouts work best when they create clear structure without making the page feel rigid. Use these quick tips to keep your layouts clean, modern, and easy to navigate.

Create Clear Visual Hierarchy

A strong grid should help visitors understand what matters most at a glance. Use size, spacing, and placement to give headings, images, and calls to action a clear order of importance.

Let Spacing Do The Work

Good grid design isn’t just about columns and rows. Generous spacing between sections, cards, and content areas helps the layout feel premium and easy to scan.

Balance Text And Imagery

Grid layouts are especially effective when text and visuals complement each other. Avoid overcrowding one side of the layout, and make sure images support the content instead of overpowering it.

Repeat Design Patterns Consistently

Consistent card styling, spacing rules, button treatments, and image ratios help the entire page feel cohesive. Repetition is what makes a grid layout feel intentional rather than random.

Check The Layout On Mobile

Grids often shift significantly on tablet and phone screens. Review your layout on smaller devices to make sure content stacks cleanly, images remain useful, and spacing still feels balanced.

Start Building In Divi 5 Today!

These 4 Grid Styles give you a fast way to build polished, structured page sections for portfolios, landing pages, featured content, business websites, and more. Swap in your content, customize the styling if needed, and you’ll have a professional layout ready in minutes with Divi 5’s Visual Builder.

The post 4 Grid Styles For Divi 5 (Free Download!) appeared first on Elegant Themes Blog.

On a site with a well-defined design system, many of those decisions are already saved as presets. The Command Center’s queueing system lets you build the structure and attach presets as you go. You can do it all from the keyboard. Instead of creating each element and assigning presets one by one, you can queue the entire section and run it in a single pass.

In this tutorial, we’ll add a dark CTA section to the bottom of a homepage. It will use a centered single-column layout with a heading, supporting text, and a button. The section will use existing presets and be built using a single command queue.

Before You Build

Before opening the Command Center, do two quick things. First, select the section that should act as the insertion point for the new content. Second, make sure the presets you plan to use already exist and are named clearly enough to find quickly.

That small bit of setup makes queueing much smoother. Instead of stopping mid-build to search for presets or rethink structure, you can stay focused on the section you want to create.

Building The Queue

Click the last section on the page to select it. This tells the Command Center where to insert the new section. Then open the Command Center with CMD+K on Mac or CTRL+K on Windows.

Type each element name, then press Shift+Enter to add it to the queue. This keeps the queue building instead of running right away.

Use the > operator to nest each element inside the one before it. Use the + operator to attach a preset to the element that comes before it. To add multiple presets to the same element, repeat the + operator. You can also use the * operator to duplicate elements in the queue, which is useful for repeated columns, buttons, cards, or other repeated layout parts.

Build the queue like this:

Section > Row > Column + Spacing Medium + BG Dark + Container Corners > Heading + Text Headings Light > Text + Body Text Light > Button + Off-White

Once the full queue is built, press Enter to run it. Divi will create the full structure and apply the queued presets in one pass.

Remember that Enter executes the queue. Shift+Enter keeps building it. You also do not need to type full preset names. You only need to type enough of the name to surface the correct match in the results list before queueing it.

If that command string looks dense at first, here is what it does. It adds a Section, Row, and Column. It then applies three presets to the Column.

After that, it adds a Heading, Text module, and Button. Each one gets its preset inline, so every module is styled as soon as the queue runs.

More Queue Examples To Try

Once you understand the basic pattern, it becomes much easier to imagine other repeatable sections you can build the same way. The examples below are not meant to match one exact preset library. They are meant to show how queueing becomes more useful as your design system grows.

• Three-card feature row: Section > Row > Column *3 > Blurb + Feature Card
  This is useful when you need a fast starting point for a services, features, or benefits section. The *3 operator creates three repeated columns, and each Blurb can inherit the same card preset.
• Testimonial strip: Section > Row > Column *3 > Testimonial + Testimonial Card Light
  This is a practical pattern for review sections where each card uses the same layout and styling. Once the structure is in place, you only need to swap in the actual testimonial content.
• Simple icon list: Section > Row > Column > Blurb + Icon List Item *4
  This works well for feature checklists, service lists, or process summaries. Instead of adding each item one by one, you can build the repeated stack immediately and then edit the copy.
• Two-button callout: Section > Row > Column + Container Light > Heading + Text Headings Dark > Text + Body Text Dark > Group + Button Row > Button + Primary *2
  This is useful when a section needs two calls to action side by side. The Group gives both buttons a shared container, and the Button Row preset can handle the horizontal layout, spacing, and alignment.
• Team row starter: Section > Row > Column *4 > Person + Team Card
  This is a good example of queueing for repeated content blocks. If your team card styling is already saved as a preset, the queue can build the full starting layout in seconds.

These examples also show why queueing works best on sites with a mature preset library. The more reusable patterns you have already defined, the more practical it becomes to build new sections from short command strings.

When Queueing Is The Better Choice

Queueing is most useful when you already know the structure you want to build, and your styling system is already defined. That makes it a strong fit for repeatable sections such as CTAs, feature rows, card layouts, and other patterns you build often.

It is less useful when you are still exploring layout ideas or making one-off edits. In those cases, building directly on the canvas may still feel faster. But when the structure is clear, and the presets already exist, queueing eliminates much of the repetitive setup work.

How The Queue Compares To The Standard Workflow

The queue is not the only way to build in Divi. For a quick edit or a single module, it may not be the fastest option. Where it becomes especially useful is when you are building a fully styled section from scratch. This is even more true on a site that already uses a strong preset system.

In a more traditional workflow, you would add each element manually. Then you would open settings panels over and over. After that, you would assign presets one by one before adding content.

The queue reduces much of that setup work. It lets you build the structure and apply presets in the same command sequence. The more complete your design system is, the more time this can save. The same is true as you get more comfortable using the Command Center.

Start Using The Command Center In Divi 5 Today!

With the structure built and presets already applied, the remaining step is simple. Click into each module and add your real content. That includes the CTA heading, supporting copy, and button link.

Because the styling comes from your preset system, the section is already aligned with the rest of the site. That is the payoff of combining a design system with Command Center queueing.

Once your presets are in place, building a new section becomes much faster. You spend less time on repeated setup work in Divi 5. For defined, repeatable layouts, the settings panel becomes much less central to the process.

The post Queueing Commands In Divi 5 To Build Your Layouts appeared first on Elegant Themes Blog.

Divi 5 gives you two distinct ways to make elements clickable. Most modules include the Link Option Group, which can make an entire module or container clickable. The newer Link Module also uses Divi’s link settings, but it outputs a real <a> element in the markup. That gives you a lighter way to add semantic links without using a Text module or styling a full Button module.

This post looks at how those two approaches differ, where each one makes sense, and why using them together is often the most practical pattern.

The Simple Difference

In Divi 5, “clickable” can mean two different things, and they are not the same.

A semantic link is a real HTML <a> tag. Browsers, screen readers, keyboard navigation, and search engines all recognize it as a link.

A dynamic click area is a larger clickable surface created through Divi’s Link Option Group. It improves usability by letting people click anywhere on a card, column, or module, but it is not the same as outputting a full semantic anchor for that whole area.

That difference matters because the two approaches solve different problems. Dynamic click areas are great for usability. Semantic links are important for structure, accessibility, and crawlable markup. In many real layouts, especially cards and looped designs, the best solution is to use both together.

Understanding HTML Link Semantics

The anchor element, <a>, has been part of HTML from the start. Its purpose is specific: it creates a hyperlink to another resource. When a browser encounters an anchor with an href attribute, it understands that the element points somewhere else.

That matters because links carry more than just click behavior. Screen readers announce anchors as links. Keyboard users can tab to them. Search engines can follow them to discover and understand related pages. Anchor text also helps communicate where that link goes.

When a clickable area does not include an anchor element, those benefits are less direct. A container that responds to clicks through JavaScript may still feel clickable to a mouse user, but it does not provide the same built-in HTML signal as a real link. In the example below, the full card is clickable, but only the semantic links in the card are actual <a> elements.

Notice the browser status area in the lower-left corner. It only recognizes the semantic links as standard HTML links. While the whole card is clickable, only specific parts of it exist in the markup as anchors. In this example, those anchors are the category link and the post title, which is often the most descriptive anchor text on the card.

How Modules Implement The Link Option Group

The Link Option Group appears in the Content tab of many Divi modules, but the way it is implemented depends on the module. Modules such as the Link Module and Button Module output an actual <a> element. Other modules, including Groups, Columns, Blurbs, Images, and many others, can use the Link Option Group to create a clickable surface without turning the whole module into an anchor in the DOM.

Why use a dynamic click area at all? Because it can improve the user experience. Think about a blog card whose main purpose is to move someone to the full post. If the image, title, and excerpt all point to the same place, making the entire card clickable reduces friction. Users do not have to hunt for the exact linked element.

Divi’s Link Option Group makes this easy on many modules and containers. When you add a URL to a module or container’s Link setting, Divi can make that whole surface clickable.

That approach works especially well for cards and looped layouts. A blog card, for example, may use the container-level link as the broad click area while still including more specific semantic links inside it, such as a linked title, category link, or read more link.

Divi also handles this hierarchy intelligently. If a module inside that clickable container already contains its own semantic link, such as a Button Module or Link Module, that inner link can remain the more specific destination when clicked.

The Link Module: Semantic Anchors In Divi 5

Because the Link Module is newer, it is worth calling out what makes it different. The Link Module outputs a real <a> element in your page markup. Unlike the broader click-area behavior used by many other modules, this gives you a native semantic link that browsers, screen readers, and search engines can all recognize directly.

The module accepts link text and a URL, and it includes the design controls you would expect from a Divi module, including padding, background, border radius, and hover styling. That makes it useful for more than plain inline links. You can style it as a lightweight button-like element when you want semantic link output without the extra design overhead of the Button Module.

The Button Module is also semantic when it links to something, since it outputs an anchor by default when used as a link. The difference is mostly about intent and weight. The Link Module is simpler and more flexible when you want a straightforward semantic link that you can style as needed.

When To Use The Link Option Group And Link Module

The choice between the Link Option Group and the Link Module depends on what you are building and what role that link needs to play.

Use The Link Option Group When

You want broad click behavior across an entire module or container. This works especially well for cards, loop items, and other layouts where the whole surface is meant to lead to the same destination. It makes the click target larger and easier to use.

Use The Link Module When

You need a real <a> element in the page markup. That matters when the link itself should be clearly exposed to browsers, assistive technology, and search engines. It also works well when you want a simple, styled link element without using a Button Module.

Use Both Together When

You are building clickable UI cards that need both generous click areas and strong semantic structure. Set the Link Option Group on the outer container, then place a semantic link inside it using a Link Module, a linked Heading, or a Button Module. That gives users the convenience of clicking anywhere while still keeping meaningful anchors in the content structure.

This combined approach is often the most practical one. The container-level link improves usability. The internal anchor preserves semantic clarity.

Start Using Divi 5 Today!

The Link Option Group and the Link Module in Divi 5 solve different problems. The Link Option Group is excellent for larger click targets and smoother UI behavior. The Link Module is valuable when you want a semantic anchor that exists clearly in the markup.

In many real layouts, especially cards and loops, the best solution is not choosing one over the other. It is using both intentionally. Match the method to the job, and your links will work better for users, assistive technologies, and search engines alike.

The post Semantic Links vs Dynamic Click Areas In Divi 5 appeared first on Elegant Themes Blog.

You open it, start typing, and run the matching command you need. That simple shift changes the workflow more than it might seem at first. Instead of hunting through the interface, you can move directly to the page, panel, state, or action you want from one searchable input.

What Is The Command Center?

Subscribe To Our Youtube Channel

The Command Center is a searchable action bar built into the Divi 5 Visual Builder. You can open it from anywhere in the builder by pressing CMD+K on Mac or CTRL+K on Windows. From there, type what you want to do, let the results narrow as you type, and press Enter to run the matching command.

In practice, it gives you one place to handle a wide range of builder tasks. Instead of navigating through menus or remembering lots of separate shortcuts, you can search for pages, settings, panels, breakpoints, and actions from the same interface. That makes it useful both for speed and for reducing interface friction during longer build sessions.

There are three broad types of Command Center commands.

1. Navigation: Commands that move you to another page or another area of Divi, such as the Theme Builder.
2. Context-Switching: Commands that change the editing state, open a panel or modal, or switch the builder into another view.
3. Actions: Commands that do something directly, such as adding an element, saving the page, or applying a preset.

Each type supports a different part of the workflow, so it helps to look at them separately.

Navigation Commands: Move Between Pages And Builder Areas

Navigation commands move you from one destination to another. That could mean another page on your site or another area of Divi itself.

One of the most useful examples is page-to-page navigation. Type the name of any page on your site into the Command Center, and it can surface as a navigation result. Press Enter, and the builder loads that page directly. That removes several small steps from the process, especially when you are jumping between pages for quick edits.

The same idea applies to major Divi destinations. Type Theme Builder and jump directly into the Theme Builder. Type Theme Options and go there without backing out through the WordPress admin first. When you use those areas often, that kind of direct access adds up quickly.

There is also a broader workflow benefit here. Navigation commands reduce the mental interruption of leaving what you are doing just to find another area of the builder. Instead of switching modes by way of menus, you move directly to the next destination from the keyboard.

Context-Switching Commands: Reach The Right View Or Editing State Faster

Context-switching commands do not necessarily move you to a new page. Instead, they change what you are looking at, what state you are editing, or which builder tool is currently active.

Breakpoint changes are a clear example. Type tablet or phone into the Command Center, and the builder switches into that responsive view. Type desktop to switch back. That makes responsive editing much faster when you already know which breakpoint you want to work in.

Hover state works in a similar way. With an element selected, type hover state and the builder switches into hover editing mode for that element. When you are finished, type default state to return to the base styles. That saves time compared with opening the same state controls manually each time.

Opening panels and modals also fits this category. Type variables to open the Design Variables manager, layers to open Layers View, or canvas to surface available canvases you can switch to. This is especially useful in Divi 5 because there are more builder contexts, modals, and workspace tools than before, and they are not always the fastest things to reach by clicking.

These commands matter because they remove a lot of interface scanning. You do not need to remember exactly where a feature lives if you know what it is called.

Action Commands: Build, Apply, And Save Directly From The Keyboard

Action commands are the ones that actually build, apply, save, or modify something. They perform a direct change rather than simply changing your destination or editing context.

Adding an element is the simplest example. Open the Command Center, type button, and press Enter. Divi adds a Button module to the currently selected container. That same pattern works for many other elements, which makes the Command Center a quick way to build without moving back and forth through insertion dialogs.

But this part of the Command Center becomes much more powerful when you start queueing commands. A single queue can add a section, nest rows and columns, place modules, and apply presets inline. That is the part of the workflow where the biggest time savings appear, especially on sites with a strong preset system already in place. We cover that in more detail in Queueing Commands In Divi 5 To Build Your Layouts.

Save commands belong in this category too. Type save and press Enter to save the current page. Variations such as saving as draft, pending, or private are also available through search. For something you do repeatedly during a build, turning that into a quick keyboard sequence is a meaningful improvement.

Start Using The Command Center In Divi 5 Today!

The Command Center does not replace every other way of working in Divi 5. It gives you another path through the builder, and in many cases, it is the faster one. Navigation commands cut down the overhead of moving between pages and builder areas. Context-switching commands bring the right panel, mode, or view into focus faster. Action commands let you add, save, and build without so much interface handling.

Its biggest advantage may be that it does not require much memorization. Because it is searchable, you do not need to remember an exact shortcut for every action. You only need to remember that the Command Center is there and reach for CMD+K or CTRL+K before you start clicking through menus. Over time, that becomes less of a trick and more of a workflow habit.

For a broader overview of the feature, visit the Everything You Need To Know About The Divi 5 Command Center post. For a more practical roundup of high-value commands, see Divi 5 Commands Every Power User Should Know. And for the deeper queueing workflow, see Queueing Commands In Divi 5 To Build Your Layouts.

The post How The Command Center Changes The Divi 5 Workflow appeared first on Elegant Themes Blog.

Labels like New, Sale, Beta, or Popular are simple, but they help guide attention and clarify meaning at a glance. That is the real value of a badge. It does not carry the whole design. It adds a clear visual signal exactly where it is needed.

The good news is that this kind of detail is easy to build in Divi 5. You do not need a plugin or a workaround to create a clean text badge. With the right mix of text styling, spacing, background, and sizing, you can build one quickly and make it fit naturally into the rest of your site.

What Are Text Badges?

Text badges are short, styled labels that add context without taking up much space. You will see them clipped to product cards, tucked into pricing tables, attached to headings, or placed beside menu items. Their job is not to explain. Their job is to signal.

That is what makes badges useful. A label like New, Sale, Beta, or Popular can redirect attention faster than a larger block of copy. In a dense layout, that kind of visual shorthand matters.

Good badges also rely on restraint. The text stays short, the shape stays compact, and the color does most of the work. When those three things stay in balance, a badge can support the surrounding content without pulling too much attention away from it.

Building A Text Badge In Divi 5

A text badge might look like something you would normally build with custom CSS or a dedicated plugin. In practice, Divi 5’s Visual Builder is already well-suited for this kind of component. With the right combination of text styling, background, spacing, sizing, and border radius, you can build a clean badge entirely with native controls.

Adding A Text Or Heading Module

Both the Text module and the Heading module can work for a badge. The right choice depends on context.

Use the Text module when the badge is simply a visual label, such as New or Sale. It is quick to add, lightweight, and works well in most cases.

Use the Heading module when the badge needs to fit more intentionally into the page structure. That will be less common, but it can make sense when the badge is closely tied to a title or another structured piece of content.

For this walkthrough, we will use a Text module. Add it to your column, then type your label. One to three words is usually the sweet spot. Once the text gets longer, it starts to feel more like a caption than a badge.

For typography, a sans-serif font usually holds up best at small sizes. Medium or bold weight helps the text stay crisp. If you already use font variables in Divi 5’s Variable Manager, pull from those instead of picking one-off font settings.

The same goes for text color. Choose something with strong contrast against the background you plan to use. White on a dark fill or a dark tone on a light fill usually works well. If your brand colors are saved as variables, use them here too for consistency.

Styling It To Look Like A Badge

The background is the first thing that makes the module read like a badge. Open the Design tab, expand the Background option group, and apply a fill color that clearly contrasts with the text. If your project already uses color variables, this is a good place to use them.

You can also use a subtle gradient. If you do, keep it restrained. Closely related tones of the same hue usually work better at badge size than anything dramatic.

At this stage, you may notice that the background stretches across the full column. That happens because the Text module is block-level by default. Go to Design > Sizing and set the Width to fit-content. That shrinks the module to the width of its contents.

Next, shape the badge with padding. Open Spacing and add padding on all sides.

A good starting point is to make the left and right padding about 1.5 times the top and bottom values. For example, 3px vertically and 5px horizontally creates a compact badge shape without making it feel cramped.

Border radius determines the overall style. Increase it to create a pill shape, or keep it lower for a more rectangular label. Both can work well depending on the rest of the design system.

A subtle box shadow can also help separate the badge from the background. Keep the blur soft and the opacity low so it adds depth without calling too much attention to itself.

Your text badge is now ready.

Making Your Badge Accessible

Badges are often visually clear, but the surrounding context still matters. In many cases, the visible badge text will already be announced by assistive technology because it is real text inside the module. That means you do not always need to add anything extra.

What matters is whether the badge needs more context than the visible text provides. If it does, go to the Advanced tab, open the Attributes panel, and add an aria-label with a fuller description, such as Product status: Beta.

If the badge is purely decorative and the surrounding content already communicates the same information, you can set aria-hidden to true instead so screen readers skip it.

Positioning The Text Badge

A standalone badge usually does not need special positioning. It will follow the alignment of the column it sits in. If the column is centered, the badge centers with it. If the column is left-aligned, the badge follows that alignment too.

Things change when you want the badge to sit directly beside or partially overlap another element, such as a heading or image. In that case, open the Advanced tab and use Position settings. Setting the Position Type to Absolute gives you direct control over placement through horizontal and vertical offsets.

You may need to adjust those offsets for tablet and mobile using Divi 5’s Responsive Editor. Relative units such as percentages often scale more gracefully than fixed pixels in these cases.

Tip: Reuse Badges With Canvases And The Canvas Portal Module

If you plan to use the same badge styles in multiple places, Divi 5’s Canvases offer another useful option. You can build one or more badge variations on a detached Canvas, then place them into pages or Theme Builder templates with the Canvas Portal Module instead of rebuilding them each time.

The Canvas Portal Module inserts content from a detached Canvas directly into your main layout or Theme Builder template, which makes it especially useful for reusable components that need to appear in multiple places.

Here’s a practical way to set that up:

Build Your Badge On A Detached Canvas

Open the Canvas dropdown at the top left of the Visual Builder and create a new Canvas.

If you want the badge available site-wide, make the Canvas global. Name it something clear, such as Sale Badge. Then build your badge there using the same background, padding, border radius, and font settings covered above.

Once your badge is ready, set the section and row width to fit the badge cleanly. Reducing their default padding also helps prevent the Canvas Portal output from feeling larger than necessary when inserted into another layout.

Set Up Your Product Loop

Switch back to the main canvas and build your product loop using Divi 5’s Loop Builder. Query your WooCommerce products, design your card layout, and plug in dynamic content fields such as the product title, image, and price. Here’s a quick guide if you want to learn more about designing WooCommerce loops with Loop Builder.

Then add a Canvas Portal Module where you want the badge to appear.

Open the Canvas dropdown inside the module settings and select your Sale Badge canvas. Divi will render that detached Canvas content in that spot on the page, while edits still happen in the original Canvas.

Swap The Label When Needed

To change the badge from Sale to Popular, open that Canvas, update the text in the Text module, and save.

Every location using that Canvas Portal updates with it, which is one of the main advantages of the Canvas Portal workflow for reusable content.

If you need both labels running at the same time on different loops, create a second Canvas named something like Popular Badge and point that loop’s Canvas Portal Module to it instead.

This approach works especially well when your badges are part of a broader reusable system, such as repeated promo labels, feature markers, or announcement tags that appear in multiple templates. It is not necessary for a simple one-off badge, but it is a useful option when consistency and reuse matter.

Some More Types Of Text Badges

The approach above covers most badge use cases, but the same styling logic can be adapted in a few other ways.

• Icon Badges: Use an Icon List module with a single item when you want a small icon alongside the label. Apply the same background, fit-content width, padding, and border radius.
• Image Badges: Divi 5’s Nested Modules let you place an Image module inside another module, which works well for small flags, avatars, or logos in a badge-like container.
• Outline Badges: Skip the filled background and use a 1px or 2px border instead. This lighter style works especially well on dark backgrounds.
• Paired Badges: Place two modules inside a Module Group set to row direction. Leave one as a plain-text label and style the other as a badge. This works well for pairings like Status: Live or Plan: Pro.
• Reusable Badge Presets: Once you land on a badge style you like, save it as a Preset so you can apply the same badge treatment consistently without manually restyling each module.

Text badges are small, but building them well touches many of the things that make Divi 5 useful: color variables, spacing ratios, border radius, presets, responsive controls, custom attributes, and reusable content systems.

None of those pieces are complicated on their own. Put them together, and you can build a badge system that stays consistent across your site with very little maintenance.

Start Building In Divi 5 Today!

Strong pages often stand out in the details. A badge in the right place, with the right color and proportion, can add clarity before a visitor reads a full sentence.

Small details done well make the whole page feel more intentional. Divi 5 gives you the tools to build those details natively, keep them consistent, and reuse them without workarounds.

The post How To Create Text Badges In Divi 5 appeared first on Elegant Themes Blog.

That makes it especially useful during the build’s refinement stage. If you need to match spacing across repeated modules, sync button styles, clean up imported sections, or roll out a design change without manually updating each element, Extend Attributes can save significant time. It also fits naturally into Divi 5’s broader workflow without making the process feel repetitive or manual.

Here are three practical scenarios that show how it works.

What Extend Attributes Does

Extend Attributes lets you take attributes from one element and apply them across your layout in a few clicks. You can choose what to extend, whether styles, content, presets, or a combination, then define the scope, such as a parent row, parent section, or the entire page.

Unlike a basic copy-and-paste workflow, Extend Attributes gives you much more control over what actually moves. You can extend only the fields you modified, limit the change to a specific option group, and even apply attributes across different element types. That means a style decision made once can be reused more intentionally across the rest of the layout.

The more you use it, the more your workflow shifts away from manually maintaining each element individually. Instead, you make a design decision once and propagate it where it belongs.

Learn Everything About Divi 5’s Extend Attributes

Using Extend Attributes In Divi 5

To get started, right-click any styled element in the Visual Builder and select Extend Attributes.

You can also right-click directly on a specific option group, such as Font or Spacing, to open the panel with that group pre-selected.

Once the panel opens, you’ll see six settings that work together to control what gets extended and where it goes.

• Extend From Element is the source element from which attributes will be extended.
• Extend To Location defines the scope, such as the parent column, row, section, or entire page.
• Extend To Element Type lets you target specific element types, such as headings, text modules, buttons, people, or all modules.
• Attribute Type To Extend is where you choose whether to extend styles, content, presets, or a combination.
• Option Group To Extend narrows the action to a specific group, such as typography, spacing, border, or all option groups.
• Modified Fields To Extend lets you extend only the fields you changed, rather than all fields in the selected option group.

3 Examples Of How Extend Attributes Saves You Time

These are not edge cases. Each scenario below is the kind of cleanup or consistency work that appears on real projects all the time, and each one is exactly the kind of task Extend Attributes is built to speed up.

1. Matching All Cards In A Pricing Table At Once

Building a pricing table feels straightforward until the finishing stage. The cards may have been styled at different points during the build, and once they are side by side, the inconsistencies stand out. The same thing happens with feature comparison tables or any multi-column layout built in separate passes.

Going back through each column individually means opening separate settings panels and manually syncing backgrounds, button styles, spacing, and text colors until everything lines up. It works, but it is slow and easy to miss something.

Style one column the way you want it. Then open Extend Attributes, set the scope to Parent Row, switch Element Type to match the elements you want to target, and choose the option groups you want to extend.

To sync the background across all columns, target the column and extend the relevant background settings.

To carry over button styling, switch the Element Type to Button and extend the button-related option groups.

You can go even narrower. If you only want to push a single value, such as text color, use Modified Fields To Extend so only that field is propagated.

Instead of repeating the same fix across multiple modules, you make the change once and let the row catch up.

2. Syncing Person Modules Across A Team Section

Team sections are another place where small inconsistencies add up fast. You may have a large group of Person modules spread across several rows, each created at a different time during the build. By the end, border styles, image treatments, shadows, and text alignment can drift apart.

Style one Person module the way you want it.

Then right-click, open Extend Attributes, set the scope to Parent Section, choose Person as the Element Type, and select the option groups you want to carry over. Every Person module in that section can pick up the same styling in one action.

That turns what could be a long cleanup pass into a quick consistency fix.

3. Rolling Out A New Testimonial Style Across An Existing Section

Testimonial sections often evolve late in a project. You may have the structure in place, the content approved, and the section working well, but then decide the cards need a stronger visual treatment to better match the rest of the page. Maybe the spacing needs tightening, the background needs more contrast, or the quote styling needs to feel more polished.

Updating each Testimonial module manually works, but it is exactly the kind of repetitive cleanup that slows everything down.

Style one testimonial card to match how you want the rest of the section to look. Then open Extend Attributes, set the scope to Parent Section, set Element Type to Testimonial, and use Modified Fields To Extend when you only want to push the fields you actually changed.

This is a fast way to apply a refined testimonial style across the full section without rebuilding cards or redoing the same edits one by one.

Extend Attributes And The Bigger Picture

The three examples above show specific use cases, but they all point to the same larger benefit. Every time you use Extend Attributes, you make one decision and apply it more deliberately across the layout. That is not just faster. It is a more scalable way to build.

A surprising amount of time on real projects is spent maintaining consistency rather than designing from scratch. Matching cards, aligning repeated modules, cleaning up imported layouts, and responding to late-stage client changes are all common tasks. They are not difficult, but they are repetitive, and repetition is where time disappears.

Extend Attributes becomes even more useful when paired with Divi 5’s broader design system. If you style an element using Design Variables and then extend those attributes across your layout, the resulting elements remain connected to those variables. Update the variable later, and the change cascades to every element that uses it.

Presets add another layer of efficiency. When you extend presets rather than use only static values, you are not just copying a look. You are reinforcing a system that can be updated later without another round of manual cleanup.

Try Extend Attributes In Divi 5 Today

Divi 5‘s Extend Attributes does not change the way you design. It changes how often you have to repeat yourself. Style one element, define the scope, and propagate that decision where it belongs. The creative work still comes from you. The repetitive setup work is what gets reduced.

When you combine Extend Attributes with Design Variables and Presets, it becomes more than a convenience feature. It becomes part of a faster, more consistent workflow that makes large layouts easier to manage and late-stage changes much easier to handle.

The post How Extend Attributes Helps You Design Faster In Divi 5 appeared first on Elegant Themes Blog.

Divi 5 now lets you edit Theme Builder areas directly in the builder, regardless of whether you’re working on a page or a template-generated view. That sounds like a small change until you consider how much of a site build happens in those constant trips between content editing and template editing.

What Is Full Site Editing In Divi 5?

Divi has always been more than a page builder. With the Theme Builder, you could already create custom headers, footers, blog post templates, product templates, category templates, and other structural parts of your site. What changes in Divi 5 is the editing experience.

Subscribe To Our Youtube Channel

Previously, those Theme Builder templates were managed separately from most page-editing sessions, so if you spotted an issue in the header, footer, or body template while designing a page, you usually had to leave the builder, open the Theme Builder, make the change, and then return. In Divi 5, those boundaries are removed.

Your header, footer, body template areas, and page content can all be edited in the same builder session, which means you can work on the full page in context instead of piecing it together across different screens. That makes full site editing more than a convenience. It gives you a clearer view of how every part of the page works together, helps you make faster design decisions, and removes a lot of the friction that used to come from switching back and forth between templates and content.

What Changes When Your Entire Site Is Editable At Once

Editable Theme Builder areas sound like a workflow convenience, and they absolutely are. But headers, footers, and body templates rarely get designed once and never touched again. They get revisited, refined, and adjusted as the rest of the site takes shape. Every trip out of the builder used to interrupt that process. Here is how that changes in Divi 5.

1. You’re Designing The Full Picture, Not Assembling Separate Parts

A visitor experiences your site as one continuous flow, not as a header, a page, and a footer built in separate places. Until now, though, that was often how the editing process worked. Your header lived in the Theme Builder, your page content lived in the Visual Builder, and every time something felt slightly off, you had to leave one area to fix the other.

Full site editing closes that gap. Now your header sits at the top, your page content runs through the middle, and your footer finishes the page, all visible and editable in one session. Design decisions happen in context the first time, so you’re not constantly correcting something you couldn’t fully see.

This also means the Edit With Divi button is now available across your site, not just on singular content such as posts, pages, or products. Theme Builder-controlled areas can now be edited directly from the front end wherever they appear.

2. Everything Is Live The Moment You Enter The Builder

Divi 4 offered a version of this idea, but each Theme Builder area had to be activated separately before you could interact with it. It worked, but it still introduced friction and reinforced the sense that you were moving between isolated editing zones.

Divi 5 removes that extra step. Theme Builder areas are editable immediately when you enter the builder, and you can interact with them seamlessly in the same session. You can copy, paste, drag, and drop between areas without stopping to activate each one first. The whole site feels like a single editable canvas.

3. It Works Across Theme Builder Templates, Not Just Standard Pages

Most real websites involve more than a homepage and a few static pages. Blog archives, single post layouts, WooCommerce product templates, category pages, and other dynamic views are all often controlled through the Theme Builder. Historically, that is where editing could start to feel fragmented.

Full site editing works across those template-driven views too. Open a blog post, and the header, body template, and footer are all there. Visit a category page, and the same principle applies. Whatever mix of Theme Builder templates is controlling the view you’re on, those areas are accessible in the same editing session.

That makes complex template structures easier to work with because you do not have to keep jumping between the front end and the Theme Builder just to understand what is controlling what.

4. You Always Know Exactly What You’re Editing

When everything on your site becomes editable in a single session, a reasonable concern arises immediately: how do you stay oriented? On a site with global templates and multiple layout areas visible at once, it is easy to worry about editing the wrong thing.

Divi 5 helps solve that with two interface tools that provide constant context.

The Layers panel gives you a structural view of everything on the canvas, organized by area, so you can quickly see whether something belongs to the header, page content, or footer before making a change.

The Breadcrumbs in the settings panel provide another layer of clarity. When you select an element, the breadcrumb trail shows exactly where it lives in the site’s structure, helping you confirm whether you’re editing a global template area or page-specific content.

Together, these tools make complete site editing much easier to navigate, especially on larger sites with more advanced template structures.

5. You Can Keep The Power While Limiting Client Risk

Full site editing opens up a lot in the builder, which is excellent for designers and developers, but it also makes client handoff worth careful consideration. A client who accidentally edits a global header template while trying to change page content can quickly create site-wide issues.

Divi 5 addresses this in two useful ways. If Theme Builder areas are getting in the way while you’re working, you can disable the display of header, body, or footer templates in the builder settings to simplify the canvas.

When it comes time to hand off the site, the Role Editor lets you restrict Theme Builder access for specific user roles. That means clients can still edit the content you want them to manage without exposing the global templates that control the rest of the site.

That balance is what makes the feature practical. You get the speed and flexibility of full site editing during development, while still controlling how much access other users have after launch.

Start Building In Divi 5 Today!

Good design does not happen in fragments. It happens when you can see the full picture, make a decision, and watch it land in context. For a long time, site builders worked against that by forcing you to assemble parts separately and switch between editing environments to understand how everything fit together.

Full site editing brings the builder closer to how a website actually exists: not as disconnected templates and isolated editing screens, but as one continuous experience. Divi has long had the tools to build entire websites. In Divi 5, the editing experience now does a much better job of reflecting that reality.

The post How Editable Theme Builder Areas Improve The Divi 5 Workflow appeared first on Elegant Themes Blog.