# 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://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=""><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="401"><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="media-with-content">Overlapping media with content</a> - <a href="media-with-content-split">Media with content 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 size</mark></td><td>Change the size of the heading text from small (1) to large (8).</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. Learn how to <a href="https://github.com/fluorescent/kb-cornerstone/blob/main/general/editing-themes/h1-heading-tags/README.md#replacing-default-h1-headings">replace default H1 headings</a>.<br><br>This option doesn't change the heading's appearance.</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>

## 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="media-with-content">Overlapping media with content</a> - <a href="media-with-content-split">Media with content 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.

`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.</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>

## 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="media-with-content">Overlapping media with content</a> - <a href="media-with-content-split">Media with content 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 with an optional divider.

`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;">Text size</mark></td><td>Change the size of the text.</td></tr><tr><td><mark style="color:blue;">Show accent divider</mark></td><td>Display border line below the accent text.</td></tr><tr><td><mark style="color:blue;">Divider color</mark></td><td>Use the <strong>Theme colors</strong> from your theme settings or the <strong>Current colors</strong> from the section settings.</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>

## 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="media-with-content">Overlapping media with content</a> - <a href="media-with-content-split">Media with content 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.

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

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FFgOaq5eFirhORZrM45va%2Fcontent-buttons.png?alt=media&#x26;token=036d6491-4682-4a5a-a167-987c9d5579d5" alt=""><figcaption></figcaption></figure>

`Click Button block to find settings`

<table><thead><tr><th width="159">Setting</th><th width="428">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. Choose to use <strong>Theme colors</strong> or <strong>Current colors</strong> set in section.</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 the button fonts.</td><td></td></tr></tbody></table>

## 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="media-with-content">Overlapping media with content</a> - <a href="media-with-content-split">Media with content 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.

.

`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 - 750 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>

## Text list with icons

***

<table data-header-hidden><thead><tr><th width="147"></th><th></th></tr></thead><tbody><tr><td><strong>Sections</strong></td><td><a href="image-hero">Image hero</a> - <a href="media-with-content">Overlapping media with content</a> - <a href="media-with-content-split">Media with content 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 **Text list with icons**.

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FaEWMtEHAkYy5i4Klmua7%2Fcontent-text-list.png?alt=media&#x26;token=1e994e49-3fcd-407f-958d-79b1f791d4f6" alt=""><figcaption></figcaption></figure>

### Add items

***

Click the **Text list with icons** block to open the settings. Add up to 6 list items with an **icon** and **text**. Choose an icon or upload your own.

`Click Text list with icons block to find settings`

<table><thead><tr><th width="196">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Icon</mark></td><td>Choose from 30+ free icons to display next to the text.</td></tr><tr><td><mark style="color:blue;">Custom icon image</mark></td><td>Upload your own icon image to display next the heading.<br><br>We recommend a PNG image with a transparent background and minimum dimensions of 50px by 50px.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add short text to tell customers about your product.</td></tr><tr><td><mark style="color:blue;">Vertical alignment</mark></td><td>Position the text at the <strong>Center</strong> or <strong>Top</strong>, relative to the icon.</td></tr></tbody></table>

### Change icon style

***

Click the **Text list with icons** block to open the settings. Customize the style of the icons, including the **framing**, **background**, **color**, and **width**.

`Click Text list with icons block to find settings`

<table><thead><tr><th width="194">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Icon framing</mark></td><td>Choose to show a <strong>Circle</strong> or <strong>Slightly</strong> rounded border around the icons. Select <strong>None</strong> to show no border.</td></tr><tr><td><mark style="color:blue;">Icon framing style</mark></td><td>Choose to display icons with a solid color background (<strong>Filled</strong>), or with a border and no background (<strong>Outlined</strong>).</td></tr><tr><td><mark style="color:blue;">Icon frame color</mark></td><td>Choose to use the <strong>Accent color</strong> (from your theme settings) or the <strong>Current text color</strong> (from the section settings).</td></tr><tr><td><mark style="color:blue;">Icon width</mark></td><td>Set the pixel width of icons for desktop screens: between <strong>10</strong> and <strong>50</strong> pixels.</td></tr><tr><td><mark style="color:blue;">Mobile icon width</mark></td><td>Set the pixel width of icons for mobile screens: between <strong>10</strong> and <strong>50</strong> pixels.</td></tr></tbody></table>

## 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="media-with-content">Overlapping media with content</a> - <a href="media-with-content-split">Media with content 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.

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>

`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;">Play button design</mark></td><td>Display the play button as a <strong>Play icon only</strong> or <strong>Button with label</strong> ("Watch now").</td></tr><tr><td><mark style="color:blue;">Button size</mark></td><td>Change the size to <strong>Small</strong> or <strong>Large</strong>.</td></tr><tr><td><mark style="color:blue;">Play button</mark></td><td>Display the Play icon as <strong>Light</strong> or <strong>Dark</strong>.</td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Change the default button label text ("Watch now")</td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Change the style of the button: <strong>Solid, Outline</strong>, or <strong>Text</strong>. Choose to use <strong>Theme colors</strong> or <strong>Current colors</strong> set in section.</td></tr></tbody></table>

## 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="media-with-content">Overlapping media with content</a> - <a href="media-with-content-split">Media with content 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.

`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>

## Divider

***

<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="media-with-content">Overlapping media with content</a> - <a href="media-with-content-split">Media with content 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 **Divider**. Add a border line between blocks with custom **thickness** and **spacing**.

`Click Divider block to find settings`

<table><thead><tr><th width="137">Setting</th><th width="499">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Thickness</mark></td><td>Use the slider to increase the thickness of the divider line.</td><td><strong>1 - 5</strong></td></tr><tr><td><mark style="color:blue;">Spacing</mark></td><td>Use the sliders to add space <strong>above</strong> and <strong>below</strong> the divider. Set to 0 to remove spacing.</td><td><strong>1 - 40</strong></td></tr></tbody></table>