Last week we talked about how to create beautiful looking section transitions in Divi. On this week’s blog, we will be talking about a new feature of Divi which is Shape Dividers.
Shape divider is a brand new option that gives you the ability to add custom shapes and effects to your pages, creating dynamic transitions between blocks of content and adding an extra bit of personal preference to the site. Shape dividers can be placed on top or the bottom of each section on your page allowing to create smooth transition effects between different parts of your page. You can choose between 26 unique shapes each of which can be flipped, repeated, resized, and combined to create a vast array of designs.
Divi’s shape divider is super easy to use when a shape divider is added it will automatically blend on the color of your current section and the next section creating a smooth transition between sections without requiring you to customize the colors. This shapes can be placed “on top of” or “underneath” your content, allowing you to layer text and images in creating ways. This shape dividers are built using SVG’s which means they will scale without losing any quality, they look perfect on conventional devices, and they are super lightweight so it won’t hurt your websites loading speed.
Now let’s get started with our tutorial about Divi Shape Dividers.
The first thing we want to do is to create a page and use the visual builder. To access the section divider all we need to do is to click on the section settings then click on the design tab, then look for an entry called “Dividers.” Here we can decide where we want to have the divider, either on the top or the bottom.
After selecting where the divider would show, click on the drop-down under “Divider Style” and choose which divider to use, there are several to choose from so it would depend on how we would want our website to look. After selecting the divider, we can customize how it looks; we have settings such as divider height, divider horizontal repeat, divider flip, divider arrangement. Also, we can customize the color of the section divider to compliment how beautiful our website looks.
For this tutorial what I did is I made the background of the second section match the color of the shape divider to create a smooth transition, and it looks like this.
That’s it for this week’s blog; we will be talking about more about Divi on the upcoming blogs.
Need help with Divi Theme?
Contact us on how you can get started and keep going.