Central de Atendimento Nuvem Configure sua loja Layout Personalização básica

Como configurar o cabeçalho do layout?

Saiba como configurar o cabeçalho do seu Layout de acordo com o tema instalado em sua loja

Última atualização: 21/10/2021

Para tornar o visual de sua loja ainda mais singular, é possível fazer algumas modificações no cabeçalho. 

Neste tutorial, explicaremos como configurar o cabeçalho de acordo com Layout instalado em sua loja.

1. Acesse o painel administrador Nuvemshop

2. siga pelo caminho "Minha Nuvemshop >  Layout > Personalizar seu layout atual".

3. Na seção Configurações avançadas, vá na opção "Cabeçalho".


4. A partir de agora, as opções dentro do menu Cabeçalho podem ser diferentes dependendo Layout instalado em sua loja. Por isso, separamos por modelo de Layout. Para isso, siga passos: Localize o tema instalado, abra o menu e veja quais ferramentas estão disponíveis para configurar o seu cabeçalho.

Atlántico

No Layout Atlántico, é possível apenas ativar e desativar a Barra de Anúncio. 


Após ativar a Barra de anúncio, você deve adicionar uma mensagem com uma chamada para algum anúncio de sua loja ( pode ser promoção ou até mesmo um produto novo). Lembrando que esse campo é obrigatório.

E por último, sendo um recurso opcional, você pode incluir um link que direcionar o visitante para alguma página da loja (para um promoção ou até mesmo uma página importante que será útil para conclusão da compra).

Delete

Idea

No Layout Idea, você poderá configurar a Cor de fundo do cabeçalho, Barra de anúncio e outras opções que permitem personalizar o cabeçalho durante a navegação.

Cor de fundo do cabeçalho

Esse opção seleciona as cores do cabeçalho de acordo com a configuração de cores de sua loja.

No exemplo abaixo, configuramos as cores do Layout da seguinte forma:

  • Cor principal de sua marca: Amarelo
  • Cor de fundo: Branco
  • Cor de textos: Preto

Quando vamos em "Cabeçalho > Cor de fundo do cabeçalho", podemos alterar as cores de fundo do cabeçalho considerando as três opções: Cor principal de sua marca, Cor de fundo e Cor de textos:


Por padrão, a cor de fundo do cabeçalho permanecerá da mesma cor principal de sua marca da loja. Você pode mudar para a opção cor de textos ou cor de fundo.

Delete

Info

Para saber como alterar as cores de sua loja, consulte o nosso tutorial 📝 Como alterar as cores do meu layout?.

Delete

Barra de anúncio

No Layout Idea, é possível  ativar e desativar a Barra de Anúncio. 


Após ativar a Barra de anúncio, você deve adicionar uma mensagem com uma chamada para algum anúncio de sua loja (pode ser promoção ou para um produto novo). Lembrando que esse campo é obrigatório.


E por último, sendo um recurso opcional, você pode incluir um link que direcionar o visitante para alguma página da loja (para um promoção ou até mesmo uma página importante que será útil para conclusão da compra).


Delete

Mais opções

Você também pode fazer algumas alterações para personalizar ainda mais o seu cabeçalho, habilitando ou desabilitando as seguintes opções:

  • Cabeçalho transparente no banners rotativos;
  • Cabeçalho sempre visível ao navegar pela loja;
  • Barra de pesquisa sempre visível no computador;
  • Conta de usuário sempre visível no computador.

Delete
Delete

Simple

No Layout Simples, é possível configurar a largura da coluna, cor de fundo, posição do logo, barra de anúncios e mais opções de personalização do seu cabeçalho.

Largura da coluna 

Por padrão, a largura da coluna sempre será Pequena. Você pode optar por mais 2 larguras de coluna: Média e Completa.


Ao selecionar a largura Média os elementos da página ocupam uma maior porcentagem da tela. Selecionando a largura Completa, os elementos da página ocuparão a mesma porcentagem da largura Média, mas o cabeçalho ocupará toda a extensão da tela.Delete

Cor de fundo do cabeçalho

Esse opção seleciona as cores do cabeçalho de acordo com a configuração de cores de sua loja.

No exemplo abaixo, configuramos algumas das cores do Layout da seguinte forma:

  • Cor de fundo: Rosa
  • Resto dos textos: Verde


Quando vamos em "Cabeçalho > Cor de fundo do cabeçalho", podemos alterar as cores de fundo do cabeçalho considerando as três opções: Cor de fundo, Cor de textos e transparente.


Do caso da opção Cor de Fundo usa como base a cor configurada como Cor de fundo no Layout (cor Rosa no exemplo) e a Cor de textos, usa a cor configurada como Resto dos textos (cor Verde no exemplo)

Para a opção Transparente, só será ativada quando o cabeçalho estiver configurado como Largura Completa da coluna e a posição esquerda~. Ao ativar, todo o cabeçalho ficará transparente.

Delete

Info

Para saber como alterar as cores de sua loja, consulte o nosso tutorial 📝 Como alterar as cores do meu layout?.

Delete

Posição do logo

Por padrão, a posição do logo será sempre Centralizada. Ao mudar a largura da coluna para Média ou Completa, você pode optar por mantê-lo à esquerda ou centralizado.

Delete

Barra de anúncio

No Layout Simple, é possível  ativar e desativar a Barra de Anúncio. 


Com a Barra de anúncio ativada, adicione uma mensagem para o seu anúncio (pode ser promoção ou até mesmo um produto novo). Não esquecendo que esse campo é obrigatório, ou seja, você deve incluir alguma mensagem para que ele funcione corretamente.


No campo Link, sendo um recurso opcional, você pode incluir um link que direcionar o visitante para alguma página da loja (para um promoção ou até mesmo uma página importante que será útil para conclusão da compra).

Delete

Mais opções

Você pode fazer algumas alterações para personalizar ainda mais o seu cabeçalho, habilitando ou desabilitando as seguintes opções:

  • Cabeçalho sempre visível ao navegar pela loja;
  • Aba de menu visível em celulares;
  • Barra de pesquisa sempre visível no celular

Delete
Delete

Amazonas

No Layout Amazonas, você consegue configurar a cor de fundo, como mostrar no celular, barra de anúncio e mais algumas ferramentas de personalização do cabeçalho.

Cor de fundo do cabeçalho

Esse opção seleciona as cores do cabeçalho de acordo com a configuração de cores de sua loja.

No exemplo abaixo, configuramos as cores do Layout da seguinte forma:

  • Cor principal de sua marca: Amarelo
  • Cor de fundo: Branco
  • Cor de textos: Preto


Quando vamos em "Cabeçalho > Cor de fundo do cabeçalho", podemos alterar as cores de fundo do cabeçalho considerando as três opções: Cor principal de sua marca, Cor de fundo e Cor de textos:


Por padrão, a cor de fundo do cabeçalho permanecerá da mesma cor principal de sua marca da loja. Você pode mudar para a opção cor de textos ou cor de fundo.

Delete

Info

Para saber como alterar as cores de sua loja, consulte o nosso tutorial 📝 Como alterar as cores do meu layout?.

Delete

Mostrar no celular

Nesta opção, você pode configurar como ficará o cabeçalho acessando por um celular. Nela é possível celular Barra de pesquisa grande ou Categorias principais.

Delete

Barra de anúncio

No Layout Amazonas, é possível ativar e desativar a Barra de Anúncio. 



Depois de ativar a Barra de anúncio, você deve incluir uma mensagem para o seu anúncio (pode ser promoção, um produto novo, uma página importante, etc. Lembrando que esse campo é obrigatório.



E por último, o campo Link é um recurso recurso opcional, você pode adicionar um link para direcionar o visitante para alguma página da loja (para um promoção ou até mesmo uma página importante que será útil para conclusão da compra).

Delete

Mais opções

Você pode fazer algumas alterações para personalizar ainda mais o seu cabeçalho, habilitando ou desabilitando as seguintes opções:

  • Cabeçalho sempre visível ao navegar pela loja.

Delete
Delete

Cubo

No cabeçalho do Layout Cubo, é possível configurar a cor de fundo, aba de menu para celular e barra de anúncio.

Cor de fundo do cabeçalho

Esse opção seleciona as cores do cabeçalho de acordo com a configuração de cores de sua loja.

No exemplo abaixo, configuramos as cores do Layout da seguinte forma:

  • Cor primário: Preto
  • Cor secundário: Branco
  • Cor em destaque: Amarelo


Quando vamos em "Cabeçalho > Cor de fundo do cabeçalho", podemos alterar as cores de fundo do cabeçalho considerando as três opções: Cor primário, Cor secundário e Cor em destaque:



Por padrão, a cor de fundo do cabeçalho permanecerá da mesma cor primário da loja.

Delete

Info

Para saber como alterar as cores de sua loja, consulte o nosso tutorial 📝 Como alterar as cores do meu layout?.

Delete

Aba de menu

Na opção Aba de Menu, você pode habilitar e desabilitar o Menu para quem acessar a sua loja pelo celular. Para isso é só marcar ou desmarcar a opção "Mostrar em celulares".

Delete

Barra de anúncio

No Layout Cubo, é possível  ativar e desativar a Barra de Anúncio. 


Ao  ativar a Barra de anúncio, adicione  uma mensagem ou texto com a chamada do anúncio (pode ser promoção, uma página importante ou alguma novidade de sua loja). Lembrando que o preenchimento desse campo é obrigatório.

E por último, sendo um recurso opcional, o campo Link permite que você inclua um link que irá direcionar o visitante para alguma página da loja (página com as regras da promoção, produtos, etc).

Delete
Delete

Bahia

Para o cabeçalho do Layout Bahia, você consegue configurar a cor de fundo, navegação do menu, barra de anúncio e mais ferramentas que permitiram a personalização do seu cabeçalho.
 

Cor de fundo do cabeçalho

Esse opção seleciona as cores do cabeçalho de acordo com a configuração de cores de sua loja.

No exemplo abaixo, configuramos as cores do Layout da seguinte forma:

  • Cor principal de sua marca: Amarelo
  • Cor de fundo: Branco
  • Cor de textos: Preto


Após configurar os cores, vá em em "Cabeçalho > Cor de fundo do cabeçalho", nessa parte você pode alterar as cores de fundo do cabeçalho considerando as três opções disponíveis : Cor principal de sua marca, Cor de fundo e Cor de textos:


Por padrão, a cor de fundo do cabeçalho permanecerá da mesma cor principal de sua marca da loja. Você pode mudar para a opção cor de textos ou cor de fundo.

Delete

Info

Para saber como alterar as cores de sua loja, consulte o nosso tutorial 📝 Como alterar as cores do meu layout?.

Delete

Navegação

Na seção navegação, é possível configurar a posição do Menu à direita do buscador ou abaixo do logotipo.
|


Além disso, você pode destacar o menu de categorias habilitado ou desabilitando a opção "Destacar as categorias no menu".

Delete

Barra de anúncio

No Layout Bahia, é possível ativar e desativar a Barra de Anúncio. 


Com a Barra de anúncio ativada, adicione um texto ou alguma mensagem para anunciar uma promoção, um novo produto, etc. Lembrando que para ativar corretamente, esse campo deve ser preenchido..


E se quiser, pode adicionar um link no campo Link Opcional para direcionar os visitantes para alguma página da loja (para um promoção ou até mesmo uma página importante que será útil para conclusão da compra).

Delete

Mais opções

Você também pode fazer algumas alterações para personalizar ainda mais o seu cabeçalho, habilitando ou desabilitando as seguintes opções:

  • Cabeçalho sempre visível ao navegar pela loja.

Delete
Delete

Material

No Layout Material, é possível configurar largura da coluna, barra de anúncio e outras opções de ferramentas para personalizar ainda mais o cabeçalho.

Largura da coluna

Por padrão, a largura da coluna sempre será Média. Você pode optar por mais 1 largura de coluna:  Completa.


Na largura Média, os elementos da página ocupam uma maior porcentagem da tela. Selecionando a largura Completa, os elementos da página ocuparão a mesma porcentagem da largura Média, mas o cabeçalho ocupará toda a extensão da tela.

Delete

Barra de anúncio

No Layout Bahia, é possível ativar e desativar a Barra de Anúncio.
 


Feito a ativação da Barra de anúncio, você deve adicionar uma mensagem para o anúncio de sua loja (pode ser promoção ou até mesmo um produto novo). Lembrando que esse campo é obrigatório.


E por último, sendo um recurso opcional, no campo Link, você pode incluir um link para direcionar os visitantes para alguma página da loja (para um promoção ou até mesmo uma página importante que será útil para conclusão da compra).

Delete

Mais opções

Você também pode fazer algumas alterações para personalizar ainda mais o seu cabeçalho, habilitando ou desabilitando as seguintes opções:

  • Cabeçalho sempre visível ao navegar pela loja.
  • Aba de menu visível em celulares

Delete
Delete

Silent

No Layout Silent, é possível apenas ativar e desativar a Barra de Anúncio. 

Após ativar a Barra de anúncio, adicione uma mensagem ou texto com uma chamada para o seu anúncio (pode ser promoção ou até mesmo um produto novo). Lembrando que esse campo é obrigatório.


E por último, sendo um recurso opcional, você pode incluir um link que direcionar os visitantes para alguma página importante, podendo ser um anúncio de promoção ou regras de compra, por exemplo. 

Delete

Lifestyle

No Layout Lifestyle, é possível configurar a largura da coluna, menu principal (menu reduzido), barra de anúncio e outras ferramentas para personalizar o cabeçalho da loja.

Largura da coluna

Por padrão, a largura da coluna sempre será Média. Você pode optar por mais 1 largura de coluna:  Completa.


Na largura Média, os elementos da página ocupam uma maior porcentagem da tela. Selecionando a largura Completa, os elementos da página ocuparão a mesma porcentagem da largura Média, mas o cabeçalho ocupará toda a extensão da tela.

Delete

Menu principal

Na seção Menu principal do Layout Lifestyle, você pode habilitar ou desabilitar o Menu reduzido para os visitantes que rolarem a página que estão para baixo. Para ativar essa opção, é só marcar ou desmarcar a opção "Mostrar um menu reduzido quando seus clientes moverem o site para baixo".


Delete

Success

Só será possível ativar o Menu reduzido se a sua loja possuir um Menu configurado. Consulte a nossa seção 👉 Barra de Navegação. para saber como configurar o seu Menu de navegação.


Também é possível adicionar um logo para quando o Menu reduzido estiver habilitado, basta clicar no botão Logo para mostrar no menu reduzido e carregar a imagem.


Delete

Info

Para saber como editar o tamanho de um imagem, consulte o nosso tutorial  📝  Como editar o tamanho da imagem para carregá-la como um banner?.

Delete

Barra de anúncio

No Layout Lifestyle, é possível ativar e desativar a Barra de Anúncio. 


Com a Barra de anúncio ativada, adicione uma mensagem  para algum anúncio de sua loja, podendo ser para uma promoção ou até mesmo um produto novo. Lembrando que esse campo é obrigatório.


No campo Link, por ser opcional, você pode incluir um link que direcionar o visitante para alguma página da loja que considere importante para o anúncio.

Delete

Mais opções

Você também pode fazer algumas alterações para personalizar ainda mais o seu cabeçalho, habilitando ou desabilitando as seguintes opções:

  • Cabeçalho sempre visível ao navegar pela loja.
  • Barra de pesquisa ao lado do logo em computadores

Delete
Delete

Trend

No Layout Trend, você pode configurar a barra de anúncio, menu principal (menu reduzido) e uma imagem de fundo para o site

Barra de anúncio

No Layout Trend, é possível  ativar e desativar a Barra de Anúncio. 


Após ativar a Barra de anúncio, adicione uma chamada para o seu anúncio com uma mensagem ( pode ser promoção ou até mesmo um produto novo). Lembrando que esse campo é obrigatório.


E por último, sendo um recurso opcional, você pode incluir um link que direcionar os visitantes para alguma página da loja (para um promoção ou até mesmo uma página importante que será útil para conclusão da compra).

Delete

Menu principal

Na seção Menu principal do Layout Trend, você pode habilitar ou desabilitar o Menu reduzido para os visitantes que rolarem a página que estão para baixo. Para ativar essa opção, é só marcar ou desmarcar a opção "Mostrar um menu reduzido quando seus clientes moverem o site para baixo".


Delete

Success

Só será possível ativar o Menu reduzido se a sua loja possuir um Menu configurado. Consulte a nossa seção 👉 Barra de Navegação. para saber como configurar o seu Menu de navegação.


Também é possível adicionar um logo para quando o Menu reduzido estiver habilitado, basta clicar no botão "Logo para mostrar no menu reduzido e carregar a imagem".


Delete

Info

Para saber como editar o tamanho de um imagem, consulte o nosso tutorial  📝  Como editar o tamanho da imagem para carregá-la como um banner?.

Delete

Imagem de fundo

No Layout Trend, você pode adicionar uma imagem de fundo padrão ou carregar uma imagem totalmente personalizada.

Para a imagem personalizada, basta clicar no botão "Subir imagem para usar de fundo".


Delete

Info

Para saber como editar o tamanho de um imagem, consulte o nosso tutorial  📝  Como editar o tamanho da imagem para carregá-la como um banner?.

Após subir a imagem, é possível configurar se deseja que a imagem de fundo seja repetida e o seu posicionamento (Centralizado, esquerda e direita),



Agora se você não possui uma imagem, pode selecionar uns dos temas padrão para o plano de fundo do seu site, basta selecionar uns dos 6 temas disponíveis.

Delete
Delete

Focus

No Layout Focus, é possível configurar o menu principal (menu reduzido) e a barra de anúncio.

Menu principal

Na seção Menu principal do Layout Focus, você pode habilitar ou desabilitar o Menu reduzido para os visitantes que rolarem a página que estão para baixo. Para ativar essa opção, é só marcar ou desmarcar a opção "Mostrar um menu reduzido quando seus clientes moverem o site para baixo".


Delete

Success

Só será possível ativar o Menu reduzido se a sua loja possuir um Menu configurado. Consulte a nossa seção 👉 Barra de Navegação. para saber como configurar o seu Menu de navegação.


Também é possível adicionar um logo para quando o Menu reduzido estiver habilitado, basta clicar no botão "Logo para mostrar no menu reduzido e carregar a imagem".


Delete

Info

Para saber como editar o tamanho de um imagem, consulte o nosso tutorial  📝  Como editar o tamanho da imagem para carregá-la como um banner?.

Delete

Barra de anúncio

No Layout Focus, é possível  ativar e desativar a Barra de Anúncio. 


Após ativar a Barra de anúncio, adicione uma texto para o anúncio (pode ser promoção ou até mesmo um produto novo). Lembrando que esse campo é obrigatório.


E por último, sendo um recurso opcional, você pode incluir um link que direcionar os visitantes para alguma página da loja que seja relevante para o anúncio.

Delete
Delete


5. Assim que tiver concluído a personalização do seu cabeçalho, defina se você quer salvar suas alterações no rascunho do seu layout, ou publicá-las em sua loja:


1622238619430-configurar lista produtos4.png


Para salvar essa alteração em um rascunho, clique em "Salvar rascunho". Para publicá-la imediatamente em sua loja, clique em "Publicar".

Importante:

ao clicar em "Publicar", todas as alterações salvas no seu rascunho serão publicadas na sua loja e não somente a mudança que você fez no momento.


Pronto, agora você já conhece todas as configurações possível do cabeçalho! Agora é só experimentar as combinações e encontrar aquela que mais se identifica com sua marca!

O artigo ajudou você?