Image with text
Section
Last updated
Section
Last updated
Use the Image with text section to combine a feature image side-by-side with promotional text and button. With a flexible layout and optional content blocks, you can achieve a wide variety of looks.
Add a featured Image and Content blocks.
Customize the layout and change the container color for alternate looks.
In the editor side panel, click (+) Add section and select Image with text. Click and hold the drag handles ⋮⋮ to re-order sections.
Editing a template will change all pages that use that template.
Create and assign new templates to design different page layouts.
Add dynamic content to show page-specific content in the same template.
Click the section to customize the general section styles for colors and spacing, available in all sections:
Add a feature image and alternate mobile image.
Change the image aspect ratio (shape)
Make the image a clickable link to another page.
Click Image with text section to find settings
| Setting | Description | Options |
|---|---|---|
Image | Select or upload an image. | |
Mobile image | Select or upload an alternate image to display on mobile devices. | |
Aspect ratio | Crop the image to a uniform shape, or select Natural to maintain its original shape. "Aspect ratio" refers to the proportion between the image's width and height (W:H). | Natural Default Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2) |
Image link | The page or URL that you want the link to go to. Visitors are redirected when they click the image. |
After uploading an image, adjust the width and position. Use the Breathing room option to add space around the image.
Click Image with text section to find settings
| Setting | Description | Options |
|---|---|---|
Desktop image width | Set the maximum width of the image on desktop. | 35-70 Default: 50 |
Desktop image position | Position the image to the left or right of the text content. | Left of content Right of content Default |
Mobile image position | On mobile, show the image before or after the text. | Image first Default Image second |
Image breathing room | Use the slider to add spacing around the image. Set the slider to 0 to display the image at the full width and height of the image area. | 0-60 Default: 0 |
Click (+) Add block to add text and image content to the section. Use the drag handles ⋮⋮ to re-order blocks, and add Spacer and Divider blocks to further customize the layout.
Change the width and alignment of all content blocks.
Click Image with text section to find settings
| Setting | Description | Options |
|---|---|---|
Content width | Use the sliders to set the maximum width (in pixels) of the section content. | 200-1000 px Default: 500 |
Text alignment | Set the position of the text content for desktop screens. | Left Default Center Right |
Vertical text alignment | Position text at the top, middle, or bottom of the section. | Top Middle Default Bottom |
Change the Container color scheme to show a background color for the content area.
You can add and define different color schemes in Theme settings > Colors. Learn more
