Image with text

Overview

The Image with text section offers a seamless way to combine striking images with engaging text, making it ideal for featuring products, sharing stories, or highlighting key messages. Versatile layout options and responsive controls ensure that your content is visually effective across all devices.

⚠️ Important: Use the Image with text section to create a balanced and accessible blend of visuals and text. This ensures your audience connects with important content, no matter which device they use.

Layout and stacking settings

Organize your content for optimal impact by using flexible stacking and alignment settings. Adjust these options to ensure your section adapts smoothly for different audiences and screen sizes.

1. Enable Stack on mobile to arrange your section’s image and text vertically on smaller screens for improved readability.
   Default: off

2. Enable Stack on desktop to stack image and text vertically even on large screens for a focused, story-driven appearance.
   Default: off

3. Adjust Content alignment to set the vertical alignment of your section’s content.

   1. Top

   2. Center

   3. Bottom
      Default: top

Button controls

Guide visitors with a clear call-to-action by fine-tuning your button’s appearance and placement. All settings help support branding and navigational clarity.

1. Set Button style to Primary, Secondary, Extra large, Plain, Small, Small secondary, or Circle, depending on your desired visual impact.

2. Choose a Button layout:

   1. Icon left

   2. Icon right

   3. Icon only

3. Adjust Button position to show your button above or below section content.

   1. Above content (default)

   2. Below content

4. Adjust Button position on mobile for the ideal mobile layout.

   1. Above content (default)

   2. Below content

5. Enable Open link in a new tab if you want users to open button links in a new browser tab.
   Default: off

6. Add a Button icon by providing the icon name or code to offer users a visual action cue.

7. Enter Button text for clarity on your call-to-action.

8. Specify a Button link as the destination URL for your button.

Supported block types

You can further enhance the Image with text section by adding up to four blocks, making every layout flexible and unique.

1. Image
   Add a single image block with customizable style, caption, alignment, and aspect ratio controls.

2. Rich text
   Add formatted text, including headings, subheadings, icons, and calls-to-action, either as standalone content or paired with images.

You can mix these blocks in any sequence, enabling creative blends of visuals and messages for any campaign or page.

Usage notes

1. Responsiveness — Use stacking options to optimize content on both mobile and desktop. Always preview your section before publishing.

2. Performance — Ensure your images are web-optimized to offer a fast, smooth site experience for visitors.

3. Accessibility — Add descriptive alt text for images and ensure button text is clear. Avoid icons alone for conveying vital information.

4. Customization — Try various block orders, alignments, and widths for your preferred look while maintaining clarity.

5. Limit — You can add up to four blocks to this section; combine and order them to best suit your page design.

💡 Tip: Make use of live previews. Adjust stacking, alignment, or button position until your combined text and visuals achieve the right impact for your audience.

The Image with text section gives you creative control to blend impactful visuals and text, making it easy to build sections that capture attention and inspire action.