Now, in Part 6, we’ll shift to the top of every page by creating a custom header and navigation in Divi 5’s Theme Builder. We’ll use Flexbox settings, presets, variables, and Interactions to build a responsive header that includes an announcement bar, logo, main navigation menu, social media links, and a call-to-action button.

We’ll also make the header global, so it appears consistently across the site. By the end of this post, your coworking website will have a polished, branded header that improves navigation and visually ties the site together.

Let’s get started.

Why You Need A Custom Header

The default Divi header and the Menu module are useful starting points, but a custom header built in the Theme Builder gives you more control over layout, styling, responsiveness, and behavior. For example, you can create sticky headers, build custom navigation structures, use semantic HTML where appropriate, and decide exactly how the header changes across breakpoints.

Divi 5 also gives you more menu-building options than a traditional single Menu module approach. You can still use the Menu module for speed, which we’ll do in this tutorial. However, you can also build more advanced navigation with Link modules, Menu Loops, Dropdown modules, and Interactions when a project calls for it.

Using the presets and variables from earlier parts of the course helps the header match the homepage. Instead of manually recreating fonts, colors, spacing, and button styles, you can reuse the same design system. Then, when you update a shared preset or variable later, those changes can flow through the header wherever that preset or variable is used.

Accessing The Theme Builder

To begin, go to your WordPress dashboard and navigate to Divi > Theme Builder.

Under the Default Website Template, click Add Global Header. If you are starting from an existing placeholder, choose the option to build or edit the Global Header. This opens the Visual Builder with a canvas dedicated to the header layout.

How To Build A Custom Header And Navigation

In this section, we’ll build a custom header and navigation for the coworking website. We’ll use the Design Variables and Presets created in Parts 3 and 4, which will speed up the process and keep the header aligned with the rest of the site.

By the end, you’ll also understand the same workflow we’ll use for other global areas of the site, including the footer we’ll build in Part 7.

Step 1: Setting Up The Header Container

First, we’ll build the foundation of the custom header. This gives the navigation a clean, flexible structure using Divi 5’s Flexbox controls and the design system we already created.

Row Settings

Start by adding a single-column Row to the Canvas. In the Content tab, expand the Background option group and apply the Primary Color variable to the background field.

Next, switch to the Row settings’ Design tab. Expand the Layout option group and set Justify Content to Center.

Expand the Sizing option group. Set Width to 100% and Max Width to None.

In the Spacing option group, locate the Padding fields. Use the Insert Dynamic Content icon to add the Spacing – XSmall variable to the top and bottom padding fields.

Column Settings

Now, adjust the Column settings for the Row. In the Row’s Content tab, expand the Elements option group and locate the Column. Click the edit icon, then open the Column’s Design tab and expand the Layout option group.

In the Horizontal Gap and Vertical Gap fields, insert the Spacing – XSmall variable using Divi’s dynamic content options.

Finally, set Align Items to Center.

Next, add another single-column Row to the Section. Go to the Row’s Design tab and expand the Layout option group. Use the Spacing – XSmall variable to set the Horizontal Gap and Vertical Gap to 10px. In the Align Items field, select Center.

In the second Row’s Column settings, go to the Design tab and expand the Layout option group. Apply the Spacing – XSmall variable to the Vertical Gap field. Then, set Justify Content and Align Items to Center. Finally, set Layout Wrapping to Wrap.

Section Settings

Next, adjust the Section’s Flexbox settings and spacing. Click into the Section. Go to the Design tab and expand the Layout option group. Set the Vertical Gap to 10px.

Expand the Spacing option group. In the Top Padding field, select the Border Width – Buttons variable to set the top padding to 0px. For the Bottom Padding field, select the Spacing – XSmall variable, which adds 10px of padding.

Go to the Advanced tab and expand the Position option group. Add 999 to the Z Index field. This helps keep the header above page content when it becomes sticky.

Finally, expand the Scroll Effects option group. Open the dropdown in the Sticky Position field and select Stick to Top. This keeps the header at the top of the viewport as visitors scroll.

Step 2: Adding The Announcement Bar

Before adding the main navigation, create the announcement bar. In the first Row you added earlier, click the black + icon to add a Heading module.

In the Heading module settings, click the Assign Presets button next to the module header.

Choose the Subheading preset from the available options.

Go to the Design tab and expand the Heading Text option group. Click into the Heading Text Color field to open the color modal. Then, choose White from your global colors.

Step 3: Setting Up The Navigation Foundation

Before adding the logo and navigation links, add a Module Group to keep the main header elements aligned and spaced. Click the black + icon in the second Row to add a Group module. When the Insert Module or Row modal appears, add an Image module inside the Group.

In the Content tab of the Image module, expand the Image option group. Hover over the Image field and select the Insert Dynamic Content icon. Then, select Site Logo from the available options.

Note: If you have not assigned a logo in Divi > Theme Options, you can do that after the header is built.

In the Design tab, expand the Sizing option group. In the Max Height field, add a value of 50px.

Step 4: Adding The Menu Module

For speed and simplicity, we’ll use the Menu module to handle the main navigation links. This approach lets you quickly connect a WordPress menu and style it with the design system we already created.

Divi 5 also includes newer menu-building options, including Link modules with Menu Loops, Dropdown modules, and Interactions. Those tools are useful for fully custom navigation patterns, mega menus, slide-in menus, and other advanced setups. For this header, however, the Menu module keeps the workflow focused.

Add a Menu module to the Group. If you have already created a menu in the WordPress dashboard, select it in the Menu module’s Content tab under the Menu option group. If not, you can create the menu later and return to this setting.

In the Menu module header, click the Assign Presets icon. Choose Dark Text from the available options.

The Menu module can include a logo. Since we are using a separate Image module for the logo, remove the Menu module logo by expanding the Logo option group and clicking the delete icon.

Before adding more modules, adjust the Group module’s Flexbox settings. Click into the Group and go to the Design tab. Expand the Layout option group and assign the Spacing – XSmall variable to the Vertical Gap field. Set Layout Direction to Row, Justify Content to Space Between, Align Items to Center, and Layout Wrapping to Wrap.

Finally, expand the Sizing option group. In the Size field, enable Grow to Fill. For the Alignment field, choose Stretch.

Step 5: Adding Social Links

Next, add a Social Media Follow module to the navigation area outside the Group. In the Content tab, expand the Elements option group and add your Social Networks.

Return to the main Content tab for the Social Media Follow module. Click the Assign Presets icon in the module header and choose the Isolated Icons – Dark preset.

Next, edit each Social Network item in the Elements option group and assign an additional preset. Click the edit icon for the first Social Network.

Click the Assign Presets icon and select the No Background preset.

Repeat these steps for the remaining Social Network items.

Step 6: Adding A CTA Button

Finally, add a Button module to the navigation area. In the module header, click the Assign Presets icon and select the Filled – Black preset.

Step 7: Creating Interactions

Now that the main header elements are in place and styled with presets and variables, we can use Divi 5’s Interactions system to control how the header behaves across breakpoints.

In previous Divi workflows, you might have hidden elements on mobile using Visibility settings in the Advanced tab. That still works, but Interactions give you a more flexible way to show and hide elements when users enter specific breakpoints.

For this coworking header, we’ll hide the social media icons and CTA button on smaller screens while keeping the logo and menu visible. This keeps the mobile header simpler without removing the key navigation path.

Setting Up The Interactions

Select the Social Media Follow module and go to the Advanced tab. Expand the Interactions option group and click + Add New Interaction.

When the modal appears, choose Breakpoint Enter as the Trigger Event.

Assign an Admin Label. Then, set the Breakpoint to Tablet, choose Hide Element as the Effect Action, and select the Social Media Follow module as the Target Module.

This Interaction hides the Social Media Follow module when the layout enters the Tablet breakpoint. However, we also need another Interaction to show the module again when the layout returns to Desktop.

Click + Add New Interaction. Select Breakpoint Enter again. This time, set the Breakpoint to Desktop and choose Show Element as the Effect Action. Keep the same Target Module.

Next, create two more Interactions for the CTA Button. Create one Interaction to show the Button on Desktop and another to hide the Button at the Tablet breakpoint and below.

Step 8: Testing Responsiveness

Even though we built the header with Design Variables, presets, and Flexbox settings, it is still important to test how everything behaves across screen sizes. Fluid typography, flexible spacing, and wrapping layouts help, but real-world testing confirms that the header still looks polished and functions well on each breakpoint.

Divi 5 gives you two important tools for responsive work.

Customizable Responsive Breakpoints

Divi 5 supports customizable responsive breakpoints, which give you more control than a fixed desktop, tablet, and phone setup. You can use the default active breakpoints or enable additional ones when a design needs more precise control.

For this header, breakpoints help you decide exactly when the social links and CTA button should hide, when spacing should tighten, and when navigation needs more room. You can access and edit Customizable Responsive Breakpoints from the Top Bar.

Responsive Editor

The Responsive Editor in Divi 5 lets you edit values across enabled breakpoints directly inside the Visual Builder. Hover over a responsive-supported field in a module’s settings to reveal the Edit Responsive Values icon.

As you move through each breakpoint, the Visual Builder updates the canvas so you can edit values in context. This makes it easier to confirm that spacing, sizing, and visibility choices work across the header’s full responsive range.

Tips And Best Practices For Headers In Divi 5

Here are a few best practices to help you get more out of your custom header and keep the workflow efficient as the coworking website grows.

Preview In Context

Divi 5 lets you edit Theme Builder areas while viewing them in context with page content. Instead of switching back and forth between the Theme Builder and a separate page preview, you can see how the header looks above the homepage or another page while you adjust spacing, alignment, and colors.

To enable this view, click the Builder Settings icon in the Builder Bar and turn on Show Theme Builder Layouts.

Global vs. Specific Headers

We created a Global Header in this tutorial so it appears across the entire site. This is usually the best starting point for a simple website because every page gets the same navigation structure by default.

Later, you can create more specific Theme Builder templates when certain pages, post types, or sections of the site need a different header.

Export Header Templates

It is a good idea to export your Theme Builder templates or header layout as a backup. You can do this directly from the Theme Builder interface. Having an export file makes it easier to restore the header, move it to another site, or share it with a team member.

Downloading And Installing The Files

To make things easier, we’ve created a JSON file you can import into the Theme Builder. Before importing the Global Header, it is best to define a WordPress menu in Appearance > Menus. If you have not created one yet, you can still import the template and assign the menu later.

Navigate to Divi > Theme Builder. Then locate the Import & Export Templates icon at the top-right of the interface.

Click the Import & Export icon, select the Import tab, locate the CustomHeaderandNavigation.json file on your computer, and click Import Divi Theme Builder Templates.

Before opening the template, click the Save Changes button.

With the template saved, open the Visual Builder. Depending on your enabled Customizable Responsive Breakpoints, you may need to verify the breakpoints used in the imported Interactions.

Select the Social Media Follow module, go to the Advanced tab, and expand the Interactions option group. Verify that the correct breakpoints are assigned to the hide socials and show socials Interactions. Repeat the same check for the Button module’s show button and hide button Interactions.

That’s it. You’ve created a global header for the coworking website. To download the files, fill out the form below.

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 Coming Next

With the custom header complete, the coworking website now has a strong navigational foundation that uses the same Design Variables and Presets we built in Parts 3 and 4.

In Part 7: Building a Custom Footer in Divi 5, we’ll create a matching global footer template using the same design system. You’ll learn how to build a functional footer with multiple columns, links, social icons, copyright text, and consistent styling.

If you have not downloaded the latest version of Divi 5 yet, now is a good time. The newest release gives you access to the features used throughout this course, including the Theme Builder workflow, Interactions, Flexbox controls, Customizable Responsive Breakpoints, and the Responsive Editor.

The post Part 6: Building A Custom Header And Navigation In Divi 5 appeared first on Elegant Themes Blog.

In this part, we’ll use that library to build the homepage of our coworking space website, section by section. The homepage includes seven sections, from the opening hero to the closing FAQ. Each section has its own structure, content priorities, and visual role. Because the design work is already done, most of this build focuses on assembly rather than repeated styling decisions.

The Build Approach For Part 5

Before opening the Visual Builder, it helps to understand the workflow. Every section on this homepage follows the same basic process.

First, add the Section. Then, configure the rows and columns that define the structure. In Divi 5, you can use Flexbox and CSS Grid layout controls to create flexible, responsive structures. Several sections on this homepage use both approaches.

Second, drop the modules into the correct columns. At this stage, focus on structure before styling. Once the modules are in place, applying the design system becomes much easier.

Third, apply the presets. This is where the work from Parts 3 and 4 pays off. A Heading preset can control font family, size, line height, and color. A Button preset can control padding, border radius, background color, text color, and size. Instead of restyling every module manually, you can apply consistent design decisions in a few clicks.

Finally, handle the remaining static content. Text, images, video sources, countdown dates, accordion items, and individual icon choices still need to be set per module. However, those are content decisions now, not design-system decisions.

By following this workflow, you’ll create this homepage:

To get started, create a new page in the WordPress dashboard and name it Home.

After the page is created, click Edit With Divi. For a new build, it can also help to simplify the workspace. If your Theme Builder Header and Footer areas are visible and you want to focus only on the page body, hide or disable those template areas for now. You can turn them back on later when we build the global Header and Footer in Parts 6 and 7.

Homepage Build

We’ll build the homepage in seven sections: Hero, Features Grid, Split Features, Testimonials, Pricing, Countdown, and FAQ.

Hero Section

The Hero section tells visitors what the coworking space offers within the first few inches of scroll. It uses three rows: a headline and primary calls to action at the top, a full-width hero image below, and a three-column statement row at the bottom.

Start by adding a new Section. From the Insert Section modal, choose a Flex Equal Columns structure with one column. Divi creates the Section with its first Row already configured as a single-column flex layout.

Place a Heading module and a Group module inside the Column. The Heading holds the hero headline. Inside the Group, add two Button modules. Then, open the Group module’s Design tab. In the Layout option group, set Flex Direction to Row and set the Horizontal Gap to 10px so the buttons sit side by side.

Next, add a second Row. From the Insert Row modal, choose another Flex Equal Columns one-column structure. Drop an Image module inside it. This becomes the hero visual below the headline.

Then, add a third Row. From the Insert Row modal, choose a Flex Equal Columns structure with three columns. This becomes the statement row for three core value propositions. Inside each Column, add one Heading module and one Text module.

Now, apply the presets. The Heading in the first row gets the Heading 1 Big Element Preset. The first Button gets Filled – Primary Color. The second Button gets Filled – Black. The Image gets the Rounded Element Preset.

In the third Row, apply the Top Border Option Group Preset to the Border option group of each Column. Then, set 30px padding-top on each Column to separate the text from the top border. Apply Heading 4 to each of the three Headings and Dark Text to each of the three Text modules.

Finally, add the text and image content. The hero headline reads Coworking in San Francisco. The first Button uses the Book Tour text variable, and the second Button uses the View Plans text variable.

The three statement columns use the headings Flexible Spaces, Exceptional Amenities, and Vibrant Community. Pair each heading with a short supporting paragraph.

Features Grid Section

The Features Grid section showcases six amenities in a tight, evenly spaced layout. It uses CSS Grid so the feature columns stay consistent across desktop, tablet, and mobile breakpoints.

Add a new Section. From the Insert Section modal, choose a Flex Equal Columns one-column structure. In the Section’s Design tab, open the Background option group and set the Background Color using the Background – Light Gray variable. In the Section’s initial Row, insert a Video module.

Next, add a second Row and choose a Flex Equal Columns layout. Inside the single Column, add an Icon module, a Heading module, and a Text module, in that order.

Now, open the new Row’s Content tab and go to Elements. Click Apply Structure Template. On desktop, change the row structure from single-column flex to a three-column grid. Then, switch to the Tablet breakpoint and set the row to a two-column grid. Finally, switch to the Mobile breakpoint and set it to a one-column grid.

After the responsive structure is set, return to the Desktop breakpoint. Find the first Column and duplicate it five times so the grid contains six feature items.

Now, style the section with presets. The Video module gets the Rounded Element Preset. Each Icon gets the Dark – Small – Contained Element Preset. Apply Heading 5 to each feature title and Dark Text to each description.

Each Column inside the grid should use a Vertical Gap of 12px. This keeps the icon, heading, and text visually grouped.

Finally, add the Video module source and overlay image. The six features for this coworking site are Gigabit Wi-Fi, 24/7 Access, Meeting Rooms, Private Phone Booths, Bottomless Coffee, and Mailing Address. Assign a distinct icon to each feature from the Icon Library and write a short one- to two-sentence description for each.

Split Features Section

The Split Features section pairs a tall image on the left with three content blocks on the right. It creates a simple visual hierarchy within a single row: the first block introduces the section, while the second and third blocks highlight supporting features with call-to-action links.

Add a new Section. From the Insert Section modal, choose a Flex Equal Columns structure with two columns. The Section’s first Row is already configured with the two columns you need.

In the left Column, add an Image module. In the right Column, add a Group module. Inside the Group module, add a Heading module and a Text module. Duplicate the Group once, then add a Button module at the bottom of the duplicated Group. Finally, duplicate that second Group once more.

For each of the three Groups, open Design > Layout and set Flex Direction to Column with a 10px row gap between child modules. To speed this up, you can style one Group first and use Extend Attributes to apply the same layout settings to the other Groups.

Then, apply the presets. The Image gets Rounded. The first Group’s Heading uses Heading 2, and its Text uses Dark Text. The second and third Groups use Heading 5 for their Headings and Dark Text for their Text modules. Both Buttons use Text – Primary Color, so they appear as inline links instead of solid CTAs.

Add the image and text content to the modules. The lead heading is Thrive in a better work environment. The two supporting blocks cover Ergonomic Comfort and Inspiring Atmosphere. Each supporting block uses the Learn More text Design Variable on its Button.

Testimonials Section

The Testimonials section presents three customer quotes in a three-card layout with a section heading above.

Add a new Section. From the Insert Section modal, choose a Flex Equal Columns one-column structure. Place a Heading module in the Section’s initial Row. Then, add a second Row and select a Grid Multi-Column structure with three equal columns. Inside each Column, add an Icon module, a Text module, and a Blurb module.

The section title Heading uses Heading 2. In the second Row’s Design > Layout option group, set the Horizontal Gap to 30px. Each of the three Columns gets the Outlined – Dark Element Preset.

Inside each Column, the Icon gets Dark – Small, the Text gets Dark Text, and the Blurb stacks two Element Presets: Dark Text and Dense. The Blurb image gets a Border Radius of 8px. You can also use the relevant rounded image or border preset if you created one in Part 4.

To work faster, style the modules in the first Column first. Then, use Extend Attributes to apply the same styles from matching elements in the first Column to matching elements within the Parent Row.

Now, fill in the image and text content. The section heading reads Testimonials. Each card gets a quotation-mark icon, a testimonial quote in the Text module, and an author photo with a name and role in the Blurb module.

Our three testimonials are from Lisa Robinson, CEO of Brightwave Media; Albert Flores, Marketing Agency Owner; and Cody Fisher, Founder of Sprout Lab.

Pricing Section

The Pricing section is the most structurally complex part of the page. Each price card uses a Group-based layout with nested Groups, an Icon List, and a footer Group. The payoff is a clean, consistent card structure where the middle tier can stand out through contrast.

Add a new Section. From the Insert Section modal, choose a Flex Equal Columns one-column structure. Place a Heading module in the Section’s initial Row for the section title.

Then, add a second Row and choose a Grid Multi-Column structure with three equal columns. For now, focus only on the first Column because the card structure is dense. Inside the first Column, add a Group module. Then, add another Group module inside it with a nested Heading module and Text module.

As a sibling of the second Group, add an Icon List module. Then add another Group module as a sibling of the first. Inside that footer Group, add a Heading module and a Button module.

Delete the two extra Columns and leave only the first pricing card for now. On the remaining Column, apply the Outlined – Dark Border Option Group Preset. Then, switch the Row to the Tablet breakpoint and set the row to a one-column layout. After that, return to the Desktop breakpoint.

To make the instructions easier to follow, we’ll refer to the three Groups as the Header Group, Inner Group, and Footer Group. Use the Layers panel in the screenshot below to confirm which Group is being edited.

Each card’s Header Group uses either the Contained – Light or Contained – Dark Element Preset. The outer cards use Contained – Light, while the middle card uses Contained – Dark.

The first Inner Group gets a Vertical Gap of 10px using the spacing value from your design system.

Each card’s Footer Group uses the Padding – Medium Option Group Preset. Each tier Heading uses Heading 3. Each tier description Text uses Dark Text on the light cards and Light Text on the dark middle card. Each price Heading uses Heading 5. Each Button uses Filled – Primary Color on the outer cards and Filled – Black on the middle card.

The Icon List uses Dark on the light cards and Light Text on the dark middle card. Once the first card is styled, duplicate the first Column twice. Then, adjust the middle Column by changing the relevant text presets to their light versions and setting the card background to Black.

Next, switch to the Tablet breakpoint. In the second Row’s Content > Elements option group, set the Layout Structure to 1 column. Set the Horizontal Gap to 30px so the stacked pricing cards keep consistent spacing on smaller screens.

Finally, set the pricing content. The three tiers are Hot Desk at $299/month, Dedicated Desk at $449/month, and Private Office at $999+/month. Each tier gets a short description, a list of included benefits in the Icon List, and a Sign Up Button. Change the Icon List icons to right-pointing arrows.

Countdown Section

The Countdown section creates urgency with a prominent promotional CTA. The entire section sits in a single row with a bright background, creating a visual break between the pricing section and the FAQ.

Add a new Section. From the Insert Section modal, choose a Flex Equal Columns one-column structure. Apply the Contained – Dark Row Element Preset to the Section’s initial Row. Inside the Column, add a Heading module, a Countdown Timer module, and a Button module.

The Heading gets Heading 2 and Center Aligned, with its text color set to White. Remove the Heading Text from the Countdown Timer module so the CTA headline remains the main title. The Countdown Timer gets Light Text. The Button gets Filled – White, so it contrasts clearly against the blue background.

Set the content next. The main heading can read Founder’s Rates Ending Soon!. Configure the Countdown Timer’s target date to match your promotional window. The Button text is Lock In Low Rates.

FAQ Section

The FAQ section uses an offset two-column layout. A short introductory block sits on the left, while the collapsible question list fills the wider column on the right.

Add a new Section. From the Insert Section modal, choose a Flex Offset Columns structure with two columns. A 2/5 + 3/5 pattern works well here because it gives the heading block a narrow anchor and gives the FAQ list more room.

Inside the left Column, add a Heading module and a Text module. Inside the right Column, add an Accordion module.

Then, apply the presets. The Heading uses Heading 2, and the Text uses Dark Text. The Accordion uses the Dark Text Element Preset.

The left Column heading reads Frequently asked questions, followed by a short intro paragraph. On the right, add five Accordion items with questions and answers that fit the coworking space. Good topics include opening hours, guests, parking, business address use, and meeting room bookings.

Reviewing The Homepage

With all seven sections in place, the homepage is complete. It includes a headline and hero image, a visual feature grid, a split-feature row, testimonials, pricing, a promotional countdown, and an FAQ section. Here is the finished page again.

The important part is not just that the page is finished. It is how the page was built. The modules reference Design Variables and Presets rather than relying on hardcoded hex values, one-off font sizes, or ad hoc padding. That is the point of the design system.

The homepage is now easier to revise, extend, and keep consistent. The hard work from Parts 3 and 4 has paid off, because the design decisions are reusable rather than trapped within individual modules.

Coming Up Next

The homepage is built, but it is still just one page. In Parts 6 and 7, we’ll build the site-wide Header and Footer using the Theme Builder. We’ll wire them up as global templates and keep using the same Design Variables and presets we have been building throughout the course.

After that, every new page can inherit the same global structure. That is the last piece of scaffolding we need before building the inner pages.

You are well on your way to a complete website design from scratch using Divi 5.

The post Part 5: Building A Divi 5 Homepage From Scratch appeared first on Elegant Themes Blog.

Preview

Here’s a quick look at the 5 Border Layout Sections included in the pack. The download is further down the post.

Download 5 Border Layout Sections For Divi 5

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

Download the Files

Download For Free

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

DOWNLOAD

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

What’s Included (6 Exports)

After you download and unzip the file, you’ll find 5 styled Bordered Layout Section exports, plus 1 file containing all layouts.

Styled – Bordered Layouts Section 1 to 5 (5) → Five fully styled border-based section layouts with structured content areas, refined typography, image treatments, strong spacing, and clean visual separation that you can use as-is or customize.

Styled – Bordered Layout Sections (All) → Imports all 5 designs into your Divi Library at once.

How To Use The Border Layout Sections

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 Bordered Layout Section JSON you’d like to use, then click Import Divi Builder Layouts.

2. Add A Border Layout Section To Any Page

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

Click Add From Library and select one of your Bordered Layout sections.

3. Swap The Content

Once the section is on the page, replacing the placeholder content only takes a few clicks. Start by updating the heading, body copy, buttons, links, names, descriptions, and labels so the section matches your brand and message. Then swap in your own images, portraits, featured content, icons, or supporting details as needed.

Because bordered layouts rely on clean separation, alignment, and spacing, it’s best to replace content one area at a time. This helps preserve the balance between text, imagery, borders, and negative space as you customize the design.

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

4. Adjust Styles (Optional)

These bordered 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, backgrounds, 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 bordered 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 section uses divided content blocks, outlined cards, bordered image areas, table-like rows, 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, borders, and alignment on smaller screens so the layout stays polished across devices.

Tips For Effective Border Layouts

Border layouts work best when they create structure without making the design feel too rigid. Use these quick tips to keep your sections clean, modern, and easy to scan.

Use Borders To Create Clear Structure

Borders can help define sections, separate content, and guide visitors through the layout. Use them to support the hierarchy of the page rather than decorating every element equally.

Keep Spacing Consistent

Bordered layouts look best when padding and spacing feel intentional. Keep similar content areas aligned and evenly spaced so the design feels polished instead of crowded.

Balance Borders With Negative Space

Strong borders can add definition, but too many heavy lines can make a layout feel dense. Let negative space soften the design and give the content room to breathe.

Repeat Border Treatments Consistently

Consistent border widths, colors, radius values, and dividing lines help the entire section feel cohesive. Repetition is what makes a bordered layout feel intentional rather than pieced together.

Check The Layout On Mobile

Bordered sections can change noticeably on tablet and phone screens as content stacks. Review your layout on smaller devices to make sure borders still separate content clearly, images remain useful, and spacing still feels balanced.

Start Building In Divi 5 Today!

These 5 Styled Border Layout Sections give you a fast way to build polished, structured page sections for portfolios, landing pages, service pages, team sections, product features, editorial layouts, and more. Swap in your content, customize the styling if needed, and you’ll have a professional section ready in minutes with Divi 5’s Visual Builder.

The post 5 Bordered Layout Sections For Divi 5 (Free Download!) appeared first on Elegant Themes Blog.

Now, in Part 4, we’ll turn those variables into a reusable design system using Divi 5 Presets. You’ll learn how to create Option Group Presets and Element Presets, organize them in the Preset Manager, and use nested and stacked presets for greater flexibility.

Once those presets are in place, you can apply consistent styling across your site without rebuilding the same design decisions over and over. By the end of this post, you will have created the core presets needed for Part 5 of the course. Adding new sections and modules will take fewer clicks because the system will already be powered by the variables from Part 3 and the presets from this post.

Let’s get started.

Why Presets Matter

In Part 3, we created our Design Variables, which set the foundation for our design system. In this part, we’ll take the next step by turning those variables into reusable presets.

The design system in Divi 5 follows a clear hierarchy. Design Variables form the base layer. Then, Option Group Presets group related styles together, such as typography, spacing, borders, and buttons. Element Presets can then combine those groups into complete, ready-to-use elements. Finally, we use those presets to build pages and Theme Builder templates.

Creating presets now gives us a strong and consistent foundation for the entire website. You will build faster because you can apply a complete set of styles with a few clicks, rather than adjusting typography, spacing, colors, and borders for every module.

Just as importantly, everything stays consistent across the homepage, inner pages, Canvases, and templates. When you need to make changes, updates become easier. Revise a color, spacing value, or button style in one preset, and the update appears everywhere that preset is used.

Divi 5 Presets work with Design Variables and integrate directly with the Preset Manager, making it easier to review, edit, duplicate, organize, and reuse styles across the site.

Opening The Preset Manager

Getting started with presets is simple. Open a page in the Visual Builder. Then, in the Builder Bar on the left side of the screen, click the Preset Manager icon.

Once the Preset Manager opens, you can create, organize, edit, duplicate, delete, reorder, and set defaults for your preset styles. Presets are organized into two main areas: Elements and Option Groups.

There is also a search and filter field, which helps you quickly find a specific element or option group as your preset library grows.

As you expand the menu for an element type, you’ll see the presets associated with that element. For example, expanding the Heading menu reveals the presets available for Heading modules. When a preset is assigned to a module, it appears next to the module title in the settings panel.

To edit a preset, click the edit button or pencil icon in the Preset Manager. This opens the Preset Preview, where you can review and adjust the preset before saving your changes. For example, when editing a heading preset, you can preview how the heading will look before committing the update. Once saved, those changes apply everywhere that preset is used.

Treat the Preset Manager as your main control center for presets. Instead of hunting through individual modules to manage shared styles, come here to create, edit, duplicate, reorder, and organize them. This keeps your design system easier to maintain as your website grows.

Over the next few sections, we’ll create Option Group Presets and Element Presets. Then, we’ll show you how to nest and stack them to build a flexible design system using the Design Variables from Part 3.

Option Group Presets

Option Group Presets let you save styles for a single option group and apply those styles wherever the same option group appears. Because they are modular, you can mix and match them without locking every design choice into one full module preset.

It is best to create Option Group Presets before building complete Element Presets. This approach gives you more flexibility. Instead of saving an entire button, card, or form as one fixed style, you can create separate presets for typography, spacing, borders, backgrounds, and buttons. Then, you can combine those presets in different ways depending on the context.

This mix-and-match workflow makes your design system more adaptable and easier to maintain as you build the homepage and inner pages of the site.

How to Create An Option Group Preset

Creating an Option Group Preset is straightforward, and the process becomes fast once you do it a few times. The basic workflow is the same for any option group: style an element, save the relevant option group as a reusable preset, and apply that preset wherever you need the same style again.

To make the concept practical, we’ll create presets for typography, spacing, borders, and buttons.

Typography Presets

Because typography appears across nearly every page, we’ll start by creating Option Group Presets for headings and body text. These presets pull directly from the font choices and fluid Number Variables we created in Part 3, including the clamp() values for heading sizes.

Begin by opening or creating a Blurb module on the Canvas. In the Design tab, expand the Title Text options. Set the Title Heading Level to H5. Then, set the Title Line Height to the Line Height – Headings variable, or enter 1.3em if you are following the value manually.

Next, hover over the Title Text Size field. Click the Insert Dynamic Content icon that appears.

When the My Global Numbers modal appears, locate the H5 variable and click it to insert the value into the field.

Now, save these styles as an Option Group Preset. Scroll back up to the Title Text header in the Design tab. Then, hover over the header to reveal the preset icon.

When the modal appears, select New Preset From Current Styles.

Name the preset Heading 5. Then, scroll down to verify the style settings and click Save Preset.

Once created, open the Preset Manager, go to the Option Groups area, search for Title Text, and you will see your new Option Group Preset listed.

You can also create a Small Text Option Group Preset for the Body Text of the Blurb by using the Body Small variable. This preset can then be applied to other modules that include the same Body Text option group.

For more control, create a Dark Text Option Group Preset that sets the Body Text color using the Body Text Color variable, the line height using the Line Height – Body variable, and the text size using the Body Small variable.

Spacing Presets

Next, create Spacing Presets to maintain consistent rhythm across the site. These are especially useful for sections, rows, columns, groups, and modules.

Click into the Column that contains the Blurb and go to the Design tab. Expand the Spacing option group. Using the Spacing – Medium variable, set 30px padding on all four sides.

Then, hover over the Spacing header to reveal the preset icon. Click it, choose New Preset From Current Styles, and name the preset Padding – Medium.

You can now apply this same preset to any element that includes a Spacing option group. As a result, content areas across the coworking website will share the same comfortable breathing room.

Border Presets

Border presets help give columns, images, groups, and other modules a clean, unified appearance.

In the same Column where we applied the spacing preset, expand the Border option group. Add an 8px Border Radius using the Rounded Corners – Regular variable. In the Border Width field, add a 1px Border Width using the Border Width variable. For the Border Color, assign the Border – Dark variable, which uses black as the base color with 12% opacity.

From there, create a new Option Group Preset for those styles and name it Outlined – Dark.

Button Presets

Buttons appear throughout a website, including hero sections, pricing tables, call-to-action sections, forms, and email opt-ins. Because buttons often live inside other modules, it is useful to create button styles as Option Group Presets.

Add an Email Opt-In module, or any module that contains a button. In the Design tab, expand the Button option group. Then, set the following values using the variables from Part 3:

• Background Color: Primary Color variable
• Border Radius: Rounded Corners – Buttons variable
• Border Width: Border Width – Buttons variable
• Button Text Color: White variable
• Button Text Size: Button Font Size variable
• Padding Top and Bottom: Button Vertical Padding variable
• Padding Left and Right: Button Horizontal Padding variable

Once the styles are set, create a new Option Group Preset and name it Filled – Primary Color.

You can now apply this same Button Option Group Preset to any module that includes a button option group. This keeps button styling consistent across the entire site.

Core Option Group Presets To Create Now

Now that you know how to create Option Group Presets, build the essential ones you will use throughout the rest of the course. The table below serves as your checklist for the most important OGPs needed before moving on to Part 5 and building the homepage.

Use this table as your guide. For each preset, style the option group using the Design Variables we created in Part 3. Once these presets are in place, you will have a reusable style library ready for the coworking website’s homepage.

Element Presets

Option Group Presets let you save individual groups of styles. Element Presets take that idea one step further by saving the full design for a specific element type, such as a Button, Blurb, Image, Section, Row, Column, or Group module.

The main difference between an Option Group Preset and an Element Preset is scope. An Option Group Preset saves styles for one category, such as typography, spacing, border, or button design. It can be applied wherever that same option group exists. An Element Preset, on the other hand, saves the complete styling for one particular element type.

Element Presets are especially useful when they include nested Option Group Presets. For example, a Blurb Element Preset can include nested presets for title typography, body text, spacing, background, and border styling. This gives you the speed of applying a complete module design while keeping the smaller style decisions easier to update.

In the section below, we’ll create several key Element Presets that you will use when building the homepage and inner pages of the coworking website.

How to Create An Element Preset

Creating an Element Preset follows a similar process to creating an Option Group Preset, but with a broader scope. Instead of saving one group of styles, you save the complete styling for an entire element. This is useful when you want to apply a fully designed button, email opt-in, card, or section with a single click.

Primary Button Preset

Start by adding a Button module to the canvas. Apply the Filled – Primary Color Button Option Group Preset you created earlier. Go to the Design tab, find the Button option group, click the Preset icon, and apply the OGP.

Next, expand the Spacing option group. In the padding fields, use the Insert Dynamic Content icon to add the Button Vertical Padding and Button Horizontal Padding variables.

Once the button styling is complete, click the Preset icon in the Button module header and select New Preset From Current Styles. Name the Element Preset Filled – Primary Color and save it.

This Element Preset now includes the nested Option Group Preset, so future changes to the button’s shared styling can flow through every place this preset is used.

Email Opt-In Preset

In the previous section, we created an Option Group Preset for the button. Now, we’ll combine that button preset with additional OGPs to create an Element Preset for the full Email Opt-In module.

Open the settings for the Email Opt-In module. In the Design tab, create an Option Group Preset for the Title Text if you have not already created one. Next, expand the Fields option group and assign the Rounded Corners – Fields variable to the Fields Border Radius.

Next, add the Heading 2 Option Group Preset to the Title Text option group. Then, add the Dark Text OGP to the Description Text option group and the Filled – Primary Color OGP to the Button option group.

Finally, click the Preset icon in the module header, choose New Preset From Current Styles, and name the Element Preset Dark.

This preset now carries the title typography, description text, field styling, and button styling, making it easy to drop consistent email opt-in forms onto any page.

Module Group Presets

For reusable components like feature cards, pricing cards, or testimonial blocks, you can create an Element Preset for a Module Group. Add or open a Group module on the canvas and place the related modules inside it. In the Group module’s Content tab, open the Background option group and assign the Background – Light Gray color variable to the Background Color field.

Apply the Padding – Medium Option Group Preset to the Spacing option group. Next, apply the Outlined – Dark preset, or your preferred rounded border preset, to the Border option group.

Now, click the Preset icon in the Group module header, create a new preset, and name it Contained – Light.

Once you create these Element Presets, your workflow becomes faster and more organized. The Primary Button, Email Opt-In, and Module Group presets all use nested Option Group Presets, which keeps the system modular and easier to maintain. When you update a nested Option Group Preset, that change can flow through every Element Preset that uses it.

Instead of manually styling each new module from scratch, you can now apply complete, consistent styles with just a few clicks.

Core Element Presets To Create Now

With a good understanding of how Element Presets work, use the table below as your checklist for the presets you’ll need to build the homepage in Part 5 of the Divi 5 Mastery Course.

For each Element Preset, use the listed Option Group Presets and associated Design Variables. Once these are in place, you will have a complete library of reusable components for the homepage. You will also be better prepared to create the header, footer, Theme Builder templates, and inner pages.

Stacked Presets

Once you have created several Option Group Presets and Element Presets, you can take things further by stacking them. Stacked Presets let you apply multiple presets to a single element. This gives you more flexibility while keeping the underlying styles reusable and consistent.

A good way to see this in action is with a Blurb module, which is commonly used for features, services, and testimonials.

Start by adding or opening a Blurb module. If you used the table above to create the presets you need, stacking is easy. Click the Blurb module settings, then click the preset icon next to the module header. In the preset list, choose Dark Text.

After the first preset is added, click it to open the preset options. This time, select the Dense preset. Divi 5 applies the styles from both presets to the same module.

You can stack multiple presets on the same element when each preset handles a different styling job. For example, you might stack:

• A spacing preset for padding.
• A border preset for rounded corners.
• Typography presets for title and body text.
• A background preset for a specific section context.

This approach improves workflow efficiency. Instead of manually adjusting several settings every time, you can build more complex modules by layering a few presets. Then, when you update one of the underlying presets, every module that uses that preset updates with it.

Tips And Best Practices

Here are a few best practices for getting the most out of your preset library.

Use Preset Preview

Use Preset Preview whenever you need to review a preset before saving changes. Clicking the pencil icon opens a preview panel where you can test the preset against sample content and different background colors. However, remember that saved changes are global. Once you save the preset, every element using it will reflect the update.

Set Default Presets

You can set default presets so new modules automatically inherit your preferred styles. To do this, open a module, select the applied preset in the module header, and click the star icon. This marks the preset as the default for that element type.

For example, set Filled – Primary Color as the default Button preset. Then, when you add a new Button module to the page, it will start with that preset already applied.

Name Presets For Easy Identification

Keep your presets organized with clear, consistent names. This makes it much easier to find the right preset as your library grows.

A simple naming system helps. Use role-based names for reusable design decisions, such as Heading 2, Dark Text, or Padding – Medium. Use component-based names for complete Element Presets, such as Contained – Light, Filled – Primary Color, or Email Opt-In – Dark.

Export Presets For Reuse

It is also a good idea to export your presets after building a reliable library. Exporting creates a backup and makes it easier to move your styling system to another site or share it with team members.

Download The Presets

To make things straightforward, we’ve created a JSON export file for you. Importing this preset library gives you a strong starting point before building the homepage in Part 5 of the Divi 5 Mastery Course.

This course assumes you have already created the Design Variables from Part 3. If your presets reference variables, make sure those variables are available on the site as well. That way, the imported presets can keep using the same colors, spacing values, typography sizes, and other shared design decisions.

Before beginning the design phase, locate the JSON file on your computer. Open the Visual Builder, click the Preset Manager icon in the Builder Bar, and click the Import & Export Presets button in the Preset Manager header.

Select the Import tab, choose the JSON file from your computer, and click Import Presets.

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 Coming Next

With your design system powered by Variables and Presets, you’re ready to start building pages. In Part 5: Building a Divi 5 Homepage From Scratch, we’ll use everything we’ve created so far to build the coworking space website’s homepage.

That build will include the hero section, features, pricing plans, testimonials, FAQs, and CTA. More importantly, we’ll build each section using the variables and presets already in place, so the design stays consistent from the first module to the final page.

The post Part 4: Mastering Divi 5 Presets For Faster, More Consistent Web Design appeared first on Elegant Themes Blog.

Design Variables are named, reusable values that can be referenced by modules, presets, templates, and other parts of your Divi 5 design system. Instead of storing one-off values inside individual modules, you define important values once and reuse them across the site. In Divi 5, that includes colors, fonts, numbers, images, text strings, and links.

This matters because every Preset we create in Part 4, every page section we build in Part 5, and every template we construct in Part 8 will reference these variables. Without them, the presets would rely on hardcoded values. As a result, the design system would be harder to update, reuse, and scale.

By the end of this post, our Coworking Space website will have a complete set of Design Variables for typography, colors, spacing, borders, layout dimensions, button styling, form fields, and reusable content. These are the raw ingredients that power everything that comes next.

Why Design Variables Come First

A Design Variable is a named value that can be referenced throughout your Divi 5 site. For example, instead of typing #2176ff into every module that uses your brand blue, you create a color variable called Primary Color with the value #2176ff. Then, you reference Primary Color wherever that blue appears. The hex code lives in one place, and every reference points back to it.

Divi 5 supports six practical variable types: colors, fonts, numbers, images, text, and links. Therefore, your variable system can cover more than styling values. It can also store logos, business details, CTA text, and external URLs.

We create variables first because the rest of the design system depends on them. In Part 4, we’ll build Option Group Presets and Element Presets that reference these variables. If the variables do not exist yet, those presets cannot bind to them. Think of variables as the atoms, presets as the molecules, and pages as the organisms. The order matters.

Opening the Design Variable Manager

To access the Design Variable Manager, open any page or template in the Visual Builder. Then, click the Design Variable icon in the Builder Bar on the left side of the screen. This opens the Design Variable Manager, where you can create, organize, and manage sitewide variables.

At the top of the manager, use the dropdown to filter variables by type: Colors, Fonts, Numbers, Images, Text, and Links. To create a new variable, click the + button in the appropriate type section. Next, give the variable a descriptive name, set its value, and save it.

The mechanics are simple. However, the strategic decisions matter: what you name each variable, which value it stores, and how many variables you create. The rest of this article gives you a practical set to build from.

A Simple Naming Rule Before You Start

Before creating variables, use names that describe each variable’s role. For broad brand values, names like Primary Color, Secondary Color, and Body Text Color work well because they can be used in many contexts.

For values with a specific job, use functional names such as Border – Fields Dark, Background Overlay – Dark, or Rounded Corners – Buttons. This keeps the system easier to scan later, especially when you start building presets from these variables in Part 4.

Color Variables

Colors define brand identity, establish visual hierarchy, and create contrast between sections. Our Coworking Space site uses a narrow palette built from a small number of base colors. Then, we extend that palette with Divi 5’s Relative Color system to create transparent variants, overlay tones, and contextual shades.

Base Colors

Start by creating the foundational color variables. Primary, Secondary, Heading Text, Body Text, and Link colors are already generated for you. In this step, update them to match the Coworking Space design.

• Primary Color: #2176ff
• Secondary Color: #ff5700
• Heading Text Color: #000000
• Body Text Color: rgba(0,0,0,0.7)
• Link Color: Reference Primary Color

From there, add a few utility colors. Black and White will not be used directly on modules very often. Instead, they act as base values for the relative colors below, where we adjust opacity to create overlays, borders, shadows, and transparent tints.

• Black: #000000
• White: #ffffff
• Background – Light Gray: #f5f5f5

Relative Text Colors

With the base colors in place, build derived text colors using Divi 5’s variable referencing and relative color functionality. These values create dark-on-light and light-on-dark counterparts. As a result, a section can switch color schemes by choosing a different preset, which we’ll cover in Part 4.

• Heading Text – Light: Reference the White variable directly.
• Body Text – Light: Create a relative color from White at 90% opacity.
• Text – Dark Transparent: Create a relative color from Body Text Color at 40% opacity.
• Text – Light Transparent: Create a relative color from Body Text – Light at 60% opacity.

Relative Background, Overlay, and Utility Colors

These remaining color variables round out the palette. Some are role-based, such as Border – Dark and Drop Shadow, because they are intended for specific design jobs. Others, such as Black – Transparent and White – Transparent, are more flexible utility values.

In practice, both naming styles are useful. Use descriptive color names when a value can appear in many contexts. Use functional names when a value has a specific purpose.

• Background Overlay – Dark: Create a relative color from Black at 86% opacity.
• Background Overlay – Light: Create a relative color from White at 86% opacity.
• Black – Transparent: Create a relative color from Black at 10% opacity.
• White – Transparent: Create a relative color from White at 20% opacity.
• Border – Dark: Create a relative color from Black at 12% opacity.
• Border – Light: Create a relative color from White at 30% opacity.
• Border – Fields Dark: Create a relative color from Black at 30% opacity.
• Border – Fields Light: Create a relative color from White at 50% opacity.
• Drop Shadow: Create a relative color from Black at 15% opacity.

Font Variables

For this site, create two font variables: Heading and Body. Divi makes it easy to select Google Fonts, and Divi also supports uploaded custom fonts for projects that need them. For our Coworking Space site, both variables use Inter.

• Heading: Inter
• Body: Inter

Using a single typeface for both headings and body text is not always required. However, it can make your first design system easier to manage. In this build, the visual difference between headings and body text comes from size, weight, and line height instead of from separate font families.

A single font family can also reduce font-loading complexity. Still, using two well-chosen font families will not ruin your site’s performance on its own. Use the type system your design needs, and keep the font selection intentional.

Number Variables: Typography

Number variables handle values measured in pixels, rems, ems, or CSS functions. We’ll create them in logical groups, starting with typography.

Heading Sizes

Each heading level gets a fluid size using a CSS clamp() function. These values define a minimum size, a preferred scaling rate, and a maximum size. Therefore, headings can scale smoothly between mobile and desktop without requiring separate values for every breakpoint.

Together, these variables create a proportional type scale that remains visually balanced across screen sizes. To add them to the Design Variable Manager, create a new Number Variable, copy the full clamp() value, and paste it in.

• H1: clamp(1.75rem, 4.4975vw + 0.6254rem, 3.75rem)
• H2: clamp(1.5rem, 2.2596vw + 0.9534rem, 2.5rem)
• H3: clamp(1.25rem, 1.4122vw + 0.9085rem, 1.875rem)
• H4: clamp(1.0625rem, 0.9831vw + 0.8155rem, 1.5rem)
• H5: clamp(0.9375rem, 0.7007vw + 0.7588rem, 1.25rem)
• H6: clamp(0.875rem, 0.2824vw + 0.8067rem, 1rem)
• H1 Big: clamp(3rem, 7.3219vw + 1.1924rem, 6.25rem)
• Eyebrow Subheading: clamp(0.8125rem, 0.2824vw + 0.7442rem, 0.9375rem)

Body Text Sizes

Body is the standard paragraph size. Body Small covers secondary text, such as footers and captions. Body XS is a fixed size for tags and fine print. Meanwhile, Fields Text matches Body Small today but stays separate so form field text can be adjusted independently later.

• Body: clamp(0.875rem, 0.2824vw + 0.8067rem, 1rem)
• Body Small: clamp(0.8125rem, 0.2824vw + 0.7442rem, 0.9375rem)
• Body XS: 12px
• Fields Text: clamp(0.8125rem, 0.2824vw + 0.7442rem, 0.9375rem)

Line Heights

Headings use tight leading because large text already provides visual structure. Body text uses more generous leading for comfortable reading. Small text sits in between.

• Line Height – Headings: 1.3em
• Line Height – Body: 1.8em
• Body Small Line Height: 1.55em

Spacing

Spacing variables create a consistent rhythm between elements. Rather than eyeballing padding and margins on every module, reference a spacing variable that enforces the same distance wherever it is used.

The fixed values cover tight element gaps, such as Spacing – XSmall, through generous section padding, such as Spacing – Large. In addition, Spacing – Fluid scales with the viewport to avoid spacing that feels too tight on desktop or too loose on mobile. Grid Gap – Fluid is similar, but it is capped at 60px for CSS Grid layouts.

• Spacing – XSmall: 10px
• Spacing – Small: 20px
• Spacing – Medium: 30px
• Spacing – Regular: 60px
• Spacing – Large: 100px
• Spacing – Fluid: clamp(24px, 6vw, 90px)
• Grid Gap – Fluid: min(4vw, 60px)

Borders and Corners

Structural borders and field borders share the same value, but they are separated so they can evolve independently. Button borders are set to 0px because this design uses filled backgrounds rather than outlines.

The same logic applies to corner radii. The three 8px values match now, but they are separated because images, containers, and form fields are different design concerns. For example, you might later want rounder images but sharper cards. In that case, you can change one variable without affecting the others. Finally, Rounded Corners – Buttons uses 500px to create a pill shape.

• Border Width: 1px
• Border Width – Fields: 1px
• Border Width – Buttons: 0px
• Rounded Corners – Regular: 8px
• Rounded Corners – Images: 8px
• Rounded Corners – Fields: 8px
• Rounded Corner – Small: 4px
• Rounded Corner – Large: 16px
• Rounded Corners – Buttons: 500px

Buttons

The 2:1 horizontal-to-vertical padding ratio creates a wide, click-friendly button shape. These three variables, combined with Rounded Corners – Buttons and Border Width – Buttons, define the physical dimensions of every button on the site.

• Button Font Size: 14px
• Button Vertical Padding: 16px
• Button Horizontal Padding: 32px

Layout Dimensions

Layout variables constrain content to readable line lengths. Row Max Width is the default for standard content rows. The narrower options are for blog posts, forms, and compact centered blocks, where shorter lines can improve readability.

• Row Max Width: 1080px
• Max Width – 900: 900px
• Max Width – 700: 700px
• Max Width – 510: 510px

Image Variables

Image variables store visual assets that are reused across the site.

• Logo Dark: The dark version of the logo for light backgrounds.
• Logo Light: The light or white version of the logo for dark backgrounds.

Every header, footer, and template that displays the logo can reference one of these variables. Then, if you improve or replace a logo later, you only need to update the Image Variable. The change will apply wherever that variable is used. If you do not have a logo yet, use Logoipsum to create a temporary placeholder.

Text Variables

Text variables store words and phrases that repeat across pages and templates. If you expect to type the same text more than once, it is often worth saving it as a Text Design Variable. Business details are a strong use case because they tend to appear in headers, footers, contact sections, and templates.

• Company Name: Elegant Themes
• Address: 1234 Divi St. #1000, San Francisco, CA 94220
• Phone Number: (255) 352-6258
• Email: hello@divi.com
• Opening Hours: Mon-Fri: 10am–5pm / Sat-Sun: Closed

CTA anchor text is also worth planning in advance. Because buttons appear throughout the site, reusable CTA variables help keep wording consistent and reduce small decisions during the build.

• Book Tour: Book Tour
• View Plans: View Plans
• Learn More: Learn More
• Read More: Read More

Link Variables

Link variables store URLs that get referenced across multiple modules. For links built inside your WordPress installation, dynamic data may already be the better choice. However, for external destinations like social profiles, scheduling tools, or third-party resources, Link Variables are convenient.

• Elegant Themes: https://www.elegantthemes.com/
• YouTube: https://www.youtube.com/

These variables are especially useful when an external URL changes. For example, after your YouTube channel qualifies for a custom handle or vanity URL, you can update the YouTube Link Variable once. Then, every module that references it will point to the new destination.

Reviewing the Complete System

With all variables created, the design system contains 21 color variables: 8 base colors and 13 colors built with the relative color system. It also includes 2 font variables, 38 number variables, 2 image variables for logo variants, 9 text variables for business information and CTAs, and 2 link variables for reusable URLs.

That gives us 74 active design variables before any page modules have been added. More importantly, the constraints are already in place. Every color has a name, every spacing value has a purpose, and every heading level has a fluid size that adapts across screen sizes.

The payoff is consistency and changeability. When you apply Spacing – Small to a card’s padding and a list’s gap, those distances match because the variable enforces them. Likewise, if a client decides the brand blue needs to shift, you can change Primary Color once and let that update flow through every preset that references it.

What’s Coming Next

The variables are in place, but they do not do much on their own yet. In Part 4: Mastering Divi 5 Presets For Faster, More Consistent Web Design, we’ll use these variables to build a complete library of Option Group Presets and Element Presets.

You’ll see how a Primary Color variable becomes a Filled – Primary Color button preset, how heading size variables get bundled into Heading 1 through Heading 6 presets, and how a few spacing variables generate an entire family of container padding presets. Once those presets are built, they can be reused across every module on the site.

The post Part 3: Creating A Divi 5 Global Design System With Design Variables appeared first on Elegant Themes Blog.

Now that you’re prepared, it’s time to step inside the Divi 5 Visual Builder. Divi 5 is now fully released and out of Beta, bringing a completely revamped, modern, high-performance interface.

In this post, we’ll explore every major element of the new interface, focusing on where things live, what they do, and how they work together. By the end, you’ll know exactly where to find what you need so you can design with confidence.

Let’s dive in.

Overall Interface Layout And Workspace Overview

The Divi 5 Visual Builder has been completely redesigned to feel like a modern, professional design tool. It’s clean, spacious, and highly customizable, giving you plenty of room to focus on creativity without clutter or distractions.

At its core, the interface follows a clear hierarchy that makes navigation intuitive once you understand where everything lives.

The Page Bar (Top)

The Page Bar is the main toolbar. It houses your page settings, responsive views, and publishing actions. It’s fixed to the top of the screen, so you never have to scroll back up to save your work.

The Builder Bar (Left)

The Builder Bar houses your creative toolkit. It’s where you’ll toggle panels like Layers and the Inspector, manage global Design Variables and Presets, and switch between viewing modes like Wireframe or X-Ray. You can open and close these tools whenever you need them, keeping your workspace clutter-free.

The Canvas (Center)

This is your main workspace. It’s the central space where you’ll build and design your pages in real time. Because it’s a true visual builder, what you see here is exactly what your visitors will see on the live site.

The Sidebar (Right)

The right Sidebar contains all content and design settings for the selected module. Whenever you click an element on the Canvas, this panel displays all the settings you need to customize it. If nothing is selected, it defaults to your page-level settings so you can manage the big picture. It’s the go-to spot for fine-tuning your content and perfecting your design.

Customizable Panels

All of the panels in the Divi 5 interface are highly customizable. You can drag them to dock them to the left or right, group multiple panels into tabs for quick switching, or use them as floating panels. This allows you to maximize canvas space and support a customizable workflow.

The Page Bar

In Divi 5, the Page Bar serves as the control center for page-level actions. It stays pinned to the top of the Builder, where you can find your page settings, customizable responsive breakpoints, and publishing actions.

Page Bar Menu (Gear Icon)

Clicking the Gear icon opens a central menu where you can manage your page’s overall settings. You can access page settings, save the layout to your library, or use the Import/Export tools. It’s also a quick shortcut for clearing your layout, accessing your edit history, or jumping into a recently edited page.

Canvas Navigation

The Canvas Select dropdown menu and Canvas Grid View icon allow you to switch between Canvases. Every page starts with a Main Canvas for your primary content, but Divi 5 lets you create additional detached canvases. Think of these as flexible workspaces rather than separate pages. You can use them as staging areas to experiment with new designs safely or as the foundation for off-canvas elements like popups, slide-ins, and mega menus.

You can use the Canvas Selector menu to jump between different workspaces or toggle the Grid View to see a bird’s-eye view of every canvas associated with your page.

Responsive & Viewport Tools

The next section of the Page Bar is where you ensure your site looks great on every screen. These Customizable Responsive Breakpoints are state switchers that tell the Builder exactly which device you are styling for.

By default, Divi 5 starts with three enabled breakpoints for Desktop, Tablet, and Phone. Click the ellipsis menu to reveal the remaining breakpoints.

If you need to target a specific device size, such as an ultra-wide desktop monitor or a small phone, you can enable additional breakpoints by toggling them on. There are seven in total, allowing you to target a variety of screen sizes.

You can also resize the Canvas by grabbing the edge while in a responsive view. This lets you resize the window manually and see exactly how your design reflows across different widths.

Use the Responsive Select field to enter a specific width value when you want to pinpoint a specific size, like 360px for older, smaller devices.

Actions & Publishing

The right side of the Page Bar is where you manage your progress and finalize your work. These tools let you save your layout and serve as a safety net if you need to backtrack. To enable these settings, you first need to turn them on in the Builder Settings in the Builder Bar, which we will expand on in the next section.

Undo/Redo & History

Once enabled, these icons give you total control over your editing timeline. You can step backward through recent changes with undo and redo or open the History panel to see a chronological list of every edit made during your session.

Portability & Library

When you need to save or load a layout, delete it, or add it to the Divi Library, you can do these things from here. The Export & Import button allows you to export your layout as a JSON file, including all Global Canvases, or import a saved JSON file from your computer.

The Clear Layout icon (trash can) instantly clears every module on the Canvas, so you can start fresh.

If you’d like to save the entire layout for reuse, the Add To Library icon lets you name it, save it, and import it anywhere else on your site. You can save it to Divi Cloud and save individual sections, rows, or modules as separate items. Layouts can also be categorized and tagged for easy identification as your site grows.

Preview & Exit

Use Preview Mode to strip away the Visual Builder interface and see your site exactly as a visitor would. It opens in the same window, keeping your design clutter-free so you can make additional changes as needed.

The Exit menu gives you a few options, including exiting to the Pages area of your site, viewing your site in a new tab (View Page), editing the page, or exiting to the Dashboard.

Finally, the Save button allows you to save the page or save it and set it to draft, pending, or private.

The Builder Bar

The Builder Bar, located on the left Sidebar of the Visual Builder, is your creative toolkit. It provides quick access to tools that help you navigate your page structure, manage your global design system, and customize your workflow.

Add Layout / Divi Library Access

At the top of the Builder Bar, there’s quick access to insert premade layouts, Divi Library items (saved layouts), or build a layout with Divi AI.

This provides quick access to load a favorite Divi Library item, get started with a Layout Pack, or let AI craft a layout for you.

Layers View

The Layers View provides an overview of your page structure. It’s a searchable, hierarchical tree of every element. Use it to expand, collapse, or rename sections and modules to keep your project organized.

It is especially useful for long-form pages with many sections. Instead of scrolling endlessly, you can use Layers View to jump to any element with a single click or rename layers to keep your structure clear and easy to identify.

The Inspector

Inspired by professional design tools like Figma, the Inspector gives you a high-level overview of an element’s attributes.

Instead of hunting through different tabs for colors or fonts, the Inspector aggregates and groups them in one place. You can use it to bulk-edit styles or content, such as changing a brand color, across multiple elements or Presets simultaneously.

The Variable Manager

The Variable Manager is your design system hub. Instead of hard-coding static values like colors or pixel sizes into every module, you create reusable Design Variables. Divi 5 supports variables for colors, fonts, numbers, text, images, and links.

You can create Relative Colors using HSL (hue, saturation, and lightness). For example, you can define a primary brand color and then create a lighter version that stays linked to it. If you change the main brand color, the lighter version updates automatically to match.

You can store complex values like clamp() in Number variables to handle fluid typography and spacing across all devices from one central spot.

If your client changes their branding, you update the variable once here, and every module, preset, and page using that variable updates instantly across the entire site.

The Preset Manager

Presets in Divi 5 have been completely reimagined to be more powerful and granular. You’re no longer limited to saving the entire module. You can now save specific groups of settings independently to build a truly flexible design system. Presets now have a centralized location for global style management: the Preset Manager.

It houses both Element and Option Group Presets. Element Presets control the entire module. If you’ve designed a primary button preset with specific colors, fonts, and shadows, you save it as an Element Preset to use it anywhere on your site.

Option Group Presets offer a new, granular way to save styles. Instead of the whole module, you can save just the Box Shadow, Typography, or Border settings as a standalone preset.

You can stack or nest multiple presets on a single element, making Divi 5’s preset-based design system a great way to create new projects with minimal upfront work. Just like Variables, if you edit a preset in the Preset Manager, every module on your site that uses that preset will update instantly to match the new look.

If you’re coming from Divi 4, think of Variables and Presets as an evolution of global design. Instead of relying solely on global modules, Divi 5 offers a more flexible system for managing styles and values across your entire site. We will cover these features in depth in Parts 3 and 4 of our Divi 5 Mastery Course.

The Page Manager

The Page Manager turns the Visual Builder into a site-wide control center. It lets you manage your entire website’s structure without having to jump back to the WordPress dashboard.

Once clicked, you’ll get a searchable list of all your pages, posts, and projects. Clicking on a page opens it in the Builder immediately.

As you select a page, Divi 5 uses Speculative Prerendering to predict which page you’ll click next based on your mouse movements and start loading it in the background, making page switching feel nearly instant.

You can use the Page Manager to add new pages, duplicate existing ones, or delete pages you no longer need.

The Command Center

The Divi 5 Command Center serves as a productivity tool in the Visual Builder. Instead of clicking through nested menus to find a specific setting, you can simply type what you need. It’s designed to keep your hands on the keyboard and significantly speed up the building process.

There’s a dedicated search + filter field that lets you filter through commands for elements, modals, settings, navigation, and page-level commands.

Click into an area of the Canvas you want to edit, type the name of a module, and hit Enter to add it instantly.

If you need to change a box shadow, border, or spacing, just type those words to jump straight to those controls without any manual scrolling.

The Command Center isn’t just for the Canvas. Use it to find specific pages on your site, jump to the Theme Builder, or quickly save your current layout to the Divi Library.

You can even build entire layouts using simple text commands. For example, typing row > column > blurb > button and using Cmd + Return between each command will instantly generate a Row containing a Column, a Blurb, and a Button module.

Wireframe View

Toggle this to see your page as a clean, structured blueprint. This mode hides all styling, images, and colors so you can focus entirely on the hierarchy and organization of your content. Once clicked, you’ll have the familiar back-end look of Divi 4 right inside the front end of the Visual Builder.

Action and Parent Icons On Hover

The Action Icons On Hover setting controls whether the editing buttons (settings, duplicate, delete, etc.) appear when you mouse over an element. Turning this off gives you a clean view of your design without UI elements popping up.

The Parent Action Icons On Hover setting specifically toggles the icons for parent containers like sections or rows. It helps reduce visual noise when you only want to focus on individual modules.

X-Ray Mode

Unlike Wireframe mode, X-Ray Mode keeps your images and content visible as you browse, revealing the underlying structure. It draws an outline around every element on the page, making it a useful tool for troubleshooting layout issues. By viewing the boundaries of every container, you can instantly identify which element is causing a spacing conflict, even if it has a transparent background or overlaps another module.

Use this whenever your design gets complex to see exactly where your invisible containers are sitting on the Canvas.

Builder Settings

The Builder Settings icon contains a series of tools for personalizing the interface. From here, you can toggle which tools stay visible in the Builder and adjust their overall behavior to match your workflow.

Builder Default View Mode

Choose which view opens by default when you launch the Builder: Desktop, Tablet, Phone, or Wireframe. This is helpful if you prefer starting with a structural overview or if you are focusing specifically on mobile optimization.

History State Interval

Customize how frequently the Visual Builder saves a History State. Adjusting this lets you control how granular your undo/redo timeline is during an active session.

Settings Modal Default Position

You can decide where your settings panels live. You can pin them as sidebars on the left or right, return them to the last-used position, or set a floating minimum size so you can move them freely as you design.

Page Creation Flow

This determines what you see when creating a new page. You can choose to always show the Build From Scratch choice, automatically open the premade layout library, or jump straight into building a page with Divi AI.

Page Bar Icons

Here, you can toggle the Page Bar icons for undo/redo, history, export and import, clear layout, and add to library.

Show Disabled Modules At 50% Opacity

For a clearer visual experience, the Show Disabled Modules At 50% Opacity setting dims inactive elements, such as those hidden on mobile, so you can tell at a glance which are live without cluttering your view.

When toggled off, the hidden element disappears from the layout entirely.

Group Settings Into Closed Toggles

To keep your design workspace uncluttered, you can enable Group Settings Into Closed Toggles, which ensures that the Content, Design, and Advanced tabs remain collapsed until you specifically need them.

Add Placeholder Content To New Modules

You can also toggle Add Placeholder Content To New Modules, which automatically fills new elements with placeholder text and images so you can see your layout’s structure immediately.

Speed Up The Builder With Prerendering

When enabled, Divi 5 uses Speculative Prerendering to predict your next move, such as hovering over the exit button or a new page. It begins loading the destination in the background for nearly instant transitions, whether you’re loading a different page, heading back to the dashboard, or opening the Theme Builder.

Interface Mode

The Interface Mode setting lets you choose between light and dark mode, giving you control over how the Visual Builder is displayed.

Color Scheme

You can change the primary UI color scheme, such as blue, purple, red, green, or orange, to personalize the look of the Builder’s buttons and accents without affecting your actual website design.

Show Theme Builder Layouts

A toggle in Divi 5 lets you hide or show global areas like headers and footers while editing a page. This is useful for removing visual distractions when you want to focus exclusively on the page’s body content.

Enable Admin Bar

When enabled, the Enable Admin Bar toggle keeps the standard WordPress top bar visible in the Builder.

Help

The Help setting in the Builder Bar gives you access to a series of video tutorials to help you get started with Divi 5. It covers everything from an introduction to the Visual Builder to using Divi 5’s design settings and becoming a power user.

There’s also a full list of keyboard shortcuts that can help you work more efficiently inside the Builder.

Light/Dark Mode

The last item in the Builder Bar is the Light/Dark Mode toggle. It lets you quickly switch between the two modes without digging through the Builder or Page Settings.

The Canvas

In Divi 5, the Canvas is no longer just a preview window. It works as a detached, high-performance workspace. The most significant changes are found in the right-click contextual menus and the multi-select workflow.

Right-Click Contextual Menus

Divi 5 makes the Canvas even more powerful with intuitive right-click menus that put the most common actions right at your fingertips. Instead of hunting through icons or opening settings panels repeatedly, you can right-click any section, row, column, or module to reveal a context-sensitive menu packed with quick tools.

These menus include essential actions like duplicate, undo/redo, move, delete, copy, paste, inspect, and add an element above, inside, or below. You’ll also find options to copy, paste, and extend attributes (more on this in the next section), reset specific settings, and save to the library.

Extend Attributes

While the old version only handled styles, this new system allows you to propagate styles, content, and presets across your layout simultaneously. When you right-click an element and select Extend Attributes, you can choose exactly what to push. You can extend an entire Option Group, such as all Button settings, or drill down to Modified Fields only.

For instance, you can change only the styles of every button on the page while leaving their unique text intact.

You can define the scope of the extension. Apply your changes to similar elements within the current Module Group, column, row, section, or the entire page.

You can now extend attributes across different module types. For example, you can take the button styling from a Contact Form and extend those attributes to all standalone Button modules on the page.

Attribute Management

In addition to extending attributes, you can now copy and paste specific parts of an element without cloning the entire thing. When you right-click a module, you now have a sophisticated Copy and Paste Attributes menu.

Right-click a module and select Copy Attributes.

Then, right-click on a module that shares the same properties and select Paste Attributes. A menu appears, allowing you to choose which attributes you’d like to paste, including all module attributes, styles, and content, or just selected styles and content.

If a preset is applied to the copied module, you can paste its preset as well.

Bulk Editing With the Inspector

As previously mentioned, the Inspector allows you to see every style setting, all of your content, layout style, and applied presets in one place. It lets you audit your designs in a dedicated tool in the Builder Bar, showing every color, font, spacing value, content item, and preset used in the selected area. It works in tandem with the Canvas, making it easy to make quick changes.

To use it, click into a module, column, row, or section, and click the Inspector icon. You’ll have instant access to all styles, content, and presets used in that area of the Canvas.

If you need to change a specific color across an entire section, you can do so once in the Inspector. It will instantly find every element using that color and update them all simultaneously.

Multi-Selecting Modules

While the Inspector handles styles and content, multi-selection handles structure. In Divi 5, selecting multiple modules is a great way to manage your page layout in blocks.

Hold Shift and click on multiple modules to select them as a group.

Once selected, you can drag the selected modules to a new location on the page. This makes reorganizing complex layouts incredibly fast.

One-Click Editing

In addition to right-clicking, Divi 5 supports one-click editing. Unlike earlier versions, where you had to click settings icons directly, simply clicking anywhere on a module, row, column, or section instantly opens its full settings in the Sidebar. This direct integration makes the Builder responsive and natural.

The Sidebar

The right-hand Sidebar provides deep, contextual control over your design. In Divi 5, this panel is intelligent. It automatically switches its controls based on what you’ve selected on the Canvas. If no module is selected, it defaults to Page Settings, acting as the command center for your layout’s global attributes.

Divi 5 Breadcrumbs

When you click a module, look at the top of the Sidebar to find a breadcrumb trail. Instead of hunting for your place in the Builder, you can click the breadcrumbs to jump instantly from a module up to its parent Column, Row, or Section.

Element Presets

Located at the top right of the module name in the Sidebar, this small icon acts as a quick-access toggle for your Element Presets.

Clicking this icon opens a dropdown of all saved presets for that specific module type. Instead of navigating back to the Preset Manager in the Builder Bar, you can apply your preset styles directly as you work. If a preset is applied, its name will be displayed instead of the preset icon.

To add a preset, click the Element Preset icon to reveal the options. You can apply a preset, create a new preset from current styles, or select Add New Preset.

Responsive State Picker

Below that, you’ll find the familiar Content, Design, and Advanced tabs, along with the new Responsive State Picker. Here, you can set the responsive state for each breakpoint, hover state, and sticky state. This ensures you always know exactly which version of the module you are styling.

The Content, Design, and Advanced tabs remain largely the same, but with more granular organization and better performance.

Each settings panel (Content, Design, and Advanced) includes a search bar at the top and filters to show modified fields, variables in use, and more. This makes hunting through options much faster.

Content Tab

This is where you manage the content of your element, including text, images, and links. In Divi 5, the Responsive Editor, Dynamic Content icon, and Divi AI icon are more accessible, making it easier to pull in titles or custom fields, adjust typography for smaller screens, or write content with Divi AI. In the Blurb module specifically, these icons are available over any Text field, while the Responsive Editor icon is available for Link fields.

These icons also appear contextually throughout applicable fields in the Content and Design tabs.

Elements Menu

One of the biggest changes in the Divi 5 Content tab is the Elements menu.

This unlocks Nested Modules, giving you the freedom to place modules inside other modules. Using the Blurb module as an example, you can easily add a Button module directly inside the module’s container.

Loop Menu

The Loop section in the Content tab introduces the Loop Builder, a feature that fundamentally changes how you handle dynamic content. In Divi 4, you were often restricted to specific modules, such as the Blog or Portfolio module, to display a feed of posts. In Divi 5, you can turn any element — whether it’s a Column, Row, Group module, or Link Module — into a repeating loop.

Managing Layouts At The Row & Column Level

While individual modules handle your content, the Row and Column settings in the Content tab provide the structural foundation. This is where you’ll find two of Divi 5’s new layout tools: Structure Templates and Display Order.

Structure Templates (Row Level)

When adding a Row, the Apply Structure Template button allows you to redefine your column arrangement for specific devices.

If you have a three-column layout on Desktop but want a single-column layout on Tablet, you can switch to the Tablet breakpoint and click Apply Structure Template. This opens a modal that lets you select a new arrangement that applies only to that responsive state.

Order Menu (Column Level)

When you move into the Column settings, the Order menu allows you to change the display order of that column on smaller screens.

For example, if you have an alternating layout on Desktop — such as an image on the left and text on the right, followed by text on the left and an image on the right — the standard stacking order on smaller screens can look messy. You might end up with an image-text-text-image flow instead of a cleaner image-text-image-text flow.

In Divi 5, this is an easy fix. Switch to a smaller breakpoint, such as Tablet, and use the Order field to change the display order for that column. The Builder will automatically rearrange the columns at that breakpoint according to the sequence you define, ensuring your content is always presented logically, regardless of device width.

Design Tab

While the Content tab handles the structure and content of your modules, the Design tab is where you refine the styling. For Divi 4 users, the most significant change is the shift toward a composable design system and the introduction of professional-grade layout engines such as Flexbox and CSS Grid.

Composable Settings

In Divi 4, settings were module-based and included a specific set of design options. Divi 5 introduces Composable Settings, which means design features are now interchangeable and can be added to almost any element. Using the Blurb module as an example, click on the Design tab and expand the Title Text menu. As you can see, the Title Text menu has the familiar settings you’re used to, including Title Font, Font Weight, Font Style, and others.

When you hover next to the menu’s title, you’ll see two new icons: one for presets and another for composable settings.

When you click the new composable settings icon, you can enable new sub-element options that were previously unavailable.

This means you can add styling for Background, Sizing, Spacing, Border, and more directly to the Blurb’s Title Text. Once enabled, you can immediately style the Title Text with these new options.

Advanced Units

In any module, Divi 5 replaces simple number fields with a new Advanced Units system. Every input for spacing, sizing, and typography now acts as a mini code editor.

With Advanced Units, you aren’t limited to static numbers. You can type complex CSS functions like clamp(), calc(), min(), and max() directly into the field. You can access these units by clicking to the right of any sizing, spacing, or typography field. Using the Blurb as an example, click to the right of the Title Text Size field. This displays a list of every available unit. This allows you to build fluid typography and responsive spacing that adapts to different screen sizes without manual tweaking.

You can also select a Design Variable by clicking the Insert Dynamic Content icon in any of these fields to globally link it. For example, we can add spacing to the Blurb’s Padding fields with a few clicks. If you update that variable in the Variable Manager, every module that uses it will update instantly across your entire site.

Advanced Layouts: Flexbox & CSS Grid

The most powerful updates in the Design tab happen at the Row and Column levels. Divi 5 has replaced the older layout method with modern CSS standards, giving you total control over how elements are aligned and distributed.

Flexbox

In the Layout menu in the Design tab of any module, you can use Flexbox settings to handle alignment.

Control Layout Direction by choosing row or column, and decide whether items should Wrap to the next line on smaller screens.

Use Justify Content and Align Items to center elements, push them to the edges, or create space between items within a container.

You can also control the horizontal and vertical spacing between items using the Gap settings.

CSS Grid

For complex, non-linear layouts, you can enable CSS Grid. While Flexbox handles alignment in one direction, CSS Grid is a two-dimensional system.

You can easily define the number of rows and columns in your container.

Grid makes it easy to create unique layouts that would be difficult to achieve without custom CSS. You can even redefine the grid structure specifically for mobile, moving elements into different cells or deleting them to fit smaller screens.

Advanced Tab

The Advanced Tab in Divi 5 is designed for precision and extensibility. For users coming from Divi 4, these four areas represent a major leap in what you can achieve without leaving the Builder.

Attributes

Divi 5 introduces a professional Custom Attribute system. Beyond just IDs and classes, you can now add custom HTML attributes, like data attributes or aria-labels, directly to any element. This is a useful feature for developers who need to improve accessibility or add custom functionality.

Semantic Elements & Custom HTML Wrappers

With Semantic Elements, you can redefine the meaning of a module. Use this menu to swap standard div wrappers for semantic tags like article, aside, or nav. This helps search engines and assistive technologies better understand your content.

In the same HTML option group, Divi 5 also introduces Custom HTML Wrappers. These allow you to inject HTML directly before and after any element, effectively wrapping modules in custom markup.

Any associated CSS styles for these containers should be placed at the page level in the Advanced tab under the Custom CSS field.

This is especially useful for advanced use cases where a standard Code module can’t reach, such as adding custom parent containers, inserting helper elements, or integrating third-party scripts directly around a module’s output.

Together, Semantic Elements and Custom HTML Wrappers give you full control over both the meaning and structure of your layout without leaving the Visual Builder.

Interactions

Interactions allow you to create complex, high-performance animations, like translate, scale, rotate, or tilt, that trigger based on the user’s mouse movements.

Because they are built on a modern engine, these animations are smooth and lightweight. When combined with Canvases, Interactions can be used for triggering popups, slide-ins, and mega menus, making it easier than ever to create dynamic effects for your site.

What’s Coming Next

With a solid understanding of where everything lives in the Divi 5 Visual Builder, from the predictive power of the Page Manager to the precision of CSS Grid and Advanced Units, you’re ready to start building with purpose.

In Part 3, we’ll put this interface to work by creating a Global Design System. We’ll turn your brand colors, typography, and spacing into a library of Design Variables, ensuring that the coworking space website we build together is fast, consistent, and easy to manage.

Ready to dive deeper? Experiment with the new interface on your own site, try switching between Light and Dark modes, and get comfortable with the Command Center. Drop any comments or questions below, or reach out on our social media channels.

The post Part 2: Exploring Every Aspect Of The Divi 5 Interface appeared first on Elegant Themes Blog.

Here’s what the series covers (we will add links as each part is published):

1. What To Prepare Before Building Your Divi 5 Website (you’re here)
2. Exploring Every Aspect Of The Divi 5 Interface
3. Creating A Divi 5 Global Design System With Design Variables
4. Mastering Divi 5 Presets For Faster, More Consistent Web Design
5. Building A Divi 5 Homepage From Scratch
6. Building A Custom Header And Navigation In Divi 5
7. Building A Custom Footer In Divi 5
8. Using Divi 5 Theme Builder To Create Global Website Templates
9. Building The Core Inner Pages Of Your Divi 5 Website
10. Mastering Flexbox In Divi 5
11. Mastering CSS Grid In Divi 5
12. Making Your Divi 5 Website Fully Responsive
13. Creating Interactive Off-Canvas Elements (Popups & More)
14. Mastering The Divi 5 Loop Builder
15. Divi 5 Power User Workflow
16. Auditing, Polishing, And Launching Your Divi 5 Website

No imported templates. No pre-built layouts. You’ll do the designing yourself. By the end, you’ll understand not just how to use Divi, but how a real build comes together from start to finish. Each part builds on the last, so following along in order gives you the full picture. That said, if you already know your way around and want to jump to a specific topic, each part includes enough context for you to self-guide.

Ready? Let’s get started.

Before You Open The Builder

Every new website starts before opening the builder. The sitemap, the color palette, and the copy on the homepage — all of it shapes how quickly and confidently you’ll move once you’re inside the editor. This first part covers everything that happens before you touch the builder: understanding how Divi and WordPress fit together, installing them, finding your way around the dashboard, and, importantly, gathering the raw materials your site actually needs.

If you already have Divi 5 installed and know your way around WordPress, skip ahead to the preparation checklist near the end of this post. But if you’re starting fresh, read on.

What Is WordPress, and Where Does Divi Fit?

WordPress is a content management system (CMS). It handles your pages, posts, media, and site settings. On its own, WordPress gives you a functional website, but designing that website requires either code or a tool that translates visual decisions into code for you.

That’s where themes and page builders come in.

A WordPress theme controls your site’s default appearance: fonts, colors, header and footer layout, and page structure. WordPress requires an active theme to work, as it’s a fundamental part of how it’s built. Classic themes give you some design control through a settings panel, but you’re largely working within the theme author’s predefined structure. Newer block themes offer more flexibility through WordPress’s built-in Site Editor, but either way, the theme sets the baseline that everything else builds on.

A page builder goes further. It gives you a visual, drag-and-drop interface for placing content blocks — such as text, images, buttons, and columns — and styling them directly on the page. Instead of writing CSS or editing PHP templates, you make design decisions visually and see results as you work.

Divi happens to be both. It’s a WordPress theme and a visual page builder in one package. When you install Divi, you get a theme that handles your site’s global structure and a builder that lets you design every page visually. You also get access to the Theme Builder, which controls templates for your headers, footers, blog post layouts, archive pages, 404 pages, and more. All this gives you full design control over every part of your site without code (unless you’re comfortable using it — Divi doesn’t hold you back either way).

Everything — layout, styling, global templates, and responsive design — lives in one system when you use Divi.

Getting WordPress and Divi Installed

Before you can build anything, you need two things: a WordPress installation running on a web host and the Divi theme installed on that WordPress site.

Web Hosting and WordPress

WordPress requires web hosting — a server where your site’s files and database live. Most hosting providers offer one-click WordPress installation, which handles the technical setup (database creation, file permissions, and initial configuration) automatically. If you don’t have hosting yet, Elegant Themes offers Divi Hosting, which comes with WordPress and Divi pre-installed and activated. That’s the fastest path from zero to building.

If you already have hosting and need to install WordPress manually, Elegant Themes has a thorough guide: How to Install WordPress.

Installing and Activating Divi 5

Once WordPress is running, you install Divi the same way you’d install any WordPress theme:

1. Log in to your Elegant Themes Members Area and download the Divi 5 zip file.
2. In your WordPress dashboard, go to Appearance > Themes > Add New > Upload Theme.
3. Upload the zip file, click Install Now, and then click Activate.
4. Follow the onboarding prompt to connect your Elegant Themes license. This allows your site to receive theme updates as they are released.

That’s the short version. For the full walkthrough with screenshots, see How To Install The Divi Theme.

With Divi active, a new Divi menu item appears in your WordPress sidebar. That’s your command center for everything Divi manages outside the visual builder.

Finding Your Way Around WordPress with Divi 5

Divi adds several features to the standard WordPress dashboard. You don’t need to memorize every option right now — later parts of this course will use specific settings in context. For now, here’s a map of what’s where and what matters most at this stage.

The Divi Menu

Click Divi in the WordPress sidebar, and you’ll see several sub-items:

Divi Dashboard is the main hub. It shows your license status, current Divi version, and links to create pages, manage templates, or generate a site with Divi Quick Sites. For this course, we’re building from scratch, so we won’t be using Quick Sites, but it’s worth knowing it exists for future projects where speed matters more than custom control.

Theme Options is a settings panel that controls site-wide defaults — your logo, social media URLs, performance settings, SEO basics, and integration code (like analytics scripts). The tabs you’ll interact with most early on are:

• General: Upload your site logo and set social media profile URLs. These feed into the default header and footer.
• General > Performance: Enable Dynamic CSS, Dynamic Module Framework, and Critical CSS to optimize front-end loading. These are good to enable from the start.
• Integration: This is where you paste tracking scripts (Google Analytics, Meta Pixel, etc.) that need to load site-wide. The Add code to the <head> field is the most commonly used.
• Updates: This is where your Elegant Themes username and API key are stored so WordPress can automatically pull Divi updates.

The remaining tabs — Navigation, Builder, Layout, Ads, and SEO — exist but are either handled better by dedicated plugins (SEO, for example) or addressed later when we build specific templates. Don’t feel like you need to configure every tab before moving forward.

Theme Builder is where you create and assign global templates — your site’s header, footer, blog post layout, 404 page, archive pages, and any other template-driven area. We won’t build these until Parts 6, 7, and 8 of this course, but know that it’s here in the dashboard and central to how Divi controls your entire site structure. For now, the default Divi theme templates will handle your header and footer until we replace them with custom ones.

Editing Pages with Divi

To build a page, go to Pages > Add New in WordPress (or Pages > All Pages to edit an existing one). After you give the page a title and save it, you’ll see the Edit With Divi option. This launches the Visual Builder — the front-end editing interface where all design work happens.

You can also launch the Visual Builder from the front end of your site. While logged in, navigate to any page and click the Edit With Divi button in the WordPress admin bar at the top of the screen.

The Visual Builder is where you’ll spend most of your time in this course. Part 2 covers the entire interface in detail — every major panel, toolbar, and interaction mode. For this part, just know that the builder opens on the front end of your page and gives you direct visual control over layout and design.

What To Gather Before You Start Building

Before building, it’s best to have a general direction. If you’re learning a new website builder while also figuring out what you want to build, the process will be very slow and potentially frustrating. Instead of doing both at once, we recommend getting clarity on what you want to build before you start learning how to build it. This may involve several things:

Brand Direction

You don’t need a 40-page brand guide. But you do need something that keeps you on track and focused as you learn a new skill. At a minimum, you should consider these items:

Colors: At minimum, choose a primary brand color, a secondary (or accent) color, and a neutral palette (a near-black for text, a near-white for backgrounds, and one or two grays for borders and secondary text). If you have specific hex codes, that’s even better. If you’re starting from scratch, tools like Coolors or Adobe Color can help you build a palette quickly.

Fonts: Pick a heading font and a body font. Two fonts total are enough for most sites. Google Fonts is the easiest source since Divi loads them natively. A reliable starting point is to pair a clean sans-serif heading font with a readable sans-serif or serif body font.

These decisions get formalized into Design Variables in Part 3. But you need to make these decisions before you can systematize them.

A Logo

Your logo can appear in the header, the browser tab (as a favicon), in the footer, and potentially in other places. If you have one, make sure it works on both light and dark backgrounds. SVG or high-resolution PNG files with a transparent background are the best formats for web use. You might also want to use different logo variations that look better in different contexts.

If you don’t have a logo yet, create a simple text-based placeholder in Canva, Photoshop, or GIMP. A styled site name in your chosen heading font works fine until a real logo is ready. Or, if you want to move quickly, you can use Divi’s default logo while getting started and replace it before launch.

Images and Media

Stock images are fine to start. High-quality stock photo sites like Unsplash and Pexels offer free options that work well for placeholder content. For a coworking space site — which is what we’re building in this course — look for images of:

• Open workspace and desk areas
• People collaborating or working independently
• Meeting rooms and private offices
• Building exteriors or lobbies
• Amenities (coffee bars, lounges, event spaces)

Gather more images than you think you’ll need. Having options prevents the build from pausing while you search for “one more hero image.” If possible, optimize images before uploading them. Tools like TinyPNG or Smush reduce file size without visible quality loss. Large, uncompressed images are one of the most common causes of slow WordPress sites, so it’s best to address this before uploading them.

A Sitemap

A sitemap is a list of every page your site needs and how those pages relate to each other. For the coworking site we’re building in this course, the sitemap looks like this:

• Homepage: The main landing page with an overview of the space, key benefits, and calls to action.
• About: The story behind the space — who runs it, why it exists, and what makes it different.
• Spaces (or Membership Plans): What’s available — hot desks, dedicated desks, private offices, and meeting rooms — including pricing and features.
• Blog: A dynamic archive page that pulls from blog posts. Useful for SEO and community updates.
• Contact: Location, hours, a contact form, and an embedded map.

Your site might include additional pages like Events, FAQ, Careers, or Terms, but start with the core pages and expand later. A focused sitemap keeps the build on track and helps you understand what content you need to create.

Written Content

Before Part 5 (where we build the homepage), you should have at least rough drafts of your content:

• Homepage headline and subheading: What does this coworking space offer, and why should someone care? One sentence each.
• Value propositions: Three to four short statements explaining what makes the space worth joining.
• About section copy: Two to three paragraphs about the space’s mission, history, or team.
• Service or plan descriptions: For each membership tier — a name, a short description, and a price (even if approximate).
• Calls to action: “Book a Tour,” “Get Started,” “See Plans,” “Contact Us” — decide on consistent wording early.
• Contact information: Address, phone number, email, and hours of operation.

The content doesn’t need to be final, but it needs to exist in a usable form. If necessary, use placeholder text while refining it later.

Design Inspiration

Browse five to ten websites in your industry (or related industries) and save examples of layouts or sections you like. Pay attention to:

• Homepage structure
• Navigation layout
• Spacing and whitespace
• Typography choices
• Color usage

You’re not copying — you’re building a reference point. Having visual direction makes design decisions easier.

Organizing Your Preparation Materials

Keep everything in one place. A simple folder structure works well:

• /brand: Logos, colors, fonts
• /images: Photos and media
• /content: Page copy
• /reference: Inspiration and examples

This prevents constant context switching while building.

What’s Coming Next

With WordPress running, Divi 5 installed, and your preparation materials gathered, you’re ready for the build.

Part 2 takes you inside the Divi 5 Visual Builder and walks through every panel, toolbar, and interaction mode so you know exactly where everything lives before you start designing.

The full course builds a complete coworking website from scratch — no imported templates, no pre-built layouts, and no shortcuts. You’ll see exactly how a professional build comes together from an empty canvas through to launch.

The post Part 1: What To Prepare Before Building Your Divi 5 Website appeared first on Elegant Themes Blog.

At the core of Divi 5’s design system are variables and presets. With advanced units, you can create fluid, responsive sizing systems using clamp(). With relative colors, you can create mathematically beautiful color systems using HSL. When you set everything up correctly, it makes managing your website so much easier.

But, setting up all your color and number variables takes time, and learning clamp() can be intimidating.

That’s where the new variable generator comes in, allowing you to spin up an entire sizing and color variable system automatically in a few clicks. It’s easy for beginners because Divi does the work for you, but it also offers all the controls you could ever ask for, allowing CSS experts to fully customize their systems.

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

Generate A Stunning Relative Color Palette

The Divi 5 color palette is global by default. Instead of creating a static color palette, each color you add is a color variable. When you use those color variables throughout your website, you can update each color once in the variable manager, and the changes apply to your entire site. That’s the beauty of variables.

What’s more, you can create color relationships using Divi’s relative color system. Instead of manually creating a set of light-to-dark shades of your primary color, you can create a relative color based on it and adjust its lightness. When you adjust the primary color, all related colors are automatically updated. The color scheme of your entire website can be adjusted based on a single color variable.

It’s simply amazing, and now, Divi does all the hard work for you!

Using The Color Palette Generator

In the variable manager, hover over the color group and click the “Generate Color Palette Variables” button to open the variable generator.

Divi takes your website’s primary color and automatically generates a color system relative to it. You can tweak the secondary color relationship, choose how many color shades you want, and you’re done!

Once saved, the variable generator will update your website’s base colors (primary, secondary, body text, header text, and link) and generate a spectrum of light-to-dark and transparent colors based on your primary and secondary colors.

The beauty of these color variables is that every variable is relative to the primary color, and when you change the primary color, everything else follows suit.

Generate An Entire Fluid Sizing System

The color palette generator is just the tip of the iceberg. The variable generator goes deep!

With a few clicks, the variable generator will create an entire fluid and responsive sizing system, including sizing variables for text size, spacing, gap, width, border radius, and more. The system Divi generates will work great out of the box, but you can also tweak every aspect.

Using The Sizing Variable Generator

In the variable manager, hover over the numbers group and click the “Generate Fluid Sizing Variables” button to open the variable generator.

Next, choose your desired variable type from the variable type menu. The sizing variable generator can generate the following systems:

1. Font Size – Font size variables can be used to create headings and body text that scales with screen size.
2. Spacing – Spacing variables can be used for margin and padding settings, creating spacing that scales with screen size.
3. Gap – Gap variables can be applied to the horizontal and vertical gap settings of your flex containers to create varying gap sizing that scales with screen size.
4. Radius – Radius variables can be applied to border-radius settings to create rounded corners that get more or less rounded based on the screen size.
5. Border Width – Border width variables can be applied to border width settings to create widths and scale with screen size.
6. Clamp (Generic) – If you want to generate your own generic clamp-based variables, the clamp variable generator makes it simple.
7. Size (Generic) – Generate generic sizing variables for anything not covered by the overarching systems mentioned above.

For beginners, you don’t need to worry about configuring anything. Just choose how many variables you want, and then click the “Add Variables To My Site” button.

The Beauty Of Fluid And Responsive Clamp Variables

By default, all sizing variables generated by Divi use clamp to create sizes that adapt to all screen sizes. You don’t need to use responsive editing at all.

The preferred size scales with the viewport size, clamped to minimum and maximum values to prevent things from getting too big or too small.

For the Pros: Customize Everything!

The default sizing systems that Divi generates work great out of the box, but if you want control, you have it.

Open the customization sidebar to reveal all the settings you could ever ask for.

1. Choose from different scaling functions.
2. Define your website’s minimum and maximum width to tailor clamp functions to your website.
3. Customizing each individual variable manually.
4. Build static non-clamp-based variable systems.
5. Change variable suffixes and prefixes.

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 Your Tried Nested Option Presets?

In case you missed it, we recently released Nested Option Presets.

Divi 5’s preset system is the most powerful class-based design system of any WordPress page builder. In fact, Divi 5 presets encapsulate far more than just CSS; they are stackable, nestable global components.

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.

Now, presets are even more powerful, since you can apply option 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.

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 Divi 5 Sizing System & Color Palette Variable Generator appeared first on Elegant Themes Blog.

Subscribe To Our Youtube Channel

Divi 5 brings a few native features together to make this kind of layout possible. The Theme Builder handles the global header, a global Canvas stores the off-canvas sidebar, and Interactions control the open and close behavior between them.

In this tutorial, we’ll build a minimal top header with a logo and hamburger icon. Then we’ll create a separate sidebar panel as a global Canvas, complete with a dynamic menu powered by the Loop Builder, a CTA button, and social icons. Finally, we’ll hide the sidebar by default and use Interactions to toggle it from both the hamburger icon and the close icon. Design Variables will keep shared values consistent, and Custom Attributes will help add basic accessibility metadata.

How The Pieces Fit Together

Before building, it helps to understand the structure. This tutorial uses two canvases.

The Main Canvas is the global header template in the Theme Builder. It appears across the site and contains the fixed top header with a logo and hamburger icon.

The Global Canvas is a separate reusable Canvas named Sidebar Navigation. It contains the sidebar panel, including a greeting bar with a close icon, a logo, a looped menu, a CTA button, and social icons.

Once both canvases are built, the sidebar Canvas is appended to the main canvas. The sidebar Section is hidden by default, and the hamburger icon in the main header gets a click Interaction that toggles it open. The close icon inside the sidebar gets a matching click Interaction that toggles it closed.

Design Variables

Open the Design Variable Manager from the persistent left sidebar. The following variables support this build. If you already have equivalent variables in your design system, use those instead. You can also use static values directly in the modules if you are not working with variables yet.

Color Variables

• Primary Color: #00c673. Used for the Join Today button, the sidebar greeting bar, and menu link hovers.
• Black: #000000. Used for hover states, default icon color, and menu link text.
• Background – Light Gray: #f5f5f5. Used as the light gradient stop in the header and sidebar backgrounds.

Number Variables

• Spacing – Small: 20px. Used for sidebar spacing and interior padding.
• Row Max Width: 1080px. Used as a reusable layout width value where needed.

Image Variable

• Logo Dark: Upload your site’s dark logo file. This will be used by both the main header logo and the sidebar logo.

String Variable

• Join Today: “Join Today.” This will be used as the CTA button label.

Part 1: The Main Canvas Global Header

Open the Theme Builder from the WordPress admin and create or edit your global header template. Everything in this part lives inside the Section that makes up the main header.

The Fixed Header Section

Add a Section. Open the Background option group and apply a linear gradient background. Set the first stop at 0% to transparent White and the second stop at 100% to #f5f5f5, or your Background – Light Gray variable. This creates a soft fade from transparent at the top to light gray at the bottom.

In the Spacing option group, set desktop padding to 10px top and 10px bottom. Leave horizontal padding at the default.

Row And Column

Inside the Section, add a Row using the Equal Columns 1 layout. Add an Image module to the row’s single column and assign your logo. Set the image width to 50px. Then add an Icon module to the same column.

In the Column’s Layout option group, set Flex Direction to row, Justify Content to space-between, and Align Items to center. This places the logo on the left and the hamburger icon on the right, with both elements centered vertically.

The Hamburger Icon

For the Icon module, choose a hamburger icon from the icon picker. In the icon settings, set the desktop color to #000000, or your Black variable, and set the size to 35px.

Because this icon will act like a button, add helpful attributes in the Advanced tab. In the Attributes option group, add role with the value button and aria-label with the value Open navigation menu.

Save the header template. The main canvas is complete: a minimal fixed header with a logo on the left, a hamburger icon on the right, and a soft gradient background.

Part 2: The Global Canvas Sidebar Panel

Open the Canvas view and create a new global Canvas. Name it Sidebar Navigation. A global Canvas is reusable across the site, which makes it a good fit for an off-canvas navigation panel. Append it to the Main Canvas and set the Z Index to 999.

In the Design tab, open the Sizing option group. Set the desktop Width to 250px and the Height to 100vh. This gives the sidebar a fixed width and full viewport height.

In the Advanced tab, open the Position option group. Set the position mode to Fixed and place it at the top right on desktop. This pins the sidebar to the right edge of the viewport.

Then, in the Background option group, apply the same gradient as the main header: White at 0% and #f5f5f5, or your Background – Light Gray variable, at 100%.

In the Layout option group, set Horizontal Gap to 10px on desktop. In the Spacing option group, set desktop padding to 0px top and 10px bottom. Leave the horizontal padding unset.

Then, in the Advanced tab, open the Attributes option group and add two attributes: role with the value navigation, and aria-label with the value Sidebar navigation. These provide basic context for assistive technologies. If you adapt this pattern into a true modal menu, also test keyboard focus, escape behavior, and focus return.

Row 1: The Greeting Bar And Close Icon

Inside the Section, add a Row. This will be the top bar of the sidebar, holding a short greeting and the close icon.

In the Row’s Content tab, open the Background option group and set the desktop background color to #00c673, or your Primary Color variable. Set the hover background color to #000000, or your Black variable.

In the Sizing option group, set Width to 100% and Max Width to none on desktop so the row spans the full sidebar width. Then, in the Spacing option group, set the top and bottom padding to 10px on desktop.

Inside the column, add a Heading Module. Set the text to Helpful resources since 2009. or your own greeting. Set the heading level to h4, font size to 14px, line height to 1.3em, and color to #ffffff.

In the Heading’s Advanced tab, open the Custom CSS option group and add the following to the Main Element:

text-wrap: balance;

This CSS property helps balance text across lines, which can reduce awkward line breaks in short headings.

Below the heading, but in the same row and column, add an Icon module. In the icon picker, select the close X icon. Set the desktop color to #ffffff and the size to 35px.

In the icon’s Advanced tab, open the Attributes option group and add role with the value button, and aria-label with the value Close navigation menu. Since the icon is not a native button element, these attributes help clarify its purpose.

We’ll configure the interaction on this icon later. For now, leave it unconfigured.

Row 2: The Sidebar Body

Add a second single-column Row below the greeting bar. This row holds a Group module with the logo and menu. After that group, we’ll add the CTA button and social icons.

In the Row’s Sizing option group, enable Grow to Fill. Do the same on the Group module, and remove Shrink to Fit. In the Group module, set the Layout alignment to Center.

For the Image module, set the source to the Logo Dark design variable. Set Link URL to the Home URL. In the Design tab, set Max Height to 48px under Sizing, then set the image alignment to center.

Next, configure the Link module that will become the dynamic menu. In the link font settings, set the desktop color to Black, the font weight to Semibold, and the hover color to your Primary Color.

In the Link module’s Content tab, open the Loop option group. Enable looping, set Query Type to Menu, and choose Primary Menu. Then set the module text to Loop Menu Text and the link URL to Loop Menu Link, both through Dynamic Content.

Style the Button module however you like. In this example, the button uses Primary Color for the background, Black on hover, white text, border radius, and custom padding. Set the button text to the Join Today string variable. Under Design > Alignment, set it to Center.

In the Social Media Follow module’s Design tab, open the Layout option group and set Justify Content to Center. Then remove the background colors under Content > Background and set each icon color to Black.

Part 3: Wire Up The Toggle Interactions

Interactions in Divi 5 work through triggers, effects, and targets. A module fires a trigger, such as a click. The target element responds with an effect, such as show, hide, toggle visibility, or another supported action. In this case, we need two interactions: one to open the sidebar and one to close it.

Interaction 1: The Hamburger Icon Opens The Sidebar

Return to the main canvas and select the hamburger Icon module. In its Advanced tab, open the Interactions option group and add a new interaction with these settings:

• Trigger: Click
• Effect: Toggle Visibility
• Target: Global Canvas Section, pointing to the sidebar Section

When someone clicks the hamburger icon, Divi toggles the sidebar’s visibility.

Interaction 2: The Close Icon Closes The Sidebar

Select the close X Icon module inside the sidebar’s first row. In its Advanced tab, open the Interactions option group and add an interaction with the same configuration:

• Trigger: Click
• Effect: Toggle Visibility
• Target: The same Global Canvas Sidebar Section

Next, select the sidebar Section. This is the Section you built inside the global Canvas, now visible inside the main canvas as a referenced section. In the Section’s Advanced tab, open the Visibility option group and disable it on desktop, tablet, and phone. This keeps the sidebar hidden until an interaction reveals it.

Start Building In Divi 5 Today!

The real value of this build is not just the sidebar itself. It is the two-canvas-plus-interaction pattern. The main canvas holds what is always visible. The global Canvas holds what appears only when triggered. An Interaction decides when to show or hide it.

That same pattern can support more than sidebar navigation. Replace the sidebar content with a shopping cart summary, and you have a cart drawer. Replace it with a login form, and you have a simple account panel. Replace it with an announcement, and you have a slide-in promo area. The structure can stay largely the same while the content changes.

If you have been waiting for a practical reason to try Divi 5, the combination of global Canvases, Interactions, and the Loop Builder is a strong one. You can build interactive navigation patterns directly in the Visual Builder, without custom JavaScript or extra plugins.

The post How To Build Custom Sidebar Navigation With Divi 5 Interactions appeared first on Elegant Themes Blog.

In this post, we’ll walk through a step-by-step approach to building a custom mega menu in Divi 5, including a separate mobile version.

Let’s get started.

What Is The Dropdown Module?

The Dropdown module in Divi 5 is a dedicated container for building dropdown menus and mega menus. When you place a Dropdown module inside a parent element, such as a Link module, Divi connects the dropdown’s behavior to that parent element. That means the Dropdown module can work as part of a navigation item instead of feeling like a separate floating layout.

Subscribe To Our Youtube Channel

This is a major change from older Divi menu workflows, where more advanced dropdown layouts often meant relying on the standard Menu module, the Theme Customizer, or custom code. In Divi 5, the Dropdown module gives you a flexible area where you can place Groups, Rows, Columns, Links, loops, and other modules to create the exact submenu layout you need.

For simple navigation, you can add a few Link modules inside the Dropdown to create a clean submenu. For more advanced layouts, you can build out multiple columns, featured content, icons, or looped content to create a full mega menu.

The Dropdown module also gives you direct control over positioning, alignment, offset, layout direction, and trigger behavior, which makes it much easier to tailor your menus inside the Visual Builder.

The result is a menu-building workflow that is more visual, more flexible, and much easier to customize than the older all-in-one approach.

How To Use Divi 5’s Menu Features Together

Divi 5’s menu tools work best when you think of them as separate building blocks. For some menus, the Link and Dropdown modules are enough. For more advanced navigation, Canvases, Interactions, Loop Builder, and visibility settings let you expand the structure without leaving the builder.

Here’s how each piece fits into the process:

Link Module

The Link module acts as the navigation item itself. You can use it for static links, dynamic page links, and menu-based items. It is the starting point for most custom menu structures in Divi 5.

Dropdown Module

The Dropdown module is the submenu container. You place it inside a parent element, usually a Link module, and then build the submenu content inside it. That content can be as simple or as complex as you need.

Canvases

Canvases let you create detached layouts that live outside the main page structure. They are especially useful for things like mobile menus, off-canvas menus, slide-ins, and overlays. In this tutorial, we’ll use a Canvas to build a separate mobile menu rather than forcing both menu experiences into one layout.

Interactions

Interactions handle the behavior around your menu. The Dropdown module already covers the basic opening and closing behavior for standard dropdowns, but Interactions become useful when you want to launch a mobile menu, trigger a Canvas, or hide and show elements at specific breakpoints.

Loop Builder

The Loop Builder makes a menu dynamic. Inside a Dropdown or Canvas, you can use loop-enabled modules to pull in posts, projects, products, pages, or other content automatically. That makes it possible to build a submenu that updates itself as content changes on your site.

Visibility Settings

Visibility settings help control what appears when and where. They are useful when you want to hide desktop menu elements on smaller screens, keep a mobile menu hidden until triggered, or simplify which pieces are active at different breakpoints.

When you combine these tools, you can build everything from a simple dropdown to a multi-column, content-driven mega menu with a separate mobile experience.

How To Build A Mega Menu With Divi 5

Now that we have the core pieces in place, we can build the menu. By the end of this tutorial, you’ll have a desktop header with custom dropdowns and a separate mobile menu built in a Canvas.

Step 1: Create The Desktop Header

Start by creating a new Global Header template in the Theme Builder.

When the Visual Builder loads, select the Section and add a Background Color in the Content tab. Then switch to the Design tab and add 15px of padding to the top and bottom.

Next, open the Advanced tab, expand the Position settings, and set the Z Index to 999. This helps keep the header and dropdowns above the page content when they open.

Finally, open Scroll Effects and set the section to Stick to Top.

Now add a single-column Row to the section and edit the Row’s Column settings.

In the Design tab, expand the Layout settings and set Layout Direction to Row, Justify Content to Space Between, and Align Items to Center. This gives you a clean horizontal header layout with room for a logo, navigation, and supporting elements.

Step 2: Add The Main Navigation Elements

Start by adding an Image module for your logo. Use the Sizing settings in the Design tab to adjust it across breakpoints. Use the Customizable Responsive Breakpoints feature and the Responsive Editor to fine-tune its size for different devices.

Before moving on, go back to the Content tab and assign a dynamic homepage link to the logo.

Add A Group Module

Next, add a Group module to the row to hold the desktop navigation links. This gives you a cleaner way to manage the desktop menu as one unit, especially when you later decide what should appear or disappear at smaller breakpoints.

In the Group’s Design tab, expand Layout and set Layout Direction to Row, Justify Content to Space Between, and Align Items to Center.

Add Link Modules

Now start adding your navigation links. Add a Link module and enter a label in the Text field.

Expand the Link settings and use the dynamic content icon if you want to assign a dynamic Page Link.

When the modal appears, choose Page Link.

Use the page selector to choose the right page, then click Apply.

Switch to the Design tab to style the link, including font, weight, style, color, and text size.

Use Divi’s hover controls if you want the link appearance to change on hover.

Set a hover Color and Border if desired.

When you finish styling the hover state, switch back to the default desktop state before continuing. That keeps your future edits from being applied only to the hover version.

Once one Link module is styled, duplicate it to create the rest of your top-level links, then update the text and destination for each one.

Add Additional Header Modules

To finish the top-level header, add a Button and an Icon module. The Icon will act as the mobile menu trigger later, so choose something recognizable, such as a hamburger icon, and style both modules to match the rest of your header.

Step 3: Build The Dropdown Menus

With the top-level navigation in place, we can now build the actual dropdowns. In this tutorial, we’ll create one traditional dropdown made of links and one content-driven submenu that uses the Loop Builder to display recent Projects.

Add A Dropdown Module

Start with the second menu item. Open its Link module, go to the Elements area in the Content tab, and click + Add Element.

Select the Dropdown module from the module picker.

Inside the Dropdown, add a Group. Then add a Link module inside that Group.

Before configuring the inner Link module, style the Dropdown itself. Open the Dropdown module and go to the Design tab. In Layout, set the Horizontal Gap to 60px and the Layout Direction to Row.

Then open the Dropdown settings and set Dropdown Alignment to Center and Dropdown Offset to 15px.

Finally, open Border and assign a 10px border radius to the bottom corners.

Style The Group Module

Now open the Group inside the Dropdown. In the Design tab, expand Layout and set the Vertical Gap to 15px.

Style The Inner Link Module

Select the inner Link module. Add a text label and assign a page link or other destination. If you want an icon next to each link, choose one in the Icon settings.

In the Design tab, style the icon with a color and size, then add a right margin to separate it from the text. If you want the icon color to change on hover, use the hover controls there as well.

Then style the link text in the Text settings.

Once the first inner link is styled, duplicate it as many times as needed.

Then update the text, destination, and icon for each item. After that, duplicate the Group itself if you want multiple vertical link stacks inside the same dropdown. Those Groups will sit next to each other, creating the mega-menu effect.

Step 4: Add A Project Loop To Another Dropdown

Next, we’ll create another submenu that uses the Loop Builder to display the three most recent projects. The same idea works for posts or other post types too.

Choose the top-level Link module where you want this submenu. In its Elements area, add another Dropdown module. Apply the same core dropdown settings you used in the previous step:

• Layout Direction: Row
• Dropdown Alignment: Center
• Dropdown Offset: 15px
• Bottom Border Radius: 10px

Now add a Blurb module inside the Dropdown.

In the Blurb module’s Content tab, open the Loop settings and enable Loop Element.

Set the Post Type to Projects. If you only want to show items from a certain category or term, use the term filter there as well.

Style the Blurb in the Design tab so the title and excerpt fit the rest of your menu design.

Map The Dynamic Fields

Now map the Blurb fields to loop-based dynamic content. In the Blurb’s Content tab, use dynamic content on the Title field and select Loop Post Title.

For the body content, select Loop Excerpt.

In Image & Icon, use dynamic content to choose Loop Featured Image.

Finally, in the Link settings, map the Module Link URL to Loop Link.

Save the template before moving on.

Step 5: Build The Mobile Menu In A Canvas

For the mobile version, we’ll use a Canvas so the menu can live separately from the desktop header. Start by clicking the Canvas Grid View button in the builder toolbar.

Click + Add Canvas.

Give the Canvas a name, set its Z Index to 999999, and click Add Canvas.

The builder will prompt you to add layout structure. Choose a single-column Row.

Before adding modules, configure the canvas layout. Select the Section, assign a Background Color, and add 15px of top and bottom padding.

Then edit the Row’s Column and set the Vertical Gap to 15px.

Add Modules To The Mobile Menu

Add a Link module to the column. Set its text and assign a destination, then style it to match your mobile design.

Duplicate the Link module to build out the top-level mobile navigation. Update the text and destination for each item. For menu items that should expand to reveal more options, it is often better not to assign a destination to the top-level trigger itself. That prevents accidental redirects when the user is trying to open the submenu.

For one of those expandable items, add a Dropdown module in the Link module’s Elements area. Style it with a border radius and top border if desired.

Then open the Dropdown settings and set Show Dropdown On to Click. That is usually the better trigger on touch devices.

Add as many inner Link modules as needed and style them to complete the submenu.

Repeat this process for any additional mobile submenus.

Add The Bottom Buttons

To finish the mobile menu, add a Group below the links and place two Button modules inside it. One of these buttons will act as the close trigger for the mobile menu.

Because expanded dropdowns may make the canvas harder to work with, the Layers View can be the easiest way to place this Group directly beneath the link list.

Set the Group’s Layout Direction to Row and Align Items to Center.

Now style the two buttons. At this point, the mobile menu canvas should be fully built.

Save the canvas before moving on.

Step 6: Add The Interactions

With both the desktop header and mobile canvas built, the last step is to connect everything with Interactions and visibility settings.

Mobile Menu Interactions

Start in the mobile menu canvas. Select the second Button module in the bottom Group and go to the Advanced tab. Open Interactions and add a new interaction.

Choose Click as the trigger.

Give the interaction an Admin Label, set the effect action to Hide Element, and choose the canvas section as the target. This makes that button close the mobile menu.

Now select the canvas Section and use its Visibility settings to keep it hidden by default until it is triggered.

Save the canvas and use Canvas Grid View to return to the main header.

Desktop Header Interactions

Now decide how you want the desktop navigation to behave on smaller screens.

For the desktop link Group, you can use either breakpoint-based interactions or simpler breakpoint visibility controls. If the goal is only to hide the desktop nav at tablet and below, visibility settings are often the cleaner option. If you want the show and hide behavior tied to resizing events, breakpoint interactions are the better fit.

To follow the interaction-based route used in this tutorial, select the Group that contains the desktop links and add a Breakpoint Enter interaction set to Hide Element at Tablet Wide.

Then add a second Breakpoint Enter interaction set to Show Element at Desktop so it reappears when the layout returns to the desktop breakpoint.

Repeat the same two interactions on the desktop Button module if you also want it hidden on smaller screens.

Finally, select the hamburger Icon in the main header. The most important interaction here is the Click trigger that reveals the mobile menu canvas section.

You can then use either breakpoint visibility settings or breakpoint interactions to keep the icon hidden on desktop and visible only on the smaller screen sizes where the mobile menu should take over.

At this point, you should have a working desktop mega menu and a separate mobile menu canvas.

Build Custom Mega Menus With Divi 5 Today!

Building a custom mega menu in Divi 5 is much more flexible now because the Link and Dropdown modules work alongside Canvases, Loop Builder, Interactions, and visibility settings. Instead of forcing everything through a single traditional menu structure, Divi 5 lets you build the navigation pattern that fits your project.

Whether you want a simple dropdown, a multi-column mega menu, a dynamic content-driven submenu, or a separate mobile overlay, these tools give you a visual way to build it inside the Visual Builder.

Download the latest release of Divi 5, start experimenting with custom menus, and adapt this structure to fit your own site’s navigation.

The post How To Build Mega Menus With Divi 5’s Dropdown Module appeared first on Elegant Themes Blog.