O componente de layout "Banner Principal - Widescreen", possui uma resolução necessária da imagem que está sendo cadastrada, porém, existem alguns truques para que ele fique correto de em todas as resoluções de computadores.
O componente Banner Principal - Widescreen
Apenas para ter certeza que estamos falando do componente correto, segue abaixo a imagem do componente que este tutorial abordará:
Esse componente ficará assim na página inicial da sua loja virtual (conforme destacado em vermelho):
Instruções para a criação das imagens para os banners
Todo o conteúdo importante (textos, chamadas para ação, etc.) deverá ficar nessa parte central (entre as linhas vermelhas na vertical), pois o restante do conteúdo nas laterais irá sendo cortado conforme a tela do visitante for diminuindo (tablet, celular, etc.)
Entendendo o comportamento do banner
Para facilitar o entendimento do banner, mostramos agora uma simulação em 3 telas diferentes: computador, tablet e celular. Perceba que as patinhas na lateral do banner vão sendo cortadas e vai ficando somente a parte do frete grátis com a imagem do cachorro com a ração.
Simulação em um computador:
Simulação em um tablet:
Perceba que parte das patinhas laterais agora já foi ocultada, mantendo um tamanho bom para a visualização da imagem e valorizando o conteúdo principal da imagem.
Simulação em um celular:
Em celulares praticamente é exibido somente o conteúdo principal da imagem e as demais informações laterais são ocultadas.
Não quer que o banner vá sendo cortado na largura?
Existem outros componentes de banner que exibem a imagem que efetivamente foi cadastrada sem ir cortando as laterais, o único ponto de atenção nesse caso, é que a imagem em tablets e celulares vai ficando mais estreita na altura, pois será exibido toda a imagem do banner mesmo em celulares.