First, what do I mean by a clickable section divider?

It is an icon usually in a circle which is positioned between two clearly distinguishable horizontal sections on a page. Most of the time the user can click the icon and as a result the page will automatically scroll to a predefined section fo the page. It is used for making navigation on longer pages easier and for decorative purposes as well.

This is a feature which I was missing from Divi, so I decided to create it. Read on to find out how it can be done.

It is fairly easy to create a clickable section divider (secdiv). I used the Blurb module for this as it gives the option to use icons. This way there is no need to create any graphics or plug in extra things which makes the whole thing so much more easy. Only a simple Blurb module needs to be set up with the preferred icon and colors, some CSS code is needed in the style.css file of your Divi child theme, and it works like a charm. Or rather as a section divider. 🙂

Click here to jump to the Example page where you can see the clickable section divider in action and have a detailed description on how to do it for your Divi powered site.

If you liked this example, then don’t forget to like it and share it with others. And come back for more tips and tricks! :)

css.php

If you liked this post ...

... then share it with your friends!