How To Use Divider Blocks

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.

STEP ONE

Log into Your PhotoBiz Account

From your dashboard, click on WEBSITE in the left-side menu.

STEP TWO

Add a Divider Block

Select the page where you want to add a divider.
On the right-hand side, locate and click the Divider Block icon.
Choose how to add it:
- Click the icon to place the divider at the bottom of the page.
- Click and drag the icon to place it exactly where you want—look for the teal bar to guide placement.

STEP THREE

Choose a Divider Layout

After adding the block, you’ll see a library of layout options.

Predesigned blocks have their own styles and shapes.
Spacer blocks put a blank space in between your blocks.
Blank blocks follow your global website settings.

Click Select on the layout you want to use.

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.

Design Guide: Using Slant or Point Dividers

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.

Line Layout

Point or Slant Layout

Spacer Layout

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.

Spacer Layout

Line Layout

Slant or Point Layouts

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.

NEXT: How To Use The Button Block

Previous Post Next Post