It’s called Divi Review Builder — a new Divi 5 plugin that makes it easier to collect, manage, and display customer reviews and testimonials on your website.

The plugin is still being prepared for release, but most of the core functionality is now in place, so I wanted to give you a sneak peek at what I’ve been building.

Built specifically for Divi 5

Divi Review Builder is being built specifically for Divi 5, with its display elements available as native Divi modules.

The idea is simple: instead of copying testimonials into text modules or relying on a separate testimonial service, you can manage your reviews from WordPress and then display them anywhere on your Divi website.

Reviews can include more than just a name and a few lines of text. You can add ratings, profile images, company details, review images, videos, and other information depending on the type of review you want to create.

Collect reviews from your customers

One of the features I especially wanted to include is a way to collect new reviews directly from your website.

You can create a dedicated review collection page where customers can leave their feedback, answer questions, add a rating, and submit their review.

The collection page can be styled to fit your website, so it doesn’t feel like your visitors are being sent to an unrelated third-party service.

Submitted reviews can then be managed before you decide to publish them.

Display reviews in different ways

This is where Divi Review Builder really starts to become useful.

I’ve been building several different ways to display reviews, so you aren’t limited to the traditional testimonial slider.

For example, you can create a Wall of Love with multiple reviews displayed together.

Or use a Review Carousel when you want something more compact and interactive.

There is also a Marquee layout where reviews continuously move across the page.

And for designs where you want the focus on one testimonial at a time, you can use a Single Review Slider.

Each of these is built as a Divi 5 module, giving you control over the design directly inside the Divi Visual Builder.

Reviews don’t have to be just text

Another area I’ve spent quite a bit of time on is review media.

Reviews can contain images as well as video, which opens up some interesting possibilities for customer stories, project showcases, product reviews, before-and-after examples, and more.

Ratings can also be used independently throughout a design, including rating summaries and breakdowns.

This means you can use the same review data in different ways across your website instead of having to recreate everything manually.

More to come

There are still a few things I’m working on before Divi Review Builder is ready for release, but the main pieces are coming together nicely.

My goal is to make this a flexible review and testimonial system that feels like it actually belongs inside Divi — rather than another external tool that you have to work around.

I’ll share more details about the features, pricing, and release soon.

For now, I wanted to give you a first look at what’s coming.

Ps: Divi Builder will be included in the all access membership.

The post Sneak Peek: Divi Review Builder for Divi 5 appeared first on Mark Hendriksen.

The pack includes the essential pages and WooCommerce templates you need to build a complete store with Divi 5. You can use the layouts as they are, or customize the colors, typography, images, products, and sections to create your own unique design.

Sundaze is completely free to download. In this tutorial, I’ll show you how to install the layout pack, import the Divi settings and templates, configure the shop filters, and set up the free DrawerCart Lite plugin used in the demo.

What’s included in the Sundaze layout pack?

Sundaze gives you a complete starting point for building a modern WooCommerce store with Divi 5. The pack includes layouts for your main website pages as well as custom WooCommerce templates.

• Home page – A complete eCommerce homepage with product, promotional, blog, and lifestyle sections.
• Shop page – A custom WooCommerce shop design with an off-canvas product filtering system.
• Product page – A custom product template for displaying your products with Divi 5 and WooCommerce.
• About page – A lifestyle-focused page for introducing your brand and telling your story.
• Blog – Blog layouts that match the overall Sundaze design.
• Contact page – A clean contact page that you can easily customize with your own information.
• Headers and WooCommerce templates – Imported through the Divi Theme Builder so the design carries across your store.
• DrawerCart Lite integration – The demo uses my free DrawerCart Lite plugin for the slide-out shopping cart and free-shipping progress reward.

Everything is fully customizable with Divi 5, so Sundaze can be used as a starting point for many different types of WooCommerce stores—not just fashion websites.

How to install the Sundaze Divi 5 layout pack

Before you start: make sure Divi 5 and WooCommerce are installed and activated on your website.

Step 1: Download the layout pack

Log in to your account, or create a free account here: https://www.markhendriksen.com/member-area/

After logging in, go to the Free Membership area.

From here, find Sundaze and download the layout pack files.

Unzip the downloaded folder. Inside, you will find the files needed to import the Sundaze design and settings.

Step 2: Import the layout pack

I recommend installing Sundaze on a new website. Some of the files below import Divi settings and templates, which may overwrite settings you already have on an existing website.

• Go to Divi > Theme Options and click the import/export icon (the up/down arrows).
  
  Select Import and upload Sundaze Theme Options.json.

• Go to Divi > Theme Builder and click the import/export icon.
  
  Select Import and upload Sundaze Theme Builder Templates.json.

• Go to Divi > Theme Customizer and click the import/export icon (the up/down arrows).
  
  Select Import and upload Sundaze Customizer Settings.json.

• Go to Divi > Divi Library and click the import/export icon.
  
  Select Import and upload Sundaze Builder Layouts.json.

Step 3: Set up your pages

Now that the layouts have been imported, we can create the individual pages.

Go to Pages > Add Page.

Give your page a name, for example Home, and publish the page.

Next, click Use Divi Builder.

Inside the Visual Builder, click Add Layout and then choose Saved Layout.

Select the Home layout to import it onto the page.

Repeat these steps for the other included pages, such as About Us, Blog, and Contact.

Create your menu

Go to Appearance > Menus and create a new menu. Add your pages to the menu and set it as your primary menu.

Set your home page

Go to Settings > Reading. Under Your homepage displays, select A static page and choose your newly created Home page as the homepage.

Add some products and blog posts

Add a few WooCommerce products to your store so the shop and product sections have content to display. I also recommend adding a few blog posts so the blog sections do not appear empty.

Step 4: Set up the shop filter

The Sundaze shop page includes an off-canvas filter area. To use it, we first need to create a widget area for the WooCommerce filters.

Go to Appearance > Widgets.

Scroll down and create a new widget area.

After creating the widget area, refresh the page. Your new widget area should now be available.

Add the WooCommerce product filters to this new sidebar.

You can use the individual widget styling options to customize the appearance of the filters.

Below the product filters, I also added an H3 heading and the WooCommerce review widget.

For the review widget, I used the styling shown in the image below. Make sure you also add the following CSS class: sundaze-review-widget.

Once the sidebar is ready, we need to assign it to the Sundaze shop filter.

Go to Divi > Theme Builder and open the Shop template.

Open the Main Canvas and then open the Filter Menu Canvas.

The filter area may look empty because the sidebar is hidden by default. Switch to Wireframe View, open the Sidebar module, and under Widget Area select the filter widget area you created earlier.

Next, go back to the Main Canvas and open the Filter Canvas settings.

Find the Z Index option and set it to 999. This makes sure the filter canvas appears above the rest of the page content.

Apply the Divi 5 product filter fix

The WooCommerce category product filter used in this layout does not currently work correctly with Divi 5. Fortunately, the Sundaze download includes a small fix.

To add the fix safely, we will use the free Code Snippets plugin.

Go to Plugins > Add Plugin and search for Code Snippets.

Install and activate the plugin.

Next, go to Snippets > Import.

Import the fix-for-divi—woocommerce-categories.code-snippets.json file included with the Sundaze layout pack.

After importing the snippet, go to Snippets > All Snippets and activate the fix.

Step 5: Install DrawerCart Lite

The final step is to install DrawerCart Lite, the free WooCommerce cart drawer plugin I created and used in the Sundaze demo.

Go to Plugins > Add Plugin.

Search for StoreFlow DrawerCart for WooCommerce.

Install and activate the plugin.

Go to DrawerCart and select the Fresh Checkout preset. This will give you a good starting point for matching the Sundaze demo.

Set up the menu cart trigger

Go to DrawerCart > General > Menu Trigger.

Copy the Menu Trigger ID.

Next, go to Appearance > Menus.

Create a new Custom Link.

Enter Cart as the link text and paste the Menu Trigger ID into the URL field.

Add this new Cart item to your main menu and save the menu.

Now go back to DrawerCart > General > Menu Trigger.

To match the Sundaze demo, open the Display settings and disable Show Text.

Then configure the Count Badge using the settings shown below:

After these changes, your cart trigger should look similar to the Sundaze demo:

Set up the free shipping reward

The Sundaze demo also uses DrawerCart’s free shipping reward. Before configuring the reward in DrawerCart, we first need to set up free shipping in WooCommerce.

Go to WooCommerce > Settings > Shipping.

Add a shipping method and choose Flat Rate.

On the next screen, enter the regular shipping price you want to charge.

Then add another shipping method and choose Free Shipping.

For the Sundaze demo, I set the minimum order amount for free shipping to $100.

Go back to the WooCommerce shipping settings and enable Hide shipping rates when free shipping is available.

Now go to DrawerCart > Rewards > Milestone.

Set the reward threshold to the same amount as your WooCommerce free shipping minimum. In this example, that is $100.

When the cart total is below the threshold, DrawerCart will show customers how much more they need to spend to unlock free shipping.

Once the threshold has been reached, the message changes to let the customer know that free shipping has been unlocked.

Sundaze is ready to customize

That’s it. Your Sundaze layout pack should now be installed, your pages and shop filters should be working, and DrawerCart Lite should be configured to match the demo.

From here, you can replace the demo content with your own products, images, colors, and branding and turn Sundaze into your own WooCommerce store.

The post Sundaze – Free Divi 5 WooCommerce Layout Pack appeared first on Mark Hendriksen.

It’s called Sundaze—a WooCommerce design with a warm palette, generous product photography, and simple layouts, the aim is to make browsing the store feel easy and inviting.

The pack is still in development, but here’s a preview of what’s coming.

A Complete Store Design

Sundaze goes beyond the homepage. I’m preparing layouts for the main parts of a WooCommerce website, including:

• Homepage
• Shop and product category pages
• Individual product pages
• About page
• Contact page
• Blog and individual posts

The demo features tees, hoodies, cropped hoodies, and polos. You can use that as a starting point, then customize the design with your own products, photography, and branding.

A Closer Look at the Details

One of my favorite parts of building Sundaze has been exploring small interactive details that help visitors discover products.

The homepage hero includes product hotspots, letting visitors reveal product information as they explore the images. There’s also a sliding color comparison that shows the same hoodie in two different colors.

Category image panels give shoppers a clear way into the collection, while the shop filters include active filter tags that visitors can remove as they browse.

The product pages keep the buying options together, with space for descriptions, reviews, and useful store information.

Featuring DrawerCart Lite

Sundaze also uses DrawerCart Lite, the free version of my WooCommerce slide-out cart plugin.

It gives shoppers a way to view their cart without leaving the page they’re browsing. I’ve styled it to match Sundaze, so the cart feels like part of the store.

DrawerCart Lite is available through WordPress.org under the name StoreFlow DrawerCart for WooCommerce.

Free to Download When It’s Ready

Sundaze will be available as a free download from markhendriksen.com.

You’ll need your own copy of Divi 5 to use the layouts. The store also uses WooCommerce and DrawerCart Lite, both of which are free plugins.

I’m currently finishing the remaining details and preparing the download package and installation instructions. I’ll share those when the pack is ready.

The post Sneak Peek: Sundaze, a Free Divi 5 WooCommerce Layout Pack appeared first on Mark Hendriksen.

Want to create a site-wide popup in Divi 5 with advanced triggers — without using extra plugins?

In the video above, I’ll show you how to build a popup using the Divi 5 Canvas, add exit-intent, scroll-based, and time-based triggers, and make everything session-based for a better user experience.

Exit-intent, scroll percentage and timed trigger

Place the following code in Divi > Theme Options > Integration > Add code to the < head > of your blog.

<script>
document.addEventListener('DOMContentLoaded', function () {
  /* =========================================================
     CONFIG (edit these two values)
     ========================================================= */
  const STORAGE_KEY = 'divi5_popup_shown_v1'; // Change this if you have multiple popups
  const TRIGGER_ID  = 'diviExitTrigger';      // CSS ID of your hidden Divi trigger element
 
  /* =========================================================
     DO NOT EDIT (core "show once per session" logic)
     ========================================================= */
  function showPopupOncePerSession() {
    if (sessionStorage.getItem(STORAGE_KEY) === '1') return; // already shown
    sessionStorage.setItem(STORAGE_KEY, '1');                // mark as shown
    document.getElementById(TRIGGER_ID)?.click();            // open popup via Divi interaction
  }
 
  /* =========================================================
     TRIGGERS (enable any combination you want)
     To DISABLE a trigger: comment out its whole block.
     ========================================================= */
 
  /* ----- TRIGGER A: EXIT INTENT (desktop only) ----------
     Disable by commenting out this entire block.
  ------------------------------------------------------------ */
  if (window.matchMedia('(pointer:fine)').matches) {
    document.addEventListener('mouseleave', function (e) {
      if (e.clientY <= 0) showPopupOncePerSession();
    });
  }
 
  /* ----- TRIGGER B: SCROLL PERCENTAGE (all devices) -----
     Change 60 to whatever percent you want.
     Disable by commenting out this entire block.
  ------------------------------------------------------------ */
  window.addEventListener('scroll', function () {
   
    if (sessionStorage.getItem(STORAGE_KEY) === '1') return;
 
    const scrollTop = window.scrollY || document.documentElement.scrollTop;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    if (docHeight <= 0) return;
 
    const scrolled = (scrollTop / docHeight) * 100;
    if (scrolled >= 60) showPopupOncePerSession();
  }, { passive: true });
 
 
  /* ----- TRIGGER C: TIME DELAY (all devices) ------------
     Change 12 to the number of seconds you want.
     Disable by commenting out this entire block.
  ------------------------------------------------------------ */
  setTimeout(function () {
    showPopupOncePerSession();
  }, 12 * 1000);
 
}); // ← NOT part of block C, do not comment out)
</script>

The post How to Create a Popup in Divi 5 Canvases appeared first on Mark Hendriksen.

Elegant Themes has introduced a powerful new feature in Divi 5 — the Loop Builder. If you’ve ever felt limited by the standard Blog or Portfolio modules in Divi, the Loop Builder gives you the freedom to design custom templates for any kind of repeating content — blog posts, events, products, portfolios, and more.

In this post, I’ll walk you through:

• What the Loop Builder is
• Why you should use it
• How to build a simple blog layout with it
• And I’ll show you 3 real-world examples — including an event calendar

Let’s dive in.

What Is the Divi Loop Builder?

The Loop Builder allows you to create fully customized layouts for repeating content in WordPress — like blog posts or custom post types — using Divi’s visual builder.

It’s called a “loop” because WordPress fetches content using something called The Loop — it’s how posts, pages, or products are listed dynamically. Divi’s Loop Builder gives you complete visual control over how each item in that loop looks, using the same modules and styling tools you’re already used to.

Imagine designing your own blog card from scratch — layout, spacing, typography, images, buttons — all with dynamic data.

Why Use the Loop Builder?

You might be wondering: Why should I use the Loop Builder when Divi already has a Blog module?

Well, here’s the difference:

The Blog Module:

• Limited layout and structure
• Predefined design with toggles for author, date, etc.
• Minimal customization

The Loop Builder:

• Design everything from scratch
• Place elements exactly where you want them
• Style them however you like using Divi modules
• Use dynamic content from any post type or custom field

It’s ideal for creating blog layouts, product listings, testimonial sliders, event grids — basically any repeating content.

Setting Up a Basic Blog Layout with the Loop Builder

Here’s a quick step-by-step guide to building a custom blog card using the Loop Builder.

Step 1: Create Some Posts

Start by creating a few blog posts in WordPress. Make sure each has a title, content, and featured image.

Step 2: Build the Card Layout

In the Divi Builder:

1. Add a new row (1 column)
2. Inside, add an Image Module for the featured image
3. Below, add a 2-column row with Text Modules for category and date
4. Add a Heading Module for the post title
5. Add a Button Module labeled Read More

This is the basic layout of your blog card.

Step 3: Enable the Loop

• Open the column that holds the layout
• Go to the Loop settings and enable “Loop Element”

Step 4: Assign Dynamic Content

Now replace static content with dynamic fields:

• Image: Looped Featured Image
• Category: Loop Post Terms
• Date: Loop Publish Date
• Title: Loop Post Title
• Button link: Loop Link

Your layout is now powered by WordPress posts!

Step 5: Style Your Blog Card

Use Divi’s Design tab to style each element — fonts, spacing, background, shadows — the works.

To adjust the layout:

• In the row settings, enable Layout Wrapping
• In the column settings, tweak spacing and structure as needed

From here, you can get as creative as you want!

3 Loop Builder Examples

Here are three different layouts I’ve built using the Loop Builder to give you some inspiration.

1. Blog Card with Author Info

• Layout includes a featured image, category, title, date, and “Read More” button.
• Button is aligned to the bottom for consistency.
• Added an author section using a Blurb Module:
  • Name: Loop Author
  • Photo: Author Profile Picture

2. Blog Card with Background Image

• The featured image is used as a background for the column.
• To do this, insert dynamic content into the column’s background: Looped Featured Image
• Content is layered on top, creating a clean modern layout.

3. Event Calendar (Using Custom Fields)

• Instead of posts, this uses the Projects post type.
• Custom fields added: event date, day, time, location (via ACF or similar).
• Modules display this info using Loop Post Custom Field
• Under the field settings, just enter the custom meta key (e.g. event_date)

I’ll be creating a full tutorial for this event calendar soon — stay tuned!

Final Thoughts

The Loop Builder is a major upgrade for Divi users — giving you the freedom to design custom content layouts without needing extra plugins or code.

Whether you’re building blogs, portfolios, or custom grids, this tool is a game-changer.

If you’re ready to take full control over your content design in Divi 5, the Loop Builder is where you start.

The post How to Use the New Loop Builder in Divi 5 (With Examples) appeared first on Mark Hendriksen.

Looking to add a smooth, scroll-triggered image transition to your Divi site? In this tutorial, I’ll show you how to create a sticky image scroll reveal effect in Divi 5 — perfect for storytelling, product features, or portfolio layouts.

What We’re Building

You’ll create a layout with text on the left and a sticky image on the right.
As the user scrolls down the page, the image stays in place, but at key points, it switches to a new image — like magic.

Step 1: Set Up the Layout

1. Add a new section and choose a 50/50 two-column layout.
2. Open the section settings and set the background color to black.

Step 2: Add Text to the Left Column

In the left column:

1. Add a Heading Module.
   • Set it to H2
   • Change the text color to white
2. Add a Text Module underneath.
   • Font size: 16px
   • Line height: 1.8
   • Choose a readable color (white or light gray)
3. Add a Button Module.
   • Enable Use Button Styles
   • Background: blue
   • Text color: white
   • Text size: 16px
   • Border radius: 25px
   • Border width: 0px
   • Padding: 7px top & bottom, 20px left & right

Step 3: Style the Row and Column

1. Open the Row Settings and set the layout to Flex.
2. Do the same in the left column: enable Flex and set Justify Content to Center — this vertically centers your content.
3. Under Sizing, change the height unit to VH and set it to 75. This makes the column 75% of the screen height.
4. Now duplicate this row twice, so you have three rows in total.

Step 4: Add the Sticky Image

In the right column of the first row:

1. Add a Group Module.
2. Under the Advanced tab > Scroll Effects, set:
   • Sticky Position: Stick to Top
   • Sticky Offset: 50px
   • Bottom Sticky Limit: Section
3. Inside the Group Module, add your first Image Module (e.g., 600x800px).
   • Set a clear Admin Label like “Image 1”
4. Duplicate the image twice to create Image 2 and Image 3.
   • Switch to Wireframe View so you can easily select each stacked image
   • Replace each image file
   • Rename the Admin Labels to “Image 2” and “Image 3” for easy targeting

Step 5: Add Scroll Triggers to Show/Hide Images

We’ll now use Divider Modules to control when each image appears — based on scroll position.

First Row – Show Image 1

1. In the first row, add a Divider Module at the top of the left column.
2. Go to Visibility and disable Show Divider.
3. In the Advanced tab > Interactions, add these settings:
   • Trigger: Viewport Enter
   • Action: Show Element
   • Target: Image 1

Then, add two more interactions to hide the other images:

• Viewport Enter → Hide Element → Target: Image 2
• Viewport Enter → Hide Element → Target: Image 3

Second Row – Switch to Image 2

1. In the second row, add a Divider Module just below the button.
2. Hide it under Visibility.
3. Under Interactions, add:
   • Hide Element → Image 1
   • Show Element → Image 2
   • Hide Element → Image 3

Third Row – Switch to Image 3

1. In the third row, add another Divider Module below the button.
2. Hide it from view.
3. Then add:
   • Hide Element → Image 1
   • Hide Element → Image 2
   • Show Element → Image 3

Step 6: Preview the Result

Now, save your layout and preview it on the front end.

As you scroll, the image on the right should stay sticky, with a 50px offset from the top, and change as each row comes into view.

Step 7: Mobile Considerations

This effect works great on desktop, but not on mobile.
Here are two options:

1. Hide the sticky image and dividers on mobile using visibility settings.
2. Or create a mobile-friendly version of the section, and hide it on desktop.

You’re Done!

That’s it — you’ve just built a sticky scroll-reveal image layout in Divi 5!

It’s a stylish and engaging way to show visuals while keeping your layout interactive and clean.

Want more Divi 5 tutorials? Let me know what you’d like to learn next!

The post How to Create a Sticky Image Scroll Reveal Effect in Divi 5 appeared first on Mark Hendriksen.

Divi 5 is still in alpha, but it already brings some exciting new features — especially the powerful interaction options. In this post, I’ll walk you through how to create an interactive service or project box using Divi 5, with smooth hover animations and a clean, modern design.

What You’ll Learn

• How to download and import a pre-built layout
• How to customize images and content
• How the new Divi 5 interaction system works
• How to add hover effects using custom CSS

Step 1: Download the Layout

To get started, log in or sign up below.

Create a free account

Get Access to All of My Free Resources

Join the free membership and start downloading my layout packs

Join the Free Membership

1. Log in or create a free account
2. Click on the “Free Membership” section
3. Scroll down and download the Interactive Boxes layout
4. Unzip the folder — inside you’ll find the .json layout file

Step 2: Import the Layout into Divi Library

1. Go to your WordPress Dashboard
2. Navigate to Divi > Divi Library
3. Click “Import & Export”
4. Upload the downloaded .json file

Step 3: Add the Layout to a Page

1. Open the page where you’d like to use the interactive boxes
2. Enable the Divi Builder
3. Click the blue “+” to add a new section
4. Go to the “Add From Library” tab
5. Select the “Interactive Boxes” layout

Step 4: Replace Images and Content

1. Open the row, then a column
2. Go to Background > Image tab
3. Replace the placeholder with your own image (recommended size: 600x800px)
4. Repeat for each column

Edit Hover Content:

If you can’t click the hover content in the Visual Builder, switch to Wireframe View.

1. Open the Image Module inside the hover group (recommended size: 500x281px)
2. Update the Heading, Text, and Button modules to your content

Step 5: Add Custom CSS

In Wireframe View, you’ll see a Code Module that contains the custom CSS.

You can either:

• Leave it there, or
• Move it to Divi > Theme Options > Custom CSS to keep your layout clean

To move it:

1. Copy everything between the <style> tags
2. Paste it into Divi > Theme Options > CSS
3. Delete the original Code Module from the layout

Step 6: How the Hover Interaction Works in Divi 5

Divi 5 introduces new interaction options that let you add advanced behavior without third-party tools. Here’s how this effect works:

On Mouse Hover (In):

• Target: The group module with image, text, and button
• Action: Add attribute
• Attribute Name: class
• Attribute Value: cb-show

This adds the cb-show class on hover, which triggers the CSS animation.

On Mouse Hover (Out):

• Same setup, but this time it removes the cb-show class

The CSS handles the slide-in and fade effect, while the interaction just toggles the visibility.

Final Thoughts

Even though Divi 5 is still in early development, the new interaction features open the door to building creative, interactive components with ease.

This tutorial shows just one possibility — imagine the animations, toggles, and dynamic sections you could create once Divi 5 is fully released.

The post How to Create Interactive Service Boxes with Hover Effects in Divi 5 appeared first on Mark Hendriksen.

Divi 5 has finally added native Flexbox support, and it’s a game changer for layout control in the Divi Builder.

In this article, we’ll walk through what Flexbox is, how it’s implemented in Divi 5, and show several practical examples — from simple column alignment to real-world layout scenarios.

What Is Flexbox?

Flexbox, or Flexible Box Layout, is a powerful CSS layout model that allows items within a container to automatically adjust and distribute space. It’s perfect for:

• Aligning items horizontally or vertically
• Creating responsive layouts
• Evenly spacing elements
• Wrapping content across lines

With Divi 5, you can now apply Flexbox directly within the Visual Builder — no need for custom CSS.

Getting Started with Flexbox in Divi 5

You’ll find the Flexbox settings under the Design tab of Rows and Columns.

1. Open the Row or Column settings.
2. Go to the Design tab → Layout.
3. Enable the Layout Style toggle and choose Flex.
4. New Flexbox options will appear, including:
   • Layout Direction (Row/Column)
   • Horizontal & Vertical Gaps
   • Justify Content
   • Align Items
   • Layout Wrapping

Let’s look at some practical examples.

Example 1: 3-Column Layout

The Setup:

• A row with 3 columns, each containing a Text Module.
• Row and columns have background colors to show structure.

Steps:

1. Set the Row to Flex in the Design tab.
2. Adjust the Horizontal Gap to control space between columns.
3. Switch Layout Direction to Column to enable Vertical Gap.
4. Open a Column, enable Flex, and use Justify Content and Align Items to position the text.
5. On the Row level, use Align Items to control vertical alignment across columns.

Result: Precise control over spacing and vertical alignment — no custom CSS needed.

Example 2: Aligning Buttons Horizontally

The Setup:

• A one-column row with three button modules stacked vertically.

Steps:

1. Set the Row and then the Column to Flex.
2. Change Layout Direction to Row.
3. Use Justify Content to center the buttons or space them evenly.

Result: Buttons appear side-by-side, perfectly aligned.

Example 3: Flex Wrapping

The Setup:

• A one-column row with eight text modules, each 200×200 pixels.

Steps:

1. Set the Row and Column to Flex.
2. Change Direction to Row. All boxes line up in one long line.
3. Enable Layout Wrapping.
4. Use Wrap Alignment and Align Items to center and position the wrapped boxes.

Result: The boxes wrap onto new lines and remain evenly spaced and centered.

Live Example 1: Text + Image Layout

The Setup:

• Section with Text on the left, Image on the right, and two buttons under the text.

Steps:

For buttons:

• Enable Flex on the row and text column.
• Buttons align side by side automatically.
• Use Horizontal Gap to adjust spacing.

For centering layout:

• On the row level, set Align Items to Center.

Result: Text and image are perfectly centered, and the buttons are aligned.

Live Example 2: Header with Logo and Call to Action

The Setup:

• Left column: Logo
• Right column: Text + Button

Steps:

1. Set the Row to Flex and Align Items to Center.
2. Set the Second Column to Flex.
3. Set Layout Direction to Row.
4. Use:
   • Justify Content → End
   • Align Items → Center
   • Horizontal Gap → 10

Result: A professional, centered header with aligned logo and CTA.

Final Thoughts

Flexbox in Divi 5 brings modern layout flexibility directly into the Visual Builder. Whether you’re building a hero section, pricing tables, or responsive buttons — Flex gives you precise control without writing a single line of CSS.

Key Takeaways:

• Enable Flex on both the parent and child elements.
• Use Layout Direction, Justify Content, and Align Items for full control.
• Use Wrapping when you have multiple elements in one line.
• Flex works great for buttons, cards, text/image layouts, and headers.

The post How to Use Flexbox in Divi 5: A Guide with Examples appeared first on Mark Hendriksen.

“The parent theme could not be found. You will need to install the parent theme, Divi, before you can use this child theme.”

Don’t panic — this is a common and easily fixable issue. In this quick tutorial, I’ll walk you through what causes the error and how to solve it step-by-step.

What Does This Error Mean?

This message appears when WordPress can’t locate the Divi theme, which is required for your child theme to function.

There are two common reasons for this:

1. Divi isn’t installed at all.
2. Divi is installed, but its folder name is incorrect.

Let’s go over both solutions.

Solution 1: Divi Isn’t Installed

If you haven’t installed Divi yet, your child theme can’t run. Here’s how to fix that:

Step 1: Check if Divi is Installed

1. Go to your WordPress dashboard.
2. Navigate to Appearance → Themes.
3. Look for the Divi theme.

If Divi isn’t listed, you’ll need to install it manually.

Step 2: Download and Install Divi

1. Log into your Elegant Themes account.
2. Download the Divi.zip file.
3. In WordPress, go to Appearance → Themes → Add New → Upload Theme.
4. Upload the Divi.zip, install it, and click Activate.
5. Then, go back and activate your child theme again.

Solution 2: Divi is Installed, But Folder Name is Wrong

Sometimes, Divi is installed, but WordPress can’t find it because the theme folder name has changed.

This often happens when:

• You download Divi multiple times, and your operating system renames the zip file or folder to something like divi-1.

Step 1: Check the Folder Name

Use your hosting file manager or an FTP client (like FileZilla) and navigate to:

/wp-content/themes/

Look for a folder named something like divi-1, divi(1), or anything similar.

Step 2: Rename the Folder

Right-click the incorrectly named folder and rename it to Divi.

That’s it! WordPress will now correctly detect Divi as the parent theme.

You’re Done!

After following either of these fixes, your Divi child theme should activate with no problems.

If you have any questions, you can leave a comment below.

The post Fixing the “Parent Theme Could Not Be Found” Error in WordPress (Divi) appeared first on Mark Hendriksen.

In this quick tutorial, I’ll explain why it happens and what you should do instead.

The Issue: Options Appear, Then Vanish

When you go to Divi > Theme Customizer, you might briefly see the following options:

• Header & Navigation
• Footer

But within a second or two, they disappear from the sidebar menu. It might seem like a bug or a glitch in your theme settings — but it’s actually expected behavior in Divi.

The Reason: You’re Using the Theme Builder

If you’ve created a Global Header or Global Footer using the Divi Theme Builder (found under Divi > Theme Builder), Divi will automatically override the default Customizer controls.

That means:

• Header & Navigation settings in the Customizer become inactive
• Footer settings are also hidden

The Theme Customizer still initially loads these options, which is why you see them for a brief moment — but Divi removes them once it detects the global templates in use.

What You Should Do Instead

To edit your header or footer:

1. Go to Divi > Theme Builder
2. Click on the Global Header or Global Footer section
3. Use the Visual Builder to make your edits

These global templates give you full design control and replace the default Customizer-based settings entirely.

It’s Not a Bug!

This behavior might look odd, but it’s not a bug or an issue with your site. It’s just how Divi handles theme overrides when using the Theme Builder. Once you understand it, it all makes sense!

Final Thoughts

If you’re wondering why the Header & Footer options disappear in the Divi Theme Customizer, now you know: it’s because of your active global templates in the Theme Builder. Use the builder instead to make changes, and you’re good to go!

Still have questions? Drop them in the comments or check out my [YouTube channel] for more Divi tips and tricks.

The post Why “Header & Footer” Options Are Missing in Divi Theme Customizer appeared first on Mark Hendriksen.