How to Add an Image to Your Page

Kayla M.

Updated

Learn to create a beautifully designed page by adding and customizing images.

In this article:

This guide refers to the latest page editor available with the Website Builder and Kajabi Pages. If you are using the Premier Legacy Templates, please refer to the guide here.

Adding an image block

Use images to help set a tone for your site, show your personality, and display what your business has to offer.

To add an Image Block to your page:

  • Open the Website tab from your Dashboard. 
  • Select either Website Pages or Landing Pages.
  • Open the page editor for your Page. Learn more
  • Click the Section you want to edit or create a new Section.
  • In the sidebar, click Add Content.
  • From the list, select Image.
  • Your newly created Image Block will generate at the bottom of the Section.
  • Upload a New File or a Recent File to display your image in the Block.
  • Click Save to keep your changes:

Customizing your image block

With Kajabi, customize the look and feel of the image uploaded as it displays on your page with the various customization features. 

Learn to customize your images with Adobe Express.

In an Image Block, you can:

Select Image

Select the image displayed in the Image Block by:
  • Uploading a New File
  • Selecting a Recent File

Compatible File Types: GIF, JPG, PNG

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 after the image is clicked (leave this blank if you wish to disable the Image Action).

The Image Action can be used to:

  • Lead a visitor to a custom Landing Page
  • Lead to a sale by going to 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 lead to a section of the page
Note:
Checking Add to Section Gallery will disable your Image Action settings to only enable your Section Gallery when clicked. This means your images will expand to full size when clicked for an enhanced "Gallery" viewing for your site visitors.

Image Width

The Image Block can be customized to:

Customize the width of the image within the Image Block by entering a value (e.g., 10px or 10) into the Image Width field:

4CAC2C9D-2157-43D4-8BCA-985031229E11.png

Tip:
The image width must be in the format 10px or simply 10. Leaving the Image Width blank will keep the default width of the image.

Image Caption

The Image Caption displays below your image when the image is clicked and expands to full size for your visitors to view the image in your Section Gallery.

Your Section Gallery can be toggled on by checking Add to Section Gallery toward the bottom of the editor. 

Image Alt Attribute

Add an image alt attribute for SEO or if the image cannot be displayed.

Open In New Tab

Toggle on Open in New Tab to open a separate tab when your image is clicked that leads to your specified destination as configured in the Image Action settings. 

Add to Section Gallery

Add the image to the Section Gallery for enhanced "Gallery" viewing for your site visitors.

This means your image will expand to full size when clicked and your visitors can easily click through the images in the Section:

Keep in mind that enabling the Add to Section Gallery setting will disable Image Actions for the image.

Learn the difference between setting up an Image Gallery Section and adding images to your Section Gallery to enhance the visually interactive experience for your visitors in this Guide. 

Block Settings

To adjust the look and feel of the Block, configure your Block Settings by customizing the:

Overlay Block Setting

What is an overlay?

An overlay changes the appearance of your image to help communicate a message to your visitors. This can be done by displaying an overlay color or including text to appear on top of your image. 

Customize the appearance of your image with the Overlay Block setting:

  • Show Overlay on Hover: Display an overlay color and/or text when your visitor hovers over the image.
  • Always Show on Mobile: Always display the overlay when viewed on a mobile device.
  • Overlay Background Color & Text Color: Customize the general appearance (color and text) of your overlay setting if you choose to have it enabled.
  • Overlay Text: Display a custom message as the overlay for your image.

And that's how to add an image to your page! Please vote below and let us know if you found this article helpful. We value your feedback. Thanks for being the best part of Kajabi!

Did you find this article helpful?