Divider

Last Updated:


What is Divider feature

Divider provides the possibility to add a horizontal line feature between other features on the website page.

Divider can be added into any section and between blocks:

How to use

You can access the Divider feature from the left-hand sidebar of the Hello Website Builder by clicking BUILD:

Adding Divider

Divider can be placed into different blocks of page via Drag & Drop.

Drag the Divider from the Features Library and drop it onto a placeholder into the desired location to add decoration between content of a website:

Drop the divider onto one of the available placeholders which are highlighted in red when you drag the feature over them:

Moving the Divider

To move a Divider, hover over its upper edge with the mouse cursor to display the moving control (outlined in pink in the screenshot below):

Click the moving control and drag the feature from one placeholder onto another:

Drop the feature into the desired location, onto a highlighted in red placeholder. The feature acquires the size of the selected placeholder:

Resizing the Divider

To resize a Divider horizontally, hover over its right or left side to display parallel vertical lines to the right and to the left of the Divider. Drag one of these vertical lines and drop the line when done resizing:

To resize a Divider which is part of a section drag one of the vertical lines to the right or to the left. All the features that are the part of the section will be resized to the identical lengths:

Divider Toolbar

Click a Divider to display the editing menu:

 Customizing Width

You are able to to customize feature width by predefined values: 100%, 75%, 50%, 25%. Some divider themes may adjust their appearance to fit the width for better perception:

Setting the Alignment

To align the divider to the left or to the right or to center of the section:

Divider Settings

Use settings to customize the divider:

Specify color:

Spacing

Use the possibility to set divider height to create gap:

Style

Select the divider preferable design:

Deleting the Divider

To delete a divider hover over it and click the Delete button [x] in its top right-hand corner that appears:

The feature will be removed immediately.