Zibster Divider blocks in the Website Package provide an easy and effective way to separate and organize content on your site. These flexible blocks let you add clear visual breaks, dynamic shapes, or empty spaces between sections, improving the flow and readability of your pages. With options like lines, angles, and points, along with customizable colors and backgrounds, divider blocks offer endless styling possibilities to elevate your site’s design. Whether you need subtle spacing or bold graphical elements, the divider block is a key tool for building a visually engaging and well-organized website.
STEP ONE
Log into your Zibster account and click on WEBSITE in the left-side menu.
ADDING A DIVIDER BLOCK
The Divider Block is located in the fifth row of blocks you can add to your page. To add it, you can either click on the icon to place it at the bottom of the page or click and hold the Divider icon to drag it to your preferred location on the page. A teal bar will appear to help guide you as you position the Divider Block.
EDITING THE DIVIDER BLOCK
Once the Divider Block is on your page, click on the pencil icon in the top-right corner and choose Advanced. Alternatively, you can click anywhere inside the block to bring up the options for editing your Divider Block on the right side of your screen.
DIVIDER OPTIONS
The first section in the Divider tab allows you to customize your divider options. The available options will vary depending on the layout you’ve selected for the Divider Block.
- Thickness: Adjust the thickness of the divider using the dropdown menu.
- Line Length: If you’ve selected a line divider, choose the length of the line divider from four options: Short, Medium, Long, Flushed.
- Overlap: If you’ve selected a Slant or Point divider, choose the overlap option for the divider from three options: No, Block Above, or Block Below.
Click on Save Changes to apply your selections.
DIVIDER LAYOUT OPTIONS
Divider Layout Options
There are 38 different types of dividers that are available in the layouts section:
- Spacer: Adds blank space to your page.
- Line: Added a horizontal line divider to your page.
- Slant Left, Slant Right, Point Up, Point Down: The slant and point dividers are advanced dividers that allow you to add dynamic shape elements within your website content.
- Wave Left, Wave Right
- Diamond Trio Line
- Diamond Line
- Double Circle Line
- Vertical Line
- Down Arrow
- Fleur-de-lis
- Camera
- Mountains
- Bee
- Butterfly
- Floral Branch
- Floral Line Break Up, Floral Line Break Down
- Floral Up, Floral Down
- Laurel Branch
- Laurel Line Break
- Laurel
- Leaves Branch
- Leaves Line Break Up, Leaves Line Break Down
- Leaves
- Wildflower
- Leaf Flourish
- Leaf Trio Line Break
- Heart Line Break
- Ribbon Flourish Up, Ribbon Flourish Down
- Double Line Break
- Circle Point Line Break
You can click on the layout option you prefer to use and click on SAVE CHANGES to apply that layout to your divider block.
DIVIDER STYLING, COLORS, & BACKGROUNDS
STYLING
The Styling section will display different options depending on the divider layout you've selected. The default settings for the Styling tab are set by the global styling settings you under the design tab. You can customize the settings for this and override the default for the divider block. Any custom styling options you've set will display the customized option.
- Line Style: Solid or Dotted Line
- Space Below Block
- Space Inside Blocks
- Line Layout: Adjust the space above and below the line.
- Slant, Point, or Wave Layouts: Control the opacity of the shapes. By default, this is set to 100%, but you can select a range between 0% and 100%.
- Spacer Layout: No styling options are available for this layout.
Click on Save Changes to apply any changes you’ve made to the Divider Block.
DIVIDER COLOR OPTIONS
Customize the colors of your Divider Block independently from your global color selections. The available color options will depend on the layout you’ve selected.
- Spacer Layout: Background color
- Line Layout, Graphic Layouts: Background Color, Line Color
- Slant, Point, Wave Layout: Section A, Section B
To customize a color option, click on the color box. You can choose from your accent colors, pick a new color with the color picker, or enter a HEX color code. Customized options will be marked as such.
Press OK and then Save Changes when you are satisfied with your color selection.
DIVIDER BACKGROUND OPTIONS
By default, the Divider Block will use the Background Color setting in the color picker. You can draw more attention to your divider by adding a background image. Upload your own custom background image or choose one from the Background Library.
If you upload a custom background or select a file from the Background Library, you can customize how the background image is displayed under Background Settings with the following options:
- Tile: Tiles your image to fill the background.
- Top Left: Aligns your image to the top left.
- Centered: Aligns your image at the center of the available space.
- Cover: Scales your image to completely cover the background.
Click on Save Changes to apply your changes to the background settings.
PRO TIP!
You can upload a graphic as a custom background and create a custom look for your divider.
Learn More: How To Create A Custom Divider
If you have any questions about using divider blocks, please contact our Support Team by phone at 844.353.3412 or via live chat from your Zibster control panel. We’re available Monday through Friday, 9:00 AM - 6:00 PM EST, and we’re happy to help you however we can.
Leave a comment
0 Comments