fbpx

Neste tutorial vamos mostrar como alterar um banner. Banner é uma ou mais imagens em formato grande que são exibidas nas páginas, de forma a chamar atenção do usuário, como no exemplo abaixo. Ao adicionar mais de uma imagem, o MetaSlider já cuida de fazer a troca de tempos em tempos (imagens ficam alternando).

exemplo de banner

1- Em seu painel procure por MetaSlider , no menu esquerdo. Geralmente se encontra dentro da opção “Aparência“.

plugin MetaSlider

2- A tela abaixo mostra os banners já existentes e detalhes sobre eles. Na imagem abaixo veja que só tem um. No caso o slider principal localizado na página principal. Este plugin já se adapta automaticamente para exibir as imagens (passando de uma para outra) na página. Para adicionar uma nova imagem, basta clicar em “Adicionar Slide“.

adicionar slide com MetaSlider

3- Ao clicar em “adicionar slide“, exibirá uma caixa de carregamento de imagens, com as opções “enviar arquivo” e “Biblioteca de mídia“.
Biblioteca de mídia – exibe todas imagens que já foram utilizadas pela loja em algum momento.
Enviar arquivo – permite escolher um arquivo do computador e enviar para o banner.

tela de adicionar imagem ao banner

4- Se optar por “enviar arquivos“, aparecerá o botão “selecionar arquivos (clique nele e escolha a imagem).

tela de adicionar imagem ao banner

5- Ao selecionar uma imagem, no canto direito serão exibidos alguns detalhes da imagem. No exemplo abaixo foi utilizada uma imagem em formato retangular, com dimensões (1920 x 711) . Muito importante é ficar atendo as estas dimensões, se o banner da sua loja for retangular e ocupar largura total da página, o ideal é imagem com dimensões próximas a esta, para não haver queda de qualidade da exibição do banner.

imagem selecionada para o banner

Logo abaixo tem informações como (texto alternativo, título, legenda e descrição). No “texto alternativo“, você deve colocar uma frase curta, ou nome do banner que aparecerá na loja quando a conexão estiver ruim e não carregar a imagem, assim exibirá o texto ao invés da image. O texto alternativo também é essencial para que os mecanismos de busca (Google por exemplo) entendam o que aquele recurso visual representa. No exemplo dado, utilizamos “banner loja”, você pode colocar “banner…(nome da sua loja)”.
O campo “título“, se trata do título (nome) da imagem, escolha um nome de fácil identificação. Vamos deixar a legenda sem informação, ela aparece juntamente com a imagem. O campo “descrição” não tem tanta necessidade de editar, se optar por colocar, descreve de forma resumida do que se trata a imagem.

6- Clique em “add to slideshow” (adicionar para o slide).

detalhes da imagem selecionada

7- Veja que agora aparece a imagem que foi inserida, se precisar excluir, basta clicar no “x“, ao passar o mouse em cima da imagem.

slider principal no MetaSlider

No canto direito são exibidas as dimensões fixas do banner, independente do tamanho da imagem adicionada. Se adicionar uma imagem com dimensão 600 x 600 por exemplo, ela ficará desfocada e achatada, visualmente muito ruim. Se adicionar imagens com dimensões 1920 x 200 também ficará com qualidade ruim, não pode haver diferença grande de dimensão da imagem com a dimensão do banner.
Caso necessite alterar as dimensões do banner, basta clicar nos campos como mostrado na imagem abaixo

dimensões do banner com MetaSlider

Clique em “salvar“.
Se precisar criar outros banners, de reserva ou para outras páginas, clique em “new“.

salvar e adicionar banner no MetaSlider