The Zibster Website Package includes a List Block option found in the website builder. This feature makes it easy to organize images, text, and videos in a grid display on a page in your website. It's an excellent way to showcase images with client testimonials or redirect visitors to an external page or different areas within your site. Our guide will walk you through how to use the List Block to enhance your website's functionality and design.
How To Add The List Block To Your Zibster Website
STEP ONE
Log into your Zibster account and click on the WEBSITE option in the left-side menu.
STEP TWO
To add a List Block, click and hold on the 'LIST' icon on the right side of your screen. Drag it to your preferred location using the teal line as a guide, then release the mouse button, and the block will drop into place. (Clicking once on the icon will add that block to the bottom of your page.)
STEP THREE
To edit the List Block, click anywhere in that block. The edit menu will activate from the right side of your screen.
STEP FOUR
You can add IMAGES, TEXT, or VIDEO items in the right side menu.
How to Add Items to Your List Block
In the first menu option, you can choose your particular media: image, text, or video. Once you add your media, you have the option to add a title, description, as well as a button for a "call to action" for your clients.
IMAGE
- Image/Video: You can upload an image from your computer, insert an image from the Clipboard, or choose an image from the Stock Image Library.
- Title/Description: You can add a Title and Description to display with your Image Item.
- Button Text/Links To: Add a Button for your Image Item as a call-to-action to lead users to a desired area.
- Alt Text: Add alt text to your image as a way to improve accessibility on your website.
TEXT
- Title/Description: Add a Title and Description to display as your Text Item. This is great for showcasing your client testimonials.
- Button Text/Links To: Add a button to display to direct users to another area.
VIDEO
- Embed Code: Once you have uploaded your video to YouTube or Vimeo, paste the embed code in the Embed Code box.
- Cover Image: Upload a Cover Image to display before a user clicks to play your Video Item. If no cover image is uploaded, only a "play" button will display.
- Title/Description: Add a Title and Description for your Video Item.
- Button: Add a Button to display on your Video Item, directing users to a desired area.
- Alt Text: Add alt text to your video as a way to help accessibility on your website.
DELETE ITEMS
Delete an item by dragging and dropping it to the delete button.
LAST ITEM LINK
Using the Last Item customization feature allows quick loading of your content and for your users to choose to view more of your List Items. If you have more List Items than your selection of rows and columns in the Layout area allows, then you have the following options for the last item in your sequence:
- None: The exact number of List Items according to your selection of rows and columns will display.
- Yes, as a "load more link": A box will display as the last item in your sequence of List Items, which will load more of your List Items once clicked. You can customize the text that shows in this box in the LINK TEXT box provided.
- Yes, as a Standard Link: Similar to the previous "load more" option, this choice displays a box with custom link text as the last item in your sequence which will connect to another area upon clicking.
Link options include:
- NONE: Your item would not link anywhere.
- 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 item to a phone number allows users to quickly click to call you.
- EMAIL: Connecting your item 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: Opens up one of the Pop-Ups you've set up in the MARKETING tool.
LAYOUTS
The Layout determines the number of list items that show, as well as the display of any Titles, Descriptions, and Buttons you have set up.
Rows and Columns
The number of rows and columns you choose to display within a List block determines how many list items will show. For example, if you have 30 list items and choose to show two rows and three columns in your List block, six of your 30 list items will show. The rows are horizontal and the columns are vertical.
Click save under the current layout to make your selections.
Classic Layouts
The List Items' Title, Description, and Button are shown upon hovering over an item.
- Square
- Portrait
- Landscape
Editorial Layouts
The List Items' Title, Description, and Button are shown below the Item.
- Editorial Badges
- Editorial Circle
- Editorial Square
- Editorial Landscape
- Editorial Portrait
Modern Layouts
The List Items' Title display without hovering. No Item Descriptions are shown.
- Modern Square
- Modern Portrait
- Modern Landscape
Pinboard Layout
Items are displayed in a Pinboard Layout. Titles and Descriptions appear upon hovering with your mouse. Buttons do not display.
Image Left/Right Layouts
Items are displayed on either the left or right in a vertical fashion. Titles and Description appear to the side of the image on either side. Buttons display below the text. (Images in this layout do not crop)
- Image Small Left
- Image Small Right
- Image Large Left
- Image Large Right
Other Layouts
- Arches
- Circle Overlay Top
- Designer Portrait Title Overlay
- Portrait Border
- Image Border Text Bottom
STYLING, COLORS & BACKGROUND
STYLING
The List block styling section includes six styling options: Overlay Darkening, Space Between Items, Space Below Blocks, Space Inside Blocks, Flushing, and Mobile View. These styling sections will override the settings that have been picked in the global styling section under the DESIGN tab.
- Overlay Opacity: Increase or decrease the opacity of your overlay by adjusting the percentage. This setting is not available when using an Editorial layout.
- Space Between Items: Controls the spacing between images using grid layouts.
- 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.
- Flushing: Controls whether the content of this block flushes to fill the screen width or remains contained in the center.
- Mobile View: Controls whether images on mobile and smaller devices display in one column or two.
COLORS
Adjust the colors of the List block. These colors will override the colors that have been picked in the global color section under the DESIGN tab.
BACKGROUND
You can customize a background image behind your List Block to be different from your website. You can upload a custom background image or choose one from our Background Library.
FONTS
You can easily customize the fonts you're using on your list 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 lists:
- TITLE
- DESCRIPTION
- BUTTON TEXT
- LAST ITEM TEXT
Click on Save Changes at the bottom of the control panel menu to apply your changes.