> 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

## <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="/files/EpiRVfar45ClXzqEIZIV" alt=""><figcaption><p><strong>Full width</strong></p></figcaption></figure> <figure><img src="/files/uFGMGPycdXryar5xupBm" alt=""><figcaption><p><strong>Full width (background only)</strong></p></figcaption></figure></div>

<div><figure><img src="/files/odeNy4VO7SH3bwcfZCRz" alt=""><figcaption><p><strong>Full width (padded)</strong></p></figcaption></figure> <figure><img src="/files/N6dbxRR5FcUOufdFV1NK" 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="/files/l77bTgi9NKAUk536YjEH" 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="/files/va5YJ3UiypMF5I3LGmmo" 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="/files/N6dbxRR5FcUOufdFV1NK" 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