The Image with text overlay section uses immersive, high-resolution images to build your brand while highlighting special promotions and products.
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
Sizing the section
Begin by setting the Section height of your section. The options are:
- Small
- Medium
- Large
- Original aspect ratio
Add and position the image
Locate the image to use by clicking Select image. Customize the image's position using the Position setting. This will determine the point on your image that the section will set its center.
Include the messaging
Add Heading and Text using the provided text fields.
Styling the text
Choose an option from the Content position dropdown. This setting controls where the text is placed on the image.
Use the Text color setting to adjust the color of your text. This should contrast with the Background color.
The Background 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.
Lastly, you can add a custom Button with Link.
* NOTE: May not be available on all sections, blocks or templates