Flex includes the highly configurable Image with Text section to enhance pages. This section is ideal if you want to showcase images. Whether these images are product-related, brand-related, or lifestyle shots, this section pairs images with messaging and a call-to-action button.
Add this section to the
Click the Image with text section to open general settings for the section.
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.
You can choose to add space (padding) above and below the section by adjusting the Top spacing and Bottom spacing settings.
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.
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
Content Block Settings
Click to open one of the preloaded Image or Heading blocks.
In the Image block, click Select Image to upload a 1024 x 1024px image. Select Left, Center, or Right from the Image cropping dropdown to control the image container's cropping approach. Disable by selecting None.
In the Text (placeholder Header) content block, enter all of your text, add a Button, choose the Background and text colors, and adjust the Alignment and Position.
Add a Heading then adjust its size with the Base size setting. The rest of the text can be entered in the rich text area below. You can also add a button if you'd like and choose between your Primary and Secondary button styles.
Within the color settings, you can select your Background and Text color. Keep in mind that this will only apply to that specific 'text' block!
Within the layout settings, you can select the Alignment and Vertical position for your text.