New Shape Divider for Brizy
RazielKanos – 14. March 2020 –
2 min read
What are Shape Dividers?
The Shape Divider is a graphic that divides the content elements of one of these elements. It is often found between sections on websites, and Brizy itself offers the possibility to set an upper and/or lower Shape Divider in the block settings.
These Shape Dividers are not direct graphics but code. Therefore they are super small and do not really cause longer loading times.
How to use Shape Divider in Brizy?
Currently this is only possible by manually copying the code into a text field and then manipulating it with CSS.
Step 1 – CSS Code
.divider_block svg {
position: relative;
bottom: 0;
left: 0;
width: 100%;
height: 200px;
fill: #ff0000;
}
Copy this CSS code into the WordPress theme, into the Custom CSS section at Brizy Cloud or into a corresponding plugin.
The color of the divider can be checked by entering a color code in the last character of the "fill" field. If you wish you can also send a RGB format here.
If the Diver shape you have chosen is now upside down, you have to insert a "transform: scale(-1,-1);" before the last "}". If you want to use the Divider at the top, dip the "bottom" with a "top"..
Step 2 – Add to your page
Create a new block in which the divider should be displayed. Delete all contents and set all Margin & Padding Settings to 0. Also the width of the block should be changed from the default "Boxed" to "Full.
Step 3 – CSS Class
In the advanced settings set the CSS class to "divider_block“
Step 4 – Shade Divider done
Final creates a text element, and copies the divider code – done
Shape Divider for columns?
The great thing about custom dividers is that you can also use them in a column to give a picture a more exciting look.
To achieve this, the code does not even need to be adapted. The only difference to the steps from above is that this time you can add a CSS class to the column in the advanced settings, so you can insert code from above.
Code Generator
If you like to play around with generators, you can create a lot of additional dividers on this page. GetWaves is a free service that generates the appropriate SVG code.
Still have Questions?
Trow me a line, and I will see if I can hep you 🙂
