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 .

arrow image 1

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.

arrow image 2

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.

 

SWITCH LINK

 

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 :)

8 Comments

  1. Ada

    Hi, very useful tips! Thank you. Actually I thought I could use this trick to make something like this http://elegantthemes.com/preview/Divi-Builder/ – I mean the images on top over two sections which looks very cool. Unfortunately I am not an expert in css and still have no idea how to get that effect. I’ll very appreciat if you cuold explain that! Thank you 🙂

    Reply
  2. Jorge

    I have achieved this in diferent ways but this is the simpliest… so, great tutorial.

    Regards,
    Jorge Salazar

    Reply
  3. Mike DeVincentis

    Is it possible to make this transparent and use an image in the background at the same time? If the section already has an image, I’d like a transparent arrow pointing down into the next section. Can I just replace the background color with an alpha color making it totally transparent?

    Reply
  4. Noëlle

    Hi, thank you for this helpful tutorial. I was wondering if it’s also possible to make the arrow an extension of the background + coloured overlay used in a full-width header?

    Reply
  5. Jo

    Thanks for this – just what I needed 🙂

    Reply
  6. Rich Gresswell

    I’m new to Divi and beginner with CSS. I want to achieve the effect as illustrated above. In the section settings for custom css where do I add the code – i.e. in the before / main / after boxes? Thank you

    Reply
  7. Eileen

    Hello SJ! Brilliant tutorial. It helped me understand what I was doing, rather than just pasting code. I used it in a local environment just fine. But on my live site, which includes a child theme from your child theme builder, the arrow points up and turns the top section back to white, instead of the predefined color. How can I fix?

    Reply

Trackbacks/Pingbacks

  1. Arrow Section Dividers for the Divi Theme - Gritty Social - […] Check out the full post on Divi Space. […]

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Shares