New Shape Divider for Brizy

RazielKanos14. 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 🙂

4.5 2 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x

Hey!

Would you like to know what I am currently working on?

We use cookies to allow us to better understand how the site is used. By continuing to use this site, you consent to this policy. Click to learn more