The Zibster Website Package includes the Button Block that you can use as a call to action to link to another page in your website, a form, and more. This guide will walk you through the steps on how to add and customize the Button block on your Zibster website.
STEP ONE
Log into your Zibster account and click on WEBSITE in the left-side menu.
STEP TWO
Click on the name of the page where 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 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 outside 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 appear when the button is clicked to easily notify clients of your promotions, discounts, or to sign up for your newsletter.
CUSTOMIZING YOUR BUTTON
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 uploading a custom background image or choosing one from the Background Library. Customize how the background image is displayed under Background Settings:
- 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.
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 Save Changes to apply the animation to your button.
Leave a comment
0 Comments