Shape Dividers

Shape Dividers are a beautiful addition to your containers to show shapes on top and/or bottom of them.

Here’s an Example with Bottom Divider

Mauris vitae posuere quam, eget euismod metus. Sed pharetra facilisis vehicula. Suspendisse lacinia diam a dictum blandit. Sed felis libero, vestibulum vel dictum vitae, lobortis in dui. Etiam consectetur leo quis bibendum sodales. Etiam feugiat, metus at ornare aliquam, orci libero luctus justo, ac eleifend metus ex nec dolor. Donec et luctus dui, vitae luctus justo. Donec nibh nisl, gravida nec velit a, condimentum bibendum arcu. Vestibulum lacinia ac tellus vitae maximus. Praesent nec ipsum magna. Donec faucibus pellentesque faucibus. Nulla facilisi. Phasellus vitae molestie diam. Nulla posuere dapibus dolor lobortis tempor.

<- Gutenberg Editor View

You will also notice that container row has a bottom padding of 100px, which is the same value of divider’s height.

It’s good to sync those values so content doesn’t look cut off if the divider is too high.

In case you want the divider stay on top of content, enable On Top of Content

Image is behind the divider

Was this helpful to you?