Personalização dos mini banners

Share on facebook
Share on google
Share on twitter
Share on linkedin

Alguns templates gratuitos da WeShop, como o Boutique ou Geek, possuem mini banners na página principal. Nesta lição, vamos aprender como modificá-los.

Acima temos um exemplo de mini banners na página principal, para alterar suas imagens vá em Layout >> Definir Página Principal >> Código Fonte, depois disso, vá descendo a página e procure um código parecido com este:

<div class=”col-sm-4″><a href=”# title=””><img alt=”” src=”https://cdn.iset.io/assets/54235/arquivos/imagens/bannerzinhos.png” /></a></div>

 

O atributo href, que está na cor laranja, refere-se ao link para qual esse banner irá se redirecionar caso cliquem nele. Para fazer esse redirecionamento, é necessário alterar a # pelo link que desejar.

O atributo src, refere-se ao link da imagem que o código irá buscar para exibir no banner, ou seja, é o link da imagem que você quer exibir em sua página principal. Para alterar a imagem do banner, altere o link em azul pelo link da imagem desejada.

O ideal para os banners é ter as suas imagens hospedadas no “Gerenciador de Arquivos”. Para isso, vá em Ferramentas >> Gerenciador de Arquivos.

Acesse a pasta que deseja colocar a imagem e clique no primeiro ícone na barra superior para fazer o upload da sua imagem.

Após isso, volte para o Gerenciador de Arquivos, clique com o botão direito do mouse sobre a imagem, clique em “Mostrar URL” e copie essa URL.

Essa URL, é a que você deverá colocar no código do banner, ao invés da URL padrão.

Em seguida, salve as alterações e aplique o cache, clicando na nuvem laranja, e com isso, a alteração do banner será feita.