How To Add Button Blocks
Add a call-to-action on your page with a button block.
STEP ONE
Log into your PhotoBiz account and click on WEBSITE in the left side menu.
STEP TWO
Click on the name of the page that you'd like to ADD A BUTTON and then click on the BUTTON block in the right side options.
STEP THREE
Edit Your Button
Once the BUTTON block has been added to your page, click inside of the block to customize it.
Your options for linking your button are:
NONE: The button will not link anywhere and exists for aesthetic reasons on your page.
EXTERNAL LINK: Direct your clients to helpful resources that exist in a place other than your website.
PAGE: Direct your visitors to an existing web page on your website.
FORM: Connect to a Custom Form you have created in your FORM BUILDER.
MARKETING: Direct users to a Campaign or Landing Page you have created in the MARKETING tool.
FILE: Allow users to open a PDF, JPG, PNG, or GIF file that has been uploaded to the DOCUMENTS area of your account's FILES section.
PHONE: Connecting your button to a phone number allows users to quickly click to call you.
EMAIL: Connecting your button to an email address opens a user's default mail client to easily send you an email.
ADDRESS: Allow users to find where you are by opening an address in Google Maps.
VIDEO: Add a video embed code obtained from YouTube or Vimeo to play in a light-box.
POP-UPS: Enable one of your pop-ups to pop up when the button is clicked on to easily notify clients of your promotions, discounts or to sign up for your newsletter.
FINAL STEP
In the right side menu you will find advanced settings for your button block, including styling, colors and background. This will control how your button appears inside the button block.
STYLING
The button styling section allows you to customize the following options for your button block:
- Button Alignment: Controls whether your button is left, right, or centered in the button block.
- Space Below Blocks: Controls the amount of space before the next block begins.
- Space Inside Blocks: Controls the amount of space at the top and bottom of a block.
Click on the Save Changes button once you've selected your button styling options.
COLORS
The button color section includes three color options. These colors will override the colors for the button that have been picked in the global color picker section under the DESIGN tab. Click on the color square or enter the HEX color code to customize the color for the following sections:
- Button Text Color: this is the font color of the text on your button. By default, this is controlled by the Button Text color in your global color picker.
- Button Background Color: this is background color of the button in this block. By default, this is controlled by the Button Background color in your global color picker.
- Background Color: this is the background color for the button block. By default, this is controlled by the Site Background color in your global color picker.
- Button Overlay Color: when the "overlay" animation style is enabled, the button background will turn this color when you hover your mouse over the button
- Button Contrast Color: when the "overlay" animation is enabled, the button text will turn this color when you hover your mouse over the button.
Click on Save Changes to apply your changes to your button block colors. The customized message will apply to any colors you've changed from your default color scheme settings.
BACKGROUND
You can add a background image to display behind your Button block by adding a background image. You can upload your own custom background image or choose one from the Background Library. You can customize how the background image is displayed under the Background Settings.
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.
FONTS
Click on the Fonts option in the right-side menu that opens up.
You can easily customize the fonts you're using on your button blocks to override your global font settings. You can change the font, font size, letter spacing (kerning), and line height for any of the following items in your button block:
- BUTTON TEXT
Click on Save Changes at the bottom of the control panel menu to apply your changes.
ANIMATIONS
Click on the Animations option in the Edit Button menu. With the animation feature, you can choose from several hover effects to give your buttons a dynamic look and feel. You can select from five options:
- None
- Fill
- Overlay
- Scale
- Arrows
Once you have made your selection, click on Save Changes to apply the animation to your button.
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.