Supported Versions
The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
In This Article
Using Image with Text Overlay
The Flex theme includes a highly versatile Image with Text Overlay section that is perfect to show off stunning banner images. While this section is most often seen at the top of a homepage, it can be used throughout the homepage to display eye-catching images.
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 images that can be distracting! You can adjust the horizontal and vertical 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.
Custom CSS and mobile specific layout options can be included in this section as well for further configuration.
In order to set up the Image with Text Overlay section, click into Customize (your Theme Editor) > Sections > Add Section > Image with Text Overlay.
Image with Text Overlay Settings
The 'Image with Text Overlay' section settings determine the look and layout of this section! The settings are divided into the following areas: image, text, text background, buttons, mobile, layout, and advanced.
Image
Here you can upload your image for the section! 1800 x 900px is the recommended image size. If you'd like your image to be linked to another page, you can enter the link here as well which will only be active in the absence of buttons.
Text
The preheading, heading and subheading can be entered here. You can then choose specific text colors for each if you'd like, and adjust the text alignment and horizontal/vertical position as well.
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.'
If you'd like specific colors for this text, you can select that here as well in the color pickers for each text option. Otherwise, all three text options will take the 'banner headings' color setting under Theme Settings > Colors > Headings > Banner headings.
Text alignment
Here you can choose the alignment of your text and buttons (if you've added any!) Choose from left, center, or right:
Horizontal position/Vertical position
Here you can choose both the horiztonal and vertical position of your text and buttons (if you've added any!) For horizontal position, choose from left, center and right. For vertical position, choose from top, middle and bottom.
Text background
If you need more contrast between your text and the banner image, you can add a background color and a border for the content area.
Background/Background opacity
You can select a background color from the color picker and select the opacity as well – 0 is completely transparent (or invisible), while 100 is completely opaque.
Border/Border width
A border can be enabled around your text/background and you can adjust the thickness with the 'border width' setting.
Text background width
The 'text background width' setting controls how wide the background for the text/buttons spans across your Image with Text Overlay section. You can choose from 40% - 100%.
Buttons
Two buttons can be added to the content area of the Image with Text Overlay section. You can input your button labels and button links, and choose between your 'primary' and 'secondary' button styles (which are configured under Theme Settings > Buttons).
Mobile
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.
Preheading/Heading/Subheading
You have the option to choose specific colors for the preheading, heading and subheading text for mobile.
Layout
The layout settings include options to adjust the spacing and width in this section, and enable animation for when the Image with Text Overlay section loads in.
Width
The options under the 'width' setting include: 'half,' 'standard' and 'wide.' Selecting 'wide' will spread out the section full-width of the screen. Selecting 'standard' will keep the section in a container and not spread the full-width. Selecting 'half' will resize this section to be half of the 'wide' option.
With the 'half' width option, if you have set the Image with Text Overlay section to 'half', and the Section following it set to 'half', they will sit next to each other side-by-side – for example, here is an image with text overlay section followed by another image with text overlay section:
Top/Bottom spacing
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
Left/Right spacing
For even further control, you can choose to move the section over more to the left or to the right side of the page by adjusting the 'left spacing' and 'right spacing' settings.
Animation
The 'animation' setting will determine how the section 'loads in' . The options for animation are: 'none,' 'fade in,' 'fade in down,' 'fade in left,' 'fade in right,' 'slide in left,' and 'slide in right.'
Advanced
In the advanced settings, you can add in your own CSS class and custom CSS.
More information about using the Advanced CSS feature.
In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
Examples
Example 1
Settings:
- Image - added
- Preheading - added
- Heading - added
- Text alignment - left
- Horizontal position - left
- Vertical position - top
- Button
- Width - wide
Example 2
Settings:
- Image - added
- Heading - added
- Text alignment - center
- Horizontal position - right
- Vertical position - middle
- Background - added
- Background opacity - 63
- Border - added
- Border width - 20px
- Button
- Width - wide
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.
