Adding images throughout your site is a great way to show off your expertise to visitors. In this tutorial, you will learn about the variety of ways you can customize how your images are displayed.
IMAGES
You can upload your JPG or PNG images from your computer by clicking UPLOAD. You may also insert images from the CLIPBOARD or choose from our STOCK LIBRARY.
You can click on your image thumbnail to customize its focal point, title, description, and where you want it to link.
LAYOUT
There are a variety of ways to display your images within an image block. The Layout area allows you to determine the number of rows and columns in which your images are arranged, how they are cropped, and how titles and descriptions are displayed.
You can learn about each layout available below:
SQUARE: Images will display as squares in a grid with the number of rows and columns of your choosing. If you add a title or description, they will display once a user hovers over the image with their mouse.
PORTRAIT: Images will display vertically, taller than they are wide, in a grid with the number of rows and columns of your choosing. If you add a title or description, they will display once a user hovers over the image with their mouse.
LANDSCAPE: Images will display horizontally, wider than they are tall, in a grid with the number of rows and columns of your choosing. If you add a title or description, they will display once a user hovers with their mouse.
EDITORIAL CIRCLE: Images will display in circles with the number of rows and columns of your choosing. If you add a title or description, they will display below the image.
EDITORIAL SQUARE: Images will display as squares in a grid with the number of rows and columns of your choosing. If you add a title or description, they will display below the image.
EDITORIAL LANDSCAPE: Images will display horizontally in a grid of the number of rows and columns of your choosing. Your images will be cropped to rectangles, wider than they are taller. If you add a title or description, they will display below the image.
EDITORIAL PORTRAIT: Images will display vertically, taller than they are wide, in a grid with the number of rows and columns of your choosing. If you add a title or description, they will display below the image.
PINBOARD: Images will be arranged in a grid in the number of columns and rows of your choosing. The Pinboard layout does not crop the original photos. If you add a title or description, they will display below the image.
COLLAGE 4: Images are arranged and cropped based off of the preset frames of this layout. You can control how many times you want a collage repeated by adjusting the number of sets. For instance, if you have uploaded six images to an image block with a Collage 4 layout and one set, only four images will show. If you add a title or description, they will display upon hovering over your image.
COLLAGE 5: Images are arranged and cropped based off of the preset frames of this layout. You can control how many times you want a collage repeated by adjusting the number of sets. For instance, if you have uploaded six images to an image block with a Collage 5 layout and one set, only five images will show. If you add a title or description, they will display upon hovering over your image.
COLLAGE 6: Images are arranged and cropped based off of the preset frames of this layout. You can control how many times you want a collage repeated by adjusting the number of sets. For instance, if you have uploaded eight images to an image block with a Collage 6 layout and one set, only six images will show. If you add a title or description, they will display upon hovering over your image.
MODERN SQUARE: Images are cropped into squares, using your choice of rows and columns. Image titles will display as a cut out over the image. Image descriptions are not supported with the Modern Square layout.
MODERN PORTRAIT: Images will display vertically, taller than they are wide, in a grid with the number of rows and columns of your choosing. Image titles will display as a cut out over the image. Image descriptions are not supported with the Modern Square layout.
MODERN LANDSCAPE: Images will display horizontally, wider than they are tall, in a grid with the number of rows and columns of your choosing.Image titles will display as a cut out over the image. Image descriptions are not supported with the Modern Square layout.
STACK MINI: Images will fill 70% of the content area with no cropping. Subsequent images will display on a new row. Image titles and descriptions display below the image.
STACKABLE: Images will fill 100% of the content area with no cropping. Subsequent images will display on a new row. Image titles and descriptions display below the image.
GALLERY: Images fit the content area with no cropping, remaining images in the sequence show up as tiles below the main image. Any title and description will lay over the top of the main image. There are left and right arrows to navigate through the images when using the Gallery layout.
SLIDESHOW: Images are not cropped and display in an auto-playing slideshow. If a title or description is provided, they will display over the image.
LAST ITEM LINK
Using the Last Item customization feature allows quick loading of your content, and for your users to be able to choose whether or not they want to see more imagery from a particular set. If you load more images into an image block than can be shown based on your selections of rows and columns in the Layout area, you have the following options:
NONE: The last image will not be linked and if there are extra images outside of the ones determined by your choice of rows and columns, they will not show.
YES, AS A "LOAD MORE LINK": Upon clicking on the last image, the rest of your images will load in the window. You can customize the label displayed on the last image in the LINK TEXT text box.
YES, AS A STANDARD LINK: You can have your last image connect to an External Link, Web Page, Form, Marketing Campaign, file, phone, email, address, or video of your choice.
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 itemto 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 image styling section includes six styling options: Overlay Opacity, 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 in your control panel.
Overlay Opacity: Adjusts the opacity upon hovering over an image. This setting only applies to layouts where titles and descriptions are seen by hovering over an image. Increase or decrease the opacity of your overlay by adjusting the percentage.
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
The image color section includes six color options. These colors will override the colors for the buttons and background that have been picked in the global color section under the DESIGN tab.
BACKGROUND
You can customize a background image behind your image block to be different from your website.
Please note: ADVANCED SETTINGS for this area are optional and allow you to override the GLOBAL settings in the DESIGN area of your account.
Pro Tip!
Not sure if you have created an override to the global settings in your account? The CUSTOMIZED label will appear next to any of the Advanced Settings that have been changed from the global settings. Click the "x" to remove the customization.
0 Comments