USING SLANT AND POINT DIVIDERS
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
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.
STEP 2
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:
STEP 3
The thickness of your divider also changes the degree of the slant.
Thin:
Medium:
Thick:
STEP 4
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:
5. COLOR
STEP 5
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%:
6. BACKGROUND
STEP 6
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:
PRO TIP!
Want to learn more about how to use shape dividers? Check out some tips from our Growth Hub: DESIGN ACADEMY: NEW DIVIDER LAYOUTS
Leave a comment
0 Comments