Image with text overlay sections feature immersive, high-quality images building your brand, highlighting special promotions, and more.
Add Image with text overlay to your home page
- In the theme editor (Customize), click [+] Add section
- Locate Image with text overlay
- Click the section, then Add
- Save
Select section height
Select an option from the Section height dropdown. Image height is the natural height of the image when you upload it, while Fullscreen will expand it so that it fills the entire viewport.
Set up the image
Click Select image to locate and assign the desired image. The image used in this section should have a width of at least 1400px to adapt to larger screens and window widths.
Image focal point
Adjust the focal point of the image by changing the Image position. This setting only has an impact if the Section height is set to Fullscreen.
Arrange the text
Use the Heading and Text fields to include the messaging for this section.
Text alignment
Select an option from the Text alignment dropdown to align the text to the Left, Center, or Right.
Text position
Choose an option from the Text position dropdown to control where the text appears on the image.
Adjust the heading font size
Use the Heading size dropdown to adjust the font size of the heading text.
Include a call-to-action
Use the Button link and Button label fields to customize the text and direction of the call-to-action (CTA) button.
Include an overlay
Select Enable overlay to activate an overlay color to increase the contrast between the text and image.
Choose an option from the Style dropdown. The options are:
- Light text on dark overlay
- Dark text on light overlay
- Accent
Use the Opacity slider to control the transparency of the overlay color. Values closer to 0% will be more transparent, while those closer to 100% will be more opaque.
