Section divider button
by Andras Guseo | The divi magazine © 2015
All updated to work with Divi 2.7 and above and all settings can be done with the Page Builder!
This is an example page to show how the section divider button (secdiv) can look like in Divi 2.4+ 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 secdiv 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.
Grab the ready layouts from the store for free!!!
Download a layout package of secdivs, import them in your WordPress installation and you will have 2 Sections, 2 Rows and 2 Global Modules in your Divi Library ready for use. No coding needed! (You still might want to read the tutorial below though. 🙂 )
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 is extra hassle and will increase the load time of your page.
In my method I use the Blurb module and custom options for sections, rows and the module, including some minor 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, BUT it is easier if you have it at the top. So plan for that as much as you can.
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 Section 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
With the extended options of the new Page Builder as of Divi 2.4 this has become very easy.
Let’s assume we already have a Section with a couple of Rows and a Blurb in a 1 column layout either in the top row or the bottom row.
Open the options of the Section and depending on where you have the secdiv, set the custom padding to 0. (For a secdiv on the top, set the top padding to 0, and do accordingly for the bottom, if needed.) AND swith on the “Keep custom padding on mobile” option.
Then open the options of the Row and do the same thing. For a secdiv on the top, set the top padding to 0, for a secdiv at the bottom, set the bottom padding to 0. AND swith on the “Keep custom padding on mobile” option.
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:
General Settings:
Title: leave empty
Url: the ID of the referred section, 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: as preferred, I usually leave it empty
Advanced Design Settings
Use Icon Font Size: yes
Icon Font Size: 32px – this gives a nice balance, the original size (48px) I find too large
Custom Margin (for secdiv on top): Top: -41px.
Note: there is a glitch in Divi 2.4 (until 2.4.5.1 for sure), so for a secdiv at the bottom, you cannot use this custom margin setting, as it is being overriden by some CSS declaration. Instead, you need to use the Custom CSS tab, see below.
Custom CSS (for secdivs at the bottom only!)
So, until the glitch is fixed in Divi, add this on the Custom CSS tab:
Main element: margin-bottom: -41px !important;
Blurb image: margin-bottom: 0;
Note on the -41px:
If you use different font size, you will need to adjust this. Calculation is the following:
2x 25px padding + 32px icon size = 82px
You want to move it half way, so divide by 2: 82px / 2 = 41px
In case you use a circle around the secdiv, then add 2x 3px due to the extra 3px wide circle, so it will become 44px.
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.
Something extra when using secdiv at the bottom
In some cases when you use a secdiv at the bottom, the bottom half of it can be covered by the next section. Just like at the top of this Section.
There’s an easy fix to this:
Open the options for the Section which has the secdiv that is covered.
On the Custom CSS tab add to the Main Element: z-index: 99;
If you have several sections with secdivs at the bottom after each other, then the z-index needs to always decrease, so for the next Section it would be 98, then 97 and so on. (This is why I recommend using secdivs on the top. 🙂 )
And one more thing …
I also saw some cases where the secdiv below a full width slider was covered. In this case the z-index didn’t help.
But this does:
Open the options for the Section after the full width slider.
On the Custom CSS tab add to the Main Element: overflow: initial;
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. 🙂
