Turbo includes an Image with Text Overlay section to enhance pages with engaging banners. Similar to a slideshow, this section is most often seen at the top of a home page with clear and striking images.
Add this section to the
Section Settings
Click the Image with text overlay section to open its settings.
Wide Display
Enable Wide display for the section to span the full width of the window. Otherwise, the section will be limited by a horizontal container.
Upload Image
Click Select Image to assign an image to the section.
Include Headings
Add a Preheading, Heading, and Subheading using the provided fields.
Add Buttons
There are two optional buttons to enable in the section. Add text to the First button label and Second button label to customize the text for the button. Then connect pages with the First button link and Second button link fields.
Customize the colors for the buttons with First button color and Second button color dropdowns.
Adjust Text Position
Select a Text position for your text and buttons. Choose from Left, Center, or Right.
Set the Text Alignment
Here you can choose the Text alignment of your text and buttons. Choose from Left, Center, or Right.
Increase Text Contrast
To increase the contrast between the text and image, select an option from the Contrast technique dropdown.
Mobile layout
When viewed on a mobile device, the Image with Text Overlay section either stacks vertically with the banner image displaying at the top and the text and buttons display underneath, or with the text/button displaying on top of the image – depending on your 'mobile' settings.
The Mobile settings allow you to crop your banner image, choose the text position and specify different colors.
Image Cropping
By default, the section displays the entire banner image on mobile without any cropping/zooming which typically results in a narrow banner. If you'd like to allow a greater display area on mobile, you can enable Image cropping which will crop and zoom in on the image (Left, Center, or Right).
Show Text Below Image
By default, the text and buttons will display below the banner image on mobile. If you'd like the text to display on top of the banner image, disable the Show text below image setting.
Text
You have the option to choose a specific Text color for the text on mobile.