How To Add Image Blocks
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.
How To Add The Image Block + Images To Your Website
STEP ONE
Log into your PhotoBiz account and click on the WEBSITE option in the left side menu.
STEP TWO
Click on the page name or add a new page you want to use an image block on.
There are two ways to have an active image block on your page:
- On the right hand side of your screen, you can click the image icon and the image block will appear at the very bottom of your page.
- The second option is to hover your mouse over the image icon, left click and hold, then drag the block to your preferred location. When a teal colored line appears where you want the block, let go of the mouse button and the block will drop in that location. To move it, simply drag it up or down.
STEP THREE
To add images to your image block, simply click inside the block or on the pencil icon at the top right and choose Advanced. The menu will open on the right side of your control panel and give you the following options:
- UPLOAD: Upload your own files from your device.
- CLIPBOARD: Insert images you've previously uploaded or added to your image clipboard.
- STOCK IMAGES: Insert images from our royalty free stock image library.
Once you've added your images, you'll see thumbnails of each one in your right side menu. You can easily rearrange them by click and dragging them. You can also click on any individual image to add titles & descriptions, add alt text, or link them to other items.
STYLING OPTIONS FOR YOUR IMAGE BLOCK
Last Item Link
The Last Item Link feature allows quick loading of additional images in your image block if the number of images you have uploaded exceed the total number of rows and columns you've selected for your image block. You can also use the last item link as a call to action link to other pages/social media/items that you want to direct visitors to. You'll see the following options for Display Last Item Link:
- NONE: No link will be used on the last item in your grid.
- YES, AS A "LOAD MORE LINK": When clicked, it will load another set of items within the page. You can customize the text that appears in the load more link under the Link Text section.
- YES, AS A "STANDARD LINK": When clicked, it will link out to a separate page. You can customize the text that appears in the standard link under the Link Text section. You can also choose what you would like to link the standard link to from the following options:
- NONE: The button will not link anywhere and exists for aesthetic reasons on your page.
- 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 button to a phone number allows users to quickly click to call you.
- EMAIL: Connecting your button 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: Enable one of your pop-ups to pop up when the button is clicked on to easily notify clients of your promotions, discounts or to sign up for your newsletter.
- NONE: The button will not link anywhere and exists for aesthetic reasons on your page.
IMAGE BLOCK LAYOUT OPTIONS
You can choose from 24 different image block layouts for how you'd like your images to be displayed in your image block. The image block layouts are the following:
- 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.
- 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.
- CAROUSEL: Images display horizontally and slide left to right in a single row.
- CAROUSEL SLIDESHOW: Images display horizontally and slide left to right in a single row and automatically play within your image block.
- EDITORIAL & GALLERY COLLAGE 3 & 4: Discover new and expressive methods to present your images with our Gallery collages. These layouts allow you to create modern, museum-like displays, transforming your work into showpieces on your website and within galleries. Featuring airy spacing, overlapping elements, and various layout patterns to break conventional design norms, you will undoubtedly fall in love with the ease of making your site look effortlessly attractive.
You can also control the number of rows and columns that display depending on the layout you've chosen. This will control how many images appear on screen when a visitor is looking at your image block.
To choose your layout and apply it to your image block, simply click on the SAVE button under the layout you wish to use.
STYLING OPTIONS
The image styling section gives you more control over how your images are displayed within the layout you've selected. By default, this section will use the styling and spacing settings in the global styling section of your website. You can override the global settings for your image block within this area. The settings in this section can include any of the following items:
- 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.
Click on Save Changes to apply your changes to your image block styling options. The customized message will apply to any colors you've changed from your default styling settings.
COLORS
The button color section includes six color options. These colors will override the colors for the button that have been picked in the global color picker section under the DESIGN tab. Click on the color square or enter the HEX color code to customize the color for the following sections:
- TITLE COLOR
- TEXT COLOR
- BACKGROUND COLOR
- OVERLAY COLOR
- LAST ITEM TEXT COLOR
- LAST ITEM BACKGROUND COLOR
The customized flag will appear next to any color you've selected to override the global color picker for your website.
Click on save changes at the bottom to apply your color updates.
BACKGROUND
You can add a background image to display behind your Image 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 image 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 banners:
- TITLE
- DESCRIPTION
- LAST ITEM TEXT
Click on Save Changes at the bottom of the control panel menu to apply your changes.
If you have any questions about the Images 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.