Here’s a quick tip on adding section dividers to your Divi Theme powered website. This is a great way to add a little something different to your design and can be adapted quite easily for different shapes, sizes and positions.

Going Down

1. Add a CSS class to your section.

Open up your section settings and add “arrow-section” without the quotes, to your CSS Class .

You can now target the entire section by adding “.arrow-section” to your custom CSS. We want to add an arrow after this section so we are going to use the “:after” pseudo element to our new selector. So now it looks like this:

.arrow-section:after {

2. Create something out of nothing.

Now we need to make the square shape that will become our arrow. We can create content with CSS like this:

content: '';
display: block;
position: absolute;
width: 60px;
height: 60px;
background-color: #303030;

The ‘content’ tells the browser there is something here. The ‘display’ tells it to show the content and the ‘width’ and ‘height’ define the size of the content, just be sure to set the background colour to the same as your section. The ‘absolute’ position mean that we can decide where to put it, in relation to it’s last ancestor. In this case, that’s the section.

From here we can position it, flip it 45 degrees so the corner sits as a downward point and make sure it plays well on all the browsers. Like so;

bottom: -30px;
left: calc(50% - 30px);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;

So now the arrow will sit dead centre on any device and hang 30 pixels over the bottom of the section. We’ve also used a z-index of 1 to stop the arrow disappearing behind the section underneath it.

 

 

So all that code together looks like this:

.arrow-section:after {
content: '';
display: block;
position: absolute;
width: 60px;
height: 60px;
background-color: #303030;
bottom: -30px;
left: calc(50% - 30px);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;
}

There you have it! Add this CSS to your ePanel custom code or child theme and you’ll have beautiful section dividers.

Want half circles instead of arrows?

Just add this line of CSS (you can also take out the transform CSS if you want to).

border-radius: 50%;

Going Up?

If you want the arrow at the top of the section, pointing up, you just need to change one line of the CSS.

Replace

bottom: -30px;

with

top: -30px;

Using the advanced CSS options

If you wanted to use the sections Advanced CSS options instead of a child theme or your ePanel, you can just remove the selector and copy the CSS into the ‘After’ section. Like so;

content: '';
display: block;
position: absolute;
width: 60px;
height: 60px;
background-color: #303030;
bottom: -30px;
left: calc(50% - 30px);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;

 

I hope you find this easy to follow. If you use the code, let me know in the comments, I’d love to check it out