Retina includes a versatile Image with text overlay section to show off banner images. While this section is most often seen at the top of a homepage, it can be positioned elsewhere on the homepage or added to other templates.
Click the Image with text overlay section to open its settings.
Enable Wide display to have the section expand beyond its default container size.
Click Select Image to connect an image with the section.
Select Small, Medium, Large, or Original from the Section height setting to control how the image fits vertically into the container.
Select an option for the Image focal point to shift the focus of the image to the Top, Left, Center, Right, or Bottom.
Customize the Text
Add a Heading using the provided field. Leave the field blank to exclude a heading.
Add Text using the provided rich text field.
Control the position for the text by selecting an option from the Text position dropdown.
The options are:
- Top left
- Top center
- Top right
- Center left
- Center right
- Bottom left
- Bottom center
- Bottom right
An Overlay is a semi-transparent color between the text and image components of the section. Overlays are especially helpful for improving legibility and clarity.
Use the Overlay opacity slider to control the level of opacity (and transparency). Select a value closer to 1% for more transparency and a value closer to 100% for greater opacity. Disable the overlay by setting to 0%.
Select an Overlay color and Text color. These should contrast one another for the best results.
Connect a Page
Use the Button label, Link, and Button style to set up a call-to-action button.