Como cadastrar imagens para o componente Banner Principal - Widescreen?

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.