Image with text
One image beside a short story: an eyebrow, a title, a paragraph and up to two buttons. Put the image left or right, and pick its shape. With Layout set to Full-bleed panel it becomes a band that runs edge to edge in its colour scheme, with a large title, the photo filling the right side to the edge of the screen, one button and an optional reply-time promise ("Average reply · 2 hours").
Where to find it
In the theme editor, Add section › Image with text. The theme starts with it on: Home page, Page template "about", Page template "support".
Settings
| Setting | Choices | Shows when | What it does |
|---|---|---|---|
| Density | Follow theme · Compact · Normal · Spacious | Always | Space, columns and image shape in this section. Follow theme uses Density in Theme settings › Layout. |
| Text size | Default · Smaller · Standard · Larger | Always | Makes this section's text and title smaller or larger than its Density sets. |
| Color scheme | Always | ||
| Image | Always | ||
| Image position | Left · Right | Layout is not Full-bleed panel | |
| Overline | Always | ||
| Heading | Always | ||
| Text | Always | ||
| Button label | Always | ||
| Button link | Button label is filled in | ||
| Second button label | Layout is not Full-bleed panel | ||
| Second button link | Layout is not Full-bleed panel and Second button label is filled in | ||
| Reply-time value | Layout is Full-bleed panel | ||
| Reply-time label | Layout is Full-bleed panel and Reply-time value is filled in |
Who sees this
| Setting | Choices | Shows when | What it does |
|---|---|---|---|
| Show this section to | Everyone · Guests and retail · Trade customers | Always | Trade customers are signed-in company buyers. The theme editor always shows the section. Learn more |
Layout
| Setting | Choices | Shows when | What it does |
|---|---|---|---|
| Layout | Side by side · Full-bleed panel | Always | |
| Image shape | Follow density · Square · Landscape (4:3) · Photo (3:2) · Wide (16:9) · Original shape | Layout is not Full-bleed panel | Follow density takes the shape from this section's Density. Original shape never crops. |
| Section width | Full width · Contained | Layout is not Full-bleed panel | Contained draws the color scheme as a panel inside the page margins. |
| Color around the panel | On · Off | Layout is not Full-bleed panel and Section width is Contained | Off shows the page background around the panel. Color scheme colors the panel itself. |
| Around the panel | Layout is not Full-bleed panel and Section width is Contained and Color around the panel is on |
Which settings reveal which:
flowchart LR layout["Layout"] image_position["Image position"] button_label["Button label"] button_link["Button link"] secondary_button_label["Second button label"] secondary_button_link["Second button link"] reply_value["Reply-time value"] reply_label["Reply-time label"] image_ratio["Image shape"] section_width["Section width"] panel_ground["Color around the panel"] ground_color_scheme["Around the panel"] layout -- "not Full-bleed panel" --> image_position button_label -- "filled in" --> button_link layout -- "not Full-bleed panel" --> secondary_button_label layout -- "not Full-bleed panel + more " --> secondary_button_link secondary_button_label -- "filled in + more " --> secondary_button_link layout -- "is Full-bleed panel" --> reply_value layout -- "is Full-bleed panel + more " --> reply_label reply_value -- "filled in + more " --> reply_label layout -- "not Full-bleed panel" --> image_ratio layout -- "not Full-bleed panel" --> section_width layout -- "not Full-bleed panel + more " --> panel_ground section_width -- "is Contained + more " --> panel_ground layout -- "not Full-bleed panel + more " --> ground_color_scheme section_width -- "is Contained + more " --> ground_color_scheme panel_ground -- "on + more " --> ground_color_scheme