# Content blocks

Many sections support the same 'rich content' blocks for text, images, buttons, style elements, and custom Liquid. You can add and re-arrange these blocks to customize the section layout.

> Some sections have unique blocks and settings. See detailed guides for these sections: [Blog posts](https://help.fluorescent.co/eclipse/sections/blog-posts), [Contact form](https://help.fluorescent.co/eclipse/sections/contact-form), [Featured collection](https://help.fluorescent.co/eclipse/sections/featured-collection), [Multi-column](https://help.fluorescent.co/eclipse/sections/multi-column), [Slideshow](https://help.fluorescent.co/eclipse/sections/slideshow).

<div><figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FNBntxSpdVe98DZrI1ykk%2Fcontent-blocks-left.png?alt=media&#x26;token=85ae78d7-8b34-41c6-a957-498bc5352db4" alt=""><figcaption></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2Fd1r7oqOM5SJCI8ShNa1q%2Fcontent-blocks-center.png?alt=media&#x26;token=d3aa18d0-8d57-4ed8-9c66-ae9053b70860" alt=""><figcaption></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FeGq0tyUrRV3NJ331bhyS%2Fcontent-blocks-right.png?alt=media&#x26;token=c69aee96-c1c0-4391-a089-cb50b3e75936" alt=""><figcaption></figcaption></figure></div>

## Heading block

***

Add heading text and change its size. Go to [Theme settings > Typography](https://help.fluorescent.co/eclipse/theme-settings/typography#headings) to change the font for all headings.

> Sections: [Contact form](https://help.fluorescent.co/eclipse/sections/contact-form), [Email signup](https://help.fluorescent.co/eclipse/sections/email-signup), [Image hero](https://help.fluorescent.co/eclipse/sections/image-hero), [Image with text](https://help.fluorescent.co/eclipse/sections/image-with-text), [Rich text](https://help.fluorescent.co/eclipse/sections/rich-text-1), [Video](https://help.fluorescent.co/eclipse/sections/video), [Video hero](https://help.fluorescent.co/eclipse/sections/video-hero), [Video with text](https://help.fluorescent.co/eclipse/sections/video-with-text)

`Click Heading block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>The title of the block.</td><td></td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Change the size of the heading text from small to large.</td><td><strong>1-8</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 8</mark></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-horizon/blob/main/sections/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><td><strong>H2 - H6</strong></td></tr></tbody></table>

## Text block

***

Add multiple lines of text and change its size. Go to [Theme settings > Typography](https://help.fluorescent.co/eclipse/theme-settings/typography#body-text) to change the font for all body text.

> Sections: [Contact form](https://help.fluorescent.co/eclipse/sections/contact-form), [Email signup](https://help.fluorescent.co/eclipse/sections/email-signup), [Image hero](https://help.fluorescent.co/eclipse/sections/image-hero), [Image with text](https://help.fluorescent.co/eclipse/sections/image-with-text), [Product overview](https://help.fluorescent.co/eclipse/product-pages/product-content-blocks/text-block), [Rich text](https://help.fluorescent.co/eclipse/sections/rich-text-1), [Video](https://help.fluorescent.co/eclipse/sections/video), [Video hero](https://help.fluorescent.co/eclipse/sections/video-hero), [Video with text](https://help.fluorescent.co/eclipse/sections/video-with-text)

`Click Text block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</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><td></td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Change the size of the text.</td><td><strong>1-8</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 3</mark></td></tr></tbody></table>

## Overline block

***

Add small heading text. Go to [Theme settings > Typography](https://help.fluorescent.co/eclipse/theme-settings/typography#headings) to change the font for all overline text.

> Sections: [Email signup](https://help.fluorescent.co/eclipse/sections/email-signup), [Image hero](https://help.fluorescent.co/eclipse/sections/image-hero), [Image with text](https://help.fluorescent.co/eclipse/sections/image-with-text), [Rich text](https://help.fluorescent.co/eclipse/sections/rich-text-1), [Video](https://help.fluorescent.co/eclipse/sections/video), [Video hero](https://help.fluorescent.co/eclipse/sections/video-hero), [Video with text](https://help.fluorescent.co/eclipse/sections/video-with-text)

`Click Overline block to find settings`

<table><thead><tr><th width="176">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></tbody></table>

## Button block

***

Add a button to link to another page and select a button style. Go to [Theme settings > Typography](https://help.fluorescent.co/eclipse/theme-settings/typography#body-text) to change the button fonts.

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

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FlzJ7R1poBu5R8LEQ0aTe%2Fbutton-styles.png?alt=media&#x26;token=10258959-a791-402c-997e-914d95ad16f3" alt="" width="515"><figcaption></figcaption></figure>

> Sections:  [Image hero](https://help.fluorescent.co/eclipse/sections/image-hero), [Image with text](https://help.fluorescent.co/eclipse/sections/image-with-text), [Rich text](https://help.fluorescent.co/eclipse/sections/rich-text-1), [Video](https://help.fluorescent.co/eclipse/sections/video), [Video hero](https://help.fluorescent.co/eclipse/sections/video-hero), [Video with text](https://help.fluorescent.co/eclipse/sections/video-with-text)

{% hint style="info" %}
The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, [read "What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)
{% endhint %}

`Click Button block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">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.</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> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Outline</strong><br><strong>Text</strong></td></tr></tbody></table>

## Image block

***

Add an image and adjust its width.

> Sections: [Email signup](https://help.fluorescent.co/eclipse/sections/email-signup), [Image hero](https://help.fluorescent.co/eclipse/sections/image-hero), [Image with text](https://help.fluorescent.co/eclipse/sections/image-with-text), [Product overview](https://help.fluorescent.co/eclipse/product-pages/product-content-blocks/text-block), [Rich text](https://help.fluorescent.co/eclipse/sections/rich-text-1), [Video](https://help.fluorescent.co/eclipse/sections/video), [Video hero](https://help.fluorescent.co/eclipse/sections/video-hero), [Video with text](https://help.fluorescent.co/eclipse/sections/video-with-text)

`Click Image block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">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 size</mark></td><td>Set the maximum width (in pixels) of the image on desktop.</td><td><strong>50 - 1000px</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 500px</mark></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 - 1000 px</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 250px</mark></td></tr></tbody></table>

## Spacer block

***

Customize the section layout by adding space between the content blocks.

> Sections: [Contact form](https://help.fluorescent.co/eclipse/sections/contact-form), [Email signup](https://help.fluorescent.co/eclipse/sections/email-signup), [Footer](https://help.fluorescent.co/eclipse/footer/footer/custom-liquid), [Image hero](https://help.fluorescent.co/eclipse/sections/image-hero), [Image with text](https://help.fluorescent.co/eclipse/sections/image-with-text), [Product overview](https://help.fluorescent.co/eclipse/product-pages/product-content-blocks/text-block), [Rich text](https://help.fluorescent.co/eclipse/sections/rich-text-1), [Video](https://help.fluorescent.co/eclipse/sections/video), [Video hero](https://help.fluorescent.co/eclipse/sections/video-hero), [Video with text](https://help.fluorescent.co/eclipse/sections/video-with-text)

`Click Spacer block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Spacing</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>1-50</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 40</mark></td></tr><tr><td><mark style="color:blue;">Mobile spacing</mark></td><td>Add a gap of empty space between blocks.</td><td><strong>1-100</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 40</mark></td></tr></tbody></table>

## Divider block

***

Customize the section layout by adding a divider line between the content blocks.

> Sections: [Email signup](https://help.fluorescent.co/eclipse/sections/email-signup), [Image hero](https://help.fluorescent.co/eclipse/sections/image-hero), [Image with text](https://help.fluorescent.co/eclipse/sections/image-with-text), [Product overview](https://help.fluorescent.co/eclipse/product-pages/product-content-blocks/text-block), [Rich text](https://help.fluorescent.co/eclipse/sections/rich-text-1), [Video](https://help.fluorescent.co/eclipse/sections/video), [Video hero](https://help.fluorescent.co/eclipse/sections/video-hero), [Video with text](https://help.fluorescent.co/eclipse/sections/video-with-text)

`Click Divider block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">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> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 1</mark></td></tr><tr><td><mark style="color:blue;">Spacing</mark></td><td>Use the sliders to add space at the top or bottom of the divider. Set to 0 to remove spacing.</td><td><strong>1-50</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 0</mark></td></tr></tbody></table>

## Liquid block

***

> Sections: [Footer](https://help.fluorescent.co/eclipse/footer/footer/custom-liquid), [Image hero](https://help.fluorescent.co/eclipse/sections/image-hero), [Image with text](https://help.fluorescent.co/eclipse/sections/image-with-text), [Product overview](https://help.fluorescent.co/eclipse/product-pages/product-content-blocks/text-block), [Rich text](https://help.fluorescent.co/eclipse/sections/rich-text-1), [Video](https://help.fluorescent.co/eclipse/sections/video), [Video hero](https://help.fluorescent.co/eclipse/sections/video-hero), [Video with text](https://help.fluorescent.co/eclipse/sections/video-with-text)

With the **Custom Liquid** setting, you can extend your theme by adding snippets of Liquid or HTML code as a block or section in the theme editor.

The Custom Liquid block provides a reliable and safer option compared to directly editing your theme code. It will help keep your theme copy eligible for updates and avoid conflicts with the original theme code.

{% hint style="warning" %}
**We do not support code customizations**. Always test code changes on an unpublished copy of your theme. For assistance, we recommend connecting with a professional developer. [Find a certified Fluorescent partner](https://partners.fluorescent.co/).
{% endhint %}

`Click Liquid block to find settings`

<table><thead><tr><th width="168">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Custom Liquid</mark></td><td>Add custom Liquid code for apps or custom content.<br><br>See Shopify's <a href="https://shopify.dev/docs/api/liquid">Liquid reference guide</a> and <a href="https://shopify.github.io/liquid-code-examples/">Liquid code examples</a> to learn more.</td></tr></tbody></table>