Supported Versions
The details shared here apply to the most recent version of Turbo. To keep your theme up to date, check out this helpful document.
In This Article
Using Image with Text Overlay
The Turbo theme includes a popular 'Image with Text Overlay' section that allows you to add beautiful homepage banners! This section is most often seen at the top of a homepage with clear and striking images that will catch your customers attention.
In the 'Image with Text Overlay' section, you can add text and buttons on top of the images as well - so it's important to avoid using any complex or cluttered images! You can adjust the text position and text alignment as well, so it can be helpful choosing an image that has some negative space in it so you can position the text accordingly.
Additionally, you can configure some mobile specific settings for the section such as image cropping and text position so you can get your images looking just right!
In order to set up the Image with Text Overlay, click into Customize (your Theme Editor) > Sections > Add Section > Image with Text Overlay.
Image with Text Overlay Settings
Section Settings
The section settings determine the look and layout of this section!
Wide Display
You can choose to enable 'wide display' so this section will spread out the full width of the screen. Otherwise, the section will sit in a 'container' on the homepage and not span the full width:
Preheading/Heading/Subheading
After you've uploaded your image, there are three areas for you to enter some text; the 'preheading', 'heading', and 'subheading' fields. The 'preheading' displays above the 'heading', while the 'subheading' will display below. Both the 'preheading' and 'subheading' will be a smaller font size than the main 'heading.'
Display solid text background/Enable background transparency
If you want your text to stand out more against your image, you can use the 'display solid background' and 'enable background transparency' settings. These settings will add a background behind the text and can be a good idea if you're looking for more of a contrast for legibility purposes.
Text position
Here you can choose the position of your text and buttons (if you've added any!) Choose from left, center, or right:
Text alignment
Here you can choose the alignment of your text and buttons (if you've added any!) Choose from left, center, or right:
Button labels/Button links
There are two optional buttons that you can enable for the 'image with text overlay' section! 'First button label' and 'Second button label' is where you can enter the text for the button, while 'First button link' and 'Second button link' are where you can actually choose the link for the buttons.
You can also choose to enable the 'Highlight first button' and 'Highlight second button' settings as well, this will then display your buttons 'filled-in' as opposed to the outline design.
Examples
-
Demo Shop Examples
Here's how we set up the 'Image with Text Overlay' homepage section in our demo shops for Turbo!
-
Portland
Section settings
Wide display - enabled
Preheading - added
Heading - added
Text - added
Text position - left
Text alignment - center
First button label - added
First button link - added
Second button label - added
Second button link - added
-
Seoul
Section settings
Wide display - enabled
Heading - added
Text alignment - center
Text position - center
-
-
Additional Examples
Example 1
Section settings
Wide display - enabled
Preheading - added
Heading - added
Text - added
Text position - left
Text alignment - left
First button label & first button link - added
Second button label & second button link - added
Highlight second button - enabled
Example 2
Section settings
Wide display - enabled
Preheading - added
Heading - added
Text position - right
Text alignment - right
First button label & first button link - added
Highlight first button - enabled
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 for text if you wish.
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, 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, you can disable the 'show text below image' setting.
Text
You have the option to choose a specific color for the text on mobile.
