The Flex theme 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.
Add this section to the
Image with Text Overlay Settings
The section settings determine the look and layout of this section.
Image
Click Select Image to connect the image. 1800 x 900px is the recommended image size. If you'd like an alternate image to appear only on mobile, you can upload a different image under Mobile image.
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. Select specific Text colors for each, then adjust the Text alignment and Horizontal/Vertical position.
Messaging
After you've uploaded your image, use the Preheading, Heading, and Subheading fields to add messaging. 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.
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 Horizontal and Vertical position of your text and buttons. For horizontal position, choose from Left, Center, or Right. For vertical position, choose from Top, Middle, and Bottom.
Text background
If you need more contrast between your text and the banner image, add a Background color and a Border for the content area.
Background/Background opacity
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
Enable a Border for 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 the section. You can choose from 40% - 100%.
Buttons
Two Buttons can be added to the content area of the section. You can input your button labels and button links, and choose between your Primary, Secondary, and Link style.
Width
The width can either be set to Standard or Wide. Selecting Wide will spread out the full width of the screen. Selecting Standard will keep the section in a container and not spread the full width.
Spacing
You can choose to add space (padding) above and below the section by adjusting the Top spacing and Bottom spacing settings.
Animation
The Animation setting will determine how the feature appears as it loads. The options for animation are None, Fade in, Fade in down, Fade in left, Fade in right, Slide in left, Slide in right, and Zoom.
Custom CSS
Add Custom CSS to the feature for further tweaking. You can even create your own CSS class here, as well. Check out this article for more information: Flex Guide: Custom CSS Feature