# Media with text

{% columns %}
{% column width="58.333333333333336%" %}

<div data-with-frame="true"><figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FTcJEhE6HLFXpZLNAgCtR%2Fmedia-with-text-1A.png?alt=media&#x26;token=0ede58d8-d403-4644-bb6e-14ee3136e0bf" alt=""><figcaption></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FaJhyMiq0m2I8w99qM85H%2Fmedia-with-text-1B.png?alt=media&#x26;token=e2651734-8b6e-41e4-ba24-d30eb1825d6a" alt=""><figcaption></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="https://1258209387-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwW8WoofsfSzp49h7DuLl%2Fuploads%2FlLfCzsBRe00MzrWSrkcI%2Fmedia-with-text-1C.png?alt=media&#x26;token=7fb7fbb1-ed52-4c97-9f2f-a1a793c4a484" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}

{% column width="41.666666666666664%" %}
{% hint style="info" %}
**Key features**

Overlaying media

Flexible content layout

Supports autoplay video

Mobile-specific media options

Custom layout and styles
{% endhint %}

{% hint style="info" %}
**Blocks**

Overline\
Heading\
Text\
Buttons\
Spacer
{% endhint %}

{% endcolumn %}
{% endcolumns %}

<h2 align="center">Media</h2>

***

Upload a primary (background) image and secondary image to display on one side of the section.

### <mark style="color:$primary;">Primary media</mark>

Display an image, solid color, or autoplay video (without sound) as the primary background.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Media type</mark></td><td valign="top"><mark style="color:$info;">Color</mark><br><mark style="color:$info;">Image</mark><br><mark style="color:$info;">Video</mark></td></tr></tbody></table>

<details>

<summary>Image</summary>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Image</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Media ratio</mark></td><td valign="top"><mark style="color:$info;">Portrait (2:3)</mark><br><mark style="color:$info;">Portrait (4:5)</mark><br><mark style="color:$info;">Square (1:1)</mark><br><mark style="color:$info;">Landscape (5:4)</mark><br><mark style="color:$info;">Landscape (3:2)</mark><br><mark style="color:$info;">Custom</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Custom mobile image</mark></td><td valign="top"><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr></tbody></table>

</details>

<details>

<summary>Color</summary>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Background color</mark></td><td valign="top"><mark style="color:$info;">Color scheme</mark><br><mark style="color:$info;">Custom</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Color scheme</mark></td><td valign="top">Match section<br><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Inverse</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Accent</mark><br><mark style="color:$info;">Accent inverse</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Custom</mark></td><td valign="top"><mark style="color:$info;">Background</mark></td></tr></tbody></table>

</details>

<details>

<summary>Video</summary>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top">Setting</th><th valign="top">Description</th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Video</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Video focal point</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Custom mobile video</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile video focal point</mark></td><td valign="top"></td></tr></tbody></table>

</details>

<details>

<summary>Media ratio</summary>

Set the shape and orientation of the primary background.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Media ratio</mark></td><td valign="top"><mark style="color:$info;">Portrait (2:3)</mark><br><mark style="color:$info;">Portrait (4:5)</mark><br><mark style="color:$info;">Square (1:1)</mark><br><mark style="color:$info;">Landscape (5:4)</mark><br><mark style="color:$info;">Landscape (3:2)</mark><br><mark style="color:$info;">Custom</mark></td></tr></tbody></table>

</details>

<details>

<summary>Overlay colors</summary>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Overlay opacity</mark></td><td valign="top"><mark style="color:$info;">0 - 100%</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Color scheme</mark></td><td valign="top"><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Inverse</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Accent</mark><br><mark style="color:$info;">Accent inverse</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark></td></tr></tbody></table>

</details>

### <mark style="color:$primary;">Secondary media</mark>

Display an image or autoplay video (without sound) over top the primary background media.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Media type</mark></td><td valign="top"><mark style="color:$info;">Image</mark><br><mark style="color:$info;">Video</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Media ratio</mark></td><td valign="top"><mark style="color:$info;">Portrait (2:3)</mark><br><mark style="color:$info;">Portrait (4:5)</mark><br><mark style="color:$info;">Square (1:1)</mark><br><mark style="color:$info;">Landscape (5:4)</mark><br><mark style="color:$info;">Landscape (3:2)</mark><br><mark style="color:$info;">Custom</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Image</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Custom mobile image</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Video</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Video focal point</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Custom mobile video</mark></td><td valign="top"></td></tr></tbody></table>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Desktop width</mark></td><td valign="top"><mark style="color:$info;">Left</mark><br><mark style="color:$info;">Right</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Tablet width</mark></td><td valign="top"><mark style="color:$info;">30 - 70%</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile width</mark></td><td valign="top"><mark style="color:$info;">Top</mark><br><mark style="color:$info;">Bottom</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Corner radius</mark></td><td valign="top"></td></tr></tbody></table>

### <mark style="color:$primary;">Media layout</mark>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Placement</mark></td><td valign="top"><mark style="color:$info;">Left</mark><br><mark style="color:$info;">Right</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Width</mark></td><td valign="top"><mark style="color:$info;">30 - 70%</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile placement</mark></td><td valign="top"><mark style="color:$info;">Top</mark><br><mark style="color:$info;">Bottom</mark></td></tr></tbody></table>

<h2 align="center">Content blocks</h2>

***

You can customize the position and alignment of the content in the section settings.

Click **(+) Add block** to add headings, text, and buttons. Use the drag handles **`⋮⋮`** to re-order blocks.

{% hint style="info" %}
Use the **Spacer** block to achieve different text layouts. Add spacer blocks between content blocks to group them together. Either set a fixed pixel space or select 'Flexible' to fill the available space.
{% endhint %}

<details>

<summary>Overline</summary>

<sub><mark style="color:$info;">Click overline block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Overline</mark></td><td valign="top">Add text for a small heading.</td></tr><tr><td valign="top"><mark style="color:blue;">Overline size</mark></td><td valign="top"><mark style="color:$info;">1 - 4</mark></td></tr></tbody></table>

</details>

<details>

<summary>Heading</summary>

<sub><mark style="color:$info;">Click heading block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Heading</mark></td><td valign="top">Add text for a heading.</td></tr><tr><td valign="top"><mark style="color:blue;">Text style</mark></td><td valign="top"><mark style="color:$info;">Use global</mark><br><mark style="color:$info;">Custom</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Font</mark></td><td valign="top"><mark style="color:$info;">Heading</mark><br><mark style="color:$info;">Body</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Font size</mark></td><td valign="top"><mark style="color:$info;">50 - 150px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Tablet font size</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile font size</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Line height</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Letter spacing</mark></td><td valign="top"></td></tr><tr><td valign="top"><mark style="color:blue;">Uppercase</mark></td><td valign="top"></td></tr></tbody></table>

</details>

<details>

<summary>Text</summary>

<sub><mark style="color:$info;">Click paragraph block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Text</mark></td><td valign="top">Add multiple lines of text with rich formatting.</td></tr><tr><td valign="top"><mark style="color:blue;">Text size</mark></td><td valign="top"><mark style="color:$info;">1 - 4</mark></td></tr></tbody></table>

</details>

<details>

<summary>Buttons</summary>

Add a primary and secondary button under the text content. When both buttons are added, they will appear inline.

<sub><mark style="color:$info;">Click Button group block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.54400634765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Link</mark></td><td valign="top">Enter the URL for the button to link to.</td></tr><tr><td valign="top"><mark style="color:blue;">Label</mark></td><td valign="top">Add text to the button.</td></tr><tr><td valign="top"><mark style="color:blue;">Size</mark></td><td valign="top"><mark style="color:$info;">XS</mark><br><mark style="color:$info;">S</mark><br><mark style="color:$info;">M</mark><br><mark style="color:$info;">L</mark></td></tr><tr><td valign="top"><a data-footnote-ref href="#user-content-fn-1"><mark style="color:blue;">Style</mark></a></td><td valign="top"><mark style="color:$info;">Solid</mark><br><mark style="color:$info;">Outline</mark><br><mark style="color:$info;">Text</mark></td></tr><tr><td valign="top"><a data-footnote-ref href="#user-content-fn-2"><mark style="color:blue;">Color scheme</mark></a></td><td valign="top"><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Primary</mark><br><mark style="color:$info;">Secondary</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Overlay soft</mark></td></tr></tbody></table>

</details>

<details>

<summary>Spacer</summary>

<sub><mark style="color:$info;">Click spacer block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.96978759765625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Type</mark></td><td valign="top"><mark style="color:$info;">Flexible</mark><br><mark style="color:$info;">Fixed</mark></td></tr><tr><td valign="top"><mark style="color:$primary;">Height</mark></td><td valign="top"><mark style="color:$primary;">(Fixed)</mark><br><mark style="color:$info;">1 - 20</mark></td></tr><tr><td valign="top"><mark style="color:$primary;">Custom mobile height</mark></td><td valign="top"></td></tr></tbody></table>

</details>

### <mark style="color:$primary;">Content layout</mark>

Change the position and alignment of the text and buttons overlaying the sections' content side.

<sub><mark style="color:$info;">Click section block to find settings<mark style="color:$info;"></sub>

<table data-header-hidden><thead><tr><th width="239.3984375" valign="top">Setting</th><th valign="top">Options</th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Alignment</mark></td><td valign="top"><mark style="color:$info;">Left /</mark> <mark style="color:$info;">Center / Right</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile alignment</mark></td><td valign="top"><mark style="color:$info;">Left /</mark> <mark style="color:$info;">Center / Right</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Max width</mark></td><td valign="top"><mark style="color:$info;">Full width</mark><br><mark style="color:$info;">Custom</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Custom max width</mark></td><td valign="top"><mark style="color:$info;">130 - 1440px</mark></td></tr></tbody></table>

<h2 align="center">Section styles</h2>

***

Customize general style options for the section and content area. Settings for **Content area** allow you to adjust the width, borders, and dropshadow of the container of the section content.

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<details>

<summary>Content area</summary>

<table data-header-hidden><thead><tr><th width="240.36785888671875">Setting</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Width</mark></td><td><mark style="color:$info;">Full width</mark><br><mark style="color:$info;">Full width padded</mark><br><mark style="color:$info;">Page width</mark></td></tr><tr><td><mark style="color:blue;">Full width on mobile</mark></td><td><mark style="color:$info;">Available for <strong>Full width padded</strong> option.</mark></td></tr><tr><td><mark style="color:blue;">Set content to page width</mark></td><td><ul class="contains-task-list"><li><input type="checkbox" checked></li></ul></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-3"><mark style="color:blue;">Border</mark></a></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-3"><mark style="color:blue;">Corner radius</mark></a></td><td><mark style="color:$info;">Available for <strong>Full width padded</strong> and <strong>Page width</strong> options.</mark></td></tr><tr><td><a data-footnote-ref href="#user-content-fn-3"><mark style="color:blue;">Dropshadow</mark></a></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr></tbody></table>

</details>

<details>

<summary>Section</summary>

<table data-header-hidden><thead><tr><th width="240.36785888671875">Setting</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Top padding</mark></td><td><mark style="color:$info;">0 - 27</mark></td></tr><tr><td><mark style="color:blue;">Bottom padding</mark></td><td><mark style="color:$info;">0 - 27</mark></td></tr><tr><td><mark style="color:blue;">Dividers</mark></td><td><mark style="color:$info;">None</mark><br><mark style="color:$info;">Top only</mark><br><mark style="color:$info;">Bottom only</mark><br><mark style="color:$info;">Both</mark></td></tr><tr><td><mark style="color:blue;">Force dividers full width</mark></td><td><ul class="contains-task-list"><li><input type="checkbox"></li></ul></td></tr><tr><td><mark style="color:blue;">Color scheme</mark></td><td><mark style="color:$info;">Default</mark><br><mark style="color:$info;">Inverse</mark><br><mark style="color:$info;">Soft</mark><br><mark style="color:$info;">Accent</mark><br><mark style="color:$info;">Accent inverse</mark><br><mark style="color:$info;">Overlay</mark><br><mark style="color:$info;">Color scheme 1</mark><br><mark style="color:$info;">Color scheme 2</mark></td></tr><tr><td><mark style="color:blue;">Anchor ID</mark></td><td>Link directly to the section on any page. <a href="../anchor-id">Learn more</a></td></tr></tbody></table>

</details>

[^1]: Modify [global button styles](https://help.fluorescent.co/section-studio/sections/global-styles/buttons)

[^2]: Modify [global style colors](https://help.fluorescent.co/section-studio/sections/global-styles/colors)

[^3]: Modify in [Global styles > Borders and styles > Large elements](https://help.fluorescent.co/section-studio/global-styles/borders-and-styles#large-elements)