Divider blocks in the PhotoBiz Website Package provide a simple yet powerful way to separate and organize content on your website. These versatile blocks allow you to add clean visual breaks, dynamic shapes, or blank space between sections, helping to improve the flow and readability of your pages. With various layout options like lines, slants, and points, along with customizable colors and backgrounds, divider blocks offer a range of styling possibilities to enhance your website’s design. Whether you’re looking to add subtle spacing or bold graphical elements, the divider block is an essential tool for creating a visually appealing, well-structured website.
ADDING A DIVIDER BLOCK
The Divider block is the icon in the 5th row of blocks you can add to your page. To add one you can click on it and add it to the bottom of the page or click and hold the Divider icon and drag it to your preferred location on your page. A teal bar will help with the location if you're moving the title block around the page.
EDITING THE DIVIDER BLOCK
Once the Divider Block is on your page, click on the pencil icon on the top, right corner and choose ADVANCED or anywhere inside the block and the options to edit your divider will appear in the menu that opens on the right side of your screen.
Divider Options
The first section in the divider tab controls your divider options. There will be different options available in this section depending on the Layout you've selected for the divider block.
- Thickness: Controls the thickness of the divider block. The drop down menu allows you to choose the thickness of your divider.
- Line Length: If you've selected a line divider, you'll be able to choose the length of the line divider from 4 options, Short, Medium, Long, Flushed.
- Overlap: If you've selected a Slant or Point divider, you can choose to the overlap option for the divider from 3 options, No, Block Above, or Block Below
Click on Save Changes to apply your divider options to the divider block.
The screen shots below show the various options you'll see depending on the type of divider you've selected in the layout section.
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 Layout: Space Above, Space Below
- Slant or Point Layout: Opacity options for the shapes, by default, this will be set to 100%. The drop-down menus will allow you to choose a range between 0% and 100% opacity
- Spacer Layout: The styling tab will not display
Click on Save Changes to apply any changes you've made to the divider block.
Divider Color Options
You may customize the colors of your Divider block to be different from your global color selections. The available color options for your divider block will depend on the divider layout you've selected.
- Spacer Layout: Background color
- Line Layout: Background Color, Line Color
- Slant or Point Layout: Section A, Section B
Click on the color box to customize the color option. You may select from your accent colors, pick a new color with the color picker, or enter a HEX color code. Any custom colors you've set will display the customized option.
Click save changes when you are happy with your color selection.
Divider Background Options
By default, the divider block will be the color applied to the Background Color setting in the color picker. You can bring more attention to your divider by adding a background image. You can 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 the Background Settings from the following 4 different options:
- Tile: Will tile your image to fill the background
- Top Left: Will align your image to the top left
- Centered: Will align your image at the center of the available space
- Cover: Will scale your image to be as large as possible to completely cover the background
Click on Save Changes to apply your changes to the background settings.
PRO TIP!
You can upload your own graphic as a divider background to create a custom divider in your website builder.
Learn More: How To Upload A Custom Divider Graphic
If you have any questions about the Divider block, please give our Support Team a call toll-free at 866.463.7620 or send us a live chat from your PhotoBiz control panel. We're available Monday - Friday 9:00am - 6:00pm EST and we're happy to help you however we can.