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.
Add an image with text section to your home page
Navigate to the Sections tab in the theme editor and select Add section > Image with text.
Customize the main section
Before adding the Image with text blocks, use the section settings to customize the copy, colors, and spacing.
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 rounded-rectangle swatch selectors.
Use the Desktop spacing and Mobile spacing sliders to control how the section distributes its content for desktop and mobile views.
Add an image with text block
Once the section settings are configured, begin adding your Image with text blocks by selecting [+] Add image with text or opening the preset block. There is no maximum for the amount of blocks used for this section.
Configure the image size and position for desktop
Click Select image to locate and assign the image file.
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 or Custom 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).
Configure the image size and position for mobile
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 or Custom 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).
Add copy and customize the content
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.
Use the Vertical position and Alignment dropdowns to adjust the position and orientation of the text component.