Image Blocks overview

Image Blocks add individual images to pages and blog posts. You can upload your own images, or license stock photographs from Getty Images.

There are six Image Block layouts, and their design and behavior are consistent across all templates.

Note: Caption styles for the Inline layout are determined by your template.

Tip: Other ways to add images to your site include banner images, background images, Gallery Blocks, and Gallery Pages.

Watch a video

Image Block comparison

Here's an overview of the differences between the six Image Block layouts, with an example of how each one can be styled.

Poster

The Poster Image Block displays text over the image.

Card

The Card Image Block aligns text to the left or right of an image.

Overlap

The Overlap Image Block displays an image on one side with text on the other, partially overlapping the image. Add a background color to the title for a highlighting effect.

Collage

The Collage Image Block displays an image on one side and text over a background "card," offsetting and overlapping the image.

Stack

The Stack Image Block displays an image with text below, with an optional background color.

Inline

The Inline Image Block displays a plain image with an optional caption (our classic Image Block).

Mix and match

You can mix and match multiple Image Block styles on one page or post.

Each layout has its own style options.
A layout style's options are universal for the site. For example, every Poster Image Block on your site will be styled the same way.

Captions vs. titles and subtitles

The Inline layout supports one basic caption. This is best for displaying an artist name, crediting a media outlet, or displaying the image title. Learn about caption style options, which are set automatically.

Note: Captions won't display if the Image Block is empty.

All other layouts offer title and subtitle fields. These have more style options and put a greater emphasis on the text, creating more interaction between the image and the words. To learn more, visit the guides for the Poster, Card, Overlap, Collage, and Stack layouts.

The layout styles have different advantages:

Inline	All other layouts
One caption field Text styles are set automatically (usually follow body text) Can display on hover Caption becomes alt text automatically	Two text fields: a title and a subtitle Style the text in the Style Editor Different display options depending on layout Add alt text manually

Step 1 - Add an Image Block

To add any Image Block:

Open a page or post editor.
Click an Insert Point or the +.
Under Image Layouts, select Poster, Card, Overlap, Collage, or Stack. For the Inline layout, select Image in the Basic section.

Step 2 - Add an image

Tip: We recommend keeping your images under 500 KB for best results. To learn more, visit Formatting your images for display on the web.

Option 1 - Add your own image

In the Edit Image window, drag your image into the image uploader. You can also click Upload an Image to select a file from your computer. Click Apply.

Option 2 - Use a stock image

With our stock image integrations, you can add free and premium stock images directly from your site. This is a great option if you don't already have an image to use.

Click Search For Image to search, preview, and add a stock image for your thumbnail. To learn more, visit Searching and adding stock images.

Step 3 - Add and style text (optional)

Click Write here to add a caption or title and subtitle text to the image.

Text fields and style options vary by layout:

The Poster, Card, Overlap, Collage, and Stack layouts have style options in the Style Editor. They also support buttons.
The caption style for the Inline layout is set automatically (it usually follows body text).

For the best display, keep the text short. Try to limit subtitles to one or two sentences. This maintains a nice balance between the words and the image. It also keeps the text visible on mobile devices.

Tip: You can also create alt text to help search engines recognize your image.

Step 4 - Adjust design settings

In the Design tab:

For the Inline layout, set the caption display, lightbox settings, and a clickthrough URL.
For the Poster, Card, Overlap, Collage, or Stack layouts, use the Image Link drop-down menu to add a button or clickthrough URL.
Set the Image Position for the Card, Overlap, or Collage layouts.

Step 5 - Save

Click Apply to save any changes to the block.

Step 6 - Customize the design

The Poster, Card, Overlap, Collage, and Stack Image Blocks have their own style settings in the Style Editor. The preview of the image on your page will change so you can view the changes in real time. We recommend playing around with the settings until you find a design you like.

To learn more, visit our layout guides:

Add animation

We're testing new animation options on a small number of randomly selected sites. If you’re in this group, you can add visual effects to Image Blocks. Visitors will see the animations when they load or refresh the page.

To add animation:

In any Image Block editor, click the Animations tab. (If you don't see the Animations tab, your site isn't in the test group.)
Select an effect from the Animate Image Block drop-down menu to apply to the image and any text. As you select an option, you’ll see a preview of how it loads on the page.

Choose from:

Fade In - Block fades in
Focus In - Block looks blurry, then comes into focus
Slide Up - Block slides upward
Collide - Image and text slide inward from the sides
Reveal - Image and text slide outward from the center
Custom - Choose separate image and text animations

To animate the image and text separately, select Custom, then select options for Animate Image and Animate Image Text.

Choose from:

Fade In - Image or text fades in
Slide Up - Image or text slides upward
Slide Down - Image or text slides downward
Slide from Left - Image or text slides in from the left
Slide from Right - Image or text slides in from the right

Animations are only available in a small number of sites, selected randomly. Since we’re currently testing this feature, we can’t add it to sites that don’t have it. We hope to add this feature to all sites in the near future.

Move the Image Block

After saving the image, drag and drop the block anywhere on the page. You can also use this method to wrap text around the image. To learn more, visit Moving blocks.

Only the Inline layout supports a lightbox. To have your image open in a lightbox:

Double-click the image to open the image editor.
Click the Design tab.
Ensure your layout is set to Inline.
Check Enable Lightbox.
Choose your lightbox style with the Lightbox Theme drop-down.

Note: Captions always display in lightbox view. Lightboxes disable clickthrough URLs.

Edit the image with the Adobe Creative Cloud Image Editor

Click Edit to rotate, crop, or add filters to the image with the Adobe Creative Cloud Image Editor.

Remove or replace the image

To delete the block, click the trash can icon in the page or post editor.

To remove the image without removing the block, open the Image Block Editor and click Remove. You can then replace it with another image.

Change the layout

You can switch the design to a different layout in the Design tab of the Block Editor. This way, you change the design and behavior of your image without deleting and re-adding the block.

Double-click on the block in the page editor.
Click the Design tab.
Select the new layout.
As you make a selection, the preview of the image on your page will change so you can view the changes in real time.

Tip: When switching between Inline and any other layout, you'll need to re-enter the image text.

Add an image link or button

There are two ways to create links in the Image Block:

Turn the image itself into a clickable link.
Add a button below the title and subtitle (all layouts except Inline)

Inline layout

Add a clickthrough URL in the block editor's Design tab to link your image.

Enabling a lightbox disables clickthrough URLs.
The Inline layout doesn't support buttons.

All other layouts

In the block editor's Design tab, set a link from the Image Link drop-down menu. Choose from:

None - No link
On Image - The entire image becomes a clickable link
Button - Add a button inline with the text, below the title and subtitle

Use the Clickthrough URL field to set your link for the image or button. You can link your image to another page of your site, an external site, or a file.

Use the Style Editor to customize the button. Scroll down to the section for that layout to adjust these tweaks:

Button Font - Set the button font and size
Button Font Color
Button Background Color
Button Border Color - Adjust the color of the border set with the Button Border Width tweak
Button Border Width
Button Padding
Button Rounding
Button Separation - Adjust the position of the button

Resize or crop the image

For all layouts:

Add blocks on either side to shrink the whole Image Block.
To crop the original image, use the Adobe Creative Cloud Image Editor or third party software.

Each layout has additional cropping and resizing options:

Create alt text

Alt text helps search engines recognize your image.

Captions added in the Inline layout become alt text for the image. To add alt text but not a caption, add the caption text, and then select Do Not Display Caption.

For all other layouts, the captions don't become alt text, but you can set it manually using the Inline layout:

Open the block editor.
In the Design tab, choose the Inline layout.
Use the caption field to add the alt text.
Switch to any other layout, and add any text you want to display as the caption. The text you added in the Inline layout will remain the alt text.

Tip: If you don't see the Write here text with the Inline layout, temporarily switch the caption style to Caption Below in the Design tab.

Use an image as a page banner

For tips on using an Image Block as a page banner, visit Adding banner images.

Image blocks on mobile

Each Image Block layout retains its formatting on mobile. Text will move on mobile to fit the device and will keep a similar position relative to the image.

With the exception of Inline and Stack layouts, captions maintain their set width relative to the image. This means that longer captions may be harder to read.
To see how your Image Block will look, use Device View.
Multiple Image Blocks stack vertically on mobile.
The Card, Collage, Overlap, and Stack layouts have a Dynamic Font Sizing option in the Style Editor. When this is enabled, text won't resize smaller than 14 pixels.

FAQ

The image is sideways

This can happen if the original image was taken sideways and uploaded directly without rotating it in an image editing program first.

To rotate the image, you can use the Adobe Creative Cloud Image Editor, or edit it in an external program and re-upload it.

My images are appearing in different colors

This happens when an image is saved in CMYK mode instead of RGB mode.

You should always save your images in RGB or sRGB mode. RGB color mode is a web-safe format, while CMYK is for printing and won't render in most browsers. For more image formatting tips, visit Formatting your images for display on the web.

What's the recommended file size?

While the Image Block has a file size limit of 20 MB, we recommend keeping your images under 500 KB for best results. To learn more, visit Formatting your images for display on the web.