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:
- Margins – you can adjust the top and bottom margin of the diver.
- 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.
- Drag and drop “Block Quote” element between the two elements.
- Press “Enter” button to increase the height of the vertical divider.
- The blank block quote in the center column will act as a vertical divider between the other two elements.
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.
- Drag and drop “Embed Code” element and enter <HR> inside the element. (Note: Attributes of <HR> tag like size and width are not supported in HTML5)
- You can see a divider line as shown below.