Image Blocks add individual images to pages and blog posts. You can upload your own images, or license stock photographs from our Unsplash or Getty Images integrations.
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.
The Poster Image Block displays text over the image.
The Card Image Block aligns text to the left or right of an image.
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.
The Collage Image Block displays an image on one side and text over a background "card," offsetting and overlapping the image.
The Stack Image Block displays an image with text below, with an optional background color.
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|
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 Site Styles panel. 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 Site Styles panel. 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:
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.
- 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.
- 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.
Set the image to open in a lightbox
Only the Inline layout supports a lightbox. To have your image open in a lightbox:
- Double-click the image to open the block 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
Click Edit to rotate, crop, or add filters to the image with the built-in 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)
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 Site Styles panel 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 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.
- To see how your Image Block will look, use Device View.
- 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.
- Captions for the Card, Collage, and Overlap layouts move from alongside the image to below the image.
- The Card, Collage, Overlap, and Stack layouts have a Dynamic Font Sizing option in the Site Styles panel. When this is enabled, text won't resize smaller than 14 pixels.
- Multiple Image Blocks stack vertically on mobile.
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.
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.