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.

 

Please note, this tutorial was created with Divi 2.4.x using the updated functionalities of the Page Builder. If you are looking for the implementation for Divi 2.3 and before, then check out the legacy example here.
Do you want to use Font Awesome icons in your blurb instead of the built in ones? Then check out this article!

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?

Drop me a message

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

Jump to the store

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.

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:

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

7 + 4 =

Last note: This last secdiv has the original font size (48px) for the icon. It’s huuuuge, isn’t it? 🙂

css.php
Share This

If you liked this post ...

... then share it with your friends!