How to Create Section Chapters Using Divi’s New Design Options

Posted on October 20, 2017 by in Divi Resources | 10 comments

How to Create Section Chapters Using Divi’s New Design Options

In today’s Divi tutorial, we’ll be showing you how you can create stunning section chapters for your website. These chapters serve as a guideline for your visitors. It’ll show them when they are entering another section of a page. Usually, chapters are used in combination with one specific background color throughout all of the sections.

If you are considering using section chapters on your website, this post might be a nice place to get some inspiration. We’re going to show you 4 styles of section chapters that you can easily recreate by following this post.

Result

Before we get into the practical side of the four section chapter styles, let’s take a look at what you can expect from the end result.

Section Chapter Style #1

section chapters

Section Chapter Style #2

section chapters

Section Chapter Style #3

section chapters

Section Chapter Style #4

section chapters

How to Create Section Chapters Using Divi’s New Design Options

Subscribe To Our Youtube Channel

Section Chapter Style #1

section chapter

Row Options

Start by adding a two-column row to the page you’re working on and selecting the left Row Alignment within the Design tab.

section chapters

Scroll down the same tab and make sure you select ‘0px’ for the top, right, bottom and left padding. The reason why we’re doing this is to make the row as small as possible so it won’t take up a lot of place in the section.

Divider Module

In all of our examples, we’ll only be using one of the two columns (depending on the row alignment). If you’re placing your chapter on the left side of your page, choose the left column. Then, add a Divider Module and enable the ‘Show Divider’ option within the Content tab.

section chapters

Move on to the Design tab and use ‘#000000’ as your divider color.

section chapters

Then, open the Styles subcategory and choose ‘Dotted’ as the Divider Style and ‘Top’ as the Divider Position.

section chapters

Next, make sure the following settings apply to the Sizing subcategory:

  • Divider Weight: 3px
  • Height: 23px
  • Width: 62%
  • Module Alignment: Left

section chapters

First Text Module

Once you’ve added the Divider Module, it’s time to add the first Text Module right below it. After choosing the chapter number, use the following gradient background:

  • First Color: rgba(96,150,193,0.16)
  • Second Color: rgba(255,255,255,0)
  • Gradient Type: Radial
  • Radial Direction: Center
  • Start Position: 51%
  • End Position: 51%

section chapters

Then, move on to the Design tab and make the following changes to the Text subcategory:

  • Text Font: Happy Monkey
  • Text Font Size: 53 (Desktop & Tablet), 25 (Phone)
  • Text Color: #000000
  • Text Line Height: 1em
  • Text Orientation: Center

section chapters

Open the Sizing subcategory, choose a width of ‘40%’ and select the center Module Alignment.

section chapters

The last thing this Text Module needs is the following custom margin and padding:

  • Top Margin: -40px
  • Top Padding: 40px
  • Right Padding: 50px
  • Bottom Padding: 40px
  • Left Padding: 50px

section chapters

Second Text Module

Add another Text Module with the following Text subcategory settings:

  • Text Font: Arimo
  • Text Font Size: 19px
  • Text Color: #000000
  • Text Line Height: 1em
  • Text Orientation: Center

section chapters

Scroll down the same tab, use a width of ‘97%’ and enable the center Module Alignment option.

section chapters

Lastly, add a top margin of ‘-15px’ as well.

section chapters

Third Text Module

The last Text Module of the section chapter has the following Text subcategory settings:

  • Text Font: Arimo
  • Text Font Style: Bold
  • Text Font Size: 19px
  • Text Color: #000000
  • Text Line Height: 1em
  • Text Orientation: Center

section chapters

Within the Sizing subcategory, use a width of ‘99%’ and select the center Module Alignment.

section chapters

The last thing you’ll need to do for this section chapter is adding a top margin of ‘-20px’.

section chapters

Section Chapter Style #2

section chapters

Row Options

The second example is located on the right side of the screen. Once again, add a two-column row but choose the right Row Alignment instead.

section chapters

Open the Spacing subcategory and assign ‘0px’ to the top, right, bottom and left padding.

section chapters

Divider Module

Add a Divider Module to the column on the right and enable the ‘Show Divider’ option.

section chapters

We’re going to use the following gradient background for the divider:

  • First Color: rgba(132,132,132,0.61)
  • Second Color: rgba(224,43,32,0.86)
  • Gradient Type: Linear
  • Gradient Direction: 180deg
  • Start Position: 43%
  • End Position: 100%

section chapters

Move on to the Design tab and select ‘rgba(0,0,0,0.26)’ as the divider color.

section chapters

Next, use ‘Solid’ as the Divider Style and ‘Top’ as the Divider Position.

section chapters

Then, open the Sizing subcategory and make the following settings apply:

  • Divider Weight: 3px
  • Height: 11px
  • Width: 68%
  • Module Alignment: Right

section chapters

First Text Module

The first Text Module has the following Text subcategory settings:

  • Text Font: Cantata One
  • Text Font Size: 100px
  • Text Color: #000000
  • Text Line Height: 1.7em
  • Text Orientation: Right

section chapters

Open the Spacing subcategory and use the following custom margin and padding:

  • Top Margin: -95px
  • Top Padding: 40px
  • Right Padding: 50px
  • Bottom Padding: 40px
  • Left Padding: 50px

section chapters

Second Text Module

Add another Text Module and use the following Text subcategory settings instead:

  • Text Font: Arimo
  • Text Font Size: 20px
  • Text Color: #000000
  • Text Line Height: 1em
  • Text Orientation: Center

section chapters

Next, add a top margin of ‘-50px’.

section chapters

Third Text Module

The third and last Text Module of this example has the following Text subcategory settings:

  • Text Font: Lobster Two
  • Text Font Size: 43px
  • Text Color: #000000
  • Text Line Height: 1em
  • Text Orientation: Center

section chapters

Lastly, add a top margin of ‘-30px’.

section chapters

Section Chapter Style #3

section chapters

Row Options

For the third example, we are going to use a two-column row with the following Column 1 gradient background:

  • First Color: #edf000
  • Second Color: rgba(255,255,255,0)
  • Column 1 Gradient Type: Linear
  • Column 1 Gradient Direction: 139deg
  • Column 1 Start Position: 11%
  • Column 1 End Position: 36%

section chapters

Go to the Design tab and select the left Row Alignment.

section chapters

Once again, we’re going to use ‘0px’ for the top, right, bottom and left margin.

section chapters

Divider Module

Now, add a Divider Module to the left column and enable the ‘Show Divider’ option.

section chapters

Open the Background subcategory and use the following gradient background:

  • First Color: #4b61af
  • Second Color: rgba(255,255,255,0)
  • Gradient Type: Linear
  • Gradient Direction: 161deg
  • Start Position: 18%
  • End Position: 38%

section chapters

Open the Design tab and choose ‘#000000’ as the divider color.

section chapters

Within the Styles subcategory, use ‘Solid’ as the Divider Style and ‘Top’ as the Divider Position.

section chapters

Then, make sure the following settings apply to the Sizing subcategory:

  • Divider Weight: 6px
  • Height: 100px
  • Width: 70%
  • Module Alignment: Left

section chapters

First Text Module

Continue by adding the first Text Module right below the Divider Module and choosing the following gradient background:

  • First Color: rgba(131,0,233,0.58)
  • Second Color: rgba(255,255,255,0)
  • Gradient Type: Linear
  • Gradient Direction: 151deg
  • Start Position: 20%
  • End Position: 40%

section chapters

Go to the Design tab and use the following Text subcategory settings:

  • Text Font: Poiret One
  • Text Font Style: Bold
  • Text Font Size: 69px
  • Text Color: #000000
  • Text Line Height: 1.7em
  • Text Orientation: Center

section chapters

Open the Sizing subcategory, use a width of ‘70%’ and select the left Module Alignment.

section chapters

Lastly, use the following custom margin and padding:

  • Top Margin: 124px
  • Top Padding: 60px
  • Bottom Padding: 150px
  • Left Padding: 50px

section chapters

Second Text Module

Go ahead and add another Text Module with the following Text subcategory settings:

  • Text Font: Arimo
  • Text Font Size: 20px
  • Text Color: #000000
  • Text Line Height: 1em
  • Text Orientation: Center

section chapters

Open the Sizing subcategory, select a width of ‘80%’ and choose the left Module Alignment.

section chapters

Lastly, add a top margin of ‘-150px’.

section chapters

Third Text Module

Add the last Text Module to the first column and make sure the following Text subcategory settings apply:

  • Text Font: Arimo
  • Text Font Style: Bold
  • Text Font Size: 20px
  • Text Color: #000000
  • Text Line Height: 1em
  • Text Orientation: Center

section chapters

Open the Sizing subcategory, use a width of ‘80%’ and choose the left Module Alignment.

section chapters

Lastly, choose a top margin of ‘-20px’ and a bottom padding of ’50px’.

section chapters

Section Chapter Style #4

section chapters

Row Options

For the last example, we’re going to use the right Row Alignment again.

section chapters

Then, open the Spacing subcategory and assign ‘0px’ to the top, right, bottom and left padding.

section chapters

First Text Module

This last example doesn’t contain a Divider Module so go ahead and add a Text Module to the left column. Once you’ve done that, choose the following gradient background:

  • First Color: rgba(255,255,255,0)
  • Second Color: #92d84b
  • Gradient Type: Linear
  • Gradient Direction: 55deg
  • Start Position: 25%
  • End Position: 100%

section chapters

Then, go to the Design tab and make sure the following Text subcategory settings apply:

  • Text Font: Cantata One
  • Text Font Size: 220 (Desktop & Tablet), 100px (Phone)
  • Text Color: #f2f2f2 (Match with the section background color)
  • Text Line Height: 1.7em
  • Text Orientation: Right

section chapters

Open the Sizing subcategory, use a width of ‘82%’ and select the right Module Alignment.

section chapters

Lastly, use the following custom padding:

  • Top: 60px
  • Right: 50px
  • Bottom: 60px
  • Left: 50px

section chapters

Second Text Module

Add another Text Module and use the following settings within the Text subcategory:

  • Text Font: Arimo
  • Text Font Size: 20px
  • Text Color: #000000
  • Text Line Height: 1em
  • Text Orientation: Right

section chapters

Open the Sizing subcategory, choose a width of ‘39%’ and choose the center Module Alignment.

section chapters

Lastly, add ‘-130px’ to the top margin.

section chapters

Third Text Module

The last Text Module of this chapter example has the following Text subcategory settings:

  • Text Font: Dancing Script
  • Text Font Size: 45px
  • Text Color: #000000
  • Text Line Height: 1em
  • Text Orientation: Right

section chapters

Open the Sizing subcategory, choose a width of ‘50%’ and select the center Module Alignment.

section chapters

Last but not least, choose a top padding of ‘-30px’ and you’re done!

section chapters

Final Thoughts

In this post, we’ve shown you how you can creatively create and style section chapters on your website. These chapter sections allow you to create a division between sections while using the same background color for each one of the sections. If you have questions or suggestions; make sure you leave a comment in the comment section below!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Featured Image by Kwok Design / shutterstock.com

10 Comments

  1. When I read about this in my email, I thought that this would be a tutorial about how to use Divi to create an experience of reading a book. Instead, I see that this shows us how to create a header that looks like a chapter heading. I would wonder how to organize the rest of the content into the book.

  2. It would have been nice to abe able to down loaded these to add to the library.

  3. Thanks Donjete, I will try it on a new project, greetings

  4. Is there a link you can provide to show the results of this in action?

  5. Hi Donjete,

    Thanks for the guide, I will implement it on my site where I am using Divi.. Thanks

    Rik

  6. Tried it but struggling to keep it consistent on a phone display – are your settings be fully responsive? Mostly the chapter number and the divider line..

  7. I am not sure about this whole concept of where someone (not sure if it’s Mac or Donj) creates something and every step is described.

    1. I don’t know when we start what we’re building or how it will benefit me.
    2. I don’t get told WHY things are done, like adding 0px padding to a module, etc.
    3. When we’re done I really haven’t LEARNED anything. And so, I wonder, if this project is of value, why doesn’t exist as a finished downloadable completed section?

    Generally, I start reading, scrolling slowly as I do. Then I discover I’m just speed-scrolling and then I bail.

    If there’s really value here, I don’t see it. And apparently, I’m not alone because there’s never more a few comments to these.

    Perhaps some reconsideration is called for?

    Oh, and I HAVE TO say this: “…go ahead and…” is superflous.

  8. I have added Number 3 to a site, and really like the appearance, except I would appreciate some guidance on possible paddings or margins to add for the smartphone experience. Has anyone had any luck with getting it to render correctly? Thank you!

  9. Some very clever use of Divi features here. I do wonder if it will all fall apart on mobile though. In fact I’m pretty sure it will.

Leave a Reply

Comments are reviewed and must adhere to our comments policy.

437,821 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest