How to Use Divider Blocks in Your PhotoBiz Website

Divider blocks are a simple and effective way to separate content, create visual interest, and improve the flow of your website. Whether you're adding blank space or bold graphic elements, divider blocks help structure your pages and enhance the overall design.

EDITING THE DIVIDER BLOCK

Predesigned layout

The side panel menu will remain open, and you can jump right in to editing your block settings.

Blank layout

Click the pencil icon in the upper right corner of the divider block, then select advanced to reopen the side panel menu.

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.

Important Note: If you're using the “Space Inside Blocks: None” setting and the slide-up page load animation, a 20-pixel padding will still appear around the divider. This extra space is added to allow room for the animation effect.

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.

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.