> 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/stiletto/readme/stiletto-6.0-visual-refresh/section-layout.md).

# Section layout

More controls for section width, spacing, and alignment.

## <mark style="color:$primary;">New width options</mark>

<mark style="color:$info;">All section now have width settings.</mark>

More sections have width options, and hero and banner sections include a **Full width (background only)** option.

***

{% columns fullWidth="false" %}
{% column width="50%" %} <sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> **Section width options**\ <mark style="color:$info;">Added more section width options (available depending on section type)</mark>

* [Page width](#user-content-fn-1)[^1]
* [Full width](#user-content-fn-2)[^2]
* Full width (padded)
* [Full width (background only)](#user-content-fn-3)[^3]
* Full width on mobile

<sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> **Max page width**\ <mark style="color:$info;">Set the global maximum page width (1200 - 2200px) in Theme settings >Layout</mark>

<sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> **Full width dividers**\ <mark style="color:$info;">Display section dividers full width</mark>
{% endcolumn %}

{% column width="50%" %}

<div align="left"><figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2F4LLMZjmkGDhsNphCTPjL%2FFull%20width.png?alt=media&amp;token=6f715260-6257-48fd-8658-1883b9e06ead" alt=""><figcaption><p><strong>Full width</strong></p></figcaption></figure> <figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fl1UYNMhgBBWFLpdPyvW4%2FFull%20width%20(background%20only).png?alt=media&amp;token=9b844e09-871a-4d89-8bae-599db2413a20" alt=""><figcaption><p><strong>Full width (background only)</strong></p></figcaption></figure></div>

<div><figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FMHNkCC6Ukk87QpxL04GR%2FFull%20width-padded.png?alt=media&amp;token=d08bdf22-c7e4-48b1-b875-1d24544bf5d5" alt=""><figcaption><p><strong>Full width (padded)</strong></p></figcaption></figure> <figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FoTw7cBySVU8AeORJNU93%2FPage%20width.png?alt=media&amp;token=d00a5134-149a-47f0-9f05-0af2bc7b4430" alt=""><figcaption><p><strong>Page width</strong></p></figcaption></figure></div>
{% endcolumn %}
{% endcolumns %}

***

<mark style="color:$info;">**Related updates**</mark>

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><sup><mark style="color:$primary;">New</mark></sup> <strong>Global width setting</strong></td><td><mark style="color:$info;">Set the max site-wide page width between 1200 to 2200px in </mark><em><mark style="color:$info;">Theme settings > Layout</mark></em><mark style="color:$info;">.</mark></td></tr><tr><td><strong>Header</strong></td><td><sup><mark style="color:$primary;">New</mark></sup> Page width and full width options<br><sup><mark style="color:$primary;">New</mark></sup> Full width separator option</td></tr><tr><td><strong>Footer</strong></td><td><sup><mark style="color:$primary;">New</mark></sup> Page width and full width options<br><sup><mark style="color:$primary;">New</mark></sup> Top and bottom padding controls<br><sup><mark style="color:$primary;">New</mark></sup> Top divider option</td></tr><tr><td><strong>Blog post page</strong></td><td><sup><mark style="color:$primary;">New</mark></sup> Featured image width options</td></tr><tr><td><strong>Testimonials</strong></td><td><sup><mark style="color:$primary;">New</mark></sup> Quotes content width option</td></tr><tr><td><strong>PDP Secure payments</strong></td><td><sup><mark style="color:$primary;">New</mark></sup> Pixel width and mobile specific setting</td></tr></tbody></table>

## <mark style="color:$primary;">Section padding</mark>

***

{% columns %}
{% column width="58.333333333333336%" %} <sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> **Top and Bottom padding controls**\ <mark style="color:$info;">Control top and bottom padding with pixel slider controls, from 0 to 100px.</mark>

{% hint style="info" %}
Padding options not included in: Header, Announcement bar, Password header
{% endhint %}
{% endcolumn %}

{% column width="41.666666666666664%" %}

<div align="left" data-with-frame="true"><figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FCdzbxFA2lNU2HfL89NoK%2Fsection-settings-2A.png?alt=media&amp;token=8acc880d-9faa-4399-bba2-48e2aa239306" alt="" width="219"><figcaption></figcaption></figure></div>
{% endcolumn %}
{% endcolumns %}

***

## <mark style="color:$primary;">Section header and slider alignment</mark>

***

{% columns %}
{% column width="50%" %} <sup><mark style="color:$primary;">Updated<mark style="color:$primary;"></sup> **Section header alignment**\ <mark style="color:$info;">Added alignment settings for section headers.</mark>

<sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> **Collection banner text alignment**\ <mark style="color:$info;">Content alignment options for collection image and no image separately.</mark>

<sup><mark style="color:$primary;">New<mark style="color:$primary;"></sup> **Slider navigation position**\ <mark style="color:$info;">New global setting for slider navigation placement, either in the section header or over the slider. Go to</mark> *<mark style="color:$info;">Theme settings > Layout.</mark>*

> <sup>Slider arrows will display on</sup> <sup>either sider of header content when 'centred'</sup>
> {% endcolumn %}

{% column width="50%" %}

<div data-with-frame="true"><figure><img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FhouCA5vistkFPdmhTLIg%2Fsection-layout-1.png?alt=media&amp;token=ca1db22a-3063-41e2-a025-36008b93f9db" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}
{% endcolumns %}

***

<mark style="color:$info;">**Note the change**</mark>

{% columns fullWidth="false" %}
{% column %}
{% hint style="info" %}

## Contact form

Alignment settings are now in Heading and Paragraph blocks.
{% endhint %}
{% endcolumn %}

{% column %}
{% hint style="info" %}

## Shoppable image editorial

Moved the *Content position* setting to the Content section.
{% endhint %}
{% endcolumn %}
{% endcolumns %}

[^1]: <img src="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FoTw7cBySVU8AeORJNU93%2FPage%20width.png?alt=media&amp;token=d00a5134-149a-47f0-9f05-0af2bc7b4430" alt="" data-size="original">

[^2]: **Supported sections**\
    Countdown banner\
    Countdown bar

    Image hero

    Image hero split

    Image with text split

    Article page - Featured image block

    Promo banner

    Promo bar

    Sales banner

    Shoppable image

    Slideshow

    Video

    Video hero

[^3]: **Supported sections**

    Collection banner\
    Image hero

    Image with text split

    Slideshow

    Video hero