Image with text overlay

The Image with text overlay section displays immersive content through a combination of a high-resolution image, text, and a call-to-action button. Use this section to build your brand and highlight special promotions or products.

Use the theme editor to customize the section's appearance, select the image, add the overlay, control the colors, and add a call-to-action link.

Add this section to

Customize section settings

Click the Image with text overlay section to customize its general settings.

Section height

Use the Section height dropdown to choose how the image will be displayed. The four options are:

• Small
• Medium
• Large
• Original aspect ratio

Select the image

To add an Image, click Select image.

Position

Use the Position dropdown to identify the focal point of the image. This option controls where the image is cropped based on the specified center of the image. There are nine options:

• Top left
• Top center
• Top right
• Center left
• Center
• Center right
• Bottom left
• Bottom center
• Bottom right

This setting will not have much of an impact if your background image's dimensions are roughly the same size as the section.

Add the overlay

With the image in place, add copy for the Heading and Text using the provided fields.

Then configure the Content position using the dropdown. This will assign the text to a particular point on the image. There are nine options: 

• Top left
• Top center
• Top right
• Center left
• Center center
• Center right
• Bottom left
• Bottom center
• Bottom right
  

To add an optional Overlay, use the Overlay style dropdown to select Solid or Gradient. This will add a translucent cover for the image for increased contrast with the added text. 

Solid features a single color, while Gradient offers a blend of colors.

Disable the overlay

Selecting None will disable the Overlay.