# Content blocks

Some sections support the same 'rich content' blocks for text, images, buttons, and style elements. 

* Under the section, click **(+) Add block**.
* Click the block to find settings.
* Click and hold the drag handles **`⋮⋮`** to re-order blocks.

> For other sections, click the section to find settings for adding text, media, and buttons.

<div><figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FQfyhAqrKJfP6pxkP9LWz%2Fcontent-blocks-add.png?alt=media&#x26;token=da68fb05-2293-4195-b4bd-450af5c1d782" alt="" width="293"><figcaption></figcaption></figure> <figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FQmsKeHtAcZpIlRxsDxVL%2Fcontent-blocks.png?alt=media&#x26;token=fda6bf79-81ae-4a18-97df-13c0c0e2d8ad" alt="" width="375"><figcaption></figcaption></figure></div>

## Heading

***

<table data-header-hidden><thead><tr><th width="126"></th><th></th></tr></thead><tbody><tr><td><strong>Sections</strong></td><td><a href="image-hero">Image hero</a> -  <a href="image-with-text">Image with text</a> -  <a href="image-with-text-split">Image with text split</a> -  <a href="newsletter">Newsletter</a> -  <a href="rich-text">Rich Text</a> -  <a href="video-hero">Video hero</a></td></tr></tbody></table>

Add heading text and change its size.

`Click Heading block to find settings`

<table><thead><tr><th width="166">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>The title of the block.</td></tr><tr><td><mark style="color:blue;">Heading tag</mark></td><td>Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics.<br><br>This option doesn't change the heading's appearance. <a href="../../general/editing-themes/h1-heading-tags">Learn more</a>.</td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Change the size of the heading text to <strong>Small, Medium</strong>, or <strong>Large</strong>.</td></tr><tr><td><mark style="color:blue;">Font</mark></td><td>Go to <a href="../../theme-styles/fonts">Theme settings > Fonts</a> to change the font for all headings.</td></tr></tbody></table>

&#x20;

## Text

***

<table data-header-hidden><thead><tr><th width="116"></th><th></th></tr></thead><tbody><tr><td><strong>Sections</strong></td><td><a href="image-hero">Image hero</a> -  <a href="image-with-text">Image with text</a> -  <a href="image-with-text-split">Image with text split</a> -  <a href="newsletter">Newsletter</a> -  <a href="rich-text">Rich Text</a> -  <a href="video-hero">Video hero</a></td></tr></tbody></table>

Click **(+) Add block** and select **Text**. Add multiple lines of text and change its size.&#x20;

&#x20;

`Click Text block to find settings`

<table><thead><tr><th width="130">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Text</mark></td><td>Add rich text. Use the buttons to make the text bold or italicized, or to add a link.</td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Change the size of the text between <strong>Small</strong>, <strong>Regular</strong>, or <strong>Large</strong>.</td></tr><tr><td><mark style="color:blue;">Font</mark></td><td>Go to <a href="../../theme-styles/fonts">Theme settings > Fonts</a> to change the font for all body text.</td></tr></tbody></table>

&#x20;

## Accent

***

<table data-header-hidden><thead><tr><th width="118"></th><th></th></tr></thead><tbody><tr><td><strong>Sections</strong></td><td><a href="image-hero">Image hero</a> -  <a href="image-with-text">Image with text</a> -  <a href="image-with-text-split">Image with text split</a> -  <a href="newsletter">Newsletter</a> -  <a href="rich-text">Rich Text</a> -  <a href="video-hero">Video hero</a></td></tr></tbody></table>

Click **(+) Add block** and select **Accent**. Add small heading text.

`Click Accent block to find settings`

<table><thead><tr><th width="202">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Text</mark></td><td>Add small heading text to use as a label.</td></tr><tr><td><mark style="color:blue;">Font</mark></td><td>Go to <a href="../../theme-styles/fonts">Theme settings > Fonts</a> to change the font for all accent text.</td></tr></tbody></table>

&#x20;

## Button

***

<table data-header-hidden><thead><tr><th width="121"></th><th></th></tr></thead><tbody><tr><td><strong>Sections</strong></td><td><a href="image-hero">Image hero</a> -  <a href="image-with-text">Image with text</a> -  <a href="image-with-text-split">Image with text split</a> -  <a href="newsletter">Newsletter</a> -  <a href="rich-text">Rich Text</a> -  <a href="video-hero">Video hero</a></td></tr></tbody></table>

Click **(+) Add block** and select **Image**. Add a link to another page and select a button style.&#x20;

When multiple button blocks are ordered together in the section panel, they will display in a single row.

<figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FSWKefODu2UZeQwEwiPce%2Fcontent-buttons.png?alt=media&#x26;token=a1e922ff-8568-48e4-b0d1-53ce37d77ad6" alt="" width="259"><figcaption></figcaption></figure>

`Click Button block to find settings`

<table><thead><tr><th width="152">Setting</th><th width="474">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Button link</mark></td><td>The URL that you want the button to link to.</td><td></td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>The text that displays on the button.<br><br>The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now).</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: "Button"</mark></td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Change the style of the button.</td><td><strong>Solid</strong><br><strong>Outline</strong><br><strong>Text</strong></td></tr><tr><td><mark style="color:blue;">Font</mark></td><td>Go to <a href="../../theme-styles/fonts">Theme settings > Fonts</a> to change button fonts.</td><td></td></tr><tr><td><mark style="color:blue;">Colors</mark></td><td>Go to <a href="../../../theme-styles/colors#button-colors">Theme settings > Colors</a> to change colors for solid buttons.</td><td></td></tr></tbody></table>

&#x20;

## Image

***

<table data-header-hidden><thead><tr><th width="116"></th><th></th></tr></thead><tbody><tr><td><strong>Sections</strong></td><td><a href="image-hero">Image hero</a> - <a href="image-with-text">Image with text</a> -  <a href="image-with-text-split">Image with text split</a> -  <a href="newsletter">Newsletter</a> - <a href="newsletter-compact">Newsletter compact</a> -  <a href="rich-text">Rich Text</a> -  <a href="video-hero">Video hero</a></td></tr></tbody></table>

Click **(+) Add block** and select **Image**. Upload an image and adjust its width.

&#x20;

`Click Image block to find settings`

<table><thead><tr><th width="152">Setting</th><th width="463">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image. There are no required dimensions. We recommend an image with a minimum width of 50px.<br><br>Use PNG files for images with a transparent background.</td><td></td></tr><tr><td><mark style="color:blue;">Image width</mark></td><td>Set Full width or Custom width</td><td><strong>Full width</strong><br><strong>Custom width</strong></td></tr><tr><td><mark style="color:blue;">Image size</mark></td><td>Set the maximum width (in pixels) of the image on desktop.</td><td><strong>50 - 1000 px</strong></td></tr><tr><td><mark style="color:blue;">Mobile image size</mark></td><td>Set the maximum width (in pixels) of the image on mobile.</td><td><strong>50 - 350 px</strong></td></tr></tbody></table>

&#x20;

## Video player

***

<table data-header-hidden><thead><tr><th width="141"></th><th></th></tr></thead><tbody><tr><td><strong>Sections</strong></td><td><a href="image-hero">Image hero</a> -  <a href="image-with-text">Image with text</a> -  <a href="image-with-text-split">Image with text split</a> -  <a href="rich-text">Rich Text</a> -  <a href="video-hero">Video hero</a></td></tr></tbody></table>

Click **(+) Add block** and select **Video player**.  Add a video that visitors can can click to view within a popup video player.&#x20;

You can either use an uploaded `.mp4` video in your **Shopify files** or embed a video from **YouTube** or **Vimeo**.

<details>

<summary><mark style="color:blue;">STEPS: Add Shopify-hosted video</mark></summary>

In your **Shopify admin**:

1. In the side panel, click **Content > Files**.
2. Click **Upload files** to add a **`.mp4`** file from your computer.

   > Once your file has been processed, you can go to the next step.

In the theme editor (**Customize**):

1. Click the **Video player** block within the section.
2. Under **Shopify video**, click **Select video** to select your video and click **Done**.
3. Click **Save**.

</details>

<details>

<summary><mark style="color:blue;">STEPS: Embed YouTube or Vimeo video</mark></summary>

In the theme editor (**Customize**):

1. Click the **Video player** block to open the settings.
2. Under **Youtube or Vimeo URL**, paste the link of your hosted video.
3. Click **Save**.

</details>

&#x20;

`Click Video player to find settings`

<table><thead><tr><th width="168">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Shopify video</mark></td><td>Select an <code>mp4</code>or <code>mov</code> video that you've uploaded to your Shopify files in the admin.</td></tr><tr><td><mark style="color:blue;">YouTube or Vimeo URL</mark></td><td>Paste the full URL of your YouTube or Vimeo video.</td></tr><tr><td><mark style="color:blue;">Video preview image</mark></td><td>Upload an image to display behind the play button.</td></tr><tr><td><mark style="color:blue;">Button text</mark></td><td>Change the default button label text ("Watch now")</td></tr><tr><td><mark style="color:blue;">Button icon style</mark></td><td>Set the play button style to <strong>Light,</strong> <strong>Dark,</strong> or <strong>Outline</strong>.</td></tr></tbody></table>

&#x20;

## Spacer

***

<table data-header-hidden><thead><tr><th width="115"></th><th></th></tr></thead><tbody><tr><td><strong>Sections</strong></td><td><a href="contact-form">Contact form</a> - <a href="image-hero">Image hero</a> -  <a href="image-with-text">Image with text</a> -  <a href="image-with-text-split">Image with text split</a> -  <a href="newsletter">Newsletter</a> -  <a href="rich-text">Rich Text</a> -  <a href="video-hero">Video hero</a></td></tr></tbody></table>

Click **(+) Add block** and select **Spacer**. Add space between other content blocks.

&#x20;

`Click Spacer block to find settings`

<table><thead><tr><th width="144">Setting</th><th width="472">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Space</mark></td><td>Add a gap of empty space between blocks. Use sliders to adjust the amount of space on desktop and mobile.</td><td><strong>4 - 64 px</strong></td></tr></tbody></table>

&#x20;

## Border

***

<table data-header-hidden><thead><tr><th width="115"></th><th></th></tr></thead><tbody><tr><td><strong>Sections</strong></td><td><a href="image-hero">Image hero</a> - <a href="image-with-text">Image with text</a> -  <a href="image-with-text-split">Image with text split</a> -  <a href="newsletter">Newsletter</a> -  <a href="rich-text">Rich Text</a> -  <a href="video-hero">Video hero</a></td></tr></tbody></table>

Click **(+) Add block** and select **Border**. Add a divider line between blocks.

&#x20;