Text with images
Place small images between the words of a large heading. Use it to break up content and draw attention to a key message.
The Text with images section shows a large heading with small images placed between its words. Use it for a brand statement or a key message that deserves more than plain text.
1. Our guide to set up a Text with images section:
The section is added with two Image blocks. You can add up to 5.
2. Section settings
Content
Subheading: A short line above the heading. Leave it blank to hide it.
Heading: The main text. Images are placed between its words.
Heading size: 15–80px.
Content alignment: Left / Center / Right.
Content width: The maximum width of the content, 200–800px. Applies to screens wider than 900px.
Show divider: Adds a line between the subheading and the heading. It only shows when there's a subheading.
Colors
Color scheme: The colors of the section's background and text.
Section padding
Top padding and Bottom padding: 0–100px.
3. Block settings
Image block
Image position: The word the image follows, 1–50. For example, 3 places the image after the 3rd word. If the number is higher than the number of words, the image goes at the end.
Image: The image to show inside the text.
Size: The width of the image, 30–150px.
Ratio: Adapt to image / Square / Portrait / Landscape / Circle.
Corner radius: 0–40px. Applies to Square, Portrait and Landscape. Circle is always round.
Link: Makes the image clickable.
4. Tips
Keep the heading short, one or two lines, so the images stay close to the words they illustrate.
Use images with a simple background, such as product cut-outs, so they read clearly at a small size.
Try Circle with a matching Size for all images to create a consistent rhythm.
Last updated