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.

Preview

Here’s a quick look at the 7 Inline Element Designs included in the pack. The download is further down the post.

Subscribe To Our Youtube Channel

Download 7 Inline Element Designs For Divi 5

Get all 7 designs 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 (8 Exports)

After you download and unzip the file, you’ll find 7 styled Inline Element Section exports, plus 1 file containing all designs.

Styled – Inline Elements Section 1 to 7 (7) → Seven fully styled inline element section layouts with bold typography, decorative shapes, icons, and accent graphics that you can use as-is or customize.

Styled – Inline Element Sections (All) → Imports all 7 designs into your Divi Library at once.

How To Use The Inline Element Designs

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

1. Import Sections Into The Divi Library

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

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

Choose any Inline Element Section JSON you’d like to use, then click Import Divi Builder Layouts.

2. Add An Inline Element Design To Any Page

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

In the Insert Section modal, click Add From Library and select an Inline Element Section layout.

Finally, click Use This Section.

3. Swap The Content

Once the section is on the page, replacing the placeholder content takes only a few clicks. Start by updating the heading, supporting copy, buttons, and links so the section matches your message. Then replace any placeholder icons, shapes, or images with your own assets as needed.

Because these inline element layouts use decorative graphics and text-based accents, it’s best to replace one item at a time and preview the result as you go. This helps preserve the balance between text, spacing, and visual detail.

If you’d like to simplify or expand a design, duplicate or remove the existing modules instead of rebuilding the section from scratch. That’s the easiest way to preserve spacing, alignment, and visual rhythm.

4. Adjust Styles (Optional)

These inline element designs are already styled, so you can use them immediately or refine them to better match your brand. Update typography, colors, spacing, borders, shadows, icons, and decorative shapes 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 other styling options.

To refine the visual accents, open the row, group, or module that controls the decorative element, and use the Design tab to tweak Background, Border Width, Border Color, Border Radius, Box Shadow, Sizing, and Spacing.

If your version uses arrows, icons, outlines, badges, circles, or other decorative inline graphics, keep those relationships in mind as you resize or replace them so the layout still feels intentional.

Use Divi’s responsive editing tools to adjust spacing, alignment, and stacking behavior on smaller screens so the composition remains balanced across devices.

Tips For Effective Inline Element Designs

Inline element designs work best when the accents support the content instead of distracting from it. Use these quick tips to keep the sections bold, balanced, and effective.

Use Decorative Elements To Support The Message

Shapes, arrows, badges, and icons should reinforce the headline or call to action, not compete with it. Let the text stay primary while the decorative details guide the eye through the design.

Keep The Visual Language Consistent

If one section uses outlined shapes, bold icons, and bright accent colors, the surrounding elements should feel like part of the same system. Consistency helps the design feel polished and intentional.

Make The Headline Easy To Scan

These designs often use expressive typography and layered accents, so clarity matters. Keep the heading readable at a glance and make sure decorative pieces don’t overpower the message.

Use Accent Color Strategically

A strong accent color can help key words, shapes, and calls to action stand out. Use it intentionally so the section feels energetic without becoming visually noisy.

Check The Layout On Mobile

Decorative inline elements can shift noticeably on smaller screens. Review each section on tablet and phone views to make sure the text stays clear and the accents still feel well placed.

Start Building In Divi 5 Today!

These 7 Inline Element Designs give you a fast way to add bold, polished visual interest to hero sections, CTA blocks, promotions, announcements, and more. Swap the content, keep the styling or adapt it to your brand, and you’ll have a standout section ready in minutes with Divi 5‘s Visual Builder.

The post 7 Inline Element Designs For Divi 5 (Free Download!) appeared first on Elegant Themes Blog.

In this post, we’ll explain what Composable Settings are, why they matter, how they work, and how to use them more effectively in real projects. We’ll also cover practical use cases and workflow tips so you can build faster while keeping your settings organized.

Let’s get started.

What Are Composable Settings?

Composable Settings allow you to enable additional design option groups for a module’s sub-elements, such as the title, button, image, icon, or body text inside a module like Blurb or Testimonial. In earlier versions of Divi, each sub-element came with a fixed set of design controls. In Divi 5, you can expand those controls on demand by hovering over a sub-element option group in the Visual Builder and clicking the Toggle Options icon.

After you enable an option group, it appears instantly as a nested settings group inside that sub-element panel. This gives you more control exactly where you need it while keeping the interface cleaner by default.

Composable Settings improve Divi’s design workflow in several meaningful ways. They reduce the need for CSS workarounds for many sub-element styling tasks, make the builder more consistent by exposing familiar option groups in more places, and help you work faster by letting you add controls only when you need them. For beginners, that means more flexibility without code. For experienced users, it means less friction and more precision inside the builder.

Key Features

• More Control for Sub-Elements: Enable additional design option groups for sub-elements such as buttons, titles, images, icons, and body text.
• On-Demand Options: Click the Toggle Options icon to enable only the settings you need for a specific sub-element.
• Clean Nested Groups: Enabled options appear as nested settings groups directly inside the relevant sub-element panel.
• Preset Support: Enabled option groups can be saved in presets, making it easier to maintain styling consistency across your site.
• Less Need for CSS: Many adjustments that previously required custom CSS can now be handled directly in the builder.

In the past, modules had a fixed set of design settings. For example, you could style a Blurb title’s text, but you couldn’t easily apply things like a background, border, box shadow, or spacing controls specifically to that title.

Composable Settings remove much of that rigidity. By enabling additional option groups for individual sub-elements, you can create more advanced module designs without depending on custom code for routine styling tasks.

How To Use Composable Settings In Divi 5

Using Composable Settings in Divi 5 is straightforward. Here’s a simple walkthrough to help you get started.

Open any module in the Visual Builder that you want to customize. For example, you might enable additional settings for the Quote Icon inside a Testimonial module.

Head to the Design tab and expand the Quote Icon menu. Hover over the option group to reveal the Toggle Options icon.

Click the icon to view additional option groups that are not currently enabled for that sub-element.

Enable the option groups you want by checking the corresponding boxes.

Once enabled, those option groups will appear as nested settings inside the Quote Icon panel.

From there, you can adjust settings such as spacing, border, box shadow, filters, transforms, and more, depending on which option groups you enabled for that sub-element.

This makes it much easier to customize individual parts of a module without resorting to workarounds.

Design Examples

Composable Settings are more than a UI improvement. They make it easier to build more refined, custom-looking designs with native controls. Here are a few practical ways to use them.

1. Precision Spacing For Blurb Titles

By default, adjusting the space around a title often meant tweaking line height or using custom CSS. With Composable Settings, you can apply spacing controls directly to the title itself.

For example, if you want a Blurb Title to have extra bottom spacing to separate it from the Body Text, open the Title Text option group, click Toggle Options, and enable Spacing. You can then add bottom padding or margin directly to the title without affecting the rest of the module.

2. Animated Buttons For CTAs

Composable Settings also make it easier to style buttons inside modules such as Call To Action and Pricing Table. Instead of relying on CSS for extra visual emphasis, you can enable the relevant option groups for the module’s button and style it directly in the builder.

For example, you can enable additional settings for the Button sub-element and use them to make a featured pricing button stand out more clearly from surrounding content.

3. Team Member Image Effects

The Person module is useful for team pages, but sometimes the image needs more individual styling than the default settings allow. With Composable Settings, you can treat the image as a more independent design element.

For example, you can enable additional option groups such as Sizing, Spacing, Border, Box Shadow, Filters, or Transform for the Image sub-element. This gives you more control over the photo’s presentation without affecting the rest of the module.

4. More Consistent Styling Across Repeated Modules

One of the most practical advantages of Composable Settings is that they work well with presets. If you regularly style the same sub-elements across multiple modules, you can enable the needed option groups once in a preset and reuse that setup throughout your site.

This is especially helpful for repeated module patterns such as team sections, blurbs, testimonials, pricing tables, and CTAs, where design consistency matters and repetitive setup slows down your workflow.

Tips And Best Practices

To get the most from Composable Settings, it helps to use them strategically. They add flexibility without forcing every possible option into the interface at once, so a little restraint keeps your workflow fast and organized.

Only Enable What You Need

One of the biggest advantages of Divi 5’s interface is that it stays cleaner by default. Since Composable Settings are enabled on demand, you only need to turn on the option groups you actually plan to use. If you no longer need a specific group, you can disable it to reduce clutter and keep the editing experience focused.

Combine Them With Presets

If you frequently enable the same option groups for the same kinds of modules, save that setup in a preset. This way, each module using the preset starts with the same sub-element option groups already enabled, which can save time and improve consistency across your design system.

Check Responsive Views Early

Because Composable Settings let you apply spacing, sizing, borders, transforms, and other adjustments directly to sub-elements, it’s smart to review your design across devices early in the process. Divi 5’s Customizable Responsive Breakpoints make that easier. A sub-element that looks balanced on desktop may need different spacing or sizing on tablet and phone.

Use Composable Settings To Reduce CSS Debt

A practical way to get more value from this feature is to use it wherever it replaces simple CSS overrides you would otherwise add to a site. The fewer minor styling fixes you push into custom CSS, the easier your projects are to maintain later, especially when handing them off to clients or teammates.

Unlock More Design Flexibility With Divi 5

Composable Settings in Divi 5 are more than just a new feature. They reflect a broader shift toward a more flexible, modular, and intuitive design system inside the builder. By letting you enable additional design option groups for specific sub-elements, Divi 5 gives you more control without overwhelming the interface from the start.

Whether you’re adding precise spacing to a title, refining the styling of a button, or giving a team photo more visual polish, the controls you need are now easier to access and easier to reuse.

If you haven’t already, download the latest Divi 5 release, experiment with Composable Settings, and see how much more you can do without custom code.

The post Everything You Need To Know About Composable Settings In Divi 5 appeared first on Elegant Themes Blog.

With Divi 5, you can build hotspots visually using Interactions, Module Groups, Canvases, and the Canvas Portal Module. No custom code required.

What Are Image Hotspots?

Hotspots are clickable or hoverable zones layered over an image, graphic, or section background. Each marker sits at a precise point, and when a visitor interacts with it, supporting content appears right there: a short label, a tooltip, a product card, or a richer content panel.

You see hotspots used on product pages, maps, diagrams, room mockups, and infographics because they keep layouts clean while still letting people explore details on demand.

What makes them work is control. Visitors choose what to reveal and when. Instead of forcing everyone through the same wall of copy, you let them pull information from the exact spot they are already examining.

What Are Divi 5 Interactions?

Divi 5 Interactions is Divi 5’s built-in interaction system for adding dynamic behavior inside the Visual Builder. You can trigger actions from events such as Click, Mouse Enter, Mouse Exit, Viewport Enter, Viewport Exit, and Load.

Each interaction is built from three parts:

• Trigger: what starts the interaction
• Effect: what happens next
• Target: which element receives the effect

That effect can show or hide an element, toggle visibility, switch presets, add attributes, scroll to an element, or respond to mouse movement. Because Interactions are native to Divi 5, you can build popups, toggles, reveals, tooltips, and hotspots without extra plugins.

Canvases And Portals In Divi 5

A Canvas in Divi 5 is a detached workspace inside the Visual Builder. Every page starts with a Main Canvas for visible page content. Additional canvases stay separate while you build, which keeps complex off-canvas elements organized and out of the way.

Canvases can be local to one page or global across your site. That makes them useful for reusable popups, menus, modals, floating panels, and hotspot content you want to manage separately.

The Canvas Portal Module gives you placement control. Add a portal anywhere in your layout, connect it to a canvas, and that canvas content renders in that exact spot.

For image hotspots, Canvases are a strong fit because they keep revealed content detached from the main layout, easier to organize, and easier to duplicate when you build multiple hotspot cards.

How To Add Hotspots To Images In Divi 5

The workflow below uses Interactions, Module Groups, Canvases, and the Canvas Portal Module together so each hotspot panel can be managed separately from the main layout.

Add Your Base Image

Add an Image module to your column and upload your image. In Design > Sizing, enable Force Fullwidth so the image scales predictably and your markers stay aligned more reliably as the layout changes.

Choose an image with clear focal points and enough visual separation between subjects. Good contrast makes markers easier to spot. Busy overlap makes placement harder and weakens the effect. High-resolution images also help because visitors can inspect details without the base image breaking down.

If you need the hotspot area to span a whole section instead of a standalone image, you can also build this with a section background image. In that case, set the background image to Cover, Center, and No Repeat, then give the section enough min-height for the composition to breathe.

Build And Style Your Marker

Add a Module Group in the same column as the Image module. The Group acts as the shared container for the marker and the content tied to it.

Groups matter here because they move, duplicate, and position as one unit. That is much easier than repositioning a loose icon and a separate content element every time you adjust the layout.

Set the Group layout direction to Row if you want the revealed content to sit beside the marker. Use Column if you want the content to appear above or below it.

Under Design > Sizing, set the Group to a controlled width so it does not stretch across the whole column. A fixed width can work, but a responsive value is usually better for hotspot content. For example, a max width around 300px to 350px keeps the build manageable while leaving room for readable content.

Now add an Icon module inside the Group. Icons make strong markers because they stay crisp at any size, load quickly, and are easy to recolor and reuse.

Open the Design tab and style the icon. Pull the color from your Design Variables so future palette changes update all markers consistently.

For better responsiveness, use a fluid size if needed. A value such as clamp(14px, 3vw, 24px) keeps the marker usable on smaller screens without growing too large on wide layouts.

Add a hover state for visual feedback. In Design > Transform, set Scale X and Scale Y slightly above 100%. A subtle bump is enough to tell people the marker is interactive.

If you plan to reuse the same marker style, save it as an Element Preset now. That keeps every hotspot visually consistent.

Create A Canvas For Your Hotspot Content

Open the canvas dropdown in the Visual Builder and select Add New Canvas. Give it a clear name such as “Hotspot 1 Content.”

Once created, the new canvas opens as its own workspace. It stays separate from the Main Canvas while you build, which keeps the page editor cleaner when you are working with multiple hotspots or more detailed content cards.

Build Your Hotspot Card

Inside the new canvas, add a section and row, then build the content you want to reveal. For a product-style hotspot, a small Heading module, a short Text module, and a Button module are usually enough.

Set a controlled width early so the card does not inherit oversized section or row dimensions. A compact width such as 250px to 300px works well for short content cards, while responsive values such as min(60vw, 300px) make the card adapt better across breakpoints.

Add a background color that separates the card from the image behind it, ideally from your Design Variables. Then add padding, border radius, and a light box shadow so the content reads as its own layer.

For this example, keep the copy short. Hotspots work best when they reveal useful context quickly, not when they turn into mini landing pages.

Place It With A Canvas Portal

Switch back to the Main Canvas. Inside the same Module Group as your Icon, add a Canvas Portal module and choose the canvas you just created from the Canvas dropdown.

Under Meta, add a clear Element Label such as “Hotspot 1 Portal.” This becomes helpful once you start assigning interaction targets.

To keep the card hidden until someone interacts with the marker, hide the content by default before wiring up the reveal interaction. In Divi’s hotspot workflow, this is commonly done from Advanced > Visibility using Disable On for Desktop, Tablet, and Phone on the hotspot content element so Interactions can control when it appears.

Position Your Group

Open the Module Group settings and go to Advanced > Position. Set Position to Absolute. This removes the Group from normal flow so you can place the marker exactly over the image.

After choosing Absolute, Divi shows the Offset Origin grid. That grid defines the reference point for your measurements. Choose the origin that makes placement easiest for the part of the image you are targeting.

From there, adjust Vertical Offset and Horizontal Offset until the marker sits exactly where you want it. These values will be different for every image, so treat example numbers as reference only.

Set the Group Z Index to 2 or higher so it stays above the image.

Then position the Canvas Portal itself. Giving the portal absolute positioning lets you offset the hotspot card relative to the marker so it can sit to the side, above, or below without disturbing the rest of the layout.

Connect Markers To Content

Now connect the marker to the hotspot content with Interactions. Open the Icon module settings and go to Advanced > Interactions. Add a new interaction with:

• Trigger Event: Mouse Enter
• Effect Action: Show Element
• Target Module: your Canvas Portal

Using Mouse Enter on the icon keeps the trigger precise. The card appears only when the visitor reaches the marker.

Next, add the hide interaction. If the revealed card contains a button or link, place this interaction on the Module Group rather than the icon:

• Trigger Event: Mouse Exit
• Effect Action: Hide Element
• Target Module: the same Canvas Portal

That split matters. If Mouse Exit lives only on the icon, moving from the marker into the revealed card can close the card too early. Putting the exit trigger on the Group keeps the hotspot open while the cursor remains anywhere inside the marker-plus-content area.

If the hotspot content is display-only and contains no interactive controls, you can keep both show and hide interactions on the icon itself. On touch-heavy layouts, consider using Click with Toggle Visibility instead of hover so the experience is clearer on phones and tablets.

Add More Hotspots

Once the first hotspot works, the rest are mostly duplication. Duplicate your canvas in the Canvas Manager, rename it, and replace the content for the next hotspot.

Then duplicate the Module Group on the Main Canvas. Update the Canvas Portal so it points to the new canvas, reposition the Group and Portal, and make sure both interactions target the correct portal.

Nothing about hotspot placement is universal. Each hotspot needs its own offsets, and each content panel needs its own interaction target.

If you are repeating the same marker style across the page or site, Element Presets are worth using. Style once, apply everywhere, and keep your hotspots consistent.

Helpful Build Tips Before You Publish

Before you publish, take a few minutes to pressure-test the build. Hotspots are meant to feel effortless, but that only happens when the markers are easy to spot, the revealed content is easy to scan, and the interaction behaves predictably across devices. These final checks help ensure the experience feels polished rather than fragile.

• Keep hotspot labels and card copy short so the interaction stays fast to scan.
• Use strong contrast between the marker and the image behind it.
• Leave enough space around focal points so markers do not overlap.
• Test hover-based hotspots on touch devices and switch to Click plus Toggle Visibility if needed.
• Use clear Element Labels for portals and interactions once you have multiple hotspots on the page.
• Use Canvases to keep hotspot content organized, detached from the main layout, and easier to duplicate.

Build Interactive Layouts With Divi 5 Today!

Hotspots look advanced from the outside, but in Divi 5, they are mostly a matter of structure: place the marker, create the content, position both pieces, then connect them with Interactions.

Once you understand that pattern, the same approach carries over to tooltips, product reveals, floating cards, popups, and other interactive layouts. Divi 5 gives you the control to build it all directly in the Visual Builder.

The post How To Add Hotspots To Images In Divi 5 appeared first on Elegant Themes Blog.

What makes it especially useful for power users is not just speed. The Command Center gives you one searchable place to run builder actions, jump to settings, open panels, and navigate around your site. That means less interface friction and fewer unnecessary clicks during a long build session.

This post breaks down five Command Center commands that are especially worth knowing. Not every command in the system, just the ones that are most likely to save time during real work.

1. Canvas Grid View

If you are building with Divi 5 Canvases (detached workspaces used for off-canvas menus, popups, slide-ins, and other content that lives outside the main page layout), Canvas Grid View is one of the fastest ways to see what is attached to the current page.

When you open it, you get a visual overview of the canvases tied to the page you are working on. That makes it easier to jump between them without leaving the builder or losing your bearings.

To open it, press CMD+K on Mac or CTRL+K on Windows, type canvas grid, and press Enter. You can also open it from the canvas controls in the builder UI, but the Command Center route is faster when you are already deep into a build.

The value here is mostly organizational. Once a page starts using more than one canvas, having a quick visual way to open the right one becomes much more useful than clicking around through interface controls.

2. Hover State And Default State

Designing hover interactions usually means a lot of switching back and forth. You set a hover style, preview it, return to the default state, adjust something, and then check the hover state again. Each switch is small, but the repetition adds up.

The Command Center makes that faster. With an element selected, open the Command Center and type hover state, then press Enter. Divi switches the selected element into Hover State mode. When you are done, open the Command Center again, type default state, and press Enter to switch back.

This is a small shortcut, but it pays off because hover design is something you often revisit while styling buttons, images, cards, and menus. The easier it is to switch states, the easier it is to fine-tune those details.

3. Save And Save Variants

Saving is one of the most frequent page-level actions in any build session, so it makes sense to keep it as close as possible. Open the Command Center, type save, and press Enter to save quickly without hunting for the save controls.

Where the Command Center becomes even more useful is with save variants. Divi 5 supports different save actions tied to post status, including options such as Save & Set To Draft, Save & Set Pending, and Save & Set Private. These are especially useful in content-review or team workflows where publishing status matters as much as saving the work itself.

If you only need a quick save, CMD+S on Mac or CTRL+S on Windows is still the fastest option. The Command Center becomes the better route when you want to save and change status in one move.

4. Navigate To Any Page Or Major Builder Area

This is one of the Command Center features that can save the most visible time during a real build.

Instead of opening the WordPress dashboard, searching for a page, and launching the builder again, you can open the Command Center and type the name of the page you want. Divi surfaces it as a navigation result, and pressing Enter takes you straight there from inside the builder.

The same idea applies to major builder destinations. Type Theme Builder to jump to the Theme Builder. Type Theme Options to open Theme Options directly. The Command Center effectively acts as a navigation layer across your Divi and WordPress workspace.

This is the kind of command that changes how you move through a site. Once you get used to it, going back to dashboard-first navigation feels much slower.

5. Inspector And Layers

The Inspector and Layers panels are two of the most useful interface tools in Divi 5, especially on larger or more complex layouts.

The Layers panel shows the hierarchical structure of the page, including sections, rows, groups, columns, and modules. That makes it one of the fastest ways to understand or navigate a complex layout. The Inspector helps you review the styles and attributes applied to the selected element, which is useful when you are troubleshooting why something looks the way it does.

Open the Command Center, type layers or inspector, and press Enter.

The real advantage is not just that these panels open quickly. It is that the Command Center makes it easier to build the habit of using them more often. That is especially helpful on smaller screens, where you may prefer to keep panels closed until you need them.

Bonus: Edit Element

The Edit command becomes more useful as your page structure becomes more organized.

When you open the Command Center and type something like section, Divi can surface matching editable elements on the current page so you can jump to and edit them more directly. This becomes much more practical when you use clear Admin Labels, because those labels make it easier to identify the exact element you want.

If your sections, groups, or modules are labeled consistently, you can often type that label name and get to the right element faster, without digging through the Layers panel or clicking around the canvas.

That is one of the quieter benefits of keeping Admin Labels tidy. They do not just help inside Layers and wireframe-style workflows. They also turn the Command Center into a much better page-wide navigation tool. Admin Labels are also useful when working with Interactions, where clear naming helps you target the right elements more confidently.

Use The Command Center In Divi 5 Today!

The easiest way to build Command Center habits in Divi 5 is to start with the command tied to your most frequent annoyance. If you are constantly jumping between pages, start with navigation. If you are always switching in and out of hover styling, start with Hover State and Default State. Pick one command, use it until it becomes automatic, and then add another.

That is part of what makes the Command Center so effective. It is more flexible than a traditional keyboard shortcut because you do not need perfect recall. Start typing, and Divi surfaces matching commands, pages, panels, and actions as you go. You only need to know enough to recognize what you want.

Divi 5 keeps adding more tools and builder areas, and the Command Center is one of the easiest ways to access them without memorizing where everything lives in the interface. Once it becomes part of your routine, a lot of the builder starts to feel faster.

The post Divi 5 Commands Every Power User Should Know appeared first on Elegant Themes Blog.

In this tutorial, we’ll build an interactive image-card carousel in Divi 5 using the Group Carousel module. Each card starts clean, then reveals its title and call to action when a user hovers over it. We will pair that reveal with a subtle image scale effect using Divi 5’s Interactions system.

What We’re Building

This design example uses Divi 5’s Group Carousel module, with each slide acting as a container for a layered image card. A parent Group holds the card, an Image module provides the visual base, and a nested content Group holds the heading and button. That structure matters because Divi 5 Interactions can target labeled elements independently, letting you control the reveal without affecting the rest of the slide.

By default, each card shows only the image. On hover, two things happen at the same time: the image scales slightly inside its container, and the hidden content fades into view. Both behaviors are handled with Divi 5’s built-in Interactions and Transition settings.

Step-By-Step Tutorial

This build comes together in eight steps, starting with the carousel layout and finishing with the hover interactions, transitions, duplication workflow, and responsive adjustments.

Step 1. Create The Carousel Layout

Add a new Section to your page and set the Background Color to Black (#000000).

Next, set the Row Width to 70% and keep it center-aligned. Inside the row, add the Group Carousel module.

The Group Carousel module works well here because each slide can hold multiple Divi modules, not just a single image or text field. That makes it ideal for layered cards like the one we are building.

Once the module is in place, go to Content > Carousel Settings and set it to display 3 Slides. Then enable Automatic Rotation and Center Mode.

Three slides keep the layout readable on desktop, center mode puts more visual emphasis on the middle card, and automatic rotation adds motion before the user interacts with anything.

Next, open the Dot Navigation settings and set the position to Left. Then change the dot color to White so it remains visible against the dark background.

With the carousel in place, the next step is to build the first card inside it.

Step 2. Build The First Carousel Card

Select the first Carousel Slide and set its Padding to 20px so the card has breathing room inside the slide.

Next, add a Group inside the slide to act as the main card container. Then add an Image Module inside that Group and upload your image.

Select the parent Group and apply a Border Radius to shape the card. Apply the same radius to the Image Module so both edges align visually. To keep the image neatly cropped when it scales on hover, set the parent Group’s Overflow to Hidden in the Advanced tab.

Now add a second Group inside the same parent container to hold the card content. Place a Heading Module and a Button Module inside it for the title and call to action. Use spacing and positioning controls to place this content group toward the lower part of the card.

At this stage, everything is visible. In the next step, we will hide the content group on load so the card returns to its clean default state.

Step 3: Hide The Content Group On Page Load

Select the content group inside the card. Open the Content tab and scroll to Meta > Element Label. Give it a clear name, such as Meta Angles.

Divi 5 Interactions can target labeled elements directly, so this label is what lets you show and hide the content group later.

Next, open the Interactions panel and add a new interaction. Set the trigger to Load, the action to Hide Element, and choose Meta Angles as the target. When the page loads, the content group will be hidden automatically.

Note: You can also hide the content group in the module’s Visibility settings first, which is often a cleaner setup when you want the element hidden by default. This interaction-based method is still useful here because it keeps the hide and reveal behavior inside the same interaction workflow.

With the content group hidden, the next step is to reveal it when the user hovers over the card.

Step 4: Reveal And Hide The Content On Hover

Select the Image Module inside the card and open the Interactions panel. Add a new interaction, set the trigger to Mouse Enter, and set the action to Show Element, targeting the Meta Angles group.

If you want, you can add a second interaction to the same Image Module. Set the trigger to Mouse Exit, the action to Hide Element, and target the same Meta Angles group. Without it, the content stays visible after the first hover, which turns the effect into a one-time reveal instead of a true hover interaction.

Step 5: Add Image Scaling On Hover

Select the Image Module in the card, then open the Advanced tab. Open the Transform settings and set the default Scale to 100, then switch to the hover state and bring it up to around 105%.

The Group with a matching border radius keeps the scaling contained, so the image grows within the card boundary. If it ever spills beyond the edges, select the parent Group and add overflow: hidden; under the Main Element column in Advanced > Custom CSS.

Both the interaction and the scaling are working now, but neither one eases in or out yet. That’s what we’ll fix next.

Step 6: Add Transitions For A Smoother Reveal

Select the Image Module and open the Advanced tab. Scroll to Transition, set the Duration to around 400ms, and choose Ease as the Speed Curve.

Next, select the Meta Angles group and apply the same transition settings so the content reveal and the image scale feel synchronized.

Applying transitions directly to both elements gives you more control over the pacing. The result is a cleaner interaction where the content and image feel like part of the same motion rather than two unrelated effects.

Step 7: Duplicate And Customize The Remaining Slides

Duplicate the first Carousel Slide until you have a total of five slides. This carries over the structure, styling, and interactions so each card starts from the same base.

Go into each duplicated slide and replace the image, title, and button text to match your content. As you do, update the Element Label for each content group so every slide has a unique target.

This is important because Divi 5 Interactions target labeled elements. If multiple slides share the same label, the wrong content can respond when the interaction fires.

After renaming the labels, open each slide’s Interactions settings and point the Show Element and Hide Element targets to the correct content group for that slide.

Step 8: Adjust The Carousel For Different Screen Sizes

Open the Group Carousel module and enable the Responsive Editor. In Content > Carousel Settings, adjust the number of visible slides for each device. Keeping 3 slides on desktop, 2 on tablet, and 1 on mobile gives each card enough room without crowding the layout.

Also test the interaction on touch devices. Hover does not behave the same way on phones and tablets, so if the reveal feels unreliable on smaller screens, consider simplifying the card by keeping the content visible there or swapping to a tap-based interaction pattern.

And with that, the carousel is fully built. You now have an image-card layout that stays clean by default, reveals content on interaction, adds a subtle zoom effect, and adapts across screen sizes.

Build Your Image Carousel In Divi 5 Today!

This pattern works because it keeps the card visually simple until the user engages with it. The Group Carousel module gives each slide a flexible structure, and Divi 5 Interactions handle the reveal logic without extra plugins or custom code.

Once you build the first card, the rest of the carousel is mostly repetition: duplicate the slide, swap the content, update the labels, and retarget the interactions. That makes this a practical approach for portfolios, service highlights, product showcases, featured posts, and other image-led layouts.

The post Building Interactive Image Cards With Divi 5’s Group Carousel Module appeared first on Elegant Themes Blog.

Editable Theme Builder Areas in Divi 5 offer a cleaner way to work. Instead of editing page content in one place and global templates in another, you can edit the assigned header, footer, and template body from the front end in a single builder session. That is especially useful when you want to make fast global updates without breaking your focus.

The Problem With Context Switching

Divi’s Theme Builder handles the global parts of your site, including headers, footers, post templates, product templates, and archive templates. Build them once, assign them where needed, and Divi applies them automatically.

That separation is useful for organization, especially on larger sites. But it also creates friction when you notice a global issue while working on a live page. Maybe your footer address is outdated, your header CTA needs new copy, or your logo sizing needs adjustment. In older workflows, fixing that meant leaving the page, opening the Theme Builder, finding the right template, making the change, and then returning to what you were doing.

On busy projects, that extra back-and-forth slows you down more than it should.

Introducing Editable Theme Builder Areas In Divi 5

Editable Theme Builder Areas in Divi 5 solve that problem by loading your assigned header, body template, page content context, and footer into the same Visual Builder session.

That means you can open Divi from the front end and edit the parts of the site that matter in context, without opening the Theme Builder separately. The result is less context switching, faster global edits, and better design decisions because you can see how your header and footer actually relate to the content on the page.

Divi 5 also expands where Edit With Divi appears on the front end. It is no longer limited to standard singular content like pages and posts. You can now launch the builder from more template-driven areas, including archive pages, WooCommerce product pages, and other supported front-end views that use Theme Builder layouts.

That broader access matters because it removes one more layer of hunting around in the backend. Browse to the area you want to work on, click Edit With Divi, and open the relevant layout in context.

One practical note: on some template-driven areas, especially archive pages, you may need at least a Theme Builder header or footer to exist before the Edit With Divi option appears there.

Using Editable Theme Builder Areas To Edit Headers And Footers

Editable Theme Builder Areas are simple in practice, but a few details are worth seeing clearly. Here is the workflow that makes header and footer edits faster in Divi 5.

Finding The Header On The Page

Once you open the Visual Builder, the boundary between your header and the rest of the page is easy to identify. A green Header label marks the template area, making it clear that you are looking at a live Theme Builder layout, not just static page content.

The Layers panel also lists the header as its own labeled area, separate from the page content below it.

These labels are more than visual guides. They confirm that the header is active and editable in the same builder session. Click a module directly on the canvas to open its settings, just as you would anywhere else in Divi.

This is where the feature becomes especially useful. Because your page content stays visible underneath the header, you can judge spacing, color contrast, logo scale, button visibility, and overall balance in real context instead of editing the header in isolation.

One important distinction: if your navigation is powered by a WordPress menu, Editable Theme Builder Areas let you edit the Menu Module and the header layout around it, but the actual menu items themselves are still managed through WordPress menu settings.

Save your changes once, and Divi applies that updated header everywhere the template is assigned.

Locating The Footer On The Page

The footer works the same way. A green Footer label marks the editable area on the canvas, and the Layers panel lists it separately for quick access.

Click any footer module to open its settings. Contact details, social icons, footer links, disclaimers, copyright text, and CTA elements can all be updated directly from the same session.

Because the header, footer, and page context all load together, Divi 5 also makes it easier to move content between these areas. You can copy, paste, drag, and reorganize modules between the page, header, and footer without opening separate builder sessions.

Say you built a CTA button on your homepage and want the same styling in your footer. Copy the module, paste it into the footer area, and then adjust the content as needed. The same goes for social follow modules, icon groups, blurbs, and other reusable elements.

You can also use the Layers panel to drag and position elements more precisely across loaded areas.

That saves real time because you are reusing working elements instead of rebuilding them from scratch.

Turning Off Theme Builder Layouts When You Want A Narrower Editing Scope

Not every editing session needs the full site loaded at once. Divi 5 gives you a built-in way to simplify the workspace when you want to focus on a page or post without the surrounding Theme Builder areas.

Open the builder settings and disable Show Theme Builder Layouts. This hides the loaded header, footer, and other Theme Builder areas from the current editing session without affecting the templates themselves.

This can be helpful on more complex layouts where the Layers panel starts to feel crowded. For example, on a WooCommerce product page, you may be working with product content, template structure, and global layout areas all at once. Hiding Theme Builder layouts can make the editing experience easier to scan and manage.

It is also useful for teams that prefer to separate page editing from template editing, even though Divi 5 now allows both in one place.

Bonus: Restricting Editable Theme Builder Areas For Clients

Editable Theme Builder Areas are powerful, but that does not mean every user should have access to them. On client sites, it often makes sense to let users edit page content while protecting global layouts from accidental changes.

This is where the Divi Role Editor is useful. It lets you control what each WordPress user role can access inside Divi 5, including Theme Builder access, builder actions, settings tabs, and global module editing.

To configure this, go to Divi > Role Editor in your WordPress dashboard. Choose the role you want to restrict, such as Editor or Author, and then review the available permission groups.

For the cleanest handoff, pay special attention to these areas:

• General Functionality: Restrict access to Theme Builder, Divi Library, Theme Options, and other top-level Divi features.
• Builder Interface: Limit actions such as editing, moving, or deleting modules, rows, and sections, if needed.
• Library Settings: Restrict access to Global Modules, since edits to them can affect the entire site.
• Settings Tabs: Disable Design and Advanced tabs if you want clients limited to content-only edits.

This gives clients a safer editing experience. They can update text, images, and day-to-day content while the site-wide structure stays protected.

Try Editable Theme Builder Areas In Divi 5 Today!

Divi 5 makes header and footer editing much more practical by eliminating unnecessary trips back to the Theme Builder. When you can edit global areas directly from the front end, the workflow feels faster, more visual, and more connected to the page you are actually working on.

That translates into real benefits:

• Less context switching while building
• Faster edits to global templates
• Better design decisions because you see global areas in context
• Easier reuse of modules between page and template areas
• Safer client handoffs through Role Editor restrictions

If you are already using Theme Builder templates in Divi 5, Editable Theme Builder Areas make routine header and footer work noticeably smoother.

The post Editing Headers And Footers Faster With Divi 5 Editable Areas appeared first on Elegant Themes Blog.

In this tutorial, we’ll use Divi 5 and its Interactions system to build exactly that: a layout where hovering over an image reveals additional content and shifts the surrounding text into a secondary state, all without custom code.

What We’re Building

The layout is a two-column book showcase. The left column displays a book cover image, and the right column contains the book’s core metadata: the author’s name and the book title. This is the default state visitors see first. It’s clean, simple, and easy to scan.

When someone hovers over the book cover, the right column reveals more content through a module group: a testimonial, a short description, and a Buy Now button. At the same time, the book title shifts into a smaller alternate preset so the new content has room to appear without crowding the layout.

Subscribe To Our Youtube Channel

When the cursor leaves the image, the layout returns to its default state. That reset is what makes the interaction feel polished instead of one-directional.

Why Use Divi 5 Interactions

Interactions is Divi 5’s built-in system for adding behavior to elements inside the Visual Builder without writing code. Divi 5’s Interactions system works through three parts: a trigger that starts the interaction, an effect that defines what happens, and a target that tells Divi which element should change.

That structure makes it easy to coordinate multiple changes from a single hover. In this build, one trigger reveals hidden content while a second target switches the title to an alternate preset. Small interaction, multiple coordinated responses.

Step-By-Step Tutorial

This build comes together in seven steps. We’ll create the two-column layout, add the book metadata, build the hidden content group, hide it on page load, create an alternate title preset, connect everything to the hover trigger, and then add the return-state interaction to reset the layout cleanly.

Step 1. Create The Book Showcase Layout

Start by adding a new Section to your page and inserting a Row with a two-column layout.

In the left column, add an Image Module and upload your book cover image.

Move to the right column and add a Module Group. In Divi 5, a Module Group lets you wrap multiple modules into a single unit so they can be styled and targeted as a single unit. Inside that group, add two Heading Modules, one for the author name and one for the book title.

Style them to match your layout. Once those two headings are in place, the base structure is ready.

Step 2. Create The Group For Additional Book Details

Add another Module Group below the title inside the right column. This second group will hold the content revealed on hover.

Inside it, add a Heading Module for the testimonial quote, a Text Module for the short description, and a Button Module labeled Buy Now.

Adjust the typography, spacing, and button styling until the new group visually connects with the metadata above it.

Right now, the group is fully visible. The next step hides it on load so it can be revealed by the hover trigger.

Step 3. Hide The Additional Content On Page Load

Select the second Module Group and open its Content settings. Scroll to Meta > Element Label and give it a clear name such as Radiance Meta. Labels make it much easier to identify the right target when you’re building interactions.

Now open the Interactions panel, add a new interaction, and set the trigger to Page Load with the effect set to Hide Element. This ensures the second group starts hidden as soon as the page loads. You could also hide the group through Advanced > Visibility, but using a Page Load interaction keeps the setup tied directly to Divi 5’s Interactions workflow.

With that in place, the layout returns to its default state: just the author and title, with the extra content waiting off-screen until the hover interaction triggers it.

Step 4. Create An Alternate Preset For The Book Title

In Divi 5, a preset is a saved style configuration for a module. Duplicating a preset lets you create a second visual state without overwriting the original. That’s exactly what we need here, because the title needs one look by default and another look when the hover reveal is active.

Select the Book Title Heading Module in the first group and open the Preset menu. Duplicate the current preset, then rename it to something recognizable like Heading Small.

With the new preset active, reduce the font size slightly and apply italics if you want the secondary state to feel more understated. The goal is not to completely restyle the title, but to make room for the revealed content.

The title now has two states ready to switch between during the interaction.

Step 5. Trigger The Reveal On Hover

Select the Image Module in the left column and open the Interactions panel. Add a new interaction and set the trigger to Mouse Enter. This fires as soon as the cursor moves over the book cover.

Add the first effect: Show Element, targeting the Radiance Meta group.

Add a second effect to the same hover interaction. Target the Book Title Heading, choose Add Preset, and select the Heading Small preset.

At this point, hovering over the book cover reveals the hidden content and simultaneously shifts the title to its alternate style.

Step 6. Add The Return-State Interaction

To make the effect feel complete, add a second interaction to the same Image Module and set the trigger to Mouse Exit.

For the first effect, target Radiance Meta and choose Hide Element. This hides the additional content when the cursor leaves the image.

For the second effect, target the Book Title Heading and choose Remove Preset if you’re removing the alternate state, or switch back to the original preset if that’s how your setup is configured. The result should be the same: the title returns to its original default styling.

This is the step that keeps the interaction from feeling stuck. The reveal is important, but the reset is what makes the pattern reusable across cards, showcases, and hover-driven layouts.

Step 7. Add A Fade-In Animation For A Smoother Reveal

Select the Radiance Meta module group and open the Design tab. Scroll to Animation and choose Fade.

Keep the duration short so the content eases in instead of snapping into place. That small change helps the reveal feel intentional and refined.

Preview

Here’s the finished layout in action.

Practical Tips Before You Publish

A hover reveal can look great in the builder but still feel awkward on a live page if the timing or spacing is off. Before you publish, review the details below to ensure the interaction feels smooth, readable, and intentional.

• Keep the hover target large enough that the interaction is easy to trigger.
• Make sure the revealed content does not push nearby elements into unstable positions.
• Keep the alternate preset subtle so the title still feels visually connected to its default state.
• Check tablet and mobile views and decide whether the interaction still makes sense on touch devices.
• Use short animation timing so the effect feels responsive instead of delayed.

Try Interactions in Divi 5 Today!

A layout like this shows why Divi 5 Interactions is so useful. A single hover can reveal new content, switch presets, and coordinate multiple elements without custom code. Once you understand that pattern, you can adapt it to product cards, portfolio items, team layouts, pricing tables, and content reveals across your site.

The book showcase is just one example. The real value is learning how triggers, effects, and targets work together so you can reuse the same logic in different designs.

The post Building An Image Hover Reveal Effect Using Divi 5’s Interactions appeared first on Elegant Themes Blog.