How to Add and Customize Button Blocks in PhotoBiz

Watch: How To Add & Customize Button Blocks

How to Add and Customize a Button Block

Overview

A Button Block adds a clickable call to action to your PhotoBiz website. Use it to help visitors view your portfolio, contact your studio, open a form, access a pricing guide, or take another action. You can customize the button’s text, destination, colors, fonts, spacing, background, and hover animation. This guide also covers anchor links, DuoBuild, and how to copy, move, rename, or delete a Button Block.

STEP ONE

STEP TWO

Click the page where you want to add your Button Block.

In the right-side block menu, click BUTTON to add a Button Block to the bottom of the page.

To place it in a specific location, drag BUTTON onto the page and release it when the placement line appears where you want the block. You can reposition the block later by dragging it to another location.

STEP THREE

The SELECT BUTTON BLOCK panel opens on the right.

Choose BLANK to start with your website’s global styling, or browse BUTTON 1 through BUTTON 7 to start with a pre-designed block.

Click SELECT below the design you want to add. You can customize its button text, link destination, and design settings afterward.

STEP FOUR

In the EDIT BUTTON panel, enter the wording you want visitors to see in BUTTON TEXT.

If you selected BLANK, this field will be empty. If you selected a pre-designed block, it will contain sample button text that you can replace.

Use a short, descriptive phrase that explains what happens when visitors click, such as “View Wedding Portfolio,” “Schedule a Consultation,” or “Download Pricing Guide.” Avoid vague wording such as “Click Here” when a more specific description is available.

STEP FIVE

Under LINK TO, select the destination type and complete the fields that appear.

The Button Block supports the same destinations as the PhotoBiz Link Picker. Depending on your selection, enter a web address or select existing content from your account. Create or upload destination content before linking to it.

For all available options and requirements, see How to Use the Link Picker in PhotoBiz.

FINAL STEP

Review your button text and destination, then click SAVE CHANGES.

Your saved changes take effect on the website version you are editing. Preview the page and click the button to confirm that it opens the correct destination or performs the intended action.

Review the button on desktop and mobile screen sizes to make sure it is easy to find and read.

What Your Clients See

Visitors see the wording you entered in BUTTON TEXT. Clicking or tapping the button opens its destination or begins the configured action.

Phone and email links use the visitor’s device and available applications to start a call or compose an email. File links open the selected document; whether it displays or downloads depends on the browser and file type.

If LINK TO is NONE, the button appears but does not open a destination. If BUTTON TEXT is blank, the button does not appear.

Create an Anchor Link

An anchor link takes visitors directly to a specific block on the same page or another page.

In the EDIT BUTTON panel, select PAGE under LINK TO. Under CHOOSE A PAGE, select the page containing your destination. Under CHOOSE A BLOCK, select the section visitors should reach. For example, select FORM (CONTACT FORM) to send visitors to the contact form.

Select TOP OF THE PAGE to open the beginning of the page instead.

Renaming a block is optional, but descriptive names make destinations easier to identify. Click SAVE CHANGES, then test the button.

See How to Rename Blocks and Create Anchor Links for complete instructions.

Customize Your Button Block

Click the button within the block to open the EDIT BUTTON panel. If it has no text, click CLICK TO ADD BUTTON TEXT. You can also click the block’s pencil icon, then click ADVANCED.

Click the settings tab you want to customize. Save your changes in each section before continuing.

Styling

Use STYLING to adjust position and spacing.

Button alignment: Positions the button on the left, in the center, or on the right.
Space below the block: Controls the distance between this block and the next block.
Space inside the block: Adds padding above and below the button.

Colors

Use COLORS to customize this block without changing your website’s global colors.

Depending on your global graphics layout, available settings may include:

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

The overlay and contrast colors control the button’s appearance when a visitor places a cursor over it. Check both the standard and hover appearance, keeping the text easy to read against its background.

Backgrounds

Use BACKGROUND to upload an image or select one from the Background Library.

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 background area.

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

See How to Change a Block Background in PhotoBiz for complete instructions.

Fonts

Click FONTS to customize the typography used for BUTTON TEXT.

The panel displays the current font, size, letter spacing, and line height. Hover over the font preview and click the pencil icon to choose another font. Click the properties row below the preview to adjust size, letter spacing, or line height.

These settings apply to this block without changing fonts throughout your website.

See How to Customize Fonts in Individual PhotoBiz Website Blocks for complete instructions.

Animations

Click ANIMATION. Under BUTTON HOVER ANIMATION, select NONE, FILL, OVERLAY, SCALE, or ARROWS.

Click SAVE CHANGES, then preview the page and move your cursor over the button to review the effect.

A custom animation overrides the global Button Hover Animation for this block. Hover effects depend on a mouse or trackpad cursor and may appear differently on phones and tablets.

See How to Add Animation to Your Buttons for complete instructions.

Use Button Blocks With DuoBuild

DuoBuild automatically places two supported blocks side by side in equal-width columns.

To display two buttons beside each other, add two Button Blocks. Drag one beside the other and release it when the placement indicator shows the side-by-side position. DuoBuild supports two blocks per row.

You can also pair a Button Block with a Text Editor Block, Text + Image Block, Images Block, List Block, Banner Block, Video Block, Form Block, or HTML Block.

Each block keeps its own content and design settings. On mobile, the blocks stack vertically, with the left block above the right block.

See How to Use DuoBuild for complete instructions.

Manage Your Button Block

Click the pencil icon in the block’s upper-right corner to open its management menu.

COPY: Creates a duplicate directly below the original on the same page. You can then move the duplicate elsewhere. See How to Move or Copy Blocks Between Pages.
MOVE: Relocates the existing block, including its content and settings, to the top or bottom of its current page or another page. See How to Move a Block.
RENAME: Changes the block’s identifying name in the builder without changing its visible button text. See How to Rename Blocks and Create Anchor Links.
ADVANCED: Opens the same EDIT BUTTON panel you access by clicking the button.
DELETE: Opens the DELETE BLOCK confirmation panel.

To position the block between other blocks on the same page, drag it to the desired location.

Delete a Button Block

Click the pencil icon in the upper-right corner of the Button Block, then click DELETE.

The DELETE BLOCK panel opens. Deleting a block permanently removes the block and its contents. This action cannot be undone, and the deleted block cannot be recovered.

Click YES, DELETE IT to confirm, or click CANCEL to keep the block.

Deleting a Button Block does not delete the page, form, file, or other destination it links to.

Troubleshooting and FAQs

My button does not appear

Confirm that BUTTON TEXT contains the wording you want to display, then click SAVE CHANGES.

My button appears but does not do anything

Check LINK TO. If it is set to NONE, select a destination and complete the required fields. Save your changes and test the button again.

My button opens the wrong destination

Review the selected content or external web address in the link settings.

For an anchor link, check both CHOOSE A PAGE and CHOOSE A BLOCK. Selecting TOP OF THE PAGE opens the beginning of the page instead of a specific section.

My button looks different from other buttons

Check its colors, fonts, styling, and animation. Individual block settings can override your website’s global design.

My hover animation does not appear on mobile

Hover animations depend on a cursor. Phones and tablets may not display the same hover behavior as desktop devices.

NEED HELP?

Our Passionate Support Team Is Here for You.

Have questions or need a hand? Our team is happy to walk you through the steps and help you get the most out of your PhotoBiz account.

Monday to Friday, 9am to 6pm EST
866.463.7620
Phone, Live Chat & Support Ticket

CONTACT SUPPORT

NEXT: HOW TO USE TEXT EDITOR BLOCKS

Previous Post Next Post

How To Use Text + Image Blocks

October 9, 2026

How To Use List Blocks

August 17, 2026

How To Use Banner Blocks

October 2, 2026

How To Use Text Editor Blocks

October 6, 2026

How To Use Button Blocks