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
Upload and position the image
Locate the image to use by clicking Select image. Use large images (1400px+ width) for this section in order to adapt to larger browser windows.
Include the messaging
Add Heading, Subheading, and Text using the provided text fields.
Arrange the text
When the text portion is added, use the Text layout dropdown to place the text to the Left, Center, or Right of the image's center.
By default, the section will use colors set up in the Theme settings. This can be adjusted to a custom color by enabling Use custom text color and selecting the color with the rounded-rectangle swatch.
Include a link
Use the Link and Link text fields to provide a call-to-action (CTA) with the text.
Add an overlay color
The Overlay color will be applied as an overlay on your image which is a semi-transparent "filter" that lies on top of your image to make the text easier to read.
Use the Opacity using the slider at the bottom to set the opacity of the overlay (0% will make the image more visible; 100% will obscure it entirely). To have no overlay at all, simply set the Opacity slider to 0% to make it completely transparent.