Back in September 2022 Divi released a new feature to their page builder called “section dividers”. These can be added to the top and/or bottom of a section to add a more interesting division between two sections instead of just having horizontal breaks.
These were well received but they have one major limitiation: you have to have a colour background for the divider in order to see the divider’s shape. This means you can’t use one of these dividers between two sections effectively, as you can see in the image below.
Another limitation is the fact that these are only available as a module setting in sections, so you can add this divider effect to rows, or even to content modules to create interesting effects between two images, for example.
Like a lot of the Divi tutorials on this site, this one came about by someone asking why they couldn’t use the dividers properly between two sections with background images on a Divi Facebook group, i.e. they’d hit that major limitiation of the section dividers.
Wanting to help them, and also to see if I could actually figure this out, I got my thinking cap on and got to thinking how this could work.
I spent quite a lot of time playing around with the divider options, margins etc. to see if I could actually force the divider to do what they wanted, eventually giving up to work on a completely different solution to their question, as you’ll see below.
CSS clip-path
The CSS clip-path property allows you to specify a specific region of an element to display, with the rest being hidden (or “clipped”) away. The most common use case would to use this on an image, but you’re not limited to using it just on images. You could just as easily apply it to a paragraph for example.
I won’t go into all the detail about the available values etc. – you can read the page linked to above for that – but it was exactly what was needed here: a way to select part of the section to be displayed while hiding the rest, allowing the previous section’s background image to show through.
1. Creating the clip-path
Using your search engine of choice, you can search for “clip path generator”, which will give you a good list of possible generators you can use. I used Clippy, using the elipse shape to create the clip-path shown below.
This gave the following CSS clip-path declaration:
clip-path: ellipse(50% 100% at 50% 100%);
2. Finalising the clip-path
This wasn’t exactly what was being asked for but this was as close as I could get using the online tools, but the initial “50%” value needed to be tweaked to move the curve up closer to the top of the section. The final clip-path declaration was as follows:
clip-path: ellipse(90% 100% at 50% 100%);
3. Add the clip-path
The original question showed an image of the bottom of two sections overlapping the top section, so I added the clip-path declaration to the “Main Element” custom CSS setting for the bottom section, as shown below – this is for a fullwidth section but it’s the same for a normal section.
This gave the following result:
3. Fix the margin
As you can see this has pretty much replicated the built-in section divider which is not what we were aiming for. But – and here’s where this CSS property really comes into play here, if you add a negative margin to the bottom section (I added a negative margin of -110px using the section’s “Spacing” setting) you get the following effect:
As you can see, the clip-path has allowed the background image of the top section to show through, which is exactly the result asked for.
But what about tablets and mobiles?
Good question. From the images below you can see that we need to make some changes as – although working and looking fine on desktop displays – the clip-path and margin settings looked pretty bad on both tablets and mobiles.
1. Edit the clip-path
To get the clip-path to work properly on smaller devices we need to adjust the first percentage value, much like we did with the original clip-path created by the online generator. To get a similar look to the desktop I needed to use a value of “200%”, giving the following clip-path
clip-path: ellipse(200% 100% at 50% 100%);
2. Edit the margin
As expected, the original top margin value of “-100px” was too much for smaller devices. This needed to be changed to “-50px” for both tablet and mobile using Divi’s in-built responsive design settings, giving the following results:
Using clip-path with other modules
As previously mentioned, the other limitation to the built-in Divi dividers is the fact that they’re only available as a design option for sections. No other modules has them available. With clip-path though, you can add the CSS to any module you like.
Here’s an example of using the clip-path with two images, using a clip-path on both images to add an interesting effect.
The possibilities are pretty much endless when it comes to using clip-path but it’s a very simple way of working round the limitations of Divi’s section dividers.
And We’re Done
Here I’ve shown you how to create transparent dividers, something the default Divi section divider can’t do. Also, using this simple solution you can use it on any module you want to, removing the limitation of the Divi divider being for sections only.