The Image with text section is a versatile and engaging way to present media and messaging together. Image with text blocks can be individually customized to provide a balanced sequence of visual content and informative copy.
Click the Image with text section to customize its general settings.
Use the Heading and Subheading fields to include text to introduce the section.
Select custom colors for the Section background, Section heading, and Section subheading using the circular swatch selectors.
Use the Desktop section spacing and Mobile section spacing sliders to control how the section distributes its content for desktop and mobile views.
Adjust the Space between content with the provided slider. Set to 0 to disable space between the blocks.
Click one of the Image with text blocks (Heading) to customize its text and image components. add more by selecting (+) Add Image with text.
Click Select image to locate and assign the image file.
Desktop image position
Once the image is uploaded, select an Image position for your image (Right or Left).
Use the Desktop image width slider to adjust the horizontal sizing of the image for desktop view.
Then select either Natural height or Custom height under the Desktop image height label. Natural will keep the original height of the image, while custom can be set using the corresponding slider (Desktop custom height).
Mobile image position
Select an Image position for your image (Top or Bottom).
Use the Mobile image width slider to adjust the horizontal sizing of the image for mobile view.
Then select either Natural height or Custom height under the Mobile image height label. Natural will keep the original height of the image, while custom can be set using the corresponding slider (Mobile custom height).
Choose a background color for the block using the Background color swatch selector.
Use the provided fields to add the Heading, Preheading, Text, and Button text. Each text field is paired with a custom color swatch selector. Use these to modify the font colors individually.
Use the Heading size dropdown to select one of four heading font size options.
Add a Button link to direct customers to another page, then select a Button style.
If Signpost link is the selected, use the Signpost color to control the font color for this option.
Position and alignment
Use the Vertical position and Alignment dropdowns to adjust the position and orientation of the text component.