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.
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.
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.
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. 🙂
