Os layouts Idea, Bahia e Amazonas foram desenhados para proporcionar uma experiência incrível em dispositivos móveis; por isso, os banners rotativos destes layouts se adaptam para que suas imagens tenham uma ótima visualização também em celulares. 

Para garantir que os usuários tenham uma ótima experiência mobile ao navegar pela sua loja, é importante que você use as ferramentas disponibilizadas no Administrador Nuvem na hora de configurar o texto e os botões de seus banners. 

A seguir, te ensinaremos como preparar as imagens que irão compor seus banners e como efetuar todas as configurações diretamente do seu painel de administração.

1. Preparando as imagens do seu banner


De acordo com as recomendações que você encontra no próprio Painel de Administração da sua Nuvemshop, sugerimos que você utilize imagens que possuam  1440px de largura e  770px de altura, uma vez que essas dimensões são adequadas para dispositivos com telas maiores, como computadores e notebooks.  

No entanto, atualmente, grande parte do tráfego da sua loja - assim como a maioria das suas vendas - vêm de dispositivos móveis. Por isso, nossa recomendação é que você primeiro pense em uma imagem que possua uma ótima visualização em celulares, mas que também possa se adaptar a telas maiores - e não o contrário.

Abaixo, está um exemplo de um banner criado através dessa premissa: 

A seguir, compartilhamos algumas sugestões para garantir que seus banners tenham uma ótima visualiação em qualquer tamanho de tela: 

  • Não incluir nenhuma informação que precisa estar em destaque perto da borda de suas imagens, uma vez que isso pode prejudicar a visualização dessas informações.  
  • A melhor opção para adicionar textos ou um botão em seu banner, é configurá-los através do seu Administrador Nuvem - iremos explicar como concluir essas configurações na segunda parte desse tutorial.  
  • Caso queira inserir um título, texto ou botão em sua imagem sem utilizar as configurações do seu Painel de Administração, é importante que você os centralize na imagem escolhida, e que todos respeitem uma largura de 400xp. Assim, você garante que essa informação apareça por completo em dispositivos móveis. 

Abaixo, te mostramos um exemplo de como uma mesma imagem pode funcionar tanto para dispositivos móveis, como também para computadores e telas maiores. A área demarcada em azul indica a parte da imagem que será visualizada pelos usuários. 

Computadores e telas maiores:
 

Dispositivos móveis:


Como explicamos, centralizando o seu título, texto e botão e garantindo que esse conjunto de elementos possua uma largura de, no máximo, 400xp, nenhuma informação será cortada, proporcionando uma melhor experiência de navegação aos seus visitantes mobile.

2. Configurando o seu banner rotativo


A seguir, te ensinaremos como efetuar todas as configurações dos seus banners rotativos diretamente do seu Painel de Administração Nuvem.

Inserindo as imagens do banner

ada imagem que você incluir representará um dos seus banners. Você poderá adicionar quantos quiser, porém, recomendamos que não sejam adicionados mais do que cinco, para não deixar sua loja "poluída".

Para concluir essa etapa, basta seguir as etapas do tutorial genérico de banners rotativos: Como inserir banners rotativos na minha loja?

Adicionando título, texto e botão ao banner 

Este conteúdo irá aparecer, centralizado, sobre a imagem escolhida e será automaticamente ajustado para permanecer visível em qualquer dispositivo móvel. 

Utilizar um texto editável sobre as imagens de seus banners rotativos possui diversas vantagens:

  • O texto será automaticamente ajustado de acordo com o tamanho da tela do usuário
  • Não é preciso editar a imagem para montar o banner: você pode inseri-lo diretamente do Painel de Administração Nuvem
  • O conteúdo editável é detectado e indexado nos buscadores (ele é SEO friendly), diferentemente de quando o texto é parte da imagem
  • Você poderá editá-lo de forma fácil e rápida 

📌 Observação: Como mencionado no nome deste tutorial, estas possibilidades estão disponíveis somente para os layouts Idea, Bahia e Amazonas.

Agora, vamos aos passos! 

1. Para começar a editá-lo, clique no botão de edição  “🖉”, localizado em cima da imagem do seu banner.  

2. Você será direcionado para a tela abaixo, onde poderá fazer todas as alterações: 

  • Adicionar link: para levar os seus clientes à uma página específica quando clicam na imagem.
  • Inserir título: pode ser o nome da sua marca ou alguma palavra para informar o seus visitantes de promoções ou lançamentos. 
  • Inserir descrição: você pode passar mais detalhes sobre o que quer informar naquele banner, como as características do seu produto, a porcentagem de desconto, etc. 
  • Adicionar botão: um texto curto que convide os seus clientes à clicar no botão, como "Comprar" ou "Ver mais".
  • Cor do texto: você consegue escolher se a cor do texto do seu banner terá a mesma cor dos demais textos da sua loja ou se será igual a sua cor de fundo.

💡 Dica: Você consegue visualizar como a sua imagem ficará em um dispositivo móvel diretamente do seu Painel de Administração Nuvem, basta clicar no ícone de celular 📱 localizado na parte superior do menu. 


3.
Assim que terminar de preencher todas as informações, clique no botão "Salvar Alterações".

Pronto! Feito isso seu banner já será carregado no layout da sua loja virtual Nuvemshop. 

Encontrou sua resposta?