A Divider block creates a space or a line and is used to separate items on your page. You can also use dividers to create design elements to enhance your overall page's look!
We recommend that you choose the style of your divider first in the Layout area. You can choose a spacer, line, slanted, or pointed dividers. A spacer adds a section of blank space, while a line adds a horizontal line.
The slant and point dividers are advanced dividers that allow you to add dynamic shape elements within your website content.
This tutorial guide focuses on the spacer and line dividers. To learn more on how to use the slant and point dividers, CLICK HERE.
Click save on the layout of your choice.
CUSTOMIZE YOUR DIVIDER
After selecting your divider's Layout, you can customize how your divider will display on your website.
Choose Thickness: Control the thickness of your Divider block. The available thickness options are ultra thin, thin, medium, and thick.
Choose Length: If using the line layout, you can also customize your divider's length. The available length options are long, medium, short, and flushed. The flushed layout will fill the line to the width of the screen.
When you have made your selections, click save changes.
The Styling area allows you to customize the space below and inside your Divider block.
Please note: The Styling setting is only applicable when using the line layout.
Space Below Blocks: Controls the amount of space before the next block begins.
Space Inside Blocks: Controls the amount of space at the top and bottom of a block.
You may customize the colors of your Divider block to be different from your global color selections. Click on the color box to change your colors. You may select from your accent colors or pick a new color. Press OK followed by save changes when you are happy with your color selection.
Please note: The Line Color setting is only applicable when using the line layout.
You can add a background image to your Divider Block. You can upload your own custom background image or choose one from the Background Library. You can customize how the background image is displayed in the Background Settings.