Media with Text

Updated 1 month ago

The Media with Text section lets you combine a visual with supporting content in one clean layout. Use it when you need to explain something, like product features, brand story, or benefits, and visuals alone are not enough.

Media

Choose or upload the media you want to display in this section.

Media Attributes

This controls how your media appears inside the section.

  • Ratio – Set the overall shape of the media

  • Adjust Ratio – Fine tune the ratio for the best fit

  • Radius – Adjust how rounded the corners appear

  • Image Scale – Choose whether the media fills or fits the container

  • Position – Control where the media appears within the layout

Text Content

You can customize both the heading and subheading, along with their descriptions.

This gives you flexibility to create a clear content hierarchy and present your message in a more structured way.

Heading

Use the heading for the main message you want users to notice first.

You can customize:

  • Text

  • Font

  • Size/Weight

  • Line Height

  • Letter Spacing

  • Text Color

  • Alignment

  • Capitalization

Heading Description

Use this area to add supporting details below the heading.

You can customize:

  • Text

  • Font

  • Size/Weight

  • Line Height

  • Letter Spacing

  • Text Color

  • Alignment

  • Capitalization

Subheading

Use the subheading for secondary content or an additional message.

You can customize:

  • Text

  • Font

  • Size/Weight

  • Line Height

  • Letter Spacing

  • Text Color

  • Alignment

  • Capitalization

Subheading Description

Use this area for extra supporting content below the subheading.

You can customize:

  • Text

  • Font

  • Size/Weight

  • Line Height

  • Letter Spacing

  • Text Color

  • Alignment

  • Capitalization

Background and Spacing

Background:

  • Color – Set the section background color

  • Radius – Adjust corner roundness

  • Padding – Control spacing inside the section

  • Margin – Manage spacing outside the section

Border:

  • Color – Choose border color

  • Width – Adjust thickness

  • Sides – Select which sides should display the border

Benefits:

  • Helps create a clear content hierarchy, making your messaging easier to understand

  • Combines visual appeal with context, reducing confusion for users

  • Great for explaining product USPs, materials, or use-cases, which can reduce hesitation

  • Supports storytelling, which builds emotional connection with users

  • Improves conversion rates by giving users both inspiration (visual) and clarity (text)

Related Articles

Announcement bar

1 min read

Button

2 min read

Image Block

1 min read

Image Banner

1 min read