The Loop Builder in Divi 5 takes a different approach. You design one post card with normal Divi elements, connect each part of that card to live post data, and Divi repeats it automatically for every item in your query.

In this tutorial, we’ll build a horizontal blog loop with one post card per row. Each card will have a featured image on the left, post content on the right, dynamic title, publish date, excerpt, and a linked arrow, plus pagination so visitors can move through the rest of your posts.

Why Build A Horizontal Blog Loop With The Loop Builder?

The Blog Module is useful when you need a blog feed quickly. For many sites, that is enough. But when you want to decide exactly how each post card is structured, where the image sits, how the meta line reads, how much space the excerpt gets, or what the read more element looks like, a fixed blog layout can start to feel limiting.

The Loop Builder is built for that situation. You choose the element that should repeat, turn on the loop option, define the query, and then build the card inside that looped element. Divi handles the repetition and swaps in the correct post data for each result.

Nothing inside the card has to follow a preset blog module structure. The image, title, date, excerpt, and arrow link are all regular Divi elements, which means you can style them the same way you would style the rest of your page.

This is especially useful for horizontal blog layouts. Instead of showing two or three compact cards per row, each post gets its own full row inside the content container. The result feels more editorial and gives every post enough space to stand on its own.

Learn Everything About Divi 5’s Loop Builder

What We’re Building

Before we get into the steps, here’s a quick look at the finished layout.

Each post appears as a horizontal card with the featured image on the left and the post content on the right. The content side includes the post title, publish date, excerpt, and a right-pointing arrow that links to the full post. Cards stack vertically down the page, and a Next → pagination link appears at the bottom when there are more posts to show.

Before you build the layout, make sure your posts have featured images. Manual excerpts are also helpful if you want tighter control over the preview text, although Divi can still pull an excerpt automatically.

Step 1: Set Up The Page Structure

Start by opening the page where you want your horizontal blog loop to live. If you are working from a blank page, click Use Visual Builder to launch the editor.

Click the blue + icon to insert a new section and choose Regular Section. A row is added automatically inside it.

Open the Section settings by clicking the section gear icon. Go to Design > Spacing and set the top and bottom padding to 60px. This gives the layout breathing room above and below the blog feed.

Inside the section, add a single-column row. This row is only for the page heading, so one column is all we need.

Inside the row, add a Heading module and type Blog as the heading text.

Open the Heading module settings and go to Design > Text. Set the Font Size to around 50px, choose a font weight that matches your site’s heading style, and keep the heading left-aligned.

Add enough bottom spacing after the heading so the first blog card does not sit too close to it. Once the heading looks right, move on to the row that will become the actual loop.

Step 2: Enable Loop On The Blog Row

Below the heading row, insert a new 2-column row. This row will become the repeated blog card. The left column will hold the featured image, and the right column will hold the title, publish date, excerpt, and link.

Open the Row settings and set the row’s Admin Label to Blog Nav. This label will make the loop easier to identify later when we connect the Pagination module.

With the same row settings still open, go to Content > Loop and toggle Loop Element on. Once enabled, this row becomes the repeating container. Everything built inside it will repeat for every post that matches the query.

Next, set up the query. Set Query Type to Post Type and Post Type to Posts. Set Posts Per Page to 3, Order By to Date, and Order to Descending so the newest posts appear first.

If you do not want sticky posts to override the normal date order, enable Ignore Sticky Posts as well.

The row will multiply in the Visual Builder to reflect the number of posts you set. The columns are still empty, but the loop is already active. Next, we’ll build the card structure inside the looped row.

Step 3: Build The Blog Card Structure

With the loop running, build the card inside the first looped row. We’ll start with the image column, then add the content elements on the right.

In the left column, click the + icon and add a Divider module. We’ll use this Divider as a background image container for the featured image.

In the right column, click the + icon and add a Heading module. This will become the dynamic post title once we connect it to loop data.

Below the Heading module, add a Group module. This Group will hold the meta line.

Open the Group settings, go to Design > Layout, and set the direction to Horizontal. Inside the Group, add a Text module and type Published on as the static label. Then add a second Text module next to it. This second Text module will pull the dynamic publish date in Step 5.

If you prefer an author-based meta line, add another Text module for the author and connect it to the loop author field before the date.

Below the Group, add another Text module for the post excerpt. This gives each card a short preview of the post before visitors click through.

Finally, add an Icon module at the bottom of the right column. Search for the → arrow icon and select it. This will become the read more link for each post.

Accessibility note: this tutorial uses the featured image as a background image so the card can keep a clean horizontal shape. If the image needs to carry important meaning, consider using an Image module connected to the featured image instead.

Step 4: Style The Blog Card

With the structure in place, style the card from the outside in.

Open the Row settings and go to Design > Border. Add a 1px solid border and set the color to a light gray such as #E0E0E0. This gives each card a subtle edge without making the layout feel heavy.

Still inside the Row settings, go to Design > Layout and set the Horizontal Gap to 0. This keeps the image column and content column flush against each other.

Open the right column settings and go to Design > Background. Add a soft off-white color such as #FAFAFA. This gives the text area a clean editorial feel and separates it from the image column.

Go to Design > Spacing and add 30px padding on all sides so the content does not sit against the card edge.

Go to Design > Layout and set the Horizontal Gap and Vertical Gap to 10px. This keeps the spacing between the elements inside the column consistent.

Open the Heading module and style the post title. A font size around 30px on desktop works well for this type of horizontal card, but adjust it to match your site. Keep the line height tight enough that longer titles still feel controlled.

Open the Group module settings and go to Design > Layout. Set the Horizontal Gap to a small value so the label and date sit on the same line without drifting apart. Then open each Text module inside the Group, go to Design > Text, set the Font Weight to Semi Bold, and make the font slightly smaller than the title.

Style the excerpt Text module so it reads clearly under the meta line. Keep the font size close to your body text size and use a comfortable line height.

For the Icon module, go to Design > Icon and set the color to match your site’s accent or link color. Set the size to around 30px, then align it to the right using Design > Alignment.

Step 5: Connect Dynamic Content

The card is built and styled. Now replace the placeholder content with live post data from the loop.

Open the Divider module inside the left column. Go to Content > Visibility and turn off Show Divider. This hides the divider line so only the background image shows.

Go to Content > Background and switch the background type to Image. Click the dynamic content icon on the image field and select Loop Featured Image. Each repeated card will now pull the featured image from its own post.

If the background image does not fill the image area, go to Design > Sizing and enable Grow to Fill. This helps the image container stretch with the card height.

Open the Heading module and go to Content > Text > Heading. Click the dynamic content icon and select Loop Post Title. The heading will now display the correct title for each post.

Still inside the Heading module, go to Content > Link. Click the dynamic content icon on the URL field and select Loop Post URL. This makes the title link to the correct post.

Open the second Text module inside the Group, the one next to the Published on label. Go to Content > Text, click the dynamic content icon, and select Loop Post Date.

Open the excerpt Text module and go to Content > Text. Click the dynamic content icon and select Loop Excerpt. If the excerpt feels too long for the card, adjust the dynamic content options so the preview stays short and balanced.

Open the Icon module and go to Content > Link. Click the dynamic content icon on the URL field and select Loop Post URL. The arrow now links to the correct post for each card.

Preview the page. Each card should now show its own featured image, title, publish date, and excerpt while keeping the same horizontal layout.

Step 6: Add Pagination

Once the loop is pulling live post data, add pagination so visitors can move through the rest of your posts. This matters because the query is set to show only three posts per page.

Inside the same section, add a new single-column row below the loop row. Keep this row outside the looped row. Search for the Pagination module and add it inside the row.

Open the Pagination module settings and go to Content > Target. Set the Target Loop to Blog Nav. This connects the Pagination module to the looped row we labeled earlier.

You can also customize the pagination labels. For this layout, a simple Previous and Next → style keeps the navigation minimal.

Save the page and preview it. If your site has more posts than the Posts Per Page value, the Pagination module will appear and move through the loop results.

Step 7: Optimize The Layout For Responsive Screens

The horizontal card works best on desktop, but smaller screens need a quick responsive pass. Switch to tablet and mobile view using the responsive toolbar and check how the cards stack.

On tablet and mobile, let the two columns stack so the featured image sits above the content. Then reduce the title size, tighten the excerpt if needed, and check the Divider height so the image does not collapse or take up too much space.

A good starting point is to keep the desktop title around 30px, reduce it on tablet, and reduce it again on mobile. For the image area, use a smaller minimum height on mobile so each card remains easy to scroll through.

Once the cards read well across desktop, tablet, and mobile, save the page and preview the finished layout.

Build A Horizontal Blog Loop With Divi 5’s Loop Builder Today!

You just built a custom horizontal blog loop in Divi 5 without editing theme files or writing custom code. Instead of forcing your posts into a preset Blog Module layout, you designed the card structure yourself, connected each element to loop data, and let Divi repeat the card automatically.

That is the strength of the Loop Builder. It gives you control over the layout while keeping the content dynamic. You can use the same approach for other post types too, including projects, products, events, resources, or team members. The structure stays the same: design one item, connect the dynamic fields, define the query, and let Divi handle the loop.

The post How To Build A Horizontal Blog Loop In Divi 5 appeared first on Elegant Themes Blog.

Divi 5 brings Flexbox controls directly into the Visual Builder, so you can manage spacing, alignment, wrapping, and distribution without writing custom CSS. In this post, you’ll learn how Flexbox works in Divi 5, what each major layout setting does, and how to build a simple responsive layout using those settings.

By the end, you’ll understand the main Flexbox settings and know how to use them to create cleaner, better-aligned sections across breakpoints.

Let’s dive in.

The Power Of Flexbox In Divi 5

Flexbox is best for one-dimensional layouts. That means it arranges items primarily in a row or a column while giving you control over alignment, spacing, distribution, wrapping, and order.

Throughout the coworking website, Flexbox helps power navigation bars, feature rows, testimonial cards, pricing tables, hero content, event rows, and more. It is especially useful when elements need to line up cleanly or respond gracefully as the screen size changes.

In Divi 5, Flexbox settings live in the Design > Layout option group for layout elements such as sections, rows, columns, and groups. These controls also work with your Design Variables and Presets, so spacing and layout choices can stay consistent across the site.

Flexbox Settings In The Divi 5 Interface

Select a layout element and go to the Design tab. Then, expand the Layout option group to reveal the available layout controls.

Here is what each setting does and how to use it.

Layout Style

In Divi 5, the Layout Style setting lets you choose between Block, Flex, and CSS Grid, depending on the element and layout you are editing.

Block is the more traditional layout style. It is useful for simpler stacked layouts and legacy content. Flex is the layout style we’ll focus on in this post because it is ideal for row-based and column-based alignment. CSS Grid is better for two-dimensional layouts where you need more control over rows and columns at the same time.

We’ll explore CSS Grid in more detail in Part 11 of the Divi 5 Mastery Course.

To work with Flexbox, select Flex under Layout Style. Once Flex is selected, the Flexbox-related settings appear below.

Horizontal And Vertical Gap

Divi 5 includes built-in Gap controls for spacing between child elements. Instead of adding custom margin or padding to every module, you can set spacing once at the container level.

Horizontal Gap controls the space between items placed side by side.

Vertical Gap controls the space between items stacked from top to bottom.

Both fields support Advanced Units, such as px, %, rem, and vw. You can also use Design Variables, like the spacing values we created in Part 3.

Using Horizontal and Vertical Gap is one of the simplest ways to keep spacing consistent across rows, columns, and groups.

Layout Direction

Layout Direction controls the main axis of a Flex container. In other words, it determines the direction child elements flow.

The available options are:

• Row (default): Items flow horizontally from left to right.
• Row Reverse: Items flow horizontally from right to left.
• Column: Items flow vertically from top to bottom.
• Column Reverse: Items flow vertically from bottom to top.

Switching from Row to Column is one of the most common Flexbox changes you’ll make in Divi 5. For example, a row of feature blurbs can sit side by side on desktop and stack vertically on smaller screens by changing the layout direction at the appropriate breakpoint.

Justify Content

Justify Content controls how items are distributed along the main axis of a Flex container. When the Layout Direction is set to Row, it controls horizontal distribution. When the Layout Direction is set to Column, it controls vertical distribution.

The available options are:

• Start: Aligns items to the beginning of the main axis.
• Center: Centers items along the main axis.
• End: Aligns items to the end of the main axis.
• Space Between: Distributes items with space between them and no extra space at the outer edges.
• Space Around: Adds space around each item.
• Space Evenly: Adds equal space between items and at the outer edges.

One commonly used option is Space Between. It works well for headers and navigation layouts where you want a logo on one side and Link modules, buttons, or other navigation elements on the other.

Align Items

Align Items controls how child elements align along the cross-axis. In Row direction, it controls vertical alignment. In Column direction, it controls horizontal alignment.

The main options are:

• Start: Aligns items to the start of the cross-axis.
• Center: Centers items along the cross-axis.
• End: Aligns items to the end of the cross-axis.
• Stretch: Stretches items across the available cross-axis space.

Stretch is especially useful for card layouts. When the parent container allows it, Stretch helps child elements match the available height, making cards look more balanced when their content lengths vary.

Layout Wrapping

Layout Wrapping determines whether Flex items stay on one line or wrap to additional lines when there is not enough room.

The available options are:

• No Wrap: Keeps items on a single line.
• Wrap: Allows items to move to additional lines when space runs out.
• Wrap Reverse: Allows items to wrap in the reverse direction.

Wrapping is important for responsive design because it lets layouts adapt naturally as the available width changes. For example, a row of cards can appear in multiple columns on desktop and then wrap into fewer columns on smaller screens.

Align Content

Align Content controls how wrapped lines align along the cross-axis when there is extra space in the container. It only becomes relevant when Layout Wrapping is set to Wrap or Wrap Reverse and the container has multiple lines of items.

Its options are similar to Justify Content and include Stretch, Start, Center, End, Space Between, Space Around, and Space Evenly.

Align Content is most useful in multi-line Flex layouts. For example, if a card layout wraps to two or more rows and the container has extra height, Align Content can control how those rows sit within the available space.

Building A Layout With Flexbox

Now, let’s use these Flexbox settings to create a simple three-column layout. Start by adding a new three-column Row to a page. In the Design tab, expand the Layout option group and confirm that Flex is selected in the Layout Style dropdown.

Set The Row Gap

Next, adjust the Horizontal and Vertical Gap for the Row. Hover over the Horizontal Gap field to reveal the Insert Dynamic Content icon.

Select the Spacing – Medium variable from the list and apply it.

Repeat the same process for the Vertical Gap field.

Style The Columns

Next, add spacing and border styles to each Column. Start by editing the first Column.

Go to the Design tab and expand the Spacing option group. Click the Link icon in the Padding field so all four sides stay connected. Then, use the Insert Dynamic Content icon to apply the Spacing – Small variable to the padding value.

Next, hover over the Border option group to reveal the Assign Presets icon. Assign the Outlined – Dark Option Group Preset.

Copy Column Styles With Attributes

Now that the first Column has the correct spacing and border styles, use Divi’s right-click Attributes menu to apply those styles to the remaining Columns.

Right-click the first Column in the canvas and select Copy Attributes.

Next, right-click the second Column. When the Attributes menu appears, select Paste Attributes, then choose Paste Column Design Attributes. This copies the design-related styles from the first Column and applies them to the second.

Finally, right-click the third Column and paste the same design attributes again.

Add Content To The Columns

Now, add content to the first Column. Start with a Module Group. Inside the Group, add two Heading modules, one Text module, and one Divider module.

Outside the Group, but still inside the first Column, add an Icon List module and a Button module. Use the Presets and Variables created earlier in the course to keep the design consistent.

Fill the remaining Columns with similar content. Before applying more Flexbox settings, the layout should look similar to the image below.

Adjust Group And Column Gaps

Start by adjusting the vertical spacing inside each Group. Open the first Column’s Group module and go to the Design tab. Expand the Layout option group and apply the Spacing – XSmall variable to the Vertical Gap field. Repeat the same process for the remaining Groups.

Next, open the first Column’s settings and go to the Design tab. Expand the Layout option group and apply the Spacing – Small variable to the Vertical Gap field. Repeat the same process for the remaining Columns.

Align The Buttons

At this point, the top of the layout is aligned, but the Button modules at the bottom of each Column may not line up because the content lengths vary. To fix that, adjust the Justify Content setting on the Columns that need it.

In the first Column, set Justify Content to Space Between. This keeps the Group module at the top of the Column while pushing the Button module to the bottom.

Repeat the same adjustment for the third Column. Once Space Between is applied where needed, the Button modules align more consistently across the Row.

Make Responsive Adjustments

Before finishing the layout, check how it responds across different screen sizes. Divi 5 gives you several tools for this, including Structure Templates, Customizable Responsive Breakpoints, and the Responsive Editor.

If you want to test more screen widths, open the breakpoint controls in the Top Bar and enable the additional breakpoints you need. Divi 5 supports up to seven customizable breakpoints.

Next, open the Row containing the three-column layout. Cycle through the active breakpoints to see how the layout behaves. When a breakpoint needs adjustment, use Apply Structure Template in the Elements option group to change the Row structure for that screen size.

You can also use the Responsive Editor to adjust Column alignment when the Columns stack vertically. Open the first Column’s settings, go to the Design tab, and expand the Layout option group.

Hover over the Align Items field to reveal the Edit Responsive Values icon. Select it and set Align Items to Center at the relevant breakpoint. Repeat the same process for the remaining Columns.

Fine-Tune Column Widths

After the Columns are aligned, you may want more control over their widths. For example, at the Tablet Wide breakpoint, the stacked layout may leave more white space than you want.

To adjust a Column’s width, open the Column settings and go to the Design tab. Expand the Sizing option group and locate the Column Class field. Click the dropdown caret inside the field to reveal the options.

Choose 1/2 from the available options.

Reorder Elements Responsively

Sometimes, the visual order you want on desktop is not ideal on mobile. Divi 5 lets you adjust display order from the Order option group.

Click into the third Column in the layout. Expand the Order option group to reveal the Display Order field.

Setting the field to -1 moves the third Column earlier in the Row’s visual order at the breakpoint where that value is applied.

Tips And Best Practices

Now that you have built a Flexbox layout, here are a few ways to work faster and get more predictable results in Divi 5.

Start With Gap Controls

Use Horizontal Gap and Vertical Gap before adding custom margins to individual modules. Setting spacing at the container level creates more consistent rhythm across rows, columns, and groups.

Use Space Between For Card Layouts

Justify Content > Space Between is useful when you want content to sit at the top of a card and a button to stay aligned near the bottom. This works especially well when cards have different amounts of text.

Use Stretch For Equal-Height Cards

For equal-height elements, such as feature blurbs, pricing cards, or service cards, use Align Items > Stretch on the parent container when appropriate. This can help child elements share a consistent height.

Use Design Variables For Spacing

Combine Flexbox settings with the Design Variables you created earlier in the course. When gap, padding, and width values reference variables, layout updates are easier to manage later.

What’s Coming Next

In this part of the Divi 5 Mastery Course, you learned how Flexbox controls spacing, alignment, direction, wrapping, and distribution inside Divi 5. You also built a three-column layout that uses gap controls, Design Variables, Attribute Management, responsive structure changes, and display order.

Next, in Part 11, we’ll explore two-dimensional layouts with CSS Grid. You’ll learn when Grid is a better fit than Flexbox and how the two systems work together for modern web design.

If you have not already, download the latest version of Divi 5, explore Flexbox, and start building. Let us know what you think by leaving a comment below or reaching out on our social media channels.

The post Part 10: Mastering Flexbox In Divi 5 appeared first on Elegant Themes Blog.

Now, we’re ready to build the core inner pages of the site. For this coworking website, that means creating a Contact page and an Events page.

By this point, the design system is doing most of the work. The header and footer load globally from the Theme Builder. Headings, text, buttons, containers, forms, and layout elements all have presets. The Design Variables from Part 3 are used throughout the presets that control color, typography, spacing, and borders.

As a result, this part is mostly structural assembly. We’ll reuse the system we already built, add a few new module presets where needed, and use Divi 5 workflow features like Page Manager, Command Center, and Extend Attributes to move faster.

Building The Contact Page

Create a new page named Contact, open it in the Visual Builder, and choose Build From Scratch when prompted.

The first section uses three rows. Inside it, the first holds the page heading, the second is a two-column split with the form on the left and a stack of detail blocks on the right, and the third holds the map at full width below. A second section follows with a single row and a single column, holding a heading and an accordion for FAQs.

Contact Page Structure

Add a Section. The first Row uses the Equal Columns 1 Flex structure with a Heading module inside.

Next, add a second Row using an Offset Columns structure with two Columns. Set the left Column to 2/3 width and the right Column to 1/3 width.

Inside the left Column, add a Contact Form module. Inside the right Column, add a Group module with a Heading module and a Text module inside. Then, duplicate the Group twice so you have three contact detail blocks.

Add a third Row to the first Section using a single-column Flex structure. Place a Map module inside it.

Then, add another Section underneath the first, with a Single-Column Flex Row. Add a Heading and an Accordion module.

Contact Page Presets

Now, apply presets to the first Section. In the right Column, apply Subheading to each Group Heading and Small Text to each Group Text module.

Apply Heading 1 to the page heading in the first Row. Then, apply the Dark Element Preset to the Contact Form module.

The Map module gets the Black and White Element Preset. This preset sets the Filters option group’s Saturate value to 0%, turns Mouse Wheel Zoom off, and adds rounded corners.

Contact Page Content

Now, add the content. Use a page heading such as Get in touch. Each of the three right-column Groups holds one piece of contact information: Phone, Email, and Address.

The Heading is the label, and the Text is the value. Use a tel: link for the phone number, a mailto: link for the email address, and a maps link for the address if needed.

In the Map module, enter the coworking space address in the location field and let the map pin populate from that address.

Contact FAQ Section

For the FAQ section, apply Heading 2 to the heading. Apply Filled – Primary Color to the Button.

On the Accordion, stack two Element Presets: Dark Text first, then Contained. Dark Text controls the text color, divider style, and toggle icon. Contained adds the rounded corners and light gray background for each Accordion item.

For content, the heading can read Still have questions? Set the Button text to Email us and link it to the contact form anchor or a mailto: address.

Add five Accordion items with questions a prospective member is likely to ask. Good topics include hours, day-pass policy, guest access, parking, and meeting room booking. Set the first item to Open: On in its settings so the page loads with one question already expanded.

Building The Events Page

The Events page is more involved. It includes three sections: a featured event banner with a countdown, a list of upcoming events, and a subscribe section with an email signup.

Most of the work is structural. Once the modules and columns are in place, the styling comes from the presets and variables you already created.

Create a new page named Events. You can create it from the WordPress dashboard or use Divi 5’s Page Manager from inside the Visual Builder. Open the page in Divi and choose Build From Scratch.

Featured Event Banner Structure

Add the first Section. The first Row uses Equal Columns 1 with a Heading module inside for the page title.

Below it, add a second Row with two equal Columns. In the left Column, add three Heading modules, one Text module, and one Countdown Timer module, in that order. You can add these modules manually or use the Command Center to add elements faster with the keyboard.

In the right Column, add a Group module with a Heading module and a Text module inside. Then, add another Text module and a Button module as siblings below the Group, not inside it.

Featured Event Content

Before fine-tuning the layout, add realistic content so the spacing decisions are easier to judge. For the page heading, use Community Events. The eyebrow subheading reads Featured event.

Below that, the H2 contains the event name, the H5 contains the date or location line, and the Text module describes the event in two or three sentences. Set the Countdown Timer target date to the event start date and remove the module’s heading text.

In the price Group, the Heading reads $25 and the Text module reads /person. Set the Button text to Reserve your spot.

Featured Event Presets

Apply Heading 1 to the page heading in the first Row. Apply the Contained – Dark Row Element Preset to the second Row. This gives the featured event banner its dark background, padding, and rounded corners.

In the left Column, apply Subheading to the eyebrow heading, Heading 2 to the event name, and Heading 5 to the date or location line. Stack Light Text and Small Text on the description Text module. Then, apply Light Text – Dense to the Countdown Timer.

In the right Column, apply Heading 3 to the price Heading, Light Text to the price qualifier Text, and the same Light Text plus Small Text stack to the disclaimer Text. Finally, apply Filled – Primary Color to the Button.

Featured Event Layout Tweaks

A few layout tweaks finish this section. In the second Row, set the left Column to 3/5 and the right Column to 2/5 on desktop. You can also use the Change Structure Layout setting to update both columns at the same time.

Set the left Column’s internal Vertical Gap to 20px to tighten the stacked event details. Inside the right Column’s first Group, set Flex Direction to Row and Align Items to Flex End. This keeps the price and qualifier, such as $25 and /person, on the same baseline.

Upcoming Events List Structure

Next, build the upcoming events list. This section is a stack of event rows. Each row uses the same structure: a date block on the left, the event name and description in the middle, and the price plus Button on the right.

Build the first event row carefully, then duplicate it. That is much faster than rebuilding each event card from scratch.

Add a new Section. The first Row uses an Equal Columns Flex layout with a Heading module inside. Below it, add a second Row using a Three Equal Columns Flex structure. We’ll adjust the column behavior manually in a moment.

The left Column holds a Heading module and a Text module for the date block. In the middle Column, add a Heading module, a Blurb module, and a Text module. The right Column holds a Group containing a Heading module and a Text module, followed by a Button module below the Group.

Upcoming Events List Layout

Add realistic content to the first event row before adjusting the layout. This helps you judge spacing, line length, and alignment using content that resembles the final design.

Set the Row’s bottom padding to 30px. While editing the Row, apply the Bottom Border Option Group Preset in Design > Border.

Set the middle Column’s Column Class to 3/5 in Sizing. Enable both Shrink to Fit and Grow to Fill. Set the left and right Columns to No Column Class.

For the left Column, set the Vertical Gap to 0px so the date heading and day-of-week text stack tightly. In the middle Column, set the Vertical Gap to 20px.

Inside the right Column’s Group, set Flex Direction to Row, Align Items to Flex End, Flex Wrap to Wrap, and Horizontal Gap to 0px. This keeps the price inline with the /person qualifier.

Upcoming Events List Presets

On the event row, apply Contained – Light to the left Column. Then, set the date block’s Background Color to the Background – Light Gray variable if that is not already included in your preset.

The date Column’s Heading uses H2-sized styling, while the actual heading level can be set to H3 if that better fits the page hierarchy. The Text below uses Dark Text and Small Text with center alignment.

For the middle Column, use Heading 3 for the title, Dense for the Blurb, and Dark Text for the description. In the right Column’s Group, apply Heading 3 to the price Heading and Dark Text to the qualifier Text. The Button gets Filled – Primary Color.

Once the first event Row looks right, right-click it and use Duplicate Row to copy the layout, presets, and styles to additional rows. Then, update the date, title, description, icon, and price on each duplicate.

Subscribe Section

Finally, create the subscribe section for event updates.

Add a new Section with a Row using the Two Equal Columns structure. The left Column gets a Heading module. The right Column gets an Email Optin module.

On the right Column, set Justify Content to Center so the form sits vertically centered against the heading on the left.

Apply the Contained – Dark Row Element Preset. Then, override the Row’s Background Color using the Background – Light Gray variable. Apply Heading 2 to the left heading. The Email Optin module gets the Signup – Dark Element Preset.

Connect the Email Optin module to your supported email service in the Email Account option group. Then, add the section content. The heading can read Never miss an event.

The Contact and Events pages are now complete.

Both pages were built mostly from presets and Design Variables created earlier in the series. The structural choices still matter, but the design decisions are already reusable. That is the point of the system you have been building: the more decisions you encode into presets and variables, the faster every new page becomes.

What’s Coming Next

In Part 10, we’ll focus on Flexbox in detail. We’ll cover the layout settings used throughout this part, including flex direction, wrap, justify content, align items, column structures, and how Divi 5’s flex containers shape responsive layouts.

The goal is to give you a stronger mental model for the Flexbox concepts used across the homepage, header, footer, templates, and inner pages. Once those concepts click, you can build more custom layouts from scratch without relying only on prebuilt column structures.

The post Part 9: Building The Core Inner Pages Of Your Divi 5 Website appeared first on Elegant Themes Blog.

Together, these updates give you more control over form design directly inside Divi’s Visual Builder. You can style inputs, checkboxes, and radio buttons more consistently, customize labels and placeholders, and edit interactive states such as focus and checked from the module’s Design tab.

Field Presets let you save reusable styles for form field groups, so you can apply the same form design across multiple modules. Meanwhile, the new Contact Form 7 module brings Divi’s form styling options to Contact Form 7 forms, with more integration-based modules planned.

In this post, we’ll break down what’s new, how the features work, and how to use them to build better forms in Divi 5.

Let’s dive in.

What Are Divi 5’s New Form Field Options?

Divi 5 brings a major improvement to how forms are designed and styled. Form-based modules, including Contact Form, Email Optin, and Login, now share a more unified set of design options.

Previously, Divi’s form modules used a single Field option group, and available settings could vary from one module or field type to another. Now, form field design has been split into three dedicated option groups: Input, Checkbox, and Radio.

These new groups give you more precise control over each field type. They also add styling controls for label text and placeholder text where those elements apply. As a result, you can style form fields more predictably and reuse those styles through Option Group Presets.

When paired with Composable Settings, these option groups can unlock additional Divi design controls for form elements, including sizing, backgrounds, borders, shadows, filters, transforms, and more.

Key Advantages

• More Complete Design Control: Style form fields using native Divi design settings instead of relying on custom CSS for common adjustments.
• More Consistency Across Form Modules: Form-based modules now share the same Input, Checkbox, and Radio settings, so designs are easier to repeat from one module to another.
• Integration With Composable Settings: Enable additional option groups where you need them while keeping the settings panel focused.
• Reusable Field Presets: The new Input, Checkbox, and Radio option groups support presets, so you can save and reuse form field styles across compatible modules.

New Pseudo-Class Editing States

If you are familiar with Divi 5, you already know about hover editing. You can switch to the hover state and style design options for the way an element looks when someone hovers over it.

Divi 5 now expands this workflow for form fields with two additional pseudo-class editing states: focus and checked. These states let you control how fields look when users interact with them.

Use the Focus state to style a field when a visitor clicks or tabs into it. Use the Checked state to style selected checkboxes and radio buttons. These visual cues make forms easier to understand and more pleasant to use.

To access these states, open a form module and go to the Design tab. Near the top of the settings panel, open the state selector and choose the state you want to edit.

The New Contact Form 7 Module

This update also introduces a new Contact Form 7 module.

Instead of embedding a Contact Form 7 shortcode and writing custom CSS to match your branding, you can add a Divi module, choose one of your existing Contact Form 7 forms, and style the form directly inside the Visual Builder.

The Contact Form 7 module uses the same new form option groups and styling options as Divi’s native form modules. It is also the first of more integration-based modules planned for Divi 5.

How To Use Divi 5’s New Form Field Options

Getting started with Divi 5’s new form styling system is straightforward. In this tutorial, we’ll style a Contact Form module, edit hover, focus, and checked states, adjust individual field widths, and save reusable presets.

Note: Most of the styles below are applied at the module level. That means you can style inputs, checkboxes, and radio buttons across the entire form in one place. You can still adjust individual fields when you need layout-specific changes, such as field width.

Step 1: Add And Style A Contact Form Module

Open any page in the Visual Builder and add a Contact Form module. In the module’s Content tab, add the fields you need. Then, go to the Design tab. You’ll see the updated form option groups.

Style The Field Option Group

While in the default state, expand the Fields option group. Then, expand the Input, Label, and Placeholder subgroups to style the form.

To keep the form consistent with the rest of your site, use Design Variables for values such as field text color, field text size, line height, border width, and border radius.

Once styles are added, Divi 5 displays a blue dot next to modified settings and option groups. This makes it easier to see which parts of the module have been customized.

You can also add background colors, gradients, borders, and other visual details using Divi’s design settings.

Style The Checkbox Option Group

Next, expand the Checkbox option group. You’ll find subgroups for input text, spacing, icon, background, border, and box shadow. These can be styled individually.

For example, expand the Input Text group and adjust the Text Color, Text Size, and Line Height to match the rest of your form.

Before moving to the Radio option group, assign an Icon Color, Background Color, and Border style to the checkboxes.

Style The Radio Option Group

Repeat the same styling process for the Radio option group. Add styles for Input Text, Icon, Background, and Border so radio buttons match your checkboxes and inputs.

If you have not already created Option Group Presets for these sub-elements, this is a good time to do it. Style a sub-element, hover over the group header, and click the Assign Presets icon.

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

Give the preset a name, verify the saved styles, and click Save Preset.

Make Style Changes To The Hover State

Before switching to the Focus state, make any adjustments you want for the Hover state.

For example, you can change the background color for fields, checkboxes, and radio buttons. You can also adjust border colors to create a clear hover effect.

When adding a background color to fields, make sure the Placeholder Text Color remains easy to read.

Step 2: Switch To Focus State

Use the Focus state to style how fields look when a visitor clicks or tabs into them.

Changing the Background Color of fields or adding a subtle transform in the Focus state can provide clear visual feedback. Start by changing the Background Color in Fields > Background.

If you use a darker background color, change the Placeholder Text Color to a lighter color so it remains readable.

To make the focus effect more noticeable, use Divi 5’s Composable Settings to add Transform controls to the Fields option group. Hover over the Fields header to reveal the Toggle Options icon.

After clicking the icon, enable the additional options you need for the Fields option group. Choose Transform, and the Transform settings will become available.

Expand the newly added Transform option group. In the Transform Scale tab, keep the link icon enabled and add 105% to the X field.

Now, when you preview the form and click into a field, the placeholder text turns lighter and the field container expands.

Step 3: Switch To Checked State

Use the Checked state to style selected checkboxes and radio buttons. Open the state selector and choose Checked.

Expand the Checkbox option group, then open the Background subgroup. Change the Background Color for checked checkboxes.

Repeat the same process for the Radio option group.

Preview your form again. This time, pay attention to how the checkboxes and radio buttons look when selected.

Step 4: Style The Button

With the fields, checkboxes, and radio buttons styled, the last major element to edit is the Button. In the Contact Form module’s state selector, make sure you are back in the default state. Then, expand the Button option group.

From here, assign a Preset or style the button manually.

Step 5: Adjust Individual Field Settings

Module-level styling gives you fast, consistent control over the whole form. However, you can still customize individual fields when a layout calls for it.

For example, you may want two fields to sit side by side on larger screens. Divi 5 makes this possible with built-in Sizing settings. Open any field in the form, go to the Design tab, expand the Sizing option group, and look for the Column Class field.

When you click into the field, a modal appears with multiple sizing options. Select 1/2.

Repeat these steps to assign different column classes to other fields as needed.

Use Divi 5’s Responsive Editor to adjust field column classes for tablet and phone breakpoints when needed.

Step 6: Create Field Option Group Presets

Once your form fields look the way you want, save the reusable parts as Option Group Presets. This lets you apply the same field styling to future forms more quickly.

To create an Option Group Preset, go to the Design tab. Hover over the right side of the option group header to reveal the Assign Presets icon.

Click the icon. When the modal appears, choose New Preset From Current Styles.

Give the preset a name and click Save Preset.

Repeat this process for any other field groups you want to reuse. Your saved Option Group Presets will appear in the preset dropdown for quicker application across compatible form modules.

Step 7: Create An Element Preset

For maximum efficiency, you can also create a full Element Preset. This saves the complete Contact Form module design as a reusable module preset. If the module design includes nested Option Group Presets, those smaller presets remain easier to manage and update later.

To create an Element Preset for the form, select the main Contact Form module and click the Assign Presets icon in the module header.

Select New Preset From Current Styles, name the preset, and save it.

To set this as the module’s default preset, click the preset. In the modal that appears, click the star icon next to the preset name.

From now on, any new Contact Form module you add can start with that preset applied by default.

Tips And Best Practices

Here are several ways to get more from the new form styling options and avoid common mistakes as you start using them in projects.

Create Field Presets For Site-Wide Consistency

Instead of styling each Contact Form, Email Optin, or Contact Form 7 module from scratch, create Option Group Presets for Input, Checkbox, and Radio groups. Once saved, apply them as you add new forms to keep designs consistent.

For greater control, nest those Option Group Presets inside an Element Preset for the form module. Then, set that Element Preset as the default when you want new forms of that type to start with the same styling.

Use Focus And Checked States For Better User Experience

Style the Focus and Checked states intentionally. The Focus state helps users see which field they are typing in. The Checked state makes selected checkboxes and radio buttons easier to recognize.

These small cues can improve usability, especially on forms with multiple input types.

Combine With Composable Settings For Advanced Control

Use Composable Settings when you need additional design controls, such as filters, transforms, backgrounds, borders, or sizing options on a specific form element.

Only enable the option groups you need. This keeps the interface cleaner while still giving you advanced control when the design requires it.

Preview Interactive States Across Devices

Forms can behave differently on mobile and desktop. Switch to tablet and phone views to test focus, hover, and checked states. Pay special attention to checkbox and radio styling, label spacing, touch targets, and contrast so your forms remain usable across screen sizes.

Download And Install The Files

To make things easier, we’ve created a JSON file with the contact form layout used in this tutorial. The file does not include saved presets, so you can import the layout and practice creating the presets yourself.

To use it, open the Divi Library and click the Import & Export button.

Click the Import tab, select the New Form Field Options In Divi 5.json file on your computer, and click Import Divi Builder Layouts.

Once imported, create or open a page in the Visual Builder. Click to add a new Section to the page.

Select the Add From Library tab and choose the New Form Field Options in Divi 5 section.

Finally, click Use This Section to add the layout to the page.

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!

Start Building Better Forms With Divi 5 Today!

Divi 5’s new Form Field Options change how form styling works in Divi. With dedicated Input, Checkbox, and Radio option groups, label and placeholder styling, focus and checked editing states, field presets, and the new Contact Form 7 module, you can create more consistent forms using native Divi controls.

These updates bring form design more closely into Divi 5’s design-system workflow. Whether you are styling a contact form, an email opt-in, a login form, or a Contact Form 7 form, you can reuse presets, reference variables, and adjust interactive states without leaving the Visual Builder.

If you have not already, download the latest version of Divi 5 and start experimenting with the new form features.

Let us know what you think by leaving a comment below or reaching out on our social media channels.

The post Everything You Need To Know About Divi 5’s New Form Field Options appeared first on Elegant Themes Blog.

This isn’t the end; it’s a new beginning for Divi, and we are moving forward faster than ever with weekly updates. If you use Divi 5, you’ll see a version 5.5 update notification today.

What’s New In Divi 5.5?

We implemented 58 bug fixes and improvements, along with a bunch of new features: Aspect Ratio, Framing & Image Preset, and the all-new Sizing Variable & Colorscheme Generators.

The majority of our team is focused on bug fixing and overall stability. However, after months of doing nothing but fixing bugs, we are slowly transitioning back to feature development.

That means the rate of innovation will accelerate significantly over the next few months.

If you want to get an early inside scoop, I often post progress reports in the Divi Theme Users Facebook group. Join us!

Aspect Ratio, Image Framing & Image Presets

We released tons of new image-related features in Divi 5.5.

First, we added new aspect ratio settings to all images. Elements with aspect ratios scale proportionally across different screen sizes.

Next, we added framing settings that allow you to reposition cropped images within a defined aspect ratio. Take any image, regardless of its size, and make it fit perfectly into your design! It’s a great way to make perfect-looking loops.

Finally, we enabled option presets for the image option group. That’s huge! Now you can manage the style of all the images in every Divi module using Divi’s preset-based design system.

Sizing Variable & Relative Colorscheme Generator

We released the Sizing Variable & Colorscheme Generators in Divi 5.4 🎉.

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.

What’s Coming Next?

Modules. Lots of modules!

In fact, you may have noticed that we already snuck in a couple of new modules, including Breadcrumbs and SVG. Did you notice, or did they fly under your radar?

There’s more coming. We’re working on a timeline module, new form-styler modules for the most popular form plugins, a table of contents module, an Instagram feed module, and more!

The next time you add a new module to a page, browse the list; you might find something new. 😉

That’s not all we are working on either, but more to come on that in my next update. Big, exciting changes are on the horizon.

Changelog

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

• Fixed slider-family module conversion fixtures so generated module-library attrs data stays in sync with conversion expectations.
• Fixed Contact Form Contact Button custom CSS hover styles so they trigger only on button hover, not on the form container hover.
• Fixed the Divi Library “Layout Type” dropdown alignment in the Add New Layout modal for WordPress 7.0 compatibility.
• Fixed an issue where deleted global colors were not restored when re-importing variables from the same export file.
• Saturation filters now clamp to grayscale at minimum.
• Fixed the Visual Builder left toolbar so all actions stay reachable on short desktop viewports.
• Fixed Theme Customizer preview so global Row Height only affects block layout rows, matching the front end and Divi 5 flex/grid layouts.
• Fixed Contact Form submit button sizing so Design → Button → Sizing width and alignment behave correctly in the bottom row, including beside the optional math captcha.
• Fixed release CI so type checking is gated and executed for relevant JS/TS changes.
• Fixed an issue where the Show Theme Builder Layouts option appeared in Builder Settings for users who were not allowed to load Theme Builder layouts, so the setting had no effect.
• Fixed Menu and Fullwidth Menu: WooCommerce cart quantity responds to responsive changes; show cart quantity on the front end so it matches the Visual Builder.
• Fixed the layout import progress bar fluctuating during multi-file imports, by ensuring progress only moves forward.
• Theme Customizer Heading Text Color now applies its default #666666 value to Builder 5 front-end headings.
• Fixed pasted inline title text duplication after blur.
• Fixed builder-enabled CPT single frontend parity by removing legacy container/sidebar/meta-wrapper output.
• Fixed a PHP 8 fatal error in Divi when certain plugins left the template global in an unexpected shape during admin post list screens.
• Improved AI post management tools by reusing existing page tools with a postType option, including support for custom post types.
• Fixed an issue where the AI Agent chat history was lost when dragging the chatbot panel between docked and floating positions.
• Added and hardened the SVG module workflow so editors can render and style sanitized inline SVG from code or uploaded source with consistent VB/FE behavior.
• Fixed Constant Contact email provider authentication by migrating to API v3 with OAuth 2.0 support. Added automatic token refresh to prevent authentication failures when tokens expire. Fixed a critical bug preventing JSON response decoding for email providers and spam protection. Improved error message display for subscription failures. Added error handling for OAuth authentication failures in Divi 5. Enabled management of email accounts with no lists.
• Fixed the Person module after the D4 to D5 migration so the image and text stay side-by-side, and the image column no longer forces full-width in the flex layout.
• Fixed the wrong color being set as the default heading color in the Theme Customizer.
• Fixed example extension webpack watch mode repeatedly recompiling because conversion-outline.json was rewritten on every build, even when its content did not change.
• Fixed the D4-to-D5 conversion so free-form custom CSS on the example D4 module migrates into Divi 5 like core modules.
• Fixed Icon List Item text so spaces around inline HTML tags display correctly on the front end, and allowed HTML in the list item text element metadata for consistent Visual Builder handling.
• Fixed an issue where product dynamic content options could be missing in the Visual Builder due to incorrect post context during after-app-load settings data resolution.
• Fixed a Divi 5 portability issue where imported Lottie modules could keep source-site JSON URLs; same-site JSON assets are now transferred and rewritten during import.
• Fixed Column “Apply Structure Template,” so Flex structure templates appear when the column uses Flex layout, not only Grid templates.
• Fixed a VB and front-end color mismatch for heading, body, and link text colors by emitting CSS global variable rules in the customizer CSS output for Divi 5.
• Added task documentation for the Divi 5 global text color parity fix, tracked under issue #49186.
• Woo Checkout Billing and Shipping Select2-backed fields now apply. Fields’ hover text color should match the standard checkout fields.
• Fixed module links with multiple query parameters so URLs with & no longer broke redirects on the frontend.
• Fixed a CSS numeric typing regression that caused TypeScript check failures when parsed numeric values reached string-only consumers.
• Added new aspect-ratio settings to the sizing group for all modules.
• Added new framing settings to all modules with images, including object fit and position.
• Implemented image group presets and updated all modules with images to support the new preset type.
• Harmonized the settings available in the image group for all modules.
• Enabled composible settings for image option groups.
• Fixed image animations not working for the post carousel module when enabled via composable settings.
• Added AI Agent canvas tools in Divi 5 so the assistant can discover, create, switch, configure, and manage canvases through natural-language workflows.
• Added AI Agent tools for creating, updating, trashing, and searching pages, plus tools to publish, unpublish, or schedule page status—enabling page lifecycle operations outside the Visual Builder.
• Fixed an issue where Contact Form Basic Captcha errors could show a message without the expected red error border on the captcha input.
• Fixed duplicate module groups appearing in the interaction target selector when using Theme Builder layouts.
• Fixed global instances in Wireframe default view so nested modules under a global layout render in the wireframe tree on first load instead of only a single Global Layout row.
• Fixed global layouts not expanding in Wireframe view on first Visual Builder load when Wireframe was the default view mode.
• Fixed Visual Builder failing to load when divi/global-layout blocks contained pathologically nested localAttrs from repeated save/port round-trips (#46915).
• Fixed Image module borders so rounded corners no longer show gaps on small images.
• Fixed Sendinblue (Brevo) Email Optin custom field values not saving when the field name’s casing differed from the value sent from the form.
• Fixed duplicate frontend CSS rules when Theme Builder layouts were used, so unified static CSS no longer repeated the same module styles for the main content.
• Fixed inconsistent Theme Builder control heights on WordPress 7 by no longer loading core forms.css on the Theme Builder admin screen.
• Fixed the Portfolio module in the Visual Builder so grid row classes (first_in_row, last_in_row, and on_last_row) match the frontend, including when the module is the last content module in a column. Also fixed CI performance test failures by using requestIdleCallback to defer grid calculations until the browser is idle.
• Fixed a Slider true parallax transition issue where background images could jump or render inconsistently during slide changes.
• Woo Checkout Billing and Shipping select-backed fields now respect configured default, focused, and open Fields text colors in Visual Builder and frontend rendering.
• Fixed an issue where background images set via image global variables in presets did not render on the Front End.
• Fixed border inheritance so side-specific border styles defined are no longer overridden by newly set all border widths.
• Fixed the Website Gutter Width Theme Customizer setting not auto-applying to existing pages.
• Fixed the Blurb module’s preset Icon Font Size not applying to the icon in the Visual Builder.
• Fixed an issue where the module settings panel height could change unexpectedly after switching between modules and reopening the same module settings.

Jump Into Divi 5 Today

It’s official. Divi 5 is ready for production. Give it a try, and let us know what you think!

If you are brand new to Divi 5, we suggest familiarizing yourself with its many new features; there’s much to explore.

• The Divi 5 page provides a good overview of some of its most exciting changes.
• Our help center has nearly 200 articles focused on Divi 5.
• On the blog, the Divi Resources category features hundreds of long-form tutorials that explore every aspect in depth.
• On YouTube, we have many videos that walk you through each new update.
• Plus, our Fin chatbot is trained on everything and can answer questions instantly! Behind the chatbot is our support team, ready to chat with you and help you through the transition.

The post Divi 5.5 Release Notes appeared first on Elegant Themes Blog.

First, we added new aspect ratio settings to all images. Elements with aspect ratios scale proportionally across different screen sizes.

Next, we added framing settings that allow you to reposition cropped images within a defined aspect ratio. Take any image, regardless of its size, and make it fit perfectly into your design! It’s a great way to make perfect-looking loops.

Finally, we enabled option presets for the image option group. That’s huge! Now you can manage the style of all the images in every Divi module using Divi’s preset-based design system.

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

Brand New Image Settings & Preset Support

Images are a critical part of every website, and many Divi modules include image elements. You’ve probably spent a lot of time styling and cropping images for your websites, and now, Divi makes it easier than ever.

Aspect Ratio

Every module includes new aspect-ratio settings in the sizing option group.

When you define an aspect ratio, the element will adjust its height proportionally, maintaining that ratio as it scales up or down across different screen sizes. This is especially useful for images, allowing you to take a wide range of sizes and change their aspect ratio without an image editor.

Image Framing

When an aspect ratio, or an explicit width and height, is applied to an image, the image will stretch to conform to the size you defined.

You don’t want your images stretched or contorted, so how can you take a landscape image and make it square while resizing proportionally? That’s where Divi’s new framing settings come in: you can reposition an image within its frame and choose how it fills the available space.

Image framing is useful whenever you want an image’s rendered size to differ from its intrinsic size. That’s common when changing aspect ratio explicitly, but also when an image has a variable aspect ratio, such as when growing to fill its parent container.

Image Presets

Every image throughout Divi’s suite of modules now supports presets. Instead of styling your images over and over, create a set of shared styles you can reuse.

When you update the preset, every image that uses it is updated in a single step.

Image Settings Harmony & Composable Settings

Every image option group has been harmonized and supports the same set of design options. Furthermore, all images support composable settings, allowing you to leverage Divi’s entire design suite when customizing image sub-elements.

Try Divi 5 Today

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

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

Have you tried the new Variable Geneartor?

We recently released the Variable Generator for Divi 5.

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 customize their systems fully.

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 Aspect Ratio, Image Framing & Image Presets for Divi 5 appeared first on Elegant Themes Blog.

Composable Settings in Divi 5 solve that by letting you enable additional design option groups for module sub-elements. Even better, those enabled option groups can be saved inside presets. That means you can configure a sub-element once and make those controls available by default every time you use that preset.

What Are Composable Settings In Divi 5?

Take the Contact Form module as a starting point. When you open the Button settings in the Design tab, you will find core styling options like color, font, and border. But option groups like Transform and Animation may not be enabled for that button by default. Settings farther down in the module panel apply to the full Contact Form, not the button sub-element on its own.

That reflects how many Divi modules are structured. A module often contains smaller parts, such as titles, body text, images, buttons, and icons. These are sub-elements. Divi keeps many sub-element panels focused by default, so the builder does not show every possible option group all the time.

Composable Settings let you expand those controls when you need them. You can enable option groups like Transform, Background, Spacing, Border, Box Shadow, or Sizing for a specific sub-element. That gives you more control over one part of a module without affecting the rest of the module.

To access them, open a module’s Design settings, navigate to the sub-element you want to expand, and click the Toggle Options icon.

A dropdown opens with the available option groups. Check the groups you want to enable, and they will appear directly in that sub-element’s settings panel.

Enable Transform, for example, and it appears under the Button settings ready to use.

From there, you can style the button with direct controls where they belong, without adding custom CSS for routine adjustments. The next question is how to make that setup reusable, so every new Contact Form can start with those same option groups already available.

Learn Everything About Composable Settings In Divi 5

Carrying Composable Settings Forward With A Default Preset

At this point, you have enabled Transform on one Contact Form button, and the setting is available where you need it. Now imagine adding another Contact Form on a different page, or ten more across a site. Each one would require the same setup unless you save that configuration.

Presets solve this at the source. In Divi 5, Composable Settings work with presets. If you enable specific option groups inside a preset, those groups appear automatically when editing an element that uses that preset. If you want those option groups enabled by default, toggle them on inside your default preset.

After you have set up the Contact Form button the way you want it, save that configuration as a preset.

Set the preset as the default.

Now the next Contact Form you add will already have Transform available under its button settings, with nothing left to enable manually.

A default preset does something quietly useful. The next time you add a Contact Form, the module already starts with the option groups you decided were important. That also helps other people working on the same site because the module behaves consistently from the moment it is added.

Working this way changes how you build. You stop configuring the same sub-element controls one module at a time and start defining how those modules should behave across the site.

Real Examples Of What You Can Do With Composable Settings

Here are four scenarios where saving Composable Settings inside default presets can reduce repeated setup work.

1. Add Subtle Attention To Form Buttons Without Rebuilding

A Contact Form button that scales slightly on hover is a small detail, but it can make the form feel more polished. The default button controls may not expose everything you need for that effect. With Transform enabled through Composable Settings, you can apply it directly to the button sub-element.

Go to the Contact Form module’s Button settings in the Design tab and edit its preset. Click the Toggle Options icon and enable Transform.

Save the preset and set it as default. Then switch to the Hover state and apply a slight scale under the Transform settings for the button.

Preview the result, and the button gently scales on hover without changing the module structure.

2. Turn Blurb Headings Into Labels Without Extra Modules

If your design calls for a Blurb title that reads more like a label or category tag, the default title options may not be enough. Enabling Background, Border, Box Shadow, and Spacing through Composable Settings gives you the controls to style the title directly inside the preset.

Open the Blurb module and go to Title Text settings in the Design tab. Edit its Heading 3 preset, click the Toggle Options icon, and enable Background, Border, Box Shadow, and Spacing.

Style the title directly. Add a background color, adjust the padding, and layer in border or shadow settings to create a label-like look.

Save the preset and set it as default.

The next time you apply this heading style in a compatible module, those enabled option groups and label styles come with it.

3. Create Full-Width CTAs Inside Blurbs Without Layout Hacks

Getting a Blurb button to span the full width of its container can lead to unnecessary layout adjustments if the button itself does not expose the sizing controls you need.

Enable Sizing through Composable Settings and set the button width to 100%. That handles the layout from inside the button sub-element.

Save this to a preset and set it as default, and every new Blurb that uses that preset can start with the full-width button setup already available.

4. Highlight Blurb Body Text Without Adding Extra Modules

Body text inside a Blurb often starts with basic typography controls, but sometimes that content needs more visual separation. Enabling Background, Border, and Spacing through Composable Settings lets you turn the body text area into a styled callout without adding another module.

Add a background, adjust the padding, and layer in a border if the design calls for it. The result sits cleanly inside the module without changing the layout structure.

Save this to a preset and set it as default to make the highlighted text style available in every new Blurb that uses that preset.

Start Building In Divi 5 Today!

The setup covered in this article pays off over time. Every module you configure this way becomes more ready for the next time you use it. Start with the modules you reach for most often, enable the Composable Settings that match how you tend to style them, save those configurations as default presets, and let that work compound.

Over time, your Divi 5 setup begins to reflect the decisions you have already made. You spend more time building and less time reopening the same settings just to make the same controls available again.

The post How To Enable Composable Settings By Default Using Presets In Divi 5 appeared first on Elegant Themes Blog.

Now, in Part 8, we’ll use the Theme Builder to make the rest of the coworking website feel like one unified brand. Instead of designing every template-driven page manually, we’ll create reusable layouts that automatically apply to posts, archives, search results, and error pages.

By the end of this post, you’ll understand how to build Theme Builder templates for All Posts, Category Pages, Author Pages, Search Results, and the 404 Page. We’ll also walk through the full creation of an All Posts template, so you can see the process in action.

Let’s get started.

Why Global Templates Matter

The Theme Builder lets you design a layout once and assign it to specific parts of your WordPress site. For example, one template can control every blog post, while another can control category archives, author archives, search results, or the 404 page.

This is where the design system from Parts 3 and 4 becomes even more valuable. Design Variables keep shared values like colors, spacing, typography, and border radii centralized. Presets package those values into reusable styles. Together, they help your templates stay consistent without forcing you to restyle every module manually.

Dynamic Content is the other key piece. It pulls real data from WordPress, including post titles, featured images, author details, publish dates, categories, and post content. As a result, one template can display different content for every post or archive while keeping the same overall layout and design.

Creating A New Theme Builder Template

Navigate to Divi > Theme Builder in your WordPress dashboard. If you’ve been following along in the series, the Default Website Template should already include the Global Header from Part 6 and the Global Footer from Part 7.

Click + Add New Template, then choose Build New Template. When the Template Settings modal appears, look for the Post options. Select All Posts, then click Create Template.

Next, click Add Custom Body, then choose Build Custom Body. This opens the Visual Builder, where you can start building the template body.

Repeat the same process for the remaining templates you want to create. In each case, assign the template to the appropriate area of the site in the Template Settings modal.

The Power Of Dynamic Content In Templates

One of the biggest advantages of building templates in Divi 5 is Dynamic Content. Instead of hardcoding text, images, or metadata that would only apply to one page, Dynamic Content pulls information directly from WordPress. This lets the same template display different post titles, featured images, authors, dates, and content depending on what the visitor is viewing.

To insert Dynamic Content, look for the Insert Dynamic Content icon in supported text fields, image fields, headings, and module settings.

Click the icon, select the data you want, and Divi connects that field to the relevant WordPress data.

In some fields, you can also add Before or After text for context. For example, you can add Posted on before a publish date or By before an author name.

Because the templates also use the Design Variables and Presets we created earlier, the layout stays visually consistent while the content changes dynamically.

Here are the main templates we’ll use for the coworking website and the dynamic elements each one typically needs.

Post Template

This template controls individual blog posts. It typically includes the post title, featured image, post content, publish date, author name, author bio, comment count, previous and next post navigation, comments, and optional related posts.

The Post Content module displays the body content of whichever post the visitor is viewing. That includes the post’s text, images, embeds, and formatting. Style this module once with your typography settings, Design Variables, and Presets, and every blog post can follow the same design system.

Category Page Template

Category archive pages display posts filtered by a specific category. For example, the coworking blog might include categories like Events, Office Tours, or Member Stories.

This template typically uses a dynamic archive title and a Blog module or Loop Builder layout to display the posts for the current category. For more design control, use the Loop Builder to design the repeated post item and pull content from the current archive context.

Author Page Template

Author archive pages display posts written by a specific author. They are useful for highlighting team members, contributors, or community writers.

This template typically includes dynamic content for the author name, author profile picture, and author bio. It also needs a post list or loop that displays posts from the current author archive.

Search Results Page Template

The Search Results template controls what visitors see after submitting a search query. A strong version usually includes a Search module so visitors can search again, plus a Blog module or Loop Builder layout to display the matching results.

Depending on your module settings, you can also refine what appears in search results by excluding specific content types, pages, posts, or categories.

404 Page Template

The 404 template appears when a visitor tries to access a page that does not exist. Unlike a single post template, it does not have one main post body to display. However, it can still include helpful modules like a Search module, recent posts, popular links, or a CTA back to the homepage.

You can also use your existing Variables and Presets for headings, buttons, spacing, and other design details, so even error pages stay on-brand.

With these dynamic pieces in place, a single template can power dozens or hundreds of posts, archives, and system pages while keeping everything consistent.

How To Build The All Posts Template

Now that you understand how Dynamic Content works in Divi 5, let’s build the template that controls every blog post on the coworking website. This layout wraps each post in a clean, readable structure that matches the rest of the site.

We’ll use the Design Variables and Presets from Parts 3 and 4 to keep the styling consistent. We’ll assume you have already created your All Posts template and opened the custom body in the Visual Builder.

Step 1: Post Title And Content

Start by opening the Layers panel in the Builder Bar. Select the single Section and rename it Post Title and Content. To rename it, double-click the Section name, type the new label, and press Return.

Naming sections in your templates is a simple way to stay organized. It also makes elements easier to identify as the template grows.

Before adding modules, adjust the Flexbox settings. With the Section selected, go to the Design tab. Expand the Layout option group, hover over the Vertical Gap field, and apply the Spacing – Medium variable.

Add The Post Title Module

Add a single-column Row to the Section. Then, add a Post Title module inside the Row.

In the module’s Content tab, disable the Show Featured Image toggle. We’ll add the featured image separately with an Image module so we can style it more directly.

Next, go to the Design tab, hover over the Title Text option group, and click the Preset icon.

Choose the Heading 1 preset from the available options.

Expand the Meta Text option group and set the Meta Font Style to Italics. Then, apply the Body number variable to the Meta Text Size field.

Add The Featured Image

Add an Image module and assign the Rounded preset to it.

In the Image module’s Content tab, expand the Image option group. Hover over the Image field, click the Insert Dynamic Content icon, and select Featured Image.

Add The Post Content Module

Finally, add the Post Content module to the Row. This module outputs the body content of the current post.

Go to the Design tab and expand the Title Text option group.

We’ll set typography values for each heading level inside the post content. In the H1 tab, hover over the Heading Text H1 Text Size field to reveal the Insert Dynamic Content icon. Select the H1 number variable from your global numbers.

Next, hover over the Heading Text H1 Line Height field, click the Insert Dynamic Content icon, and select the Line Height – Headings number variable.

Repeat these steps for the remaining heading levels. Use the matching number variable for each heading size, such as H2, H3, H4, H5, and H6. Then, use Line Height – Headings for each heading line-height field.

Now, expand the Body Text option group. Apply your Dark Text preset or use the relevant Body Text color, Body text size, and Line Height variables from your design system.

Configure The Row And Column Settings

Before adding the next Row, adjust the Row and Column settings. Select the Row and go to the Design tab. Expand the Layout option group and set Align Items to Center.

Now, edit the Column settings. Go to the Row’s Content tab and click the edit icon for the Column.

Go to the Design tab and expand the Layout option group. Apply the Spacing – XSmall variable to the Vertical Gap field.

Add Post Navigation

Add another single-column Row to the Section to house the Pagination module. This gives readers a quick way to move to the previous or next post.

In the module’s Content tab, expand the Text option group. Enter the previous and next labels you want to display.

Step 2: Post Author Section

Add a new Section and name it Post Author in the Layers panel. Then, add a new 1/4 + 3/4 Row to the Section.

Before adding modules, adjust the sizing settings in each Column. Open the new Row and edit the first Column. In the Design tab, expand the Sizing option group. Set the Column Class to 1/8.

For the second Column, set the Column Class to 21/24.

Now, open the Row settings and expand the Layout option group. In the Horizontal Gap and Vertical Gap fields, apply the Spacing – Medium variable.

Add Modules To The Row

In the first Column, add an Image module and apply the Rounded preset.

Expand the Image option group in the Content tab, hover over the Image field, and click the Insert Dynamic Content icon. When the options appear, choose Author Profile Picture.

In the second Column, add a Heading module and apply the Heading 4 preset. Expand the Text option group, hover over the Heading field to reveal the Insert Dynamic Content icon, and select Post Author.

Next, add a Text module. Apply the Dark Text preset, expand the Text option group in the Content tab, and select Author Bio with the Insert Dynamic Content icon.

Finally, add a Button module and apply the Filled – Primary Color preset. In the Text option group, use Post Author as the dynamic content and enter More Posts by in the Before field.

Step 3: Related Posts

Create a new Section and name it Related Posts. Add a single-column Row to the Section, then add a Heading module. Apply the Heading 2 preset to the Heading module.

Next, add a Blog module. In the Content tab, expand the Content option group and set the Post Count to 3.

Expand the Elements option group and disable Show Pagination.

In the Design tab, apply the Heading 4 preset to the Title Text option group, the Dark Text preset to the Body Text option group, and the Small Text preset to the Meta Text option group.

Step 4: Post Comments

The final Section in the template will house comments. Create a new Section and name it Post Comments. Add a single-column Row, then add the Comments module.

In the Design tab, apply the Heading 2 preset to the Form Title Text option group and the Filled – Primary Color preset to the Button option group.

Expand the Meta Text option group. Apply the Body Small variable to the Meta Text Size field and the Line Height – Body variable to the Meta Line Height field.

Finally, expand the Comment Text option group and apply the Body variable to the Comment Text Size field. Use the Line Height – Body variable for the Comment Line Height field.

Step 5: Test For Responsiveness

Even though we built the post template with Design Variables and Presets, it is still important to test how the layout behaves across screen sizes. Divi 5 provides two useful tools for this: Customizable Responsive Breakpoints and the Responsive Editor.

Divi 5 supports up to seven customizable breakpoints in the Visual Builder’s Top Bar.

Clicking the ellipsis menu near the responsive icons opens a modal that lets you enable or disable breakpoints from smaller phones to ultra-wide desktop screens.

You can also use the responsive width field to enter specific preview widths and test the layout more precisely.

Alternatively, click the responsive icons to cycle through active breakpoints and preview how the template appears at each size.

If you need to make module-level changes, use the Responsive Editor. Hover over a responsive-supported field and click the Edit Responsive Values icon.

A modal appears, allowing you to adjust values for different breakpoints in one place.

Tips And Best Practices

Here are a few ways to get more out of your Theme Builder templates and keep the workflow efficient.

Name Everything

Name sections, rows, and important modules in the Layers panel. As you saw in the single post template build, clear labels make it much easier to navigate and edit larger templates later.

Keep Designs Consistent

Use the Design Variables and Presets you created earlier in the course whenever possible. The more your templates reference shared values, the easier they are to update later. For example, changing a shared color or spacing variable can update every template area that uses it.

Use The Loop Builder For Custom Archives

For Category and Author archive pages, consider using the Loop Builder instead of the standard Blog module when you need more layout control. It lets you design the repeated post item and use Dynamic Content to populate each loop item.

Create A Backup Of Your Templates

Export your templates regularly as JSON files from the Theme Builder. Exports are useful backups and make it easier to reuse or move your template system to another site.

Test Templates With Real Content

Test your templates with real or realistic content before launch. Publish a few test posts with featured images, different content lengths, multiple authors, categories, and comments. This helps you catch layout issues that may not appear when every post looks the same.

Download The Files

To help you follow along, we’ve prepared a JSON file containing the finished All Posts template, plus templates for the Header, Footer, Category Pages, Author Pages, Search Results, and 404 Page.

Before importing, make sure you have at least one blog post with a featured image. That gives the templates real content to display when you preview them.

Import the JSON file by going to Divi > Theme Builder and clicking the Import & Export icon at the top right.

Select the Import tab, locate the coworking-website-global-website-templates.json file on your computer, and click Import Divi Theme Builder Templates.

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 single post template complete and the remaining Theme Builder templates mapped out, the coworking website now has a stronger dynamic foundation. Blog posts, archives, search results, and error pages can all follow the same branded system.

In Part 9 of the Divi 5 Mastery Course, we’ll build the inner pages of the site. If you have not downloaded Divi 5 yet, now is a good time to get the latest version and apply what you’ve learned.

The post Part 8: Using Divi 5’s Theme Builder To Create Global Website Templates appeared first on Elegant Themes Blog.

By the end of this post, your Coworking site will have a global footer with three styled columns up top: a brand block, an address-and-socials block, and a contact CTA against an accent background. Beneath that, you’ll add a single-line copyright row that pulls in the current year dynamically, so it updates automatically. This is another fast tutorial because the footer is styled almost entirely with the Design Variables from Part 3 and the Element Presets from Part 4.

Custom Footer Build

Building a footer is much like building any other section in Divi. Start with structure and layout before moving into styling. We’ll begin with the Section and a structured Row, add the Modules and a second Row, then move through content, presets, responsive behavior, and dynamic data until the whole footer is ready. Here’s the desktop result you’ll be building:

Setting Up The Global Footer Template

The Theme Builder workflow for the footer mirrors the global header from Part 6. From the WordPress dashboard, go to Divi > Theme Builder. In the Default Website Template, click Add Global Footer > Build Global Footer. Save the template once before you start so the global footer assignment is committed, then open the layout in the Visual Builder.

Step 1: The Section And Row

On the empty Visual Builder canvas, Divi gives you an empty Section to start from. In the Section’s Content tab, open the Background option group and apply the Background – Light Gray Design Variable to the background color field. If you created a Background option group preset for that same value earlier in the course, you can apply that instead.

Next, go to the Section’s Design tab, open the Layout option group, and apply the Spacing – Medium Design Variable to the Vertical Gap field. This gap separates the main footer row from the copyright row beneath it.

Before moving on, set the Section’s semantic wrapper. Go to Advanced > HTML and set Element Type to footer. The footer will look the same visually, but the markup now tells browsers, screen readers, and search engines that this area is the site footer.

Add a Row to the Section and choose the Flex Three Equal Columns structure. In the Row’s Design tab, open the Layout option group and set Layout Wrapping to Wrap. This allows the columns to wrap instead of forcing three squeezed columns on narrower screens.

Apply the Spacing – XSmall Design Variable to both the Horizontal Gap and Vertical Gap fields.

Step 2: Adding The Modules

With the structure in place, add the modules each column needs.

In Row 1, Column 1, add an Image module, then a Text module beneath it.

In Column 2, add a Heading module, then a Social Media Follow module.

In Column 3, add a Heading module, a second Heading module, and then a Button module.

Next, add a second Row to the Section and choose Flex Single Column. In its lone column, add one Text module. This completes the footer’s structure.

Step 3: Styling The Footer Columns

Open Row 1, Column 1 and apply the Contained – Dark Element Preset from the column preset menu. That preset carries the dark background, medium padding, and rounded corners created in Part 4.

In the column’s Design tab, open the Layout option group and set Justify Content to Space Between. This pushes the logo toward the top and the tagline toward the bottom of the card.

Use Extend Design Attributes to send those same column settings to the other Columns in the same Parent Row. All three columns now share the dark background, rounded corners, medium padding, and vertical spacing behavior in one move.

The third column needs one override so it becomes the CTA block. Open Row 1, Column 3. In the Design tab, open the Background option group and apply the Primary Color Design Variable to the background color field. It keeps the same shape, spacing, and alignment as the other two cards, but now uses the brand’s primary color.

Step 4: Responsive Column Classes

Now set how the footer behaves across breakpoints. Desktop is the base breakpoint, so desktop values cascade down to tablet and phone unless you override them. Because you chose the Flex Three Equal Columns structure when you added the first row, the desktop column layout is already handled.

Switch the Visual Builder to the Tablet breakpoint and open Column 1. In the Sizing option group, set Column Class to Fullwidth. Column 1 now spans the full row on tablet and below, while Columns 2 and 3 can sit beneath it.

Still on the Tablet breakpoint, open Column 2 and set Column Class to Grow To Fill. Repeat that for Column 3. This lets Columns 2 and 3 share the remaining row width cleanly on tablet.

Switch to the Phone breakpoint. Open Column 2 and set Column Class to Fullwidth. Repeat the same setting for Column 3. The Row’s Wrap setting from Step 1, combined with these breakpoint-specific column classes, creates a clean stacked layout on mobile.

Step 5: The Logo Image

Open the Image module in Column 1. In the Content tab, hover over the Image field and click the Insert Dynamic Content icon. Bind the image source to the Logo Light Design Variable.

Set the image’s alternative text to the brand name unless the same brand name is already written directly beside it and the logo is purely decorative. In that case, keep the alt text empty so screen readers do not announce the same brand twice.

In the Design tab, open the Sizing option group and set Max Height to 64px.

Step 6: The Headings

You have three Heading modules to style. Open the Heading module in Column 2 and apply the Heading 5 Element Preset for the visual style.

Create a second Heading Element Preset named Light. Set its text color to the White Design Variable, save it, and apply it to the same Heading module. If both presets define the same property, remember that the last preset applied wins.

In the Content tab, hover over the Heading field, click the Insert Dynamic Content icon, and bind the text to the Address Design Variable. Binding the address to a variable instead of typing it directly means a future office move can be handled once in the Variables panel and updated wherever that variable is used.

Use Extend to apply the Heading 5 and Light presets to the other Heading modules in the Parent Row. There are two more Heading modules in Column 3. Bind the first one to the Phone Number Design Variable and the second one to the Email Design Variable.

For the phone and email modules, add matching URL Design Variables in the Link option group: use a tel: URL for the phone number and a mailto: URL for the email address. That keeps the visible text and clickable links managed from the same global system.

Step 7: The Social Media Follow Module

Open the Social Media Follow module in Column 2 and apply the Isolated Icons – Light Element Preset.

In the Content tab, open the Elements option group and add three Social Network children for the platforms that match the brand. Open each network item, choose the correct platform, and add the destination URL.

Click the edit icon for each Network, then apply the No Background Element Preset. The result is a clean row of white icons against the dark column, without a plate or pill behind each icon.

Step 8: The Button

Open the Button module in Column 3 and apply the Text – White Element Preset.

In the Content tab, set the Button Text to Send a message. Set the link URL to the contact page, the Contact Page URL Design Variable if you created one, or the same mailto: URL variable used for the email address.

The Text – White preset gives the button a transparent background, a white label, and the hover behavior you defined in Part 4.

Step 9: The Text Modules

There are two Text modules to style: the tagline in Column 1 and the copyright line in Row 2.

Open the Text module beneath the logo in Column 1 and apply the Light Text Element Preset. Set the body content to: Premium workspace for focus and collaboration.

Open the Text module in Row 2. Stack two Element Presets on it: apply Dark Text first, then Small Text. The order matters because stacked presets follow a cascade. Small Text narrows the body type from Body to Body Small, while Dark Text keeps the color and link behavior intact unless a later preset overrides those same properties.

In the same Text module’s body content, click the Insert Dynamic Content icon and choose Current Date. In the dynamic content settings, enter Copyright © Your Coworking Space in the Before field and . All Rights Reserved. in the After field.

Set Date Format to Custom and set Custom Date Format to Y. The line renders as Copyright © Your Coworking Space 2026. All Rights Reserved., with the year changing automatically each January.

One last touch: in the same module’s Design tab, open the Body Text option group and apply the Text – Dark Transparent Design Variable to the Body Text Color field. This gives the copyright line a quieter tone so it supports the footer instead of competing with the cards above it.

Save And Verify

Check the footer before leaving the builder. You now have a global footer that uses Divi 5’s Flex layout controls, Design Variables, Dynamic Content, and reusable presets.

Preview the tablet and phone breakpoints to confirm that Column 1 becomes full-width on tablet, Columns 2 and 3 share the next row on tablet, and all three cards stack on phone. Also test the social icons, the button link, the tel: link, and the mailto: link.

Save the Visual Builder, return to the Theme Builder, and click Save Changes.

Open any front-end page and scroll to the bottom to see the global footer in place.

What’s Coming Next

With the global header from Part 6 and the global footer from this post in place, every page on your Coworking site is now wrapped in a consistent, on-brand structure. In Part 8: Using Divi 5 Theme Builder To Create Global Website Templates, we’ll move on to the templates that handle the rest of the site, including All Posts, Category Pages, Author Pages, Search Results, and the 404 page.

The same Design Variables and Element Presets you’ve been building since Part 3 carry directly into those templates. By Part 8, the design system starts paying you back: the core decisions are already made, so you can build the remaining templates faster and keep the site consistent as it grows.

The post Part 7: Building A Custom Footer In Divi 5 appeared first on Elegant Themes Blog.

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.