Image with text overlay sections are full-width and feature the text as an overlay (as opposed to the Image with text section's layout). Use this section to feature immersive, high-quality images building your brand, highlighting special promotions, and more.
Customize Section Settings
Click the Image with text overlay section to open its settings.
Set a 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
Customize Background Color
Assign an optional Section background color by clicking the circular swatch (transparent by default).
Section Spacing
Use the Desktop section spacing and Mobile section spacing sliders to adjust the padding for desktop and mobile devices.
Select the Image
To add an Image, click Select Image.
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
Add Text
With the image in place, add text for the Heading and Text.
Adjust Position
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
Add an Overlay
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. Selecting None will disable the Overlay.
Select a Text color using the rounded-rectangle swatch. This setting will be independent of the Theme settings when used.
If an overlay is active, select which color to use with the Background color setting. Then determine the level of transparency by using the Background color opacity slider.
Assign a Link to direct customers to another page, then enter the Button text.