Weebly Horizontal and Vertical Divider Elements

Weebly by default offers a horizontal divider element to show a line between the sections of your site. There are no customizing options available for the divider element to adjust thickness and color of the divider. Sometimes it is necessary to show the horizontal divider in different formats as well as to use vertical divider in some places of your site. Weebly does not offer any ready made solution to this. Here is how you can use “Block quote” element as a vertical divider and use “Image” and “Embed Code” elements as content divider.

Weebly Horizontal Divider

Divider element is a default Weebly element users can drag and drop on the content area to add a horizontal divider with the predefined width. Click on the dropped element to see the customizing options as shown in the picture below.

The horizontal divider element has two simple options:

1. Margins – you can adjust the top and bottom margin of the diver.
2. Width – adjust the width of the diver to one of the available percentages – none, 50%, 70%, 80%, 90% and 100%.

Weebly Vertical Divider

By default Weebly does not offer vertical divider and you can use block quote element as vertical divider between content. Follow the below instructions to add a vertical divider on your Weebly site.

Using Image Element as a Divider

Both of the above horizontal and vertical dividers are very simple and changing the thickness and color is not possible. Hence, it is a good idea to use an image as a divider with variety of different styles. You can also position and re-size your images without using “Columns” element. Below are some examples of images used as horizontal dividers.

Using Embed Code Element as a Divider

The final option is to use HTML tag <HR> to define a horizontal divider.