This is #4 in a series of cool sectional dividers inspired by the techniques used on tympanus.net. The tips on tympanus.net are pretty much self explanatory when you dig into the stylesheet but may be a little intimidating to non-css folks.
There are just a few things you have to adjust in Divi. So here is a novice-friendly step by step tutorial for creating a rounded split between sections in Divi using only CSS.
Lets Get Started
First thing you need to do is assign a unique CSS Class to the section you would like to have the rounded split on top of.
1. Open the section settings
2. Give it the following CSS Class: roundedsplit
The Magic of CSS
Now lets start to dazzle things up a bit with some CSS.
If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)
Add this CSS.
/*------------------------------------------------*/
/*-----------[Rounded Split - Quiroz.co]----------*/
/*------------------------------------------------*/
/* Rounded center split and bottom rounded */
.roundedsplit::before,
.roundedsplit::after {
position: absolute;
content: '';
pointer-events: none;}
.roundedsplit {
border-radius: 0 0 80px 80px;}
.roundedsplit::before,
.roundedsplit::after {
top: -70px;
left: 0;
z-index: 10;
width: 50%;
height: 70px;
background: inherit;}
.roundedsplit::before {
border-radius: 0 80px 0 0;}
.roundedsplit::after {
left: 50%;
border-radius: 80px 0 0 0;}
Final Touches
1. Now you may notice that the split infringes on the content above it losing some of that padding between the end of the content and the split.
2. So what you will want to do is add a Divider Module after the content in the section above the rounded split.
3. And give the divider a height of about 40
And that’s it!
By the way. I love providing these tutorials for free but for those of you who use these to your financial gain, might you consider buying this poor guy a coffee? Every penny helps me to continue to provide these Divi tutorials free for all to learn and grow 😉
Well that’s all for now. I hope you find this article useful.
Really cool effect and clear tip. Thank you.
Waiting impatiently for another tips about “cloud” and “stamp” and other dividers with “svg” in their code (http://tympanus.net/Development/SectionSeparators/?hc_location=ufi).
Thanks. I cant wait to jump into those as well 🙂
Thanks so much Geno! Love this one too. Is there a way to make it mobile responsive?
Nevermind… Got it.
🙂
Hi Geno. Sometimes, not always, the section over which i add the rounded split have left and right bottom rounded corners. How can I correct that.
I need to look into this still. Sorry for the delay. Some Canadian guy has me working non-stop on his eCommerce website and I dont even have time for my tutorials anymore 😉
Hey wait a minute… aren’t you from…. 😉
Hi Geno,
http://lynnstrauch.com/index.php/custom-css/
It also has a rounded bottom. Not sure how I managed to get that…lol. How do I get rid of it?
Thanks for the tut.
LS
Can you add it back in and then shoot me an email? I will take a look at it.
I was able to get rid of this rounded corners on the bottom by removing
.roundedsplit {
border-radius: 0 0 80px 80px;}
You could also chage the 80 to a 0. It works fine. I don’t know if Geno may have a different opinion.
Thanks Geno!
Nice share. Thanks
Worked like a charm. Awesome Thanks
I know this is now a few years hence – but still appreciate the help on this round bottom problem! thank you.
Do you think it’s possible to add a rounded split to the left or right side of a column
Greetings Geno,
I have a question for you. I’m using the above code and the bottom of the row is rounding as well, so the background of the theme is showing for some reason instead of the color that I’ve chosen for the section. Is there a way to fix this. The site is http://ajcarmicheal.com/robynpeterman/contact
It’s really obvious on the mobile version. I’m using Divi 2.4, but the version before 2.4.5.1 Please advise.
Thanks for all of your help. It’s greatly appreciated.
AJ
Don’t hate me. I figured it out. Please disregard. Thanks again for all of your great work.
AJ
What’s the ‘fix’ as I am still having this issue.
What if I dont want the bottom corners of section rounded? What is the CSS for that? http://tuckeralbin.org/contact
Disregard, I fixed it 🙂
Hi Geno, thanks for the tutorial.. I applied this to this page: http://magnion.theultimatewebmaster.com/ at near the bottom (contact form area)
Why did it also curve the bottom of that section? See the bottom corner of the widget area.. (dark blue area)
Hi Andrew! The rounded corners on the bottom can be removed by commenting out or deleting the following lines of CSS from the tutorial…
.roundedsplit { border-radius: 0 0 80px 80px;}Hi Geno,
I recently stumbled upon your website and am grateful for this as these are some wonderful tutorials. That being said, I am getting quite frustrated with the fact that when I attempt to follow your simple instructions the results don’t seem to show up on my test site. I am @ https://magnawebservices.magnaprototype.com I have attempted to add both your module hover CSS for the testimonial section and this rounded split for the 2nd section. Neither show up. I go Divi -> Theme Options -> Custom CSS. Is there anything that could be preventing this CSS from working that I am not aware of? I have double checked and tripled checked and the instructions were followed to a tee. Any suggestions would be wonderful. THanks for the time and consideration
Try making sure you have cleared all your cache. Always make sure you have cleared your browser cache, any plugin cache, and then your hosting cache.
Hallo, versuche die module mit Bootstrap 4 mit Transparent nach zu bauen. Gelingt mir leider nicht. Dir Seiten werden nicht ausgeblendet. Was mache ich falsch?
Hello, try the modules with bootstrap 4 with transparent to. I not succeed unfortunately. Pages are not hidden friends. What am I doing wrong?