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.
Section Settings
Click the Image with text section to customize its general settings.
Headings
Use the Heading and Subheading fields to include text to introduce the section.
Colors
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.
Customize 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.
Select image
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).
Desktop width
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).
Mobile width
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).
Background color
Choose a background color for the block using the Background color swatch selector.
Text
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.
Heading size
Use the Heading size dropdown to select one of four heading font size options.
Button
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.