Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Styling the Image Block

The Image Block offers many ways to combine imagery and text. After adding an Image Block, you can customize the look in the Design tab and Style Editor. We recommend playing around with the settings until you find a design you like.

On a Regular Page, open the Image Block editor. Choose a layout from the Design tab: 

  • Inline - Display a plain image with an optional caption (our classic Image Block).
  • Poster - Display text over the image.
  • Card - Align text to the left or right of an image.
  • Overlap - Display 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 - Display an image on one side and text over a background "card," offsetting and overlapping the image.
  • Stack - Display an image with text below, with an optional background color.

Other areas of your site, like sidebars and blog posts, only support the Inline layout. 

Before you begin

  • Style Editor tweaks made to an Image Block will affect all Image Blocks on your site with that layout. Style Editor 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.
  • Only the Inline layout supports a lightbox and creates alt text automatically.

Add text

To add text:

  1. Open the block editor.
  2. Click Write here on the page.
Tips: 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.

write-here.png

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.
  • All other layouts offer title and subtitle fields. These have more style options and put a greater emphasis on the text, creating an interactive dynamic between the image and the words. To learn more, visit the sections 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)
  • Creates alt text automatically
  • Two text fields: a title and a subtitle
  • Style the text in the Style Editor
  • Add alt text manually

Inline

Display a plain image with an optional caption. This is our classic Image Block.

inline.png

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.

Lightbox

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.

Style the captions

For the Inline layout, the caption style is set automatically. There are no tweaks in the Style Editor specific to the captions; instead, they typically follow the same font as other text on your site. For detailed information, visit Styling image captions.

Poster

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.

poster.png

In the Style Editor, scroll down to the Image Block: Poster section to adjust these tweaks:

  • Text Alignment: Left, Right, Center
  • 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
  • Content Width - Set the width of the caption
  • Title Background Color - Add a color behind the title
Tip: You can adjust the opacity for each color tweak.

Card

Align text (a title and subtitle) to the left or right of an image. On mobile, the text will appear under the image.

card.png

In the Design tab of the image editor, choose the Image Position (left or right).

In the Style Editor, scroll down to the Image Block: Card section to adjust these tweaks:

  • 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 and subtitle. 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 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
  • Card Background Color - Adjust the background that displays behind the caption
  • Card Padding - Set the padding on either side of the caption
  • Card Separation - Add space between the image and the card background
  • Image Overlay Color - Add a color filter over the image
  • Title Background Color - Add a color behind the title 
Tip: You can adjust the opacity for each color tweak.

Overlap

Display an image on one side with text (a title and subtitle) on the other. You can offset the text so it partially overlaps the image. You can also add a background color to the title text for a highlighting effect.

overlap.png

In the Design tab of the image editor, choose the Image Position (left or right).

In the Style Editor, scroll down to the Image Block: Overlap section to adjust these tweaks:

  • 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 and subtitle. 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
Tip: You can adjust the opacity for each color tweak.

Collage

Display an image on one side and text (a title and subtitle) over a background "card," offsetting and overlapping the image.

collage.png

In the Design tab of the image editor, choose the Image Position (left or right).

In the Style Editor, scroll down to the Image Block: Collage section to adjust these tweaks:

  • 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 and subtitle. 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
  • Content Width - Set the width of the caption. This affects the text size.
  • Content Offset - Choose how much of the caption 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
  • Card Background - Adjust the background color that displays behind the caption
  • Card Padding - Set the padding on either side of the caption
  • Image Overlay Color - Add a color filter over the image 
Tip: You can adjust the opacity for each color tweak.

Stack

Displays an image with text (a title and subtitle) below. Unlike the simple Inline layout, the design is more customizable and can have a color background "card."

stack.png

In the Style Editor, scroll down to the Image Block: Stack section to adjust these tweaks:

  • 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.
  • Text Alignment: Left, Right, Center
  • Title Font - Set the title font and size
  • Title Color
  • Subtitle Font - Set the subtitle font and size
  • Subtitle Color
  • Inline Link Color - Sets the title and subtitle link color
  • Title Separation - Set the space between the title and subtitle
  • Card Background - Adjust the background color that displays behind the caption
  • Card Padding - Set the padding on either side of the caption
  • Image Overlay Color - Add a color filter over the image
Tip: You can adjust the opacity for each color tweak.
Tip: To create a similar effect with multiple images in a column, use a Stack Gallery Block. This is also a great alternative if you want to use images from an existing gallery. Gallery Blocks have different styling options.

Change the layout

To change the layout, double-click the Image Block to open the editor. Choose a new layout in the Design tab.

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

button.png

Resize or crop the image

For all layouts:

Each layout has more options:

Inline

  • 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 image editor. Stretching an image may affect image quality.
  • Use the cropping handle to crop the image horizontally or vertically.
  • Use the focal point to adjust where the image centers.

Poster

  • The image automatically stretches to fill the full width of the block.
  • Use the cropping handle to crop the image horizontally or vertically.
  • Use the focal point to adjust where the image centers.

Card, Overlap, and Collage

  • Use the Image Width tweak in the Style Editor to adjust the size. For more help, see the instructions for the Card, Overlap, and Collage layouts.

Stack

  • The image automatically stretches to fill the full width of the block.

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 its 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.
  • When the Dynamic Font Sizing tweak is enabled, text won't resize smaller than 14 pixels.

Alt text

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:

  1. Open the block editor.
  2. In the Design tab, choose the Inline layout.
  3. Use the caption field to add the alt text.
  4. 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.
Was this article helpful?
3 out of 3 found this helpful
Styling the Image Block