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.
Section Settings
Click the Image with text overlay section to open its settings.
Wide display
Enable Wide display to have the section expand beyond its default container size.
Select Image
Click Select Image to connect an image with the section.
Section height
Select Small, Medium, Large, or Original from the Section height setting to control how the image fits vertically into the container.
Focal point
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
Heading
Add a Heading using the provided field. Leave the field blank to exclude a heading.
Text
Add Text using the provided rich text field.
Text position
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
- Center right
- Bottom left
- Bottom center
- Bottom right
Configure Overlay
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.
Overlay opacity
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%.
Colors
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.