como criar uma imagem clicável com html

Como criar uma imagem clicável

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br


Atualizado 6 de abril de 2020

Deseja que sua imagem seja clicável; portanto, quando alguém clica nela, ela é direcionada para uma página da web especificada? Neste guia para iniciantes, mostrarei como criar HTML para colar em qualquer lugar onde o HTML for aceito. Também explicarei como tornar uma imagem clicável no WordPress especificamente e responderei a algumas perguntas frequentes.

como criar uma imagem clicável com html

Divulgação: Este post contém links de afiliados. Se você clicar e efetuar uma compra, receberei uma comissão, sem nenhum custo adicional para você. Leia minha divulgação completa aqui.

Observe que, se você deseja tornar uma imagem clicável no Facebook, Twitter, Instagram ou outras mídias sociais, esse não é o método a ser usado. Leia as perguntas frequentes no final da postagem para obter mais informações.

Um exemplo de como funciona

Para este tutorial, usaremos a imagem abaixo. Se você clicar nele, será direcionado para a página principal do Projeto 24, minha melhor opção para iniciantes que desejam gerar renda passiva com blogs ou no YouTube. Sou um cliente pagador.

projeto 24 logo

Digamos que eu queira tornar o logotipo acima clicável, como fiz na minha página Ferramentas que eu uso e recomendo.

Pronto?

7 etapas para criar uma imagem clicável com HTML

  1. Escolha uma imagem para tornar clicável
  2. Otimize a imagem
  3. Carregar a imagem para a web
  4. Obter o URL da imagem
  5. Obter o URL da página de destino
  6. Crie o HTML
  7. Use o HTML onde deseja que apareça

1. Escolha uma imagem para tornar clicável

Use sua própria imagem ou compre uma imagem. Tenha muito cuidado ao usar imagens gratuitas.

Eu compro minhas imagens da Depositphotos. (Inscreva-se na minha lista de ofertas em Flash se quiser ser notificado quando eles tiverem 50% de desconto uma ou duas vezes por ano.)

Se você não usar sua própria imagem ou a que comprou em um site respeitável de imagens, verifique se você tem permissão para usá-la e não está violando os direitos autorais de ninguém.

Como sei se estou violando os direitos autorais de alguém?

Leia o meu post Dicas para usar imagens em seu site.

Posso usar o logotipo de outra pessoa?

Tenha muito cuidado ao fazê-lo. Estou fazendo isso aqui porque sou afiliado ao Projeto 24 e uso o logotipo para promovê-lo.

Muitas empresas ficam felizes se você usar o logotipo delas, desde que siga as diretrizes da marca. Encontre as diretrizes de uma marca pesquisando no site ou entrando em contato diretamente.

2. Otimize a imagem

Muitas imagens, incluindo aquelas diretamente da câmera, são muito grandes no tamanho do arquivo – muito grandes para o uso normal na Web. Usar um tamanho de arquivo muito grande pode tornar o site lento.

Leia Também  Calendamente: Como agendar compromissos e reuniões com clientes on-line?

Otimize sua imagem redimensionando e compactando-a antes enviá-lo para a web.

Primeiro, redimensionar a imagem para que a largura e o comprimento reais (geralmente medidos em pixels) sejam do tamanho que você precisar. Uma boa regra geral é usar a largura do contêiner em que a imagem estará no seu site. Por exemplo, se você está lendo esta postagem em uma área de trabalho, o contêiner em que este texto possui cerca de 800 pixels de largura. Use uma ferramenta como PicResize.

Segundo, comprimir a imagem. Isso reduz o tamanho do arquivo sem sacrificar a qualidade na web. Use uma ferramenta como TinyPNG (minha preferência) ou Squoosh para compactar sua imagem.

Para mais detalhes, leia Dicas para usar imagens em seu site.

3. Carregue a imagem na web

Para poder ser visualizada na internet, sua imagem deve estar “hospedada” em algum lugar online. Sua imagem tem que viver na internet. Caso contrário, ele não aparecerá e estará acessível aos usuários da Internet, como se estivesse simplesmente salvo no seu computador pessoal.

Então, onde você pode hospedar sua imagem?

Se você tem um blog ou site, hospede-o lá. O processo para enviar sua imagem para o seu próprio site dependerá do tipo de site que você possui. No WordPress, por exemplo, vá para Painel> Mídia> Adicionar novo.

adicionar nova tela de mídia no painel do WordPress

Você não tem um blog ou site? Sem problemas. Use um serviço como o Google Drive. Depois de se inscrever para uma conta gratuita, faça o upload da sua imagem e ela será hospedada! Veja como fazer upload de um arquivo no Drive.

4. Obtenha o URL da imagem

O URL da imagem é o endereço da web exclusivo da sua imagem. Assim como seu endereço residencial pessoal informa as pessoas onde você mora, o URL da imagem informa a Internet onde sua imagem está localizada.

Qualquer imagem hospedada online tem seu próprio URL. Precisamos disso para criar nosso HTML.

Como você encontra o URL da sua imagem?

Se você possui seu próprio blog ou site, o local para encontrar o URL da sua imagem varia de acordo com a plataforma usada.

No WordPress, por exemplo, vá para Painel> Mídia> Biblioteca. Encontre sua imagem e clique nela. Na janela Detalhes do anexo, realce e copie todo o trecho de código no campo Copiar link (certifique-se de obter tudo!).

Detalhes do anexo de mídia do WordPress link da URL da imagem

Sugiro que você abra um documento em branco em algum lugar do seu computador (um documento do Google Doc, Word, um editor de texto etc.). Cole o URL da sua imagem lá. Vamos usá-lo em um minuto.

5. Obtenha o URL da página de destino

O URL da página de destino é simplesmente a página que você deseja acessar quando clicar na sua imagem. É o destino.

No meu exemplo, quando alguém clica no logotipo do Project 24, quero que eles sejam levados para esta página de destino.

projeto 24 logo

Você já deve saber o URL da página de destino para a qual deseja que as pessoas acessem. Se você não tiver certeza do que é, abra uma nova guia ou janela no seu navegador da web (Chrome, Safari, Firefox etc.) e navegue até a página da web em que deseja que as pessoas acessem. Destaque e copie o endereço da web na barra de endereços do seu navegador.

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br

Cole o URL de destino no documento que você criou na Etapa 4.

6. Crie o HTML

Agora é hora de criar o HTML. Existem duas maneiras de fazer isso: (1) escreva o código do zero ou (2) use uma ferramenta para gerar o código para você. Vamos analisar os dois.

Este é o snippet HTML muito básico que você usará:


texto que descreve a imagem

Cada

Substitua “LandingPageURL” e “ImageURL” pelos das etapas 4 e 5 acima. Mantenha as aspas embora! Basta colar no inteira URLs (incluindo https) entre eles.

Adicione texto alternativo também. Você perceberá um espaço para inserir texto alternativo no snippet HTML. O texto alternativo melhora a acessibilidade para quem não pode ver imagens na web. O texto alternativo deve descrever o que está na imagem. Saiba mais sobre o texto alternativo aqui.

Assim, em nosso exemplo, meu HTML ficaria assim:


Projeto 24 logo

Observe que o URL da imagem era super longo e, portanto, agrupado na próxima linha. Não se preocupe, você está apenas procurando o que está entre as aspas.

Existe uma ferramenta que eu possa usar?

Sim, existem muitas ferramentas geradoras de HTML. Um é o editor de HTML5.

Você verá uma caixa de rich text (com todos os ícones na parte superior) e uma caixa de código. Se as caixas estiverem pré-preenchidas, clique dentro de uma delas e selecione tudo. Excluir. Isso deve esvaziar as caixas.

Na caixa de rich text, clique no ícone Inserir / editar imagem:

Ícone da imagem da caixa de rich text do limpador de HTML

Na caixa pop-up, cole o imagem URL no campo Origem da caixa pop-up. Também é uma boa ideia descrever o campo Descrição da imagem. Este é o seu texto alternativo. Clique OK.

Sua imagem aparecerá na caixa de rich text. HTML aparecerá na caixa de código.

A imagem aparecerá em azul porque está destacada. Apenas deixe em destaque. Agora clique no ícone do link imediatamente à esquerda do ícone da imagem:

Editor de rich text do ícone do link HTML5

Você receberá uma caixa pop-up. Cole o página de destino URL no campo URL. Você também tem a opção de definir o link para abrir uma nova janela escolhendo Destino> Nova janela.

Leia Também  Faça mais dinheiro online com um CRM completamente grátis

Clique OK.

7. Use o HTML onde deseja que ele apareça

É isso aí! Você está pronto para usar o HTML. Cole-o na barra lateral ou no rodapé ou onde quer que o HTML seja aceito.

Deve ser algo como isto:



Perguntas frequentes
Posso anexar meu link de afiliado à imagem?

Sim. Basta usar o link de afiliado para o URL da página de destino. No entanto, se fizer isso, adicione uma divulgação antes da imagem e adicione a tag nofollow.

Você pode também estar interessado em Marketing de afiliados: O guia final (gratuito).

Como faço para criar uma imagem clicável no WordPress?

No WordPress, vá para Adicionar bloco> Imagem em uma postagem ou janela da página. Verifique se as configurações do bloco estão visíveis à direita. Se não estiverem, destaque a imagem clicando nela, clique nos três pontos (Mais opções)> Mostrar configurações de bloco. Role para baixo até Configurações de link> Link para: URL personalizado. Adicione o URL da página de destino para a qual você deseja que as pessoas sejam levadas.

Não consegue ver o vídeo? Assista aqui.
Isso funcionará no Facebook, Twitter, Instagram ou outras plataformas de mídia social?

Não. Em geral, as plataformas de mídia social não aceitam HTML, portanto isso não funcionará. O método acima é melhor para blogs (rodapés, barras laterais, etc.), sites, etc.

Nas mídias sociais, primeiro tente colar o URL da página de destino diretamente em sua postagem ou tweet. Isso geralmente exibe automaticamente a imagem em destaque na página de destino.

Se isso não funcionar como você gostaria, aqui estão algumas sugestões:

No Facebook, se você estiver tentando exibir uma imagem grande, altere a imagem em destaque na sua página de destino. Depois disso, execute o URL da página de destino através da ferramenta Sharing Debugger do Facebook e tente postar o URL da página de destino diretamente em sua postagem no Facebook novamente.

No Twitter, use os Cartões do Twitter. Para usá-los, primeiro você deve se inscrever em uma conta do Twitter Ads e inserir um número de cartão de crédito (embora você não seja cobrado a menos que opte por exibir anúncios). Depois de ter uma conta no Twitter Ads, vá para Criativos> Cartões> Criar cartão> Cartão do site. Carregue sua imagem e crie seu tweet. Publique imediatamente ou agende para o futuro. Dica: Verifique se a caixa de seleção “Somente promovido” está desmarcada. Caso contrário, ele não será publicado (a menos que você pague).

No Instagram, a falta de coisas clicáveis ​​é frustrante. A melhor ferramenta que encontrei para tornar as imagens (mais ou menos) clicáveis ​​é o Smart.bio da Tailwind.

Você pode gostar também:

Como iniciar um negócio on-line: uma lista de verificação econômica
Dicas para usar imagens no seu site

O post Como criar uma imagem clicável apareceu primeiro em Amy Lynn Andrews.

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br