How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Dec 12, 2019 | Everything Divi for WordPress, WordPress News

By now, we’ve all gotten used to Divi’s built-in section divider. They help add that extra touch to the websites we build. They also serve as a smooth transition between two different sections, but with Divi’s Theme Builder, the approach to creating that transition is slightly different. In this post, we’ll guide you through the steps you have to take to get there. You’ll be able to download the template JSON file for free as well!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Mobile

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-1 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Download The Section Divider Page Template for FREE

To lay your hands on the free section divider page template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

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

1. Go to Divi Theme Builder & Add New Template

Go to Divi Theme Builder

Start by going to the Divi Theme Builder.

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-2 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Add New Template for Pages

There, create a new template by clicking on the plus icon.

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-3 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Select ‘All Pages’ if you want the blending effect to apply on all your pages. You can make the same effect work on other types of templates too, but you’ll have to separately include the top section divider in each one of your templates. Once you’ve created a new template, start building the custom header.

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-4 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

2. Build Custom Header

Section Settings

Gradient Background

Inside the template editor, you’ll notice a section. Open that section and add a gradient background to it.

  • Color 1: #d13232
  • Color 2: #fc6a3c

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-5 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Spacing

Add some custom top and bottom padding to the section as well.

  • Top Padding: 1vw (Desktop), 2vw (Tablet & Phone)
  • Bottom Padding: 1vw (Desktop), 2vw (Tablet & Phone)

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-6 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Z Index

And to make sure your header stays on top of all content, we’ll increase the z index in the visibility settings.

  • Z Index: 99999

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-7 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Add New Row

Column Structure

Continue by adding a new row to your section using the following column structure:

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-8 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Sizing

Without adding any modules yet, open the row settings and modify the sizing settings as follows:

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Width: 100%
  • Max Width: 100%

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-9 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Spacing

Remove all top and bottom padding too.

  • Top Padding: 0px
  • Bottom Padding: 0px

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-10 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Main Element

Last but not least, center your column content and allow the columns to remain next to each other on smaller screen sizes by adding two single lines of CSS code to your row’s main element.

display: flex; align-items: center;

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-11 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Add Image Module to Column 1

Upload Logo

Once you’ve completed all section and row settings, it’s time to add modules, starting with an Image Module in column 1. Upload a logo with a transparent background.

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-12 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Alignment

Then, go to the module’s design tab and change the image alignment.

  • Image Alignment: Center

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-13 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Sizing

Modify the module’s width across different screen sizes too.

  • Width: 6vw (Desktop), 13vw (Tablet), 17vw (Phone)

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-14 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Add Menu Module to Column 2

Select Menu

In the second column, we’ll need a Menu Module. Select a menu of your choice.

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-15 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Remove Background Color

Continue by removing the module’s background color.

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-16 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Layout

Move on to the design tab and change the layout.

  • Style: Left Aligned
  • Dropdown Menu Direction: Downwards

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-17 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Menu Text

Next, style the menu text accordingly:

  • Menu Font: Oswald
  • Menu Font Weight: Light
  • Menu Font Style: Uppercase
  • Menu Text Color: #ffffff (Desktop), #202332 (Tablet & Phone)
  • Menu Text Size: 0.8vw (Desktop), 2vw (Tablet), 2.5vw (Phone)
  • Menu Letter Spacing: 0.1vw

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-18 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Dropdown Menu

Change the dropdown menu line color in the dropdown menu settings too.

  • Dropdown Menu Line Color: #ffffff

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-19 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Icons

And complete the module’s settings by using a white hamburger menu icon color.

  • Hamburger Menu Icon Color: #ffffff

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-20 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Add Button Module to Column 3

Add Copy

On to the last column! There, the only module we’ll need is a Button Module. Add some copy of your choice.

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-21 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Alignment

Move on to the module’s design tab and change the button alignment.

  • Button Alignment: Center

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-22 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Button Settings

Continue by styling the button in the button settings.

  • Use Custom Styles For Button: Yes
  • Button Text Size: 0.6vw (Desktop), 1vw (Tablet), 1.5vw (Phone)
  • Button Text Color: #000000
  • Button Background Color: #FFFFFF
  • Button Border Width: 0px

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-23 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

  • Button Border Radius: 100px
  • Button Letter Spacing: 2px
  • Button Font: Open Sans
  • Button Font Weight: Bold
  • Button Font Style: Uppercase

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-24 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Spacing

And complete the module’s settings by adding some custom padding across different screen sizes.

  • Top Padding: 0.8vw (Desktop), 1.6vw (Tablet), 2.2vw (Phone)
  • Bottom Padding: 0.8vw (Desktop), 1.6vw (Tablet), 2.2vw (Phone)
  • Left Padding: 1.5vw (Desktop), 2.5vw (Tablet), 3.5vw (Phone)
  • Right Padding: 1.5vw (Desktop), 2.5vw (Tablet), 3.5vw (Phone)

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-25 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

3. Build Custom Body & Add Top Divider

Once you’ve completed the custom header of your template, go ahead and start building the custom body.

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-26 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Section Settings

Top Divider

You’ll, again, notice a section on the page. Open that section and add a top divider to it.

  • Divider Style: Find in List
  • Divider Color: #fc6a3c
  • Divider Height: 6vw
  • Divider Horizontal Repeat: 15x
  • Divider Flip: Vertical
  • Divider Arrangement: On Top Of Section Content

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-27 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Spacing

Move on to the section’s design tab and remove all default top and bottom padding.

  • Top Padding: 0px
  • Bottom Padding: 0px

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-28 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Add New Row

Column Structure

Continue by adding a new row to your section using the following column structure:

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-29 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Sizing

Open the row settings and change the sizing settings as follows:

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Width: 100%
  • Max Width: 100%

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-30 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Spacing

Remove all default top and bottom padding too.

  • Top Padding: 0px
  • Bottom Padding: 0px

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-31 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Add Post Content Module to Column

Now, to make all your page content show up, you’ll need to add a Post Content Module to your row. This module represents the layout you’ve built inside the page itself using Divi. If you’re adding this transition to a product page, for instance, a template where dynamic content is involved, a different approach takes place. The only important thing to remember is that you’ll have to add a top divider to the first section of your template’s body. Make sure the color of your divider is the same as the color used for your global header background.

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-32 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

3. Save Builder Changes & View Result

Once you’ve completed the body of your template, you can save the changes and view the outcome on your website!

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-33 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-34 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Desktop

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Mobile

how-to-blend-your-header-body-using-divis-post-content-module-section-dividers-1 How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers

Final Thoughts

In this post, we’ve shown you how to blend your template’s header and body using Divi’s section dividers and the Post Content Module. The divider transition immediately applies to all your pages. You were able to download the JSON file for free as well! If you have any questions or suggestions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.


Source

eHost managed wordpress hosting



We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.