The List Block option is found in the Website Builder menu. It makes it easy to organize images, text, and videos in a grid display.
It is a great way to display images with client testimonials or redirect visitors to an external page or area within your site.
How To Add The List Block To Your Website
STEP ONE
Log into your PhotoBiz 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 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.
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 add a button for a "call to action" for your clients.
IMAGE ITEM
- 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.
- Alt Text: Add alt text to your image as a way to improve accessibility on your website.
- Button Text/Links To: Add a Button for your Image Item as a call-to-action to lead users to a desired area.
TEXT ITEM
Text List Items allow you to create an item that only contains text and a button. You can add the following options:
- TITLE: Text title
- DESCRIPTION: Text description
- BUTTON TEXT: Text that displays on your button
- LINKS TO: What your button will direct users to if they click or tap on it
Click on CREATE NOW to add your Text List Item.
VIDEO ITEM
- Embed Code: Once you have uploaded your video to a video playing service such as 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.
- Alt Text: Add alt text to your video as a way to help accessibility on your website.
- Button Text: Add a Button to display on your Video Item, this will open the embedded video content in a pop out to play back for the page visitor.
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.
If i you choose STANDARD LINK, you can choose from the following options:
- 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.
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.
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.
- ROWS: How many rows of images appear down the block
- COLUMNS: How many columns of images appear across the block
Click save under 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 Circle
- Editorial Square
- Editorial Landscape
- Editorial Badges
- 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 & IMAGE 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 offers different styling options depending on the layout that you've selected. The List Block Styling section can include:
- OVERLAY OPACITY: Increase or decrease the opacity of your overlay by adjusting the percentage. This setting is not available when using an Editorial layout.
- TITLE ALIGNMENT
- DESCRIPTION ALIGNMENT
- BUTTON ALIGNMENT
- IMAGE BORDER THICKNESS
- 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 buttom of the list item 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.
Click on SAVE CHANGES at the bottom to apply your styling choices to your List Item block, these will override your global design settings.
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. This section will have varying color options depending on the Layout that you've selected for your List Item block.
BACKGROUND
You can add a background image to display behind your List Item 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
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.
ANIMATION
You can add Button Hoover Animation to your list block items. You can choose between the following options:
- NONE
- FILL
- OVERLAY
- SCALE
- ARROWS
Click on SAVE CHANGES to apply your animation choices to your list block.
Tips for Best Results:
- Use high-quality images to make your List Block visually appealing.
- Experiment with layouts to find one that best suits your content.
- Keep text concise and action-oriented for better engagement.
- Test your List Block on both desktop and mobile views to ensure a seamless experience.
If you have any questions about the List 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 - 6:00pm EST and we're happy to help you however we can.