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.
Your content Goes here. Make this text light as we are going to add a background image to this Text.
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
