Skip to main content
Search

Image Block

Posted

Introduction

An Image Block lets you display pictures on your template. Images make your template more engaging, help explain ideas, and can even guide users to take action.

1. Adding an Image Block

  1. Open the Components Panel on the right side of the editor.
  2. Find the Image Block component.
  3. Drag and drop it into a column inside your section.

Important: Images need to be placed inside a column. Columns organize your layout and make sure images align correctly with other elements. Without a column, your image may not display properly or affect other blocks.

2. Uploading or Changing an Image

  1. Click on the Image Block on the canvas.
  2. In the Settings Panel, click Upload or Select Image.
  3. Choose your image from your computer or your media library.
  4. The image will appear in the block on your template.

Tip: Use high-quality images that are optimized for templates to keep them loading fast.

3. Resizing and Positioning Images

  • Resize: Drag the corners of the image or adjust width and height in the Styles Panel.
  • Alignment: Use options to position the image left, center, or right within the column.
  • Spacing: Adjust padding (space inside the image box) or margin (space outside the image box).

Think of spacing like giving the image room to breathe so it doesn’t feel cramped.

4. Styling Images

You can make your images look even better with the Styles Panel:

  • Borders & Radius: Round corners or add a border around the image.
  • Shadow: Add a soft shadow to give it depth.
  • Opacity: Make the image more transparent for a subtle effect.

5. Using Images Effectively

  • Use images that support your content and help tell your story.
  • Keep consistent image sizes and styles across the template.
  • Avoid using too many images in one section—it can distract users.
  • Combine images with text or buttons to guide users.

6. Tips for Beginners

  1. Always place images inside a column.
  2. Keep images relevant and high-quality.
  3. Preview your template to check how images look on mobile and desktop.
  4. Use images to highlight important sections without overwhelming the user.
Table of Contents