Slant and Point dividers are advanced dividers that allow you to add unique shape elements between your website content. You can apply colors, background images, opacity levels, and content overlapping when setting up your new dividers to add dynamic separation. In addition to this tutorial, you can learn more about creative uses for shape dividers via our Growth Hub guide, click here to check it out!
1. CHOOSE YOUR DIVIDER
The shape dividers include slant left, slant right, point up, and point down.
Once you choose a layout you will be able to further customize the degree of the slant, the colors, and the opacity.
Click save over your desired layout.
2. CHOOSE YOUR DIVIDER'S POSITION
You have three options for how your divider can overlap: no overlap, overlapping the block above, or overlapping the block below.
You can expect the display to be like this if no overlap is selected:
Overlapping the "block above" will look like this:
If you choose to overlap the "block below", you can expect this:
3. DIVIDER THICKNESS
The thicknessof your divider also changes the degree of the slant.
4. STYLING: OPACITY
The styling section of the divider block allows you to change how opaque or transparent each section is:
Here is an example of a divider using the Slant Left layout with an opacity of 90% for Section A and an opacity of 0% for Section B.
If we invert the opacity percentages so that Section A is 0% and Section B is 90%, we can expect this:
The color setting will allow you to apply a color to one or both of your sections.
In the example below, you can see the effect of applying a color to your sections. Both Section A and B in this example have an opacity of 50%:
You can also add a background image or pattern to your divider. This function only works if no overlap is applied. Here is an example:
Combined with transparent sections and color settings, you can create wonderful effects with your dividers using a background: