Image

Overview

The Image block offers advanced control for displaying images across multiple layouts, helping you create visually impactful and accessible content. Its settings let you adjust images for responsiveness, style, links, overlays, and descriptive captions, while ensuring your site remains cohesive and user-friendly.

⚠️ Important: The Image block gives you powerful options to customize how images appear and behave across your layouts, maximizing engagement and accessibility on every device.

Image settings

Image settings provide tools to fine-tune the appearance and behavior of your image. Easily integrate images within your designs and adapt them for desktop and mobile experiences.

Choose and upload your image using the built-in selector. This image forms the core visual element in your block.

Shape how the image displays by choosing from several styles:

1. Default

   • Displays as a standard rectangle. This is the default style.

2. Rounded corners

   • Adds subtle rounded edges for a polished effect.

3. Circle

   • Crops your image into a circular shape for modern layouts.

Control the maximum width of your image with a numeric value from 0 to 1600 pixels. Use increments of 16 for precision. A setting of 0 means the image stretches to fill the available width.

Set the desktop aspect ratio for your image:

1. Default

   • Uses the original aspect ratio of the uploaded image (default setting).

2. Landscape

3. Portrait

4. Square

5. Ultrawide

6. Widescreen

Choose a separate aspect ratio for mobile, using the same options as desktop. The default setting matches the desktop aspect ratio to ensure a seamless look across devices.

Select a border color to enhance the image or integrate it into your color palette.

Provide a URL to make your image clickable, creating a seamless navigation experience.

Optionally, enable the setting to open the link in a new browser tab. The default is off, so links will open in the same tab by default.

Caption settings

Caption settings allow you to add descriptive, promotional, or editorial text to your images. This creates additional context, improves storytelling, and supports accessibility.

Add your caption in the rich text field, which lets you style text to suit your visual voice.

Align your caption left, center, or right to fit with the rest of your content and maintain a professional look.

Choose where the caption appears:

1. Top

   • Caption is shown above the image.

2. Bottom

   • Caption is shown below the image.

Select the size of your caption text:

1. Small

2. Medium

   • Medium is the default size.

3. Large

4. Extra large

Overlay settings

Overlay settings enhance your images with tints or gradients, making text more legible and images more visually cohesive.

Pick an overlay color to add a uniform tint above your image, improving contrast and helping text stand out.

Apply a gradient overlay for a layered effect and extra style.

Control overlay opacity from 0% (transparent) to 100% (fully opaque), in increments of 4%. The default is 48%, striking a balance between image clarity and overlay visibility.

Alignment settings

Alignment settings let you precisely control where your image and caption are positioned, supporting both desktop and mobile presentations.

Assign horizontal alignment for desktop to achieve your layout goals, such as centering or left-aligning visuals.

Override alignment on mobile for perfect display on smaller screens, ensuring clarity and ease of navigation.

Visibility settings

Visibility settings help you control where and when your Image block is displayed, allowing for targeted messaging and better performance.

1. Do not hide

   • Block is always visible by default.

2. Hide on desktop

   • Block is only shown on non-desktop (mobile) devices.

3. Hide on mobile

   • Block is only shown on desktop devices.

Available in sections

The Image block can be added to these sections:

1. Collage

2. Slideshow

3. Multicolumn

4. Image with text

5. Hero

6. Sidebar

Usage notes

💡 Tip: Always upload high-quality images and provide alt text for accessibility. Use overlays for clear captions, match aspect ratios for each device type, and test your block for responsiveness before publishing.

1. Set aspect ratio and alignment for both desktop and mobile to maintain a polished appearance.

2. Adjust overlay opacity for the perfect balance between image and caption clarity.

3. Choose images optimized for the web to keep your site fast and sharp.

4. Use links wisely, enabling new tab openings where helpful for user experience.

5. Clearly label blocks in the editor, especially in complex layouts, to stay organized and efficient.