# Section styles

Sections include general style options. In the editor side panel, click the section to find settings for **Section colors**, **image overlays**, **padding**, and **animations**.

 

## Section colors

***

{% columns %}
{% column width="58.333333333333336%" %}
You can change a section's **color scheme** or use **custom colors** for your section. Click a section to open the settings and find the **Section colors** area.

{% endcolumn %}

{% column %}

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FyOzpkBF5wecyJqGljNXV%2Fsection-colors.png?alt=media&#x26;token=e6f337c7-3369-4165-95c6-2eafc043e975" alt="" width="375"><figcaption></figcaption></figure>

{% endcolumn %}
{% endcolumns %}

### Use color scheme

***

Sections use the colors from your theme settings as the **default color scheme**. You can select a **variant color scheme** or [use custom section colors](#use-custom-section-colors).

**Variant color schemes** generate alternate colors based on your default theme colors. There are four variant color schemes: **Inverse**, **Soft**, **Accent**, or **Sale**.

`Click the section to find color settings`

<table data-header-hidden><thead><tr><th width="113"></th><th></th></tr></thead><tbody><tr><td><mark style="color:blue;">Default</mark></td><td>Use colors selected in <a href="../../theme-styles/colors">Theme settings > Color > General</a>.</td></tr><tr><td><mark style="color:blue;">Inverse</mark></td><td>Swap default <strong>Text</strong> and <strong>Background</strong> colors.</td></tr><tr><td><mark style="color:blue;">Soft</mark></td><td>Use a blend of default <strong>Text</strong> and <strong>Background</strong> colors.</td></tr><tr><td><mark style="color:blue;">Accent</mark></td><td>Use default <strong>Accent</strong> and <strong>Accent contrasting</strong> colors.</td></tr><tr><td><mark style="color:blue;">Sale</mark></td><td>Use default <strong>Sale</strong> color for background and default <strong>Background</strong> color for text.</td></tr><tr><td><mark style="color:blue;">Custom</mark></td><td>Apply <strong>Color scheme 1</strong> or <strong>Color scheme 2</strong> from your theme settings. Go to <em>Theme settings > Colors > Color scheme</em> to edit.<br><br><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FJgXyBGHJEGMLf3H7UIFi%2Fcolor-scheme-custom.png?alt=media&#x26;token=e99af88d-1ef1-493f-93c1-bd8e672d671b" alt=""></td></tr></tbody></table>

&#x20;

### Use custom section colors

***

Instead of using a color scheme, you can use custom colors for the **text** and **background**. In the section settings, enable the **Override with custom colors** option.

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Fn9Q1CMzEIiwOjZDUzfKj%2Fsection-custom-colors.png?alt=media&#x26;token=b3490a5b-3da0-48fc-91dc-1baa58056aec" alt=""><figcaption></figcaption></figure>

`Click section to find settings`

<table><thead><tr><th width="197">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Override with custom colors</mark></td><td>Enable to apply custom colors to the section. <br><br>These colors will override the color scheme.</td></tr><tr><td><mark style="color:blue;">Text color</mark></td><td>Select a custom color for headings, text, and foreground elements.</td></tr><tr><td><mark style="color:blue;">Background color</mark></td><td>Select a custom color for the section background. </td></tr></tbody></table>

&#x20;

## Image overlays

***

When text appears on top of images, sections use **Image overlay** colors for the text. You can use the **default colors** from your *theme settings*, or select **custom colors** for the section.

The overlay also applies a **tint** over top the image. You can use a **solid** or **gradient** color, or turn it off.

{% hint style="info" %}
Overlay colors with high contrast help keep text readable and [accessible for everyone](https://help.fluorescent.co/cornerstone/general/editing-themes/accessibility#color-contrast-for-text).
{% endhint %}

<div><figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FWPNj1oJQ9XyQkC1BC9E2%2Feditor-overlay-settings.png?alt=media&#x26;token=bcf2fd9b-29c5-484a-9029-3c024673ef43" alt="" width="301"><figcaption></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2F73JN6EXgS8wovHQZ2N6u%2Foverlay-solid.png?alt=media&#x26;token=780c4a79-021f-4cd4-96e1-f7ea21e4356e" alt="" width="563"><figcaption><p>Solid color with 70% opacity</p></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FhxhstwxvKmydfyRnAc0g%2Foverlay-gradient.png?alt=media&#x26;token=63b21b71-1cf1-4dd5-bd91-ab1077605f3b" alt="" width="563"><figcaption><p>Gradient color - bottom to top</p></figcaption></figure></div>

&#x20;

{% stepper %}
{% step %}

### Change overlay colors

* To change the **default overlay colors** for all sections, go to *Theme settings > Colors > Image overlay*.&#x20;
* To use **custom overlay color**s, open the section settings to enable **Override with custom colors**. Select the **Text** and **Tint** colors.
  {% endstep %}

{% step %}

### Use solid or gradient style

Change the **Tint style** to use a **solid** or **gradient** color overlay. Gradient overlays fade from solid to transparent. You can select the **direction** of the fade.
{% endstep %}

{% step %}

### Change transparency

Use the **Tint opacity** slider to make the tint more or less transparent. *S*e*t the opacity to 0% to turn off the tint overlay.*

{% hint style="info" %}
Set the opacity to 100% to create solid color blocks or banners in sections like [Grid](https://help.fluorescent.co/cornerstone/pages/theme-sections/grid), [Image hero](https://help.fluorescent.co/cornerstone/pages/theme-sections/image-hero), or [Slideshow](https://help.fluorescent.co/cornerstone/pages/theme-sections/slideshow).
{% endhint %}
{% endstep %}
{% endstepper %}

&#x20;

`Click block or section to find settings`

<table><thead><tr><th width="185">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Tint opacity</mark></td><td>Use the slider to change the transparency of the overlay.<br><br><em>S</em>e<em>t the opacity to 0% to turn off the tint overlay.</em></td></tr><tr><td><mark style="color:blue;">Tint style</mark></td><td>Select a <strong>Solid</strong> color or <strong>Gradient</strong> color overlay for the tint. For gradients, select a <strong>direction</strong> of the fading color.</td></tr><tr><td><mark style="color:blue;">Override with custom colors</mark></td><td>Check this option to use custom overlay colors, instead of the default theme colors .</td></tr><tr><td><mark style="color:blue;">Text color</mark></td><td>Select a custom color for the headings and text.</td></tr><tr><td><mark style="color:blue;">Tint color</mark></td><td>Select a custom overlay color.</td></tr></tbody></table>

&#x20;

## Section padding

***

Add or remove space at the top and bottom of the section. Click the section to open the settings. Under **Section style**, use the **Top spacing** and **Botton spacing** sliders. Set to 0px to remove spacing.

<div><figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FwcK2V8tRGVl3GfEsQNH7%2Feditor-spacing.png?alt=media&#x26;token=f6131225-7a37-469b-a7d1-a6b5976051a6" alt="" width="375"><figcaption></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FoKSnsCkBHShiHYSpLGS5%2Fsection-padding.jpg?alt=media&#x26;token=432c7a71-6ab5-42c7-8db4-e6823c2d231e" alt="" width="375"><figcaption></figcaption></figure></div>

&#x20;

## Section animations

***

When animations are enabled, text and images are loaded dynamically: section contents slide, fade, zoom, or ease into position at a delay rather than all at once.

Other animations include a "shimmer" over images and subtle visual changes to elements like buttons or hot spots.

### Turn off animations

***

You may want to turn off animations if you have concerns about load time, style, or accessibility.

* To turn off animations for a section, click the section to open the settings. Under **Section style**, toggle off **Enable animations**.
* To turn off animations for *all* sections, go to **Theme settings > Animation** and toggle of **Enable section animations**.