> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fetchski-attract.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Media + Text block

> Pair a photo, a video or a YouTube or Vimeo video with text, row by row.

The **Media + Text block** section pairs pictures with words. Each row, called a block, puts a photo, a video or a YouTube or Vimeo video beside or above a short piece of text.

 **Who can do this:** anyone who can edit the page. The **CSS** tab is for Admins and Owners.

![A Media + Text section as visitors see it: eyebrow, heading and intro, then two blocks in a zig-zag (photo right, then photo left), each with an eyebrow, heading.](https://mintcdn.com/fetchski-attract-api/Nd5MQAxOTNHgiQxt/images/cms/guides/sections/media-text/guides-sections-media-text-overview-light.png?fit=max\&auto=format\&n=Nd5MQAxOTNHgiQxt\&q=85\&s=b0e73931544ce98e77992100bd68a40f)

Two blocks in a zig-zag, each with a photo and a button.

## When to use it

* To tell your story in pictures and words, one point at a time.
* To show off your space, your team at work, or a product.
* To embed a YouTube or Vimeo video with a few lines about it.

## Add it to a page

**1. Open the page**

Sign in, open the page on your site, and choose **Edit** in the edit bar at the top.

**2. Find the spot**

Select the section next to where the new one should go. A round **+** button appears on its top and bottom edges. On an empty page, choose **Add Content** in the middle.

**3. Choose the section**

The **Add Content** menu opens with its groups. Choose the section, then select it and choose **Edit** in its side toolbar to make it yours.

For the full walkthrough, see [Add, move and remove sections](https://docs.fetchski-attract.com/guides/build-pages/add-move-remove-sections.md).

Choose **Add Content** → **Content** → **Media + Text block**. A new section starts with three sample blocks, so choose your own media and replace the text.

You can also add it in the body of a blog post.

![The Add Content menu open on the Content group, with the Media + Text block tile ringed.](https://mintcdn.com/fetchski-attract-api/QcMtbPjPXDGpHtJh/images/cms/guides/sections/media-text/guides-sections-media-text-add-menu-light.png?fit=max\&auto=format\&n=QcMtbPjPXDGpHtJh\&q=85\&s=5f9121e3bba854b7c26225db989d4a1f)

Media + Text block lives in the Content group.

## What you can change

Select the section on the page and choose **Edit**. The editor opens beside the page, so you see each change as you make it. It has five tabs: **Media + Text**, **Background**, **Fonts**, **Button** and **CSS**.

Your changes go into the page's draft. Visitors see them once the page is published with **Update** in the edit bar (**Publish** on a page never published).

![The Media + Text editor on the Media + Text tab, scrolled to the Blocks list with one block open and its Media menu showing Image (library), Video (library), External embed (YouTube / Vimeo) and None (text only).](https://mintcdn.com/fetchski-attract-api/QcMtbPjPXDGpHtJh/images/cms/guides/sections/media-text/guides-sections-media-text-editor-light.png?fit=max\&auto=format\&n=QcMtbPjPXDGpHtJh\&q=85\&s=50631c7cf4810e024ef1941e7c35d07f)

Each block chooses where its media comes from.

> [accordion] Media + Text
>
> Everything about the section header, how the blocks are laid out, and the blocks themselves.
>
> **Header**
>
> * **Show eyebrow** and **Eyebrow**: a small line above the heading, "Why us" to start.
> * **Heading** and **Intro line**: an optional heading and a short sentence under it. Clearing the heading hides only the heading. To show just the blocks, also turn off **Show eyebrow** and clear the intro line.
>
> **Layout** (for every block)
>
> * **Text alignment**: **Left** or **Center**. Side-by-side blocks usually read best on the left.
> * **Media / text split**: how a side-by-side block shares its width: **Balanced (50 / 50)**, **Wider media** or **Wider text**.
> * **Vertical alignment**: line the text up with the **Center** or the **Top** of the media.
> * **Media shape**: the shape of the media frame, such as **Landscape (16:9)**, **Square (1:1)** or **Portrait (4:5)**. The numbers compare width with height, so 16:9 is wide and 4:5 is a little taller than wide.
>
>   The frame trims the edges of a photo to fit its shape. Your original image isn't changed. **Auto (image’s natural shape)** keeps a photo as it is. Videos always use a fixed shape.
> * **Media corners**: **Large**, **Rounded**, **Slight** or **Square**.
> * **Gap between blocks** and **Show dividers between blocks**: the space between blocks, and an optional thin line.
>
> **Block text**
>
> * The block eyebrow, block heading and block body each have a color and a weight, and the heading and body also have a size. They apply to every block, so your rows stay consistent.
>
> **Blocks** (one row each)
>
> * **Layout**: **Media left** or **Media right** puts the media beside the text. **Stacked (media on top)** puts it above. **Full-bleed media** runs it edge to edge across the screen, with the text below.
> * **Media**: where the media comes from:
>   * **Image (library)**: choose an **Image** from your Images library. **Image alt text (optional)** describes it for screen readers; leave it empty to use the library's own alt text.
>   * **Video (library)**: choose a **Video** from your Videos library. Turn on **Auto-play (muted loop)** to play it silently on repeat, or leave it off for a normal player with play controls.
>   * **External embed (YouTube / Vimeo)**: paste the link into **Video URL**, such as `https://youtu.be/…`.
>   * **None (text only)**: a block with just text.
> * **Eyebrow (optional)**, **Heading (optional)** and **Body (optional)**: the block's text. Leave a blank line between paragraphs in **Body (optional)**. Leave all three empty for a media-only block.
> * **Button label (optional)** and **Button link (optional)**: this block's button. It shows only when both are filled in. **Open button in new tab** appears once you add a link.
>
> Blocks show top to bottom in the order of the list. Alternate **Media left** and **Media right** for a classic zig-zag. To add, reorder or remove blocks, see [Lists of items](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md#lists-of-items).
>
> Every color can be set separately for the dark and light themes. Leave colors empty to use your site's colors.

> [accordion] Background
>
> A background color for the whole section, set separately for the dark and light themes. It starts as **Transparent (page background)**. See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md).

> [accordion] Fonts
>
> Use a different typeface for parts of this section only, such as the block headings. Leave it empty to use the page's fonts, which normally come from **Site design** → **Typography**. See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md).

> [accordion] Button
>
> Set each button's wording and link inside its block, on the **Media + Text** tab. Use this tab for the look of every block's button, set once for the whole section. It starts with your site's main button look and an arrow after the label. To learn every button option, see [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md).

> [accordion] CSS
>
> Custom styles for this section only. Admins and Owners can change this tab. See [Custom CSS](https://docs.fetchski-attract.com/guides/site-design/custom-css.md).

## Looks you can make

![A Full-bleed block: a wide photo of the play yard running edge to edge across the screen, with the eyebrow, heading and body below it.](https://mintcdn.com/fetchski-attract-api/Nd5MQAxOTNHgiQxt/images/cms/guides/sections/media-text/guides-sections-media-text-full-bleed-light.png?fit=max\&auto=format\&n=Nd5MQAxOTNHgiQxt\&q=85\&s=999b3f835bb0f8c031a2c5316cef287a)

A full-bleed photo with the story below.

**A wide, dramatic photo.** Set the block's **Layout** to **Full-bleed media** and **Media shape** to **Wide (21:9)**.

![A Media right block with a muted looping video of puppies playing, its pause button visible in the corner of the video.](https://mintcdn.com/fetchski-attract-api/QcMtbPjPXDGpHtJh/images/cms/guides/sections/media-text/guides-sections-media-text-autoplay-light.png?fit=max\&auto=format\&n=QcMtbPjPXDGpHtJh\&q=85\&s=9683d463c98094bc88eb7e0330692648)

A looping video beside your text, with a pause button.

**A living picture.** Choose **Video (library)**, turn on **Auto-play (muted loop)**, and set **Media / text split** to **Wider media**.

![A Stacked block with an embedded YouTube video on top and a heading, body and button below, center-aligned.](https://mintcdn.com/fetchski-attract-api/Nd5MQAxOTNHgiQxt/images/cms/guides/sections/media-text/guides-sections-media-text-embed-light.png?fit=max\&auto=format\&n=Nd5MQAxOTNHgiQxt\&q=85\&s=a58d038dc23237f02b0df2e446330d94)

A YouTube video with a few lines about it.

**A video tour.** Choose **External embed (YouTube / Vimeo)**, paste the link, set the block's **Layout** to **Stacked (media on top)**, and set **Text alignment** to **Center**.

## Good to know

* **Finding your Videos library.** Open the command palette (press ⌘K, or Ctrl+K on Windows) and choose **Videos** under **Manage**.
* **Looping videos and motion.** An auto-playing video always gets a pause button. Visitors who prefer less motion see the video's still picture instead. Set it in the Videos library as the video's **Poster / fallback image**.
* **On phones**, side-by-side blocks stack with the media on top, so every block reads well on a small screen.
* **Full-bleed media has square corners**, whatever you choose in **Media corners**, so it meets the edges of the screen cleanly.
* **Headings stay in order.** The section heading is a subheading on the page, and each block heading sits one level below it.
* **YouTube and Vimeo videos** play from the video service's own player. For YouTube, the section uses YouTube's privacy-enhanced player, which doesn't store cookies in a visitor's browser unless they play the video.

## Appearance options

Most sections also share a few tabs that work the same everywhere:

* **Background**: set the color behind the section, separately for the dark and light themes.
* **Fonts**: use a different typeface for parts of this section only.
* **CSS**: add custom styles to this section. Admins and Owners can change it.

See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md) for every option.

## Related

> [card] [The media library](https://docs.fetchski-attract.com/guides/media/media-library.md)
>
> upload photos and videos.

> [card] [Images and videos](https://docs.fetchski-attract.com/guides/sections/images-and-videos.md)
>
> a single photo or video in a column or post.

> [card] [Device mocks](https://docs.fetchski-attract.com/guides/sections/device-mocks.md)
>
> show screenshots inside a phone or laptop.

> [card] [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md)
>
> every button option.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.