Add a Divider

Dividers are horizontal lines that help provide some division between content on longer pages. To add one, click Add Content in the website editor, then drag the Divider component to a page of your site. Next, click on the component to open the options panel to the side of the editor.

Thickness

By default, dividers are one pixel in thickness. You can select other preset thickness options up to a maximum of 24 pixels. Larger thicknesses will make it easier to see the effects of design options.

Size & Position

To adjust the width of the divider, click on the dropdown menu of the Width option. By default this is set to full. If you choose an option other than full, you can also change the Align option to control how the divider is aligned within the component: left, right, or center. The width can be set separately for different screen sizes by clicking the desktop/mobile icon.

Design

The divider is basically a very thin block, so changing the color will mean changing the background color in specific. You can customize the Background further, though, and choose gradient, image, or image with overlay in addition to color. You can also customize the shape of the divider with the Shape option, though this is usually more noticeable with thicker dividers. This option can be set separately for different screen sizes by clicking the desktop/mobile icon.

Spacing

The Margin option controls how much space there is around the divider. You can set this per-side as well as separately for different screen sizes.

Hover

To control the background of the divider when hovering over it with a mouse, click on Hover at the top of the options panel.