# Media with content split

{% hint style="info" %}
In [Cornerstone v3.0](https://help.fluorescent.co/cornerstone/readme/changelog#id-3.0.0), Media with content split combined and replaced Image with content split and Video with content split. Upon updating, your original sections will remain in place with added settings. Review your sections before publishing. Learn how to [update your theme](https://help.fluorescent.co/cornerstone/general/theme-updates).
{% endhint %}

Use the **Media with content split** section to combine a full-height image or autoplay video with text content and buttons.

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FsP6XtnIIwTC0WH7Y7Si3%2Fimage-content-split-artisan.jpg?alt=media&#x26;token=53934b74-da3c-4883-8d61-e310ba40bd90" alt=""><figcaption></figcaption></figure>

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FmdtRFtiOWBhWilOC4jsd%2Fimage-content-split-glow.jpg?alt=media&#x26;token=c513bcfa-b572-4b8d-962e-0713855cfd6f" alt=""><figcaption></figcaption></figure>

## Set up section

***

In the editor side panel, click **(+) Add section** and select **Media with content split**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

### Section styles

Sections include general styles. Click the section to find options for **colors**, **spacing**, and **animations**.

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td align="center"><mark style="color:blue;"><strong>Section colors</strong></mark></td><td><a href="../section-styles#section-colors">#section-colors</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section spacing</strong></mark></td><td><a href="../section-styles#section-padding">#section-padding</a></td></tr><tr><td align="center"><mark style="color:blue;"><strong>Section animations</strong></mark></td><td><a href="../section-styles#section-animations">#section-animations</a></td></tr></tbody></table>

{% hint style="info" %}
**Editing templates will change all pages that use the same template**. [Create new templates](https://help.fluorescent.co/cornerstone/general/editing-themes/using-templates#create-and-assign-multiple-templates) for different page layouts, or [show dynamic page content](https://help.fluorescent.co/cornerstone/general/adapting-your-theme/dynamic-content-with-metafields) in the same template.
{% endhint %}

## Set up image

***

* Add a feature **image** and alternate **mobile image**.
* Change the **image aspect ratio** (shape)
* Make the image a clickable **link** to another page.

`Click section to find settings`

<table><thead><tr><th width="165">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td><p>Select an image to display as the feature image.</p><p><br>There are no required image dimensions. We recommend a minimum width or height of 2500px.</p></td></tr><tr><td><mark style="color:blue;">Image width</mark></td><td>Change the width of the image as a percentage of the section width (on desktop): between <strong>30%</strong> and <strong>60%</strong>.</td></tr><tr><td><mark style="color:blue;">Image position</mark></td><td>Display the featured image either <strong>Left of content</strong> or <strong>Right of content</strong> on desktop screens.</td></tr><tr><td><mark style="color:blue;">Mobile image position</mark></td><td>Choose to display the featured image either <strong>Above content</strong> or <strong>Below content</strong> on mobile screens.</td></tr><tr><td><mark style="color:blue;">Aspect ratio</mark></td><td>Choose to crop the image to a uniform shape. Select <strong>Portrait (2:3)</strong>, <strong>Portrait (4:5)</strong>, <strong>Square (1:1)</strong>, <strong>Landscape (5:4)</strong>, or <strong>Landscape (3:2)</strong>. Select <strong>Natural</strong> to display images in their original shape (without cropping).</td></tr><tr><td><mark style="color:blue;">Image focal point</mark></td><td>Select the most important part of the image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.</td></tr></tbody></table>

## Set up autoplay video

***

In the section settings, upload short video (without sound) to autoplay. After uploading your video, you can select the **focal point** of your video.

{% tabs %}
{% tab title="Video requirements" %}
For **autoplay videos**, make sure your video files meet the following requirements:

<table data-header-hidden><thead><tr><th width="210"></th><th></th></tr></thead><tbody><tr><td><strong>Video file type</strong></td><td><code>.mp4</code> or <code>.mov</code><br><br><em>Embedded YouTube or Vimeo videos are not supported</em>.</td></tr><tr><td><strong>Video length</strong></td><td>&#x3C; 20 seconds (Recommended)</td></tr><tr><td><strong>Video size</strong></td><td>&#x3C; 10MB (Recommended)</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

`Click section to find settings`

<table><thead><tr><th width="174">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Video</mark></td><td>Select or upload a video that autoplays (without sound).</td></tr><tr><td><mark style="color:blue;">Video aspect ratio</mark></td><td>Choose to crop the video to a uniform shape. Select <strong>Portrait (2:3)</strong>, <strong>Portrait (4:5)</strong>, <strong>Square (1:1)</strong>, <strong>Landscape (5:4)</strong>, or <strong>Landscape (3:2)</strong>.<br><br>Select <strong>Natural</strong> to display the video in its original shape (without cropping).</td></tr><tr><td><mark style="color:blue;">Video focal point</mark></td><td>For desktop and mobile, specify the main focus of the video. The focal point will remain centered and within frame to avoid unwanted cropping.</td></tr><tr><td><mark style="color:blue;">Video caption</mark></td><td>Enter text to display a small caption below the video.</td></tr></tbody></table>

## Add content blocks

***

Use blocks to customize the content area of the section. Click **(+) Add block** to add text, buttons, and other media. Use the drag handles **`⋮⋮`** to re-order blocks, and change the layout in the section settings.

<div><figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FWpPCYcBnxJ7gJK27tZP0%2Fcontent-blocks.png?alt=media&#x26;token=ce14a103-e169-4e00-85db-8d29e3f830e6" alt="" width="212"><figcaption></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FKuqYPr6WhFEJjniMYgYN%2Fcontent-blocks-left.png?alt=media&#x26;token=2db579fe-c354-46ff-a11d-f6f2603e6bde" alt="" width="268"><figcaption></figcaption></figure></div>

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Accent</strong></mark></td><td>Add small label heading.</td><td><a href="../content-blocks#accent">#accent</a></td></tr><tr><td><mark style="color:blue;"><strong>Heading</strong></mark></td><td>Add title heading.</td><td><a href="../content-blocks#heading">#heading</a></td></tr><tr><td><mark style="color:blue;"><strong>Text</strong></mark></td><td>Add multiple lines of rich text.</td><td><a href="../content-blocks#text">#text</a></td></tr><tr><td><mark style="color:blue;"><strong>Button</strong></mark></td><td>Add buttons with custom styles.</td><td><a href="../content-blocks#button">#button</a></td></tr><tr><td><mark style="color:blue;"><strong>Image</strong></mark></td><td>Add images with custom sizes.</td><td><a href="../content-blocks#image">#image</a></td></tr><tr><td><mark style="color:blue;"><strong>Text list with icons</strong></mark></td><td>Add column text with icons.</td><td><a href="../content-blocks#text-list-with-icons">#text-list-with-icons</a></td></tr><tr><td><mark style="color:blue;"><strong>Video player</strong></mark></td><td>Add video that plays in a popup viewer.</td><td><a href="../content-blocks#video-player">#video-player</a></td></tr><tr><td><mark style="color:blue;"><strong>Divider</strong></mark></td><td>Add border between blocks.</td><td><a href="../content-blocks#divider">#divider</a></td></tr><tr><td><mark style="color:blue;"><strong>Spacer</strong></mark></td><td>Add space between blocks.</td><td><a href="../content-blocks#spacer">#spacer</a></td></tr></tbody></table>

### Change content layout

***

In the section settings, change the **width** and **alignment** of the content blocks area.

`Click section to find settings`

<table><thead><tr><th width="170">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Content width</mark></td><td>Display the section at <strong>full width</strong> or set a <strong>custom width</strong></td></tr><tr><td><mark style="color:blue;">Custom width</mark></td><td>Set the maximum width of the section: between <strong>400</strong> and <strong>800 px</strong>.</td></tr><tr><td><mark style="color:blue;">Alignment</mark></td><td>Choose to align the content blocks to the <strong>Left</strong>, <strong>Center</strong>, or <strong>Right</strong> within the content area.</td></tr></tbody></table>

***

#### Related sections

<table data-view="cards"><thead><tr><th data-type="content-ref"></th></tr></thead><tbody><tr><td><a href="image-hero">image-hero</a></td></tr><tr><td><a href="grid">grid</a></td></tr><tr><td><a href="video-hero">video-hero</a></td></tr><tr><td><a href="media-with-content">media-with-content</a></td></tr><tr><td><a href="featured-collection-with-media">featured-collection-with-media</a></td></tr></tbody></table>