How To Use List Blocks
Leave this field empty
Monday, January 08, 2018
By PhotoBiz Knowledge Base
Pin It

The List Block makes it easy to organize images, text, and videos in a grid display. You can use List Blocks to highlight your different services, share your preferred vendors, display your testimonials, or more!


ITEMS

Your List Items in your List Block can be an Image, Text, or Video.

IMAGE

Adding an image: 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. 

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.


DELETE ITEMS

Delete an item by dragging and dropping it to the delete button.


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 change under current layout to make your selections.

 

Classic Layouts: The List Items' Title, Description, and Button are shown upon hovering over an item.

Editorial Layouts: The List Items' Title, Description, and Button are shown below the Item.

Modern Layouts: The List Items' Title display without hovering. No Item Descriptions are shown.

Pinboard Layout: Items are displayed in a Pinboard Layout. Titles and Descriptions appear upon hovering with your mouse. Buttons do not display.

 


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.


ADVANCED SETTINGS

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

Leave a comment: