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