> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/eclipse/sections/overview/content-blocks.md).

# 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](/eclipse/sections/blog-posts.md), [Contact form](/eclipse/sections/contact-form.md), [Featured collection](/eclipse/sections/featured-collection.md), [Multi-column](/eclipse/sections/multi-column.md), [Slideshow](/eclipse/sections/slideshow.md).

<div><figure><img src="/files/ilLCbPLKSa8N4nzH3WMB" alt=""><figcaption></figcaption></figure> <figure><img src="/files/XsgLvI0jbQOuVmgGZuoj" alt=""><figcaption></figcaption></figure> <figure><img src="/files/W5Qt2z3XT9xUOkkngxlt" alt=""><figcaption></figcaption></figure></div>

## Heading block

***

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

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

`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](/eclipse/theme-settings/typography.md#body-text) to change the font for all body text.

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

`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](/eclipse/theme-settings/typography.md#headings) to change the font for all overline text.

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

`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](/eclipse/theme-settings/typography.md#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="/files/hMTnCgtQUV93hUWksqUA" alt="" width="515"><figcaption></figcaption></figure>

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

{% 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](/eclipse/sections/email-signup.md), [Image hero](/eclipse/sections/image-hero.md), [Image with text](/eclipse/sections/image-with-text.md), [Product overview](/eclipse/product-pages/product-content-blocks/text-block.md), [Rich text](/eclipse/sections/rich-text-1.md), [Video](/eclipse/sections/video.md), [Video hero](/eclipse/sections/video-hero.md), [Video with text](/eclipse/sections/video-with-text.md)

`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](/eclipse/sections/contact-form.md), [Email signup](/eclipse/sections/email-signup.md), [Footer](/eclipse/footer/footer/custom-liquid.md), [Image hero](/eclipse/sections/image-hero.md), [Image with text](/eclipse/sections/image-with-text.md), [Product overview](/eclipse/product-pages/product-content-blocks/text-block.md), [Rich text](/eclipse/sections/rich-text-1.md), [Video](/eclipse/sections/video.md), [Video hero](/eclipse/sections/video-hero.md), [Video with text](/eclipse/sections/video-with-text.md)

`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](/eclipse/sections/email-signup.md), [Image hero](/eclipse/sections/image-hero.md), [Image with text](/eclipse/sections/image-with-text.md), [Product overview](/eclipse/product-pages/product-content-blocks/text-block.md), [Rich text](/eclipse/sections/rich-text-1.md), [Video](/eclipse/sections/video.md), [Video hero](/eclipse/sections/video-hero.md), [Video with text](/eclipse/sections/video-with-text.md)

`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](/eclipse/footer/footer/custom-liquid.md), [Image hero](/eclipse/sections/image-hero.md), [Image with text](/eclipse/sections/image-with-text.md), [Product overview](/eclipse/product-pages/product-content-blocks/text-block.md), [Rich text](/eclipse/sections/rich-text-1.md), [Video](/eclipse/sections/video.md), [Video hero](/eclipse/sections/video-hero.md), [Video with text](/eclipse/sections/video-with-text.md)

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>