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“.

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“.

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.
Biblioteca Unsplash – biblioteca da nova versão do WordPress, com imagens da Internet.

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

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 800) . 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.

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. No campo “URL” você pode adicionar a url que será redirecionada na imagem, quando o usuário clicar sobre ela. Pode ser por exemplo a url do produto que está na imagem do banner.

6- Clique em “adicionar à apresentação de slides” (adicionar para o slide).

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.

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

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