Add A Button To Your PhotoBiz Website

How To Add Button Blocks

Add a call-to-action on your page with a button block.

How to Add and Customize a Button Block

Overview

The Button Block allows you to add a clickable call to action to a page on your PhotoBiz website. You can use a button to guide visitors to another website page, open a form, download a file, call your business, watch a video, or complete another action.

This guide explains how to add a Button Block, choose a starting design, enter button text, and select where the button leads. You will also learn how to customize the block’s appearance, create an anchor link, and use the Button Block with DuoBuild.

STEP ONE

This opens the Website Builder, where you can manage your website pages and content blocks.

STEP TWO

Open the page where you want to add the button, or create a new page.

To quickly add the block, click the Button Block icon on the right side of the Website Builder. The block will automatically be added to the bottom of the page.

To place the block in a specific location, click and hold the Button Block icon. Drag it onto the page and release it when the teal placement line appears in your preferred location.

You can reposition the block later by dragging it to another location on the page.

STEP THREE

Choose the starting design for your Button Block.

Select Blank Block to add a button that uses your website’s global styling. You can customize its appearance after adding it.

Select Pre-designed Block to begin with a professionally designed button. You can also customize a pre-designed block after adding it to the page.

Click the Select button below the option you want to use.

STEP FOUR

Enter the text you want visitors to see on the button.

If you selected a Pre-designed Block, the Button Block settings will remain open in the right-side panel. If you selected a Blank Block, click the text in the center of the block that says click to add button text to open the settings.

Use clear button text that describes the action visitors will take. For example, use View Wedding Portfolio, Schedule a Consultation, or Download Pricing Guide instead of general wording such as Click Here.

Choose the link type and complete the required destination settings.

FINAL STEP

Review the button text, link destination, and block settings, then click Save Changes.

Your updates are automatically applied to the website. PhotoBiz does not use a separate publish button.

Preview the page and click the button to confirm that it opens the correct page, form, file, video, pop-up, or other destination.

Additional Options and Block Settings

After adding the Button Block, you can customize its link, alignment, spacing, colors, background, fonts, and hover animation.

Open the block settings and select the section you want to update. Click Save Changes after editing a settings section to apply the updates to your website.

Link Options

Use the link settings to control what happens when a visitor clicks the button.

Available options include:

None: The button does not open a destination.
External Link: Opens a website or online resource outside your PhotoBiz website.
Page: Opens another page on your PhotoBiz website or moves to a specific block using an anchor link.
Form: Opens a form created in your Forms Dashboard.
Marketing: Opens a supported campaign or landing page from the Marketing Dashboard.
File: Opens a supported file uploaded to the Documents section of your Files area.
Phone: Creates a click-to-call link using the phone number you enter.
Email: Opens the visitor’s default email application with your email address entered as the recipient.
Address: Opens the address you enter in Google Maps.
Video: Opens a supported YouTube or Vimeo video in a lightbox.
Pop-Up: Opens an existing website pop-up, such as a promotion, announcement, discount, or newsletter signup.

When adding an external link, enter the complete web address and test it after saving.

Creating an Anchor Link

An anchor link takes visitors directly to a specific block or section of a website page instead of opening the page at the top.

To create an anchor link, select Page as the button’s link type. Choose the destination page, then use the block selection to choose the specific block you want visitors to reach.

Select Top of the Page when you want the button to open the beginning of the selected page.

Name your website blocks clearly so they are easy to identify when choosing an anchor destination. After saving, test the button to confirm that the page moves to the correct section.

See How To Create an Anchor Link with a Button for complete instructions.

Styling Options

Use the Styling section to adjust the button’s position and the spacing around the block.

Available settings include:

Button alignment
Space below the block
Space inside the block

Button alignment controls whether the button appears on the left, in the center, or on the right.

Space inside the block adds padding above and below the button. Space below the block controls the distance between the Button Block and the next block on the page.

Click SAVE CHANGES to apply any styling updates to your button.

Colors

Use the Colors section to override your website’s global colors for the individual Button Block.

Available settings include:

Button text color
Button background color
Block background color
Button overlay color
Button contrast color

The overlay and contrast colors control how the button appears when a visitor places a cursor over it.

Check the button in desktop and mobile preview modes after changing its colors. Make sure the text remains easy to read against the button and block backgrounds.

Click SAVE CHANGES to apply any color changes to your button.

Backgrounds

You can add a background behind the Button Block by uploading your own image or selecting one from the Background Library.

Background display options include:

Tile: Repeats the image across the background.
Top Left: Positions the image in the top-left corner.
Centered: Centers the image within the block.
Cover: Enlarges the image to fill the available background area.

You can also remove the background image and use a solid background color.

Choose a background that keeps the button easy to find and the text easy to read.

Fonts

Use the Fonts section to customize the appearance of the button text without changing the fonts used throughout the rest of your website.

Available font settings include:

Font style
Font size
Letter spacing
Line height

Use a font and size that remain easy to read on desktop and mobile devices.

Animations

Button Hover Animations add movement when a visitor places a cursor over the button.

Available options include:

None
Fill
Overlay
Scale
Arrows

Hover animations are primarily visible on desktop devices. Mobile visitors do not have the same cursor-based interaction.

You can also choose a global Button Hover Animation in the Website Builder design settings. A custom animation selected inside an individual Button Block overrides the global animation for that block.

Click SAVE CHANGES to apply Button Hover Animation changes to your button.

Using a Button Block with DuoBuild

The Button Block supports DuoBuild, which allows you to place two supported blocks beside each other in an equal-width, two-column layout.

To create a DuoBuild layout, drag a supported block beside the Button Block. Release it when the placement indicator shows that the two blocks will appear next to each other.

The following blocks support DuoBuild:

Text Editor Block
Text + Image Block
Images Block
List Block
Banner Block
Video Block
Form Block
Button Block
HTML Block

Any supported block can be paired with another supported block. There are no restricted DuoBuild combinations.

Each block keeps its own layout, background, colors, fonts, spacing, and other design settings.

On mobile devices, DuoBuild blocks automatically stack vertically. The block displayed on the left side of the desktop layout appears first on mobile. The block displayed on the right appears below it.

See DuoBuild Introduction for complete instructions.

Button Text Tips

Use short, descriptive button text that tells visitors what will happen when they click it.

Examples include:

View Portfolio
Book Your Session
Contact the Studio
Download Pricing
View Client Galleries
Watch the Video
Get Directions
Join the Email List

Avoid vague text such as Click Here or Learn More when a more specific description is available. Descriptive button text improves usability and accessibility.

Troubleshooting & FAQs

The button does not open anything

Open the Button Block settings and confirm that the link type is not set to None.

Verify that all required destination information has been entered, then click Save Changes.

The button opens the wrong destination

Review the selected page, form, file, video, pop-up, or external web address in the link settings.

For an external link, confirm that you entered the complete and correct URL.

The anchor link opens the page at the wrong location

Open the Button Block settings and confirm that you selected the correct page and destination block.

If Top of the Page is selected, the button will open the beginning of the page instead of moving to a specific block.

The button looks different from other buttons

The Button Block may contain custom colors, fonts, animation, or other block-level styling.

Review each design section and remove any custom settings that should follow your website’s global design.

The hover animation does not appear on mobile

Hover animations rely on a mouse or trackpad cursor. They may not appear in the same way on phones and tablets.

If you have any questions about the Button 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 - 8:00pm EST and we're happy to help you however we can.

NEXT: HOW TO USE TEXT EDITOR BLOCKS

Previous Post Next Post

How To Use Text + Image Blocks

May 20, 2025

How To Use List Blocks

February 19, 2026

How To Use Banner Blocks

July 21, 2026

How To Use Text Editor Blocks