> For the complete documentation index, see [llms.txt](https://ajuda.temaflex.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ajuda.temaflex.com.br/personalizar-layout/cabecalho/layout.md).

# Layout

1. Acesse o painel Nuvemshop e siga pelo caminho **"Loja Online > Layout > Editar layout"**.
2. No menu lateral, clique em **"Cabeçalho > Layout".**

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FskGBKY27wiOeKUaCvCV5%2Fimage.png?alt=media&amp;token=ce9b2e98-c574-4652-80d7-2c92ecad75ad" alt=""><figcaption></figcaption></figure>

\
\
A seleção de **estilo de layout do cabeçalho** vai definir a organização dos elementos no topo da sua loja.&#x20;

![](https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FrEPvQlgQ1YiKouGK5liB%2Fimage.png?alt=media\&token=42d7396f-84d0-4777-811c-a505b0d4422b)

Atualmente, o Flex disponibiliza **cinco opções de estilos**, conforme abaixo: \
\
**-** Logo na esquerda e menu abaixo:&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2F7MOR8LLHkn7N5nsorXyj%2FCaptura%20de%20Tela%202023-04-29%20a%CC%80s%2011.17.51.png?alt=media&amp;token=41cc72a0-e9c7-462f-89a2-e67dbaf9b762" alt=""><figcaption></figcaption></figure>

**-** Logo centralizado e menu abaixo:

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FAawpQBzbeKnSzaERNeXO%2FCaptura%20de%20Tela%202023-04-29%20a%CC%80s%2011.17.37.png?alt=media&amp;token=ea4c0b8b-b359-4a6a-802c-941a8c44b1c6" alt=""><figcaption></figcaption></figure>

**-** Logo na esquerda e menu ao lado:

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FtbzJ4nsobPM7fdPc0eBZ%2FCaptura%20de%20Tela%202023-04-29%20a%CC%80s%2011.18.23.png?alt=media&amp;token=c76f76a8-2c65-4369-9b08-51d758703ea7" alt=""><figcaption></figcaption></figure>

**-** Logo centralizado e menu oculto:

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2Fkm5eWOAk5DzXpK64QqpN%2FCaptura%20de%20Tela%202023-04-29%20a%CC%80s%2011.17.00.png?alt=media&amp;token=3221d8a9-25db-44a7-864c-c9e745b0bce0" alt=""><figcaption></figcaption></figure>

**-** Logo na esquerda, menu centralizado e busca à direita: &#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FBl15RpZnI6QRmcJDOGtg%2FCaptura%20de%20Tela%202023-04-29%20a%CC%80s%2011.17.17.png?alt=media&amp;token=e2eb878b-9a57-4e37-9911-4f5cd273b9be" alt=""><figcaption></figcaption></figure>

Ainda neste seção, você pode selecionar se deseja que o cabeçalho esteja sempre visível ao navegar pela loja, ou seja, sempre ao rolar a tela ou navegar por outras abas, o cabeçalho será exibido.

{% hint style="warning" %}
OBS: O cabeçalho sempre visível terá o mesmo layout e disposição do cabeçalho ativo no site.&#x20;
{% endhint %}

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FZg7vUxBUhdWOFthOFzbz%2Fdoc12.png?alt=media&amp;token=e96627d7-89be-4bad-bf22-eb41563d7d0d" alt=""><figcaption></figcaption></figure>

Por último, você pode selecionar se deseja que o cabeçalho fique transparente e sobre os banners rotativos.&#x20;

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FCD3ZSbU7LRt39dYFCvdp%2Fdoc13.png?alt=media&amp;token=d9684a2b-d2d6-4344-a1a2-ae0350407689" alt=""><figcaption></figcaption></figure>

Exemplo de cabeçalho sem a transparência:

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FIYBLKB6Ul5r180KP7Iky%2Fimage.png?alt=media&amp;token=1a53a255-9498-4384-8502-764a679f2179" alt=""><figcaption></figcaption></figure>

Exemplo de cabeçalho transparente sobre os banners:

<figure><img src="https://2606432350-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdmDGRqcCSJvlyHS2pQ1k%2Fuploads%2FxZLFcHsSaQqhX1PiXj83%2Fimage.png?alt=media&amp;token=d3a0de31-6b5a-4422-ae4d-300c86df272b" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Importante!**

Ao ativar a seleção de cabeçalho transparente, certifique-se de que os **banners rotativos tenham uma margem superior lisa**, para que as informações não fiquem sobrepostas aos títulos dos menus e informações do cabeçalho.&#x20;
{% endhint %}

Após definir todas essas opções para a sua loja, clique em **"Publicar Alterações"** para finalizar.

<figure><img src="https://lh5.googleusercontent.com/dPJAQCU7yUHoNKDqu3THQ0C8Wr8ZHcEtoWPbLkyALJgYpO2jkGxQSDvE4vndymASO5qqg49GbMAQUhMJlNW6Yw1S1DLSk1lLmY-WX5FIdmYU6ACDUyjQbVzZ8rMQ-SR0u_XieD2nPbKSLyow_BULUs31VHyNQMxxGxQDoByJ0s6GKFEY6TkwVtmQ-niDjQ" alt=""><figcaption></figcaption></figure>

**Pronto! 🙌**&#x20;