Divider Block
Use the Divider Block to identify a change of thought on a page. Combine with a Headline Block to make those changes very clear to your visitors.
Also use it to split up dense, text-heavy pages, adding some white space to what could appear overwhelming to a visitor at first glance.
The divider that this block creates is plain, although it can have a color. If you prefer to have a line with more character, create one using a graphics program or download one from this clipart site or from one of the many others on the web.
Upload that graphic into your Image Library. Then use an Image Block rather than a Divider Block to break up your page.
You can create a Reusable Block with one or more Divider Blocks, along with other blocks. Learn how to create a Reusable Block.
You can also use Divider Blocks in a Sitewide Dot. Learn how to create and use a Sitewide Dot.
Click here for a discussion of what to put in each of the 18 Sitewide Dots.
Using the Divider Block Toolbar
The Divider Block allows you to add a horizontal dividing line between sections of your page.
When you drag a Divider Block to your page, the gray bar at the top displays the Divider toolbar.
- Drag a Divider Block to your page.
- Choose the Width of your divider.
- Choose the Height (thickness) of the divider.
- Choose how you want to Align the divider in the column.
- Choose the Color of your divider line.
You can select the width (10% of the column width up to 100% of the column width), the height of the line (1 to 4 pixels), and the alignment (left, center or right).
The length of the divider is dependent on the width you set, and also in which column you place the Divider Block.
A 50% divider in the Content Column will be longer than a 100% divider in the Extra Column.
The height is the thickness of your divider line. The default is the standard 1px. You can thicken it up to 4px.
A divider of 100% width can have any alignment, since it takes up the width of the entire column. If you set the width to less than 100%, choose an alignment.
You can also choose the color for your divider line.
Tip
-
If you think you'll need more than one divider line style, consider making each one a Reusable Block. Then you will not need to remember what the settings are for each purpose.
Name each Reusable Block based on the purpose of the divider (e.g., DivExtraColMiniNav could be set to 100%, 2px in height, green, while DivContentCol could be set to 50%, 1px in height, centered, brown).