The Overlap Image Block is one of six Image Block designs. It displays an image on one side with a title and subtitle on the other. The title can partially overlap the image. Add a background color to the title for a highlighting effect.
Before you begin
- Site Styles tweaks will affect all Overlap Image Blocks on your site. Site Styles changes will reset if you switch templates.
- Changes made within the Image Block editor are specific to that block. They won't change if you switch templates.
Step 1 - Add an Overlap Image Block
To add an Overlap Image Block:
- Open a page or post editor.
- Click an Insert Point or the +.
- Under Image Layouts, select Overlap.
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 - Choose the image side
In the Design tab of the image editor, choose the Image Position (left or right).
Step 4 - 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.
- 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.
- To create alt text, follow these steps.
Step 5 - 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.
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.
- Button - Add a button inline with the text, below the title and subtitle. You can style the button in the Site Styles panel.
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.
Step 6 - 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 7 - Save changes
Click Apply to save your changes to the block.
Step 8 - Style the image and text
From the Home Menu, click Design, then Site Styles.
Scroll down to the Image Block: Overlap section to adjust the style. These tweaks affect all Overlap Image Blocks on your site:
- Dynamic Font Sizing - Resizes the text depending on the width of the block and browser. The title and subtitle text won't resize smaller than 14 pixels.
- Content Position: Top, Center, Bottom
- Text Alignment: Left, Center, Right, Match, Opposite - Align the title. Match aligns the text on the same side as the image. Opposite aligns the text on the other side.
- Image Width - Set the size of the image
- Title Overlap - Choose how much of the title overlays the image. This affects the text size.
- Title Font - Set the title font and size
- Title Color
- Subtitle Font - Set the subtitle font and size
- Subtitle Color
- Inline Link Color - Set the title and subtitle link color
- Title Separation - Set the space between the title and subtitle
- Image Overlay Color - Add a color filter over the image
- Title Background Color - Add a color behind the title
If you added a button, use these tweaks to customize it:
- 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
When you've finished, click Save.
Tip: You can adjust the opacity for each color tweak.
Resize or crop the image
There are several ways to adjust the size and cropping of the image:
- Use the Image Width tweak in the Site Styles panel to adjust the size.
- 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.
Once you've added an Image Block, you may want to explore the following options: