How to add shape dividers to any row or column

In this post, I will show you how to add shape dividers to any row or column in your site, as shown in the examples below.

Your content Goes here. Make this text light as we are going to add a background image to this Text.

In the standard section, In design -> dividers -> Bottom

Choose the white color for divider , set the height of your choice (i have chosen 67px)

Divider’s arrangement -> choose on Top of section content

save your work ->right click -> inspect -> copy the highlighted portion which is the url for the dividers background image

code should look like the following which includes the url address(copied in the inspect), mainly: paste this whole code in ->advanced -> Custom Css -> Before :

content: ”;

position: absolute;

background: transparent;

background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI2NXB4IiB2aWV3Qm94PSIwIDAgMTI4MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTEyODAgMy40QzEwNTAuNTkgMTggMTAxOS40IDg0Ljg5IDczNC40MiA4NC44OWMtMzIwIDAtMzIwLTg0LjMtNjQwLTg0LjNDNTkuNC41OSAyOC4yIDEuNiAwIDMuNFYxNDBoMTI4MHoiIGZpbGwtb3BhY2l0eT0iLjMiLz48cGF0aCBkPSJNMCAyNC4zMWM0My40Ni01LjY5IDk0LjU2LTkuMjUgMTU4LjQyLTkuMjUgMzIwIDAgMzIwIDg5LjI0IDY0MCA4OS4yNCAyNTYuMTMgMCAzMDcuMjgtNTcuMTYgNDgxLjU4LTgwVjE0MEgweiIgZmlsbC1vcGFjaXR5PSIuNSIvPjxwYXRoIGQ9Ik0xMjgwIDUxLjc2Yy0yMDEgMTIuNDktMjQyLjQzIDUzLjQtNTEzLjU4IDUzLjQtMzIwIDAtMzIwLTU3LTY0MC01Ny00OC44NS4wMS05MC4yMSAxLjM1LTEyNi40MiAzLjZWMTQwaDEyODB6Ii8+PC9nPjwvc3ZnPg==);

background-size: 100% 65px;

height: 65px;

bottom: 0;

left: 0;

right:0;

Now let’s try this on columns : add two columns and text module just like below

Add the same code -> Row -> advanced-> custom css -> column 1 before -> paste the code -> column 2 before -> paste the code