O que você precisa para iniciar?
- Uma loja na plataforma Loja Integrada;
- Um banner tarja;
- Os links das páginas extras, que nós vamos supor que você já criou;
- E/ou links externos .
Primeiramente, você deverá acessar o site https://www.image-map.net/ para poder criar o mapa da sua imagem. Clique em SELECT IMAGE FROM MY PC para selecionar a imagem que você tiver em seu computador.
A sequência a ser executada é bem fácil:
- Você marca como ativa a parte que quer gerar um link (em ACTIVE);
- Escolhe o formato de seleção que irá fazer, podendo ser RECT (retângulo), POLY (polígono) ou CIRCLE (círculo);
- Insere o link respectivo àquele pedaço do banner tarja;
- Coloca um title (Isso pode colaborar com a usabilidade e SEO do seu site);
- Seleciona um target, podendo ser _BLANK, _PARENT, _TOP, _SELF. (Dica: use _SELF para páginas internas e _BLANK para links externos)
Esse processo você irá fazer apenas para inserir um link na imagem, quando quiser fazer outra, deverá clicar em ADD NEW AREA e assim, repetir os passos a cada novo link que queira inserir.
Depois que finalizar, chegou a hora de gerar o código. Clique em SHOW ME THE CODE e irá abrir uma janelinha (a chamamos de modal), e ali teremos o código a ser copiado.
É bom que você se atenha a esse detalhe: Apenas o que está dentro da tag MAP será copiado, ou seja:
<map name="image-map"> SÓ QUE ESTÁ AQUI SERÁ COPIADO </map>
Clica em CRIAR NOVO BANNER na seção BANNER TARJA.
Ali você irá:
- Ativar ou inativar o banner;
- Dar um nome para o banner;
- Escolher em quais páginas você quer que ele apareça;
- Link do banner (você irá deixar em branco);
- Quando clicar no link (deixe como está);
- Título do banner (pode deixar em branco também);
- Faça upload da imagem, lembrando que ela deve ser menor que 500kb (recomendo ainda que seja .JPG e tenha menos de 70kb);
- Clique em INSERIR MAPA DA IMAGEM, cole o código nesse campo;
- Finalize clicando em CRIAR BANNER.
Pronto! Seu banner tarja está cadastrado.
Comentários
Olá Eduardo, tudo bem? Já assisti vários vídeos da Social Up e tem me ajudado muito. Inseri o botão flutuante do whatsapp e deu tudo certo, funcionou perfeitamente. Também gostei muito desse conteúdo a respeito do banner tarja, entendi todo o procedimento, no entanto, poderia me indicar algum banco de imagem que eu possa baixar tais como "Frete Grátis", "Ambiente 100% Seguro", entre outros? Assim como indicou o uso do Iconfinder, achei demais poder utilizar vários ícones sem custo. Aguardo seu retorno se possível. Um abraço
Fico feliz com seu comentário em nosso blog. Vou te indicar aqui um banco de bancos: https://uigoodies.com/ Esse site te traz uma listagem de sites de ícones, uma listagem de sites de fotografias gratuitas e assim por diante. Espero que possa lhe ajudar.
Olá Eduardo. Venho te agradecer por todo conteúdo, dedicação e disponibilidade que você tem para nos ensinar. Seu blog tem me ajudado muito nesse início do meu e-commerce. Início cheio de incertezas e insegurança sobre o negócio propriamente dito, sobre toda estruturação e layout, porém, seu blog serve de incentivo para pessoas como eu, que utiliza o "faça você mesmo", seja por limitações em investimentos ou demais motivos. Obrigado!!!
Muito bom o conteúdo.... Se tiver um curso voltado para essas edições eu quero.