Section divider button

by Andras Guseo | The divi magazine © 2015

This is an example page to show how the section divider button (secdiv) can look like in Divi and explains how to do it.

Please note, this tutorial was created with Divi 2.3, thus it might not work properly with Divi 2.4 and later versions. You can find the 2.4+ version here.

What is a section divider button or secdiv?

It is an icon usually in a full color circle or framed by a circle and is positioned between two clearly distinguishable sections on a page.

The user can most likely click the icon in which case the page will automatically scroll down to hide all the sections above and make the next section visible on the top of the page.

It is used for making navigation on longer pages easier and for decorative purposes.

 

You can see the first here below, a white double arrow in a purple circle. Click on it and see what happens.

The solution is already used at:

Do you want your site to be listed?

Sample

You can see the first here below, a white double arrow in a purple circle. Click on it and see what happens.

This Section has no secdivs.

How is it done in Divi?

Unfortunately Divi doesn’t have this built in, but it is fairly easy to do. Well, you can have section dividers in Divi out-of-the-box as well, but with limitations. You either need to use single color background, thus it cannot be on the line between two sections, or you need to create images which will increase the load time of your page.

In my method I use the Blurb module and some custom CSS, which I will explain here.

This Section has a top secdiv ...

… with different circle color then any of the backgrounds.

Basics

Since it is called a section divider you will need at least two sections on a page built with the page builder.

For creating it we will use a Blurb module in a row with 1 column. Put only the Blurb module in the row, and nothing else.

I also did some experimenting with having 2 secdivs beside each other (one row, two or more columns), it should work, however this example hasn’t been thoroughly tested with it. You can see a working sample at the bottom of this section.

But now comes the question: Where should it be? In the first row of the section or the last?

The answer is: it can be any.

If the secdiv has the same background color as the section below it, then having it on the top is better. And obviously works the other way around as well: same color as section above, then put it to the bottom. This way if you need to reposition the section on your page, you don’t need to adjust the secdivs colors and so on. (This section has a top row secdiv.)

Sometimes you don’t have a choice, e.g. in case of a Fullwidth Section, as that doesn’t support Blurbs. In this case you need to put a secdiv in the last row of the above section and the first row of the below section. (There is a sample below.)

This Section has a top secdiv ...

… with the same circle color as the section background.

Here’s a screenshot showing the Page Bulider with different Sections.

A Section with a secdiv at the top, one with secdiv at top and bottom and a Fullwidth Section with no secdiv.

Setting up the Section / Row

You need to add one or two CSS Classes to the Section where you are going to have the secdiv(s).

If you have a secdiv on the top, then add “has-top-secdiv”  to the CSS Classes.

If you have a secdiv on the bottom, then add “has-bottom-secdiv” to the CSS Classes.

If you have both, than add both with a space inbetween, like “has-top-secdiv has-bottom-secdiv“.

Putting in the appropriate class(es) is really important!

This Section has two secdivs on the top and one on the bottom.

The left top has a Show Circle Border with a white color and takes you down.

The right top takes you to the top.

For the icon & circle color I used the same values.

Note: there were some bugs with the downward pointing arrow! Somehow it ‘broke’ it, but I didn’t investigate.

Here’s a screenshot showing the Section Module Settings for having a secdiv at the top and at the bottom.

This is a Fullwidth Section with a Fullwidth Slider module

Since the Fullwidth Section does not support the Blurb module, we cannot put and secdivs here.

So we need to put one in the last row of the Section above, and one in the first row of the Section below.

The background can be static or parallax, whatever you want.

This slide uses the background of the Fullwidth  Section. The other’s use their own.

Slide 2

Sed eget lorem dapibus, pharetra magna vitae, dignissim dolor. Proin porta at dolor eu sollicitudin. Praesent nec facilisis elit. Nullam gravida enim ac sapien venenatis feugiat. Cras rhoncus magna et libero iaculis cursus. Sed finibus molestie nisl, eu dictum risus tempus eget. Cras sed congue nulla. Duis lacinia lacus ut justo accumsan, id tempor ipsum bibendum. Aliquam tristique odio non congue viverra. Cras vitae diam ac lectus placerat consectetur. Suspendisse sollicitudin neque nisl, eget placerat ante fermentum eu. Sed fermentum eros lorem, eu efficitur ipsum pharetra in.

Slide 3

Quisque facilisis sollicitudin ex eget viverra. Pellentesque rhoncus quam vel ultricies pellentesque. Etiam pretium ut est nec elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vitae accumsan est. Suspendisse tincidunt posuere orci, et efficitur arcu vestibulum ac. Cras fringilla tellus non faucibus facilisis. Nullam rhoncus non ante non suscipit. Nam non accumsan augue.

Setting up the Blurb

Once you have a Blurb in a row, these are the settings I usually use:

Title: leave empty

Url: the ID of the referred section (above or below, depending on the position), e.g. #contact. (The hash (#) is needed here, but it’s not needed when entering the section ID.)

Url Opens: In the same window

Use Icon: Yes (and choose your preferred icon). Note: it doesn’t work well with icons that are encircled.

Icon Color: as preferred

Circle Icon: Yes

Circle Color: as preferred; usually same as the background color of the section below

Show Circle Border: as preferred; usually No for me

Circle Border Color: as preferred

Image/Icon Placement: Top

Image/Icon Animation: as preferred; usually No Animation for me

Text Color & Orientation & Content: not needed

Admin Label: Section divider / as preferred

CSS ID: as preferred, I usually leave it empty

CSS Class: secdiv; Note: this is needed all cases, otherwise the CSS will not work!

 

The CSS Class: secdiv is really important!

This Section has a top and a bottom secdiv.

The secdivs have different background and icon color.

The bottom secdiv has a top-to-bottom animation.

A screenshot showing general settings of a Blurb module.

A screenshot showing general settings of a Blurb module.

The CSS code

All you need now is some CSS code. Copy-paste the below code to the styles.css file of your theme.

(Using a child theme is recommended. You can find more on child themes here, or you can use a plugin like this or this.)

/* Setting the size of the section divider: 64x64 px */
.secdiv span {
    font-size: 32px;
    padding: 16px;
    /* If you change any of these 2 values, then adjustments 
       are needed below as well */
}

/* Remove padding from the top of the section and the top of the top row */
.has-top-secdiv,
.has-top-secdiv .et_pb_row:first-child {
    padding-top: 0;
}

/* Move up the top row so section divider is right in the middle of the two */
.has-top-secdiv .et_pb_row:first-child {
    top: -32px; /* 32 (font size) + 2x16 (padding) / 2 */
}

/* We move the 2nd row up as well to reduce spacing to the original value.
   Should be same value as the one above, but matter of preference */
.has-top-secdiv .et_pb_row:first-child .secdiv {
    margin-bottom: -32px;
}

/* Remove padding from the bototm of the section */
.has-bottom-secdiv {
    padding-bottom: 0;
}

/* Move up the section below so section divider is right in the middle of the two */
.has-bottom-secdiv .et_pb_row:last-child .secdiv {
    margin-top: 32px; /* If you want to add more space between the row content and the secdiv */
    margin-bottom: -32px;
}

/* Removing the bottom margin of the blurb image for the correct positioning */
.has-bottom-secdiv .et_pb_row:last-child .secdiv .et_pb_main_blurb_image {
    margin-bottom: 0;
}

/* Setting the z-index so the secdiv is visible above all sections */
.secdiv > div {
    z-index: 9;
}

/* Adjust the position of the bottom secdiv on smaller resolutions */
.has-bottom-secdiv .et_pb_row:last-child .et_pb_column {
    padding-bottom: 0;
}

This section has a bottom secdiv ...

… with a bottom-to-top animation.

Need help?

This is basically it.

If you need some help in implementing it or you need some adjustments that you are either afraid to do, or don’t know how to do it, then drop me a line.

And don’t forget to like / share this page if you liked it. 🙂

5 + 12 =

css.php
Share This

If you liked this post ...

... then share it with your friends!