How to create a divider use shapedividers.com

[MulderDSM]

I am trying to implement a CSS wave divider from https://shapedividers.com/?dividerDirection=top&longAxisValue=100&shortAxisValue=90&positionValue=50&flipped=false&animate=false&animLength=10&shapeColor=ffffff&si=1&shapeRatio=false&mobileReady=false

I’ve generated the code :
.shapedividers_com-6029{

overflow:hidden;

position:relative;

}

.shapedividers_com-6029::before{

content:’’;

font-family:‘shape divider from ShapeDividers.com’;

position: absolute;

z-index: 3;

pointer-events: none;

background-repeat: no-repeat;

bottom: -0.1vw;

left: -0.1vw;

right: -0.1vw;

top: -0.1vw;

background-size: 100% 90px;

background-position: 50% 100%; background-image: url('data:image/svg+xml;charset=utf8, ');

}

@media (min-width:2100px){

.shapedividers_com-6029::before{

background-size: 100% calc(2vw + 90px);

}

}

And then this is what I tried but didn’t work:

1. Created a new section, with 1 row/1 column and placed an image element with image that took up the entire section.
2. I added a 2nd row with 1 column and added a DIV element (also tried this with a Raw Content element) and pasted all the code between and and then went to the Customize screen for the row and placed in the CSS selector of shapedividers_com-6029 and saved the page.

I’m not doing something correctly as the page did NOT render with the waves over the photo as expected.

[ruenel]

Hello @MulderDSM,

Thanks for writing in!

To accomplish what you have in mind, you can do the following.
1.) Create a new Section and remove the padding in the Design option.

2.) Insert a Row element and make sure to set the Global Container to 100%.

3.) Use 1 column only and then insert a DIV element inside it.

4.) In your DIV element settings, you will need to add a custom shapedividers_com-6029 since this is the class selector in the given CSS.

5.) And lastly, apply the given CSS in the provide CSS section of the page.

Be advised that custom coding is beyond the scope of our support under our Support Policy. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

I have tested the method above using a different design on my local testing server and this is how it looks like.

Kindly let us know how it goes.

[MulderDSM]

Thank you! What I’ve learned is your image really needs to be a background layer image and not an image placed in a section. Thanks again! Very helpful!

[tristup]

Hi @MulderDSM,

Glad that we are able to help you.

Thanks