How to Add and Customize a Button Block in Zibster
Overview
A Button Block adds a clickable call to action to your Zibster website. Use it to help visitors explore your services, contact your business, 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
Log in to your Zibster account and click WEBSITE in the left-side menu.
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 an empty Button Block that uses your website’s global styling, or browse BUTTON 1 through BUTTON 7 to start with a predesigned block.
Scroll through the designs, then click SELECT below the option you want to add. You can customize the 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 predesigned 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 “Explore Our Services,” “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 uses the Zibster 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 Zibster.
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 a form you named 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 BLOCKS: Controls the distance between this block and the next block.
- SPACE INSIDE BLOCKS: 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 background and text when the Overlay hover animation is enabled. 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 Zibster 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 Zibster 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 Adding Hover Animations to Your Buttons for more information.
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 in the Zibster Website Builder 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?
Have questions or need a hand? Contact our Support Team for help with your Zibster website and account.
Phone: 844.353.3412
Support Channels: Phone, Live Chat, Support Ticket
