Para quem precisa de um destaque maior em seu banner, como lojas de moda, lojas com uma pegada mais institucionais ou que venda um produto apenas este é um topo perfeito para que possa destacar e ainda ficar bem moderno, abaixo algumas dicas importantes para usar este topo, vamos lá!

Antes de começar vamos ver o topo padrão da loja com um banner aplicado:

E agora o novo topo  com o mesmo banner:

Note que automaticamente a cor do menu e os itens do topo ficaram branco, temos uma logo branca e novos ícones mais leves e modernos, além do tamanho já ter ficar grande na tela, dando mais destaque na imagem do banner.

E por dentro das páginas você pode controlar as cores sem afetar o banner principal

Então antes de poder usar o topo vamos preparar alguns arquivos:

1.Estilo e Cores
Bom neste exemplo amos usar um topo com cores mais escuras, logo o estilo da logo, menu, e ícones vão ser brancos. Caso tenha um banner mais claro use ouras cores, mais abaixo vou mostrar onde no painel poderá configurar as cores destes itens

2. Logo
Logo que já defini os estilo e tom de cor das fotos que vou usar no banner, então vou gerar uma logo com fundo transparente na cor branca. Use o editor que preferir, se não tiver pode remover o fundo da sua marca com este site www.remove.bg ou usar o www.canva.com para criar uma borda ou melhorar sua logo, o importante aqui é pensar que ela será aplicada em cima de uma foto, ou seja, prepare um arquivo bem.

Dica bônus: Tente usar uma imagem para logo mais vertical, assim terá menos espaço ocupado deixando mais espaço para o menu e demais itens

3. Banner
Aqui então vamos criar um banner bem grande, para que chame bastante a atenção, recomendo usar o tamanho de 1400x550px isso vai gerar uma boa imagem de fundo do seu banner, agora muito cuidado ao colocar imagens pesadas demais, isso vai comprometer o carregamento da loja, logo sugerimos que ao finalizar o corte da imagem diminua seu peso, o site www.iloveimg.com tem diversas ferramentas para comprimir e converter imagens, aqui você pode diminuir consideravelmente o peso da imagem sem perder qualidade. Falamos mais sobre este assunto neste artigo aqui.

Dica bônus: Experimente usar imagens no formato webp, este é um dos mais novos formatos para WEB com ele a imagem fica menor ainda mas com boa resolução e você ainda “ganha pontos” nos buscadores por usar imagens do tipo, faça isso para o topo e produtos 😉

Bom agora que temos a logo branca e banner feito e otimizado vamos ai painel da loja ativar e configurar o novo banner.

Ao acessar o painel da loja vá no menu de Customização > Personalizar e na aba de Modelos de Topo vamos escolher o topo 011.

Ao selecionar esse topo, vamos voltar em qualquer uma das abas de layout, por exemplo a home e clicar aqui em editar o topo, note que agora terá uma caixa mais escura com as configurações extras deste topo.

E é aqui que vamos colocar nossa logo branca e trocar as cores, no meu exemplo vou usar branco. Mas como disse lá em cima, você pode colocar a cor que deseja seguindo  o estilo de cor das imagens que colocar no banner.

Feito isso agora e só salvar, e na loja já teremos o banner full, mas ainda precisamos configurar o tamanho do banner e a(s) nova(s) imagem(s) do banner, então vamos no menu de Customização > Banners > Banner Avançado 

Por padrão ao salvar este banner, ele vai mudar o Modo de Exibição seu grupo de banners para “Tela Cheia” você pode voltar aqui e salvar  o modo que desejar, mas se voltar no painel de cores e trocar algo lá e salvar, e o topo 11 estiver selecionado ele sempre vai trocar aqui para Tela Cheia

Isso porque o intuito deste topo é valorizar as imagens do banner, sendo assim vamos mudar aqui a altura do banner para preencher ainda mais, no campo de Altura mude entre 500 a 600px ai vai de acordo com o corte das suas imagens

Salve e pronto, agora temos um topo com uma alta valorização das imagens, bem moderno e bonito.

Espero que tenha gostado, boas vendas e até mais!