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.
Is it possible to use CSS to edit the design, colors, and px of the dividers made through Weebly?
Yes, in your main-style.css file blockquote style is defined something like below, you can modify these parameters or add new style as you want.
blockquote {
background: #415161;
font-family: ‘Montserrat’, sans-serif;
font-size: 18px;
font-style:normal !important;
line-height: 32px;
padding: 28px 40px !important;
color: #fff;
margin: 2em 0;
border-left: 0px !important;
}
Regarding your explanation to use a vertical divider in Weebly.
Apparently there is something wrong with the block quote element or is it not applicable to all themes which Weebly is offering.
Could you take a look at this problem please. I have tried it with several themes but none of them is working the way you explained.
Alfons Maes
It depends on the theme you have chosen, most of old themes works as explained in the article. Some new themes came with separate blockquote style to show it as a block. You can remove the blockquote CSS entries from main-style.css so that it will work like a divider line (perhaps this will affect the whole blockquote element style).
Or copy and paste the blockquote styles from the theme you like to the theme you want to modify.