ThemeLab

Image with text

A photo beside a column of text you build from blocks: a label, a heading, text, a list, a row of stats and buttons. The text can sit plainly beside the image or on a card that overlaps it.

In the editor
Image with text
Where it goes
Any page template, with Add section
In the presets
Index: Home page, About page; Poster: About page; Petal: Home page, About page
Settings
19
Blocks
Label, Heading, Text, List, Stats, Button, Custom Liquid
App blocks
Yes

When to use it

Image with text is the everyday storytelling section: your workshop, a material, how delivery works, a promise. The About page template uses it for the story beside a photo.

Set it up

  1. Upload the Image and choose its Image ratio.
  2. Build the text from blocks, in any order: Label, Heading, Text, List, Stats, Button, Custom Liquid.
  3. Choose Image position on desktop (left or right) and Image width on desktop (small, medium or large).

Blocks

  • Label: a small line above the heading – Our workshop, Since 1998.
  • Heading: with its own size.
  • Text: rich text with links and emphasis.
  • List: one item per line, shown with Numbers, Checkmarks or Dots. Perfect for What's included or three steps.
  • Stats: up to three large values with labels – 12 years · 40 makers · 2,000 reviews.
  • Button: primary or secondary.

Layout

  • Content style: Plain, or a Card in its own Card color scheme that overlaps the image slightly – an elegant, layered look.
  • Vertical alignment: the text at the top, middle or bottom of the image.
  • Show image first on mobile: the photo above the text on phones.
  • Caption on image: a small label in a corner of the photo.
  • With Theme settingsShapesImage shape in editorial sections set to Arch, the image gets an arched top.

All settings

Every setting in the order of the theme editor, with its options and its default value.

Section: Image with text19 settings
SettingOptionsDefault
ImageImage–
Image ratioSquare · Portrait · Landscape · Landscape (5:4)Landscape (5:4)
Caption on imageSmall label in the corner of the image.Text–
Image position on desktopLeft · RightLeft
Image width on desktopSmall · Medium · LargeMedium
Show image first on mobileCheckboxOn
Vertical alignmentTop · Middle · BottomMiddle
Content styleCard · PlainPlain
Card color schemeColor schemeScheme 2
Text alignmentLeft · CenterLeft
Color schemeColor schemeScheme 1
Section spacing
Top padding0–160px80px
Bottom padding0–160px80px
Top padding on mobile0–120px56px
Bottom padding on mobile0–120px56px
Advanced
Hide on mobileCheckboxOff
Hide on desktopMobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below).CheckboxOff
Animate on scrollCheckboxOn
Anchor IDLink to this section with #anchor-id.Text–

Block settings

Block: Label1 setting
SettingOptionsDefault
TextTextSample text
Block: Heading2 settings
SettingOptionsDefault
HeadingRich text (one line)Sample text
SizeLarge · Medium · SmallMedium
Block: Text1 setting
SettingOptionsDefault
TextRich textSample text
Block: List2 settings
SettingOptionsDefault
ItemsOne item per line.Multi-line textSample text
StyleNumbers · Checkmarks · DotsNumbers
Block: Stats6 settings
SettingOptionsDefault
Value 1TextSample text
Label 1TextSample text
Value 2TextSample text
Label 2TextSample text
Value 3Text–
Label 3Text–
Block: Button3 settings
SettingOptionsDefault
LabelTextSample text
LinkLink–
StylePrimary · SecondaryPrimary
Block: Custom Liquid1 setting
SettingOptionsDefault
Custom LiquidLiquid code–
MulticolumnColumns with an icon or image, a heading, text and a link – for benefits, services and how it works.Rich textA statement, an introduction or a manifesto – label, heading, text, buttons and link chips, plain or on a card.Floating galleryUp to four photo, product, collection or video cards floating in depth beside your text; each comes forward on hover.