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.

Quick Setup Guide

While the video goes into detail, here’s a short written overview to help you get started quickly:

How to Download the Free DiviCart Layout Pack

You can create a free account with the link below “Join the Free Membership”, or if you already have a free account, then you can log in here.

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

From your membership area, you can download DiviCart. Once downloaded, unzip the folder. Inside, you’ll find 4 JSON files that you’ll import into different parts of your Divi site.

How to Install DiviCart in WordPress

To install the layout pack, follow these key steps:

Go to Divi > Theme Options. Click on the import/export options (up/down arrow).
Click on Import and upload DiviCart Theme Options.json.

Go to Divi > Theme Builder. Click on the import/export options.
Click on Import and upload DiviCart Theme Builder Templates.json.

Go to Divi > Theme Customizer. Click on the import/export options (up/down arrow).
Click on Import and upload DiviCart Customizer Settings.json.

Go to Divi > Divi Library. Click on the import/export options.
Click on Import and upload DiviCart Builder Layouts.json.

Set Up Pages & Menu

• Create and publish pages for Home, About, Blog, and Contact using saved layouts
• Create a main menu and assign your pages
• Add a second menu for the cart icon

Configure Shop Settings

• Adjust WooCommerce pages under WooCommerce > Settings
• Set image sizes in Theme Customizer
• Create product attributes (Size, Color), and add your first product
• Use variations and assign images to each color option

Add Filters and Customize Layout

• Create a custom sidebar with product filters
• Tweak custom CSS in Theme Options if needed (colors, borders, mobile icons, etc.)

The post Free Divi Layout Pack: DiviCart Full Installation Video appeared first on Mark Hendriksen.

If you’re using Divi 5, you now have access to one of CSS’s most powerful tools for responsive design: the clamp() function. In this tutorial, we’ll walk through how Divi 5 uses clamp() natively, how to inspect and customize it, and how to create global variables that make your responsive workflow faster and more consistent.

What is CSS clamp()?

The clamp() function allows you to define a responsive value that adjusts between a minimum and maximum range based on the viewport width. The syntax looks like this:

font-size: clamp(1rem, 2vw, 2rem);

In this example:

• 1rem is the minimum value
• 2vw is the preferred (fluid) value
• 2rem is the maximum value

This means your font size will grow and shrink with the screen size, but never go below 1rem or above 2rem.

How to Use clamp() in Divi 5

Under any font size setting in the Visual Builder, you can now select clamp() directly from the dropdown.

• Click into a module’s Design > Text > Text Size settings.
• Open the dropdown next to the unit (e.g., px, em) and choose Clamp.
• You’ll then be able to set: Minimum value (e.g., 2rem), Preferred fluid value (e.g., 6vw), Maximum value (e.g., 50px).

Divi will apply your chosen clamp() formula directly, giving you fine-tuned control without needing custom code.

Creating Global Variables with clamp()

Divi 5 also lets you define global variables with clamp() values, making it easy to reuse consistent sizing across your site.

To create a global variable:

1. Click the global variable icon in the design settings.
2. Go to the Numbers tab and click Add Global Number.
3. Name your variable (e.g., h1).
4. In the value field, select Clamp and enter your values.
5. Click Save Variables.

Now, when you adjust the font size for any module, you can select your h1 variable to apply consistent sizing. If you ever want to change it, just update the variable and all linked modules will update too.

Conclusion

The clamp() function in Divi 5 gives you elegant, code-free control over responsive typography and layout spacing. Whether you’re customizing manually or using global variables, clamp() simplifies your workflow and ensures consistency across breakpoints.

Want to see it in action? Watch the full video tutorial here.

Have questions? Drop a comment below. Thanks for reading!

The post How to use CSS clamp() in Divi 5 appeared first on Mark Hendriksen.

Whether you’re a seasoned web designer or just getting started, this guide will walk you through each step of the process.

Divi Customizer Footer Options Disappeared?

Maybe you have already noticed it but the Footer Options in Divi > Theme Customizer are gone. You might see them briefly but then they disappear. This is normal when you have enabled the Global Footer the options in the Theme Customizer are not needed anymore because you can now make all your edits in the Theme Builder.

Footer Examples For Inspiration

I will give you some extra footer examples for inspiration.

Grow extended

In this design, I created a 3 column structure with a dark blue background. I used some slighter lighter blue dividers and for the first column a right border. In the first column, I placed the logo + contact info, and social media icons. In the second and third columns, I placed quick navigation and the services pages. At the top of this footer, I created a horizontal email opt-in.

Visit Website

Photelo

In this website’s footer, I used 2 rows. The top row is a 4 column structure, within each column an image module. The bottom row is a 1 column structure with 2 texts and 1 social media module. I place a background image in the section.

Visit Website

Valliant

This site’s footer uses a 4 column structure. In the first column, I used an image module for the logo and 3 blurb modules. In between each blurb module I used a divider module for the thin line. The second and third column is created with text modules and I also used here a divider module for the line. In the fourth column, I placed a social media module and an email opt-in.

Visit Website

You Might Also Like…

• How To Edit The Footer In Divi
• How To Center Divi Footer Credits

The post How To Create a Custom Divi Footer appeared first on Mark Hendriksen.

Step-by-Step Guide to Creating a Custom Divi Header

In this tutorial, I provide a detailed, step-by-step guide to creating a custom Divi header. From initial setup to final touches, every step is explained with clear instructions and screenshots.

Before I jump into the step-by-step process, let’s take a sneak peek at the final result.

This is the header we are going to create. It features a top bar with three columns: social media icons on the left, a tagline in the middle, and some text links on the right. Below the top bar, you’ll find our logo on the left, the menu in the middle, and a call-to-action button on the right.

Prefer watching over reading? Check out my comprehensive YouTube video tutorial below. In this video, I walk you through the entire process, making it easy to follow along and implement the steps on your own site.

Step 1: Add Global Header

Go to Divi > Theme Builder and click on Add Global Header.

Then click on Build Global Header.

Step 2: Section Settings

Open the section and go to the Design tab.

Spacing

Set the top and bottom padding to 0px.

Go to the Advanced tab and under CSS Class place custom-header

Step 3: First Row

Add a new row for this Section and choose the 1/4 – 1/2 – 1/4 layout.

Open this row and under Background set a color. I use color code #16264a.

Go to the Design tab.

Sizing

Enable “Use Custom Gutter Width” and set it to 0.

Set the Width and Max-Width to 100%.

Spacing

Set the top and bottom padding to 5px.

Set the left and right padding to 25px.

Go to the Advanced tab and under CSS Class place custom-top-row

Step 4: Social Media Module

Place a social media follow module in the first column.

Open this module and place your social media networks here.

Then open each social media network and make the background color transparent.

Go back to the social media module settings and switch to the Design tab.

Alignment

Center the alignment for tablet and mobile.

Icon

Enable “Use Custom Icon Size” and set the size to 13px.

Go to the Advanced tab and place the class custom-social

Step 5: Text Module Middle Column

Place a text module in the middle column.

In the text field place your text.

Go to the Design tab.

Text

Set the text font style to Uppercase.
Set the text color to white.
Set the text letter spacing to 1px.
Set the text alignment to the center.

Step 6: Text Module Right Column

Place a text module in the right column.

Place your text links in the body field.

To create a vertical line hold ALT, then press 1, 2, and 4.

Go to the Design tab.

Text

Set the text color to white.
Set the text alignment to right.
Set the alignment to center for tablet and mobile.

Switch to the Link tab and set the link color to white.

Step 7: Second Row

Add another row for this Section and choose the 1/4 – 1/2 – 1/4 layout.

Open this row and under Background set the color to white.

Go to the Design tab.

Sizing

Enable “Use Custom Gutter Width” and set it to 0.

Set the Width and Max-Width to 100%.

Spacing

Set the top and bottom padding to 15px.

Set the left and right padding to 25px.

Box Shadow

Under Box shadow select the third option.

And make the shadow color rgba(0,0,0,0.1)

Go to the Advanced tab and under CSS Class place custom-menu-row

Visibility

Under visibility check disable on phone and tablet.

Scroll Effects

Set the sticky position to “Stick to Top”. For tablet and mobile, I set this to “Do Not Stick”

Step 8: Image Module

Place an image module in the first column of the second row.

Open this module and place your logo in it.

Open the Link tab and place / in the link field. This will redirect the logo to your home page.

Step 9: Menu Module

Place a menu module in the middle column.

Assign your menu.

Go to the Design tab.

Layout

Under style choose Centered.

Text

Set the active and menu text color to black.
Set the font weight to semi-bold.
set the font size to 18px.

Dropdown menu

Set the dropdown menu line color to #910d0d

Go to the Advanced tab and under CSS Class place custom-menu.

Step 10: Button Module

Place a button module in the right column.

Place a title for your button.

Go to the Design tab.

Alignment

Under alignment choose right.

Button

Enable “Use Custom Styles For Button”.
Set the font size to 16px.
Set the button text color to white.
Set the background color to #910d0d.
Set the border width to 0px.
Set the button font-weight to semi-bold.
Set the button font style to uppercase.
Disable the show button icon.

Spacing

Set the top and bottom padding to 8px.
Set the left and right padding to 20px.

Step 11: Tablet & Mobile Row

Add a new row and use a 1 column structure.

Open the row settings and go to the Design tab, under sizing set the width and max-width to 100%.

Spacing

Set the top, bottom, left, and right padding to 15px.

Go to the advanced tab and under Visibility check Desktop.

Step 12: Menu module for tablet and mobile

Add a menu module to this row.

Content

Assign your menu.

Logo

Place your logo here.

Go to the Design tab.

Menu Text

Set the active and menu text colors.
Set the font size to 16px.

Dropdown Menu

Set the dropdown menu line color.

Icons

Set the hamburger menu icon color.
Set the hamburger icon size to 40px.

Spacing

Set the bottom margin to 15px.

Step 13: Button Module for Tablet and Mobile

Duplicate the button module we created earlier and drag it below the menu for tablet and mobile.

Open this button module and we are going to change the alignment.

Alignment

Change the alignment to center.

Go to the Advanced tab

Go to the Advanced tab and under CSS Class place button-mobile

Step 14: Add Custom CSS Code

Now we only have to place some CSS and jQuery code.

Go to Divi > Theme Options > CSS

And place the following in there:

@media screen and (min-width: 981px) {
.custom-menu-row,
.custom-top-row {
  display: flex;
  align-items: center;
  justify-content: flex-end; 
}

/* #### Dropdown Menu #### */ 

.custom-menu li li a { 
  border-bottom: 1px solid #e5e5e5; /* #### Dropdown border bottom #### */ 
  font-weight: 600 !important; /* #### Dropdown font weight #### */ 
  font-size: 15px !important; /* #### Dropdown font size #### */ 
}
  
.custom-menu li li:last-child a { 
  border-bottom: 0px solid #e5e5e5; /* #### Dropdown border bottom #### */ 
}
  
.custom-menu ul.sub-menu {
  padding: 0px 0 0 0 !important;
  border-top-width: 2px; /* #### Dropdown border top width #### */ 
}

.custom-menu ul.sub-menu ul {
  padding: 0px !important;
}

.custom-menu li li ul {
  top: -2px !important;;
}

.custom-menu  li li {
  padding: 0px !important;
}

.custom-menu li li a {
  padding: 6px 20px;
  width: 240px !important;
}}

.custom-social li  {
  margin-bottom: 0px;
}

.button-mobile {
	width: 100%;
}

@media screen and (max-width: 980px) {
.custom-top-row .et_pb_column {
  margin-bottom: 0px !important;
}}

/* #### Collaping Mobile Menu #### */

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after {
	color: #ffffff; /* Icon color */
	background: #16264a; /* Icon background color */
	font-size: 22px; /* Icon size */
	top: 10px;
	position: relative;
	font-family: "ETModules";
	content: '\33';
	border-radius: 4px;
	padding: 1px 2px 1px 0px;
}

.et_mobile_menu .menu-item-has-children>a {
    font-weight: 400 !important; 
}

ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open>.mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open>.mobile-toggle-icon::after {
	content: '\32';
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon {
	width: 44px;
	height: 100%;
	padding: 0px !important;
	max-height: 44px;
	border: none;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color: transparent;
}

ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative;
}

.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}

ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
}

ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon {
	text-align: center;
	opacity: 1;
}

Step 15: Add jQuery Code

For the collapsing mobile menu we need to add some jQuery code.

Go to Divi > Theme Options > Integration > Add code to the < head > of your blog

Place the following in here:

<script>
jQuery(function($) {
    $(document).ready(function() {
        $("body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu  li.page_item_has_children").append('<a href="#" class="mobile-toggle-icon"></a>');
        $('ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon, ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon').click(function(event) {
            event.preventDefault();
            $(this).parent('li').toggleClass('mobile-toggle-open');
            $(this).parent('li').find('ul.children').first().toggleClass('visible');
            $(this).parent('li').find('ul.sub-menu').first().toggleClass('visible');
        });
        iconFINAL = 'P';
        $('body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children').attr('data-icon', iconFINAL);
        $('.mobile-toggle-icon').on('mouseover', function() {
            $(this).parent().addClass('active-toggle');
        }).on('mouseout', function() {
            $(this).parent().removeClass('active-toggle');
        })
    });
});
</script>

The post How to Create a Custom Divi Header appeared first on Mark Hendriksen.