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!
STEP ONE
Choosing a Layout
The shape dividers include options like Slant Left, Slant Right, Point Up, and Point Down.
Once you select a layout, you can further customize the slant degree, colors, and opacity. Click Save to apply your desired layout.
STEP TWO
Adjusting Overlap & Thickness
You have three overlap options for your divider:
- No Overlap
- Overlap Block Above
- Overlap Block Below
No Overlap: The divider will sit between content blocks without overlapping them.
Overlap Block Above: The divider will overlap the block directly above it.
Overlap Block Below: The divider will overlap the block directly below it.
The thickness of your divider affects the slant degree. You can choose from:
- Thin
- Medium
- Thick
Click on Save Changes to apply your new settings.
STEP THREE
Styling and Opacity
The styling section allows you to adjust how opaque or transparent each section of the divider is.
For example, using the Slant Left layout with 90% opacity for Section A and 0% opacity for Section B will create this effect:
If the opacity is inverted (Section A at 0% and Section B at 90%), the divider will look like this:
STEP FIVE
Color Customization
The color settings allow you to apply a color to one or both sections of your divider.
For instance, applying 50% opacity to both Section A and Section B will produce this effect:
STEP SIX
Adding a Background
You can also add a background image or pattern to your divider, but this option only works if no overlap is applied.
Here's an example:
By combining transparent sections, color settings, and a background image, you can create stunning visual effects with your dividers:
PRO TIP!
Want to learn more about how to use shape dividers? Check out our Growth Hub Guide on Slant & Point Dividers.
Learn More: Design Guide - Slant & Point Dividers
Leave a comment
0 Comments