> 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="/files/paYsHTgenYJGIJtXIqOU" 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;

![](/files/Zze0NhN2yK7QUePBnRRC)

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

<figure><img src="/files/rD6EnCR1u4uXxrhNSHGj" alt=""><figcaption></figcaption></figure>

**-** Logo centralizado e menu abaixo:

<figure><img src="/files/8Gz6KhmO8tZRVyHYGxaY" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/0lagtebuveQsxysfL1oy" alt=""><figcaption></figcaption></figure>

**-** Logo centralizado e menu oculto:

<figure><img src="/files/7tBgmrbX92PXC7IoGB7S" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/czMRgPuoEd1ZN3sqU8kA" 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="/files/aRP0nu3K8HOzzCgNw6R2" 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="/files/k9SfB6ypUDpa5cIbtxfs" alt=""><figcaption></figcaption></figure>

Exemplo de cabeçalho sem a transparência:

<figure><img src="/files/DfvCpJHxi7qzDeqjhDJ7" alt=""><figcaption></figcaption></figure>

Exemplo de cabeçalho transparente sobre os banners:

<figure><img src="/files/ZRPswF53WQlk0n9lOV4R" 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;