Use an Image Block to set the tone of your page, show your personality, and display what your business offers. Add a single image, or build a group of images with an Image Gallery Section.
The steps below apply to the latest page editor, available with the Website Builder and Kajabi Pages. If you built your page with the Premier legacy template, go to Add an image section with Premier (legacy template) later in this article.
Add an Image Block
From the Dashboard, click Website.
Select either Website Pages or Landing Pages.
Open the page editor for your Page. Learn how to open the page editor.
Click the Section you want to edit, or create a new Section.
In the sidebar, click Add Content.
From the list, select Image. Kajabi adds the Image Block at the bottom of the Section.
Click Select Image, then choose Upload new file or Select recent file.
Click Save.
Customize an Image Block
Change how your image looks and behaves on the page with the Image Block settings. To edit an image before you upload it, learn how to customize your images with Adobe Express.
Compatible image files
Upload a GIF, JPG, or PNG file.
Tip: The maximum file size that can be uploaded to the Template Editor Assets Folder is 1 MB.
Image Action
Select an Image Action to trigger an action when a visitor clicks the image. Leave it blank to turn the Image Action off. Use an Image Action to:
Lead a visitor to a custom Landing Page
Lead to a sale from a Checkout Page
Encourage your audience to download a file
Lead to any website page with a URL link
Open a Two-Step Optin Popup
Act as an anchor link to a section of the page
Note: Checking Add to Section Gallery turns off your Image Action settings so the image only opens in your Section Gallery when clicked. The image expands to full size for visitors.
Image Width
Change the width of the Block, or the width of the image within the Block. To change the image width, enter a value (for example, 10px or 10) in the Image Width field:
Tip: Enter the image width as 10px or simply 10. Leave the field blank to keep the default width of the image.
Image Caption
The Image Caption displays below your image when a visitor clicks it and it expands to full size in your Section Gallery. Turn on your Section Gallery by checking Add to Section Gallery toward the bottom of the editor.
Image Alt Attribute
Add an Image Alt Attribute to describe your image for search engines and for visitors whose browser can't display it.
Open in New Tab
Turn on Open in New Tab to open the destination from your Image Action in a separate browser tab when a visitor clicks the image.
Add to Section Gallery
Check Add to Section Gallery to give visitors an enhanced "Gallery" view. The image expands to full size when clicked, and visitors can click through the images in the Section:
Keep in mind that Add to Section Gallery turns off the Image Action for that image.
Image Block settings
Adjust the look and feel of the Block by configuring its Block settings:
Overlay
An overlay changes the appearance of your image to help communicate a message to your visitors. Display an overlay color, text on top of your image, or both.
Customize the overlay with these settings:
Show Overlay on Hover: Display an overlay color and text when your visitor hovers over the image.
Always Show on Mobile: Always display the overlay when your page is viewed on a mobile device.
Overlay Background Color & Text Color: Set the color and text color of your overlay.
Overlay Text: Display a custom message over your image.
Add an Image Gallery Section
An Image Gallery Section showcases a group of images in a uniform layout. Adding one generates six Image Blocks, so you can build and design a page filled with images.
From the Dashboard, open the Website tab.
Select either Website Pages or Landing Pages.
Open the page editor for your Page.
In the sidebar, click Add Section.
Select the Image Gallery Section to preview it.
Click Add to add the preset Section to your Page.
Upload images to an Image Gallery Section
Upload images from your hard drive or select recently uploaded images:
In the page editor, click the Image Block you want to change.
In the sidebar, click Select Image.
Choose Upload new file or Select recent file.
Click Save.
Add more Image Blocks to an Image Gallery Section
An Image Gallery Section is made up of six Image Blocks. Add another Image Block to include more images. The new Block is a different size from the rest of the gallery, so customize its settings to fit your design.
Hover over the Image Gallery Section and click inside the Section, not inside an Image Block.
In the sidebar editor, click Add Content.
Click Image.
Customize the new Image Block to fit your Image Gallery Section.
Click Save.
Customize an Image Gallery Section
Edit the Image Blocks and the Section settings to change how your gallery looks, behaves, and what it shows. Section settings:
Image Gallery Section vs. Section Gallery
An Image Gallery Section and a Section Gallery sound alike but do different jobs. Knowing which one you need helps you create the best visual experience for your visitors.
Section Gallery
The Section Gallery expands your images to full size when a visitor clicks one, so visitors can click through your images in a gallery view. In an Image Block, turn on Add to Section Gallery to enable it.
Image Gallery
An Image Gallery is a Section of a page made up of Image Blocks. Get one by adding an Image Gallery Section, which generates six Image Blocks in one Section, or by adding Image Blocks to a Section yourself:
Note: An Image Gallery and a Section Gallery are different features, but you can add the images in an Image Gallery to your Section Gallery. Turn on Add to Section Gallery for each Image Block in the Section.
Add an image section with Premier (legacy template)
Note: These steps apply only to pages built with the Premier legacy template. If your page uses the latest page editor, follow the steps earlier in this article.
In the Premier legacy template, you add images with an Image Section.
From the Dashboard, click Website.
Click Pages.
Open the page editor for your Page. Learn how to open the page editor.
In the sidebar editor, click Add Section.
Click Images.
Click Add.
Click Select Image, then choose Upload new file or Select recent file.
Click Save.
Note: To remove an Image Section, click Delete This Section at the bottom of the sidebar.
Customize a Premier image section
Customize an Image Section in the Premier legacy template with these settings:
Heading and Subheading: Enter the message you want above the image.
Image Action: Trigger an action when a visitor clicks the image. Lead to a custom Landing Page, a Checkout Page, a file download, any website page with a URL link, a Two-Step Optin Popup, or a section of the page. Check Open In New Window to open the Image Action in a new window.
Image Width: Enter a width as 10px or simply 10. If you leave it blank, the image takes its natural width with a maximum width of 100%.
Background, Text Color, and Section Spacing: Change how the Section looks.