The Inline Image Block is one of six Image Block designs. It displays a plain image with an optional caption. This is our classic Image Block.
Step 1 - Add an Inline Image Block
To add an Inline Image Block:
- Open a page or post editor.
- Click an Insert Point or the +.
- Under Basic, select Image.
Tip: You can also switch layouts for an existing Image Block in the Design tab.
Step 2 - Add an image
Click Upload an Image to upload an image from your computer, or click Search For Image to search and add a stock image. For more help, visit the Image Blocks overview.
Step 3 - Add text
Display text (a title and subtitle) over the image, so you can write directly on an image without adding text to the image file itself.
To add the text, click Write here to add a title and subtitle.
- If you don't see the Write here text, temporarily switch the caption style to Caption Below in the Design tab.
- 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.
- The Inline layout automatically creates alt text to help search engines recognize your image. To add alt text but not a caption, add the caption text, and then select Do Not Display Caption in the Design tab.
Step 4 - Choose the caption display
In the Design tab, select a display option from the Caption drop-down menu:
- Do Not Display Caption - No caption will display unless the image is viewed in lightbox.
- Caption Below - Caption appears below the bottom-left corner of the image.
- Caption Overlay - Caption appears over the image in a dark gray bar.
- Caption Overlay on Hover - When the cursor hovers the image, a caption appears over the image in a dark gray bar.
Step 5 - Choose lightbox settings
Check Lightbox to have the image display in a lightbox when clicked.
- Captions display in the lightbox even when set to Do Not Display Caption.
- Using lightboxes disables clickthrough URLs.
- Set your lightbox style by choosing Dark Overlay or Light Overlay from the drop-down.
Step 6 - Add an image link
To turn the image into a clickable link, in the 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.
Use the Clickthrough URL field to set your link for the image. You can link your image to another page of your site, an external site, or a file.
- Enabling the lightbox disables the clickthrough URL.
- Unlike the other five layouts, the Inline layout doesn't support buttons.
Step 7 - Add animation
We're testing a new option for Image Blocks that’s available on a small number of randomly selected sites. If you’re in this group, you’ll see an Animations tab in your Image Block editor, which lets you add a visual effect to your Image Block. To learn more, visit Image Blocks overview.
Step 8 - Save changes
Click Apply to save your changes to the block.
Step 9 - Explore style options
For the Inline layout, the caption style is set automatically. Unlike the other five layouts, there are no tweaks in the Site Styles panel specific to the captions. Instead, they typically follow the same font as your site's body text.
For information about how captions are styled in each template, visit Styling image captions.
Tip: For more style options, consider switching to the Stack Image Block layout.
Resize or crop the image
For the Inline Image block, if the image is narrower than the content area, the image will retain its width. You'll see blank space on both sides of the image within the block. This preserves the original image quality. To fill the blank space and display the image at the full width of the block, check Stretch in the block's Design tab. Stretching an image may affect image quality.
There are several ways to adjust the size and cropping of the image:
- Add blocks on either side to shrink the whole Image Block.
- To crop the original image, use the Image Editor or third-party software.
- Use the cropping handle to crop the image horizontally or vertically.
- Use the focal point to adjust where the image centers.
Once you've added an Image Block, you may want to explore the following options: