19 maio 2021

Como adicionar links hiper e âncora em emails com Stripo

Crie emails úteis rapidamente
Índice
  1. Tipos de links em emails
  2. Como adicionar um link no email com Stripo
  3. Considerações finais
1.
Tipos de links em emails

O poder dos links em emails não deve ser superestimado.

Eles navegam por destinatários em um email, se for longo, levam os destinatários de nossos emails para as páginas necessárias em nosso site, incluindo a página de checkout, para os vídeos necessários no Youtube, etc.

Tudo isso torna os links bastante úteis para nossos destinatários, o que resulta em um impacto positivo na CTR.

Os links também nos permitem rastrear as atividades dos destinatários em um email e medir a eficácia de uma campanha de email específica.

Nesta postagem, vamos pesquisar tipos de links e mostrar as maneiras de adicioná-los a emails.

Tipos de links em emails

Há alguns tipos principais:

Hiperlinks para recursos visuais e botões em emails

Um hiperlink em emails, também conhecido como link, leva-nos de um email a um site ou leva-nos entre as páginas de um site ou para determinadas imagens e outros arquivos de mídia.

De acordo com as estatísticas fornecidas pelo eSputnik, o ESP que usamos, um boletim informativo promocional contém em média 20 hiperlinks. Você acha que isso é demais? De jeito nenhum. Na verdade, todas as guias do menu, cada imagem, cada botão CTA usado em uma mensagem de email deve ter um link.

Vamos dar uma olhada no mapa de cliques da nossa newsletter do Dia dos Namorados, fornecido por nosso ESP:

HyperLinks em e-mails_Clique no mapa

(estatísticas reais, mas o conteúdo real do email foi substituído por uma criação)

26% dos assinantes clicaram no banner. O mesmo número de pessoas clicou no botão CTA .

Nota: um botão CTA nada mais é do que um belo hiperlink inserido em um email.

Mesmo assim, por que você adicionaria tantos hiperlinks em emails e por que os adicionaria a todas as imagens que está prestes a usar? Alguns clientes clicam em tudo o que veem e gostam no email. Por esse motivo, recomendamos adicionar o máximo possível de detalhes clicáveis ​​em seu email.

Hiperlinks para perfis de mídia social em emails

É importante permitir que os clientes sigam você nas redes sociais. Lá, nós compartilhamos notícias, atualizações, vendas futuras, etc. Eles geralmente procuram o botão CTA "Siga-nos nas redes sociais". Mas nem sempre.

Hiperlinks em e-mails_A opção Siga-nos nas redes sociais

Incentive os destinatários a visitar essas páginas de seus emails.

Hiperlinks em emails para compartilhamento social

Permitir que seus usuários compartilhem algumas partes de seus emails nas redes sociais ajuda sua marca a se tornar viral.

Deixe-os compartilhar histórias engraçadas, citações, elementos de design interessantes, sua pontuação se você incorporou um jogo em um email, ou deixe-os compartilhar o email inteiro.

Hiperlinks em e-mails_A opção de compartilhamento social

(Fonte: Email da Stripo)

Esse bloco geralmente vem depois de "Compartilhar no Facebook"CTA.

Os links Mailto em emails

Devemos permitir que os usuários entrem em contato conosco sempre que precisarem e do modo que acharem mais conveniente.

Se eles preferirem email, não há problema em fazê-los destacar seu endereço de email, copiá-lo e, em seguida, ir para a caixa de email e começar a escrever uma mensagem lá.

Adicione a opção "Envie-nos um email" com o link "mailto" no rodapé do seu email.

Links Mailto em Emails_Stripo

(Fonte: template Stripo)

Os usuários clicam neste link do email para iniciar uma nova mensagem destinada a você. Você pode até definir a linha de assunto.

Hiperlinks para cópia em emails

Precisamos adicionar a cópia no corpo do email: tanto para campanhas promocionais quanto para gatilhos. É fácil adicionar hiperlinks ao texto em um email. Não é necessário qualquer conhecimento de codificação, nenhuma habilidade de HTML, nada. Fácil fácil!

Para fazer links no texto que chamem a atenção, it should contain 3+ words, start it with the keywords and be de deve conter mais de 3 palavras, começar com as palavras-chave e ser descritivo.

Hiperlinks em e-mails_Links em textos

(Fonte: Email da Chris Cillizza, the Point, CNN)

Links âncora em emails

Links âncora em emails têm o objetivo de levar os leitores a parágrafos específicos do email. Usando links âncora em newsletters por email, você permite que os destinatários pulem algumas partes dos emails para ir diretamente para as necessárias, sem rolar e continuar. Quando seu email for longo o suficiente, certifique-se de inserir links âncora - e seus clientes irão gostar disso.

(Fonte: Email da Mercedes-Benz)

Como adicionar um link no email com Stripo

Então, onde adicionamos links aos emails? Tudo isso depende diretamente do objetivo do seu newsletter. Mas geralmente são adicionados a cada imagem, as guias do menu, nossas informações de contato, nossas contas de redes sociais, convites para pesquisas, vídeos e até mesmo aos mapas.

Adicionando links a botões CTA

Botões CTA não devem ser entediantes - torne-os coloridos e brilhantes. Eles podem ter a forma que você desejar. Você também pode aplicar o efeito de foco, também conhecido como animação CSS para seus botões com Stripo.

Hiperlink de e-mail em HTML E-mail_Botão CSS

Como adicionar um hiperlink para um botão de CTA em emails com Stripo:

  • puxe o bloco “Button” exatamente no local em que você precisa dele no email;
  • dê um nome a ele;
  • defina a cor do texto;
  • defina o tamanho e fonte do texto;
  • defina a cor do botão;
  • cole o link;
  • pronto!

Como adicionar um hiperlink em um e-mail com Stripo

You might also like

Adicionando um hiperlink ao seu vídeo

Em um dos artigos, mostramos como adicionar links para vídeos em emails com Stripo.

Stripo Como adicionar links de hiper e âncora em e-mails_Vídeo em e-mails

Para sua conveniência, em poucas palavras, vou duplicá-lo aqui.

Como adicionar um hiperlink ao seu vídeo em emails com Stripo:

  • arraste uma estrutura de 1 coluna para seu template de email;
  • arraste o bloco básico de vídeo nele;
  • clique duas vezes em seu modelo para ativar o painel de configuração;
  • no painel de configuração, cole seu link para o vídeo no Youtube ou Vimeo.

Hiperlinks em e-mails_Links para vídeos_Webinar

Importante notar:

Nosso editor irá recuperar e inserir automaticamente nos campos as seguintes informações nos respectivos campos:

  • imagem em miniatura;
  • texto alternativo;
  • a cor do botão “play”.

Seu vídeo de email está pronto para seguir!

Adicionando os links mailto ao bloco de informações de contato

Permita que seus clientes comecem a escrever emails para você com apenas um clique.

Hiperlinks em e-mails_Links Mailto

(Fonte: Email da Boden)

Como adicionar links mailto às informações de contato com a Stripo:

  • adicione uma nova estrutura ao seu email;
  • puxe o bloco “Texto” em cada contêiner;
  • digite seu texto. Eu digiteiContact us (Fale conosco);
  • realce-o e clique no ícone "Link" na barra de ferramentas;

Adicionando links Mailto em e-mails com Stripo

  • no painel de configurações, defina “mailto” como Tipo de Link;
  • insira um endereço de email específico;

Como adicionar um link mailto em e-mails

  • digite sua linha de assunto, se quiser que esses emails tenham uma.

Como adicionar um link mailto em e-mails_Configurando linha de assunto

Adicionar links a ícones de mídia social

Fica totalmente a seu critério onde localizar links para seus perfis de mídia social. No entanto, eles definitivamente devem estar nos emails. Algumas marcas os adicionam ao menu, porém a grande maioria das marcas coloca no rodapé.

Hiperlink em e-mails_Linsk para mídias sociais em rodapés de e-mail

(Fonte: Email da Pinpointe)

Como adicionar links para ícones de mídia social com Stripo:

Forma 1. Colando links
  • arraste o bloco “Social” do seu template;
  • clique duas vezes sobre ele para ativar o painel de configurações;
  • inserir links para as respectivas contas de mídia social;
  • clique em “Mais” para inserir o texto alternativo;

Hiperlinks em e-mails_Como adicionar links a perfis sociais com Stripo

  • altere o esquema de cores para os ícones de redes sociais, seu formatos e dimensões.

Links em e-mails_Criação de ícones de mídia social em e-mails com Stripo

Se você deseja adicionar os ícones que não estão na lista, encontre os detalhes de como fazê-lo em na no blog na postagem “Como adicionar ícones de redes sociais " .

Forma 2. Preenchendo o seu perfil para adicionar as suas redes sociais aos emails com um clique

Se você deseja adicionar perfis de redes sociais aos seus emails ainda mais rápido ao criar uma nova campanha de email, preencha seu perfil Stripo. Ao iniciar um novo email, basta arrastar o bloco "Social" para o seu template - o design e os links certos para suas páginas de mídia social serão definidos automaticamente.

Links em e-mails_Preenchendo perfil para adicionar links a contas de mídia social com um clique

Adicione perfis de mídia social aos seus emails com apenas um clique
Faça parte do Stripo
Forma 3. Arrastando o Módulo de Conteúdo para o seu email para adicionar todas as redes sociais aos emails com apenas um clique

Caso não queira preencher seu perfil no Stripo, basta salvar o módulo com informações de contato/rodapé do email em sua biblioteca de conteúdo pessoal. E sempre que você decidir fazer um novo modelo novamente - você só terá que puxar esse bloco para o seu modelo. E está feito.

Hiperlinks em e-mails_Perfis de mídia social em seus e-mails com 1 clique

Para obter informações mais detalhadas sobre Módulos de Conteúdo e maneiras de usá-los, consulte a postagem do blog que indicamos abaixo.

Você também pode se interessar

Módulos de conteúdo Stripo: O que são e por que você precisa deles?AMP Modules_Stripo_Personal Content Library .png

Adicionando os links de Compartilhamento Social

Este tipo de link permite compartilhar partes ou nossos emails completos.

Links em e-mails_Compartilhamento social

(Fonte: Email da CNN Reliable Sources)

Como adicionar links de compartilhamento social a emails com Stripo:

  • arraste o bloco Social para o seu template;
  • escolha os ícones das redes sociais desejadas;
  • desenhe-os;
  • defina  “Share” (Compartilhar) como o tipo de link;

Como adicionar links de compartilhamento social_Stripo

  • no campo de entrada “Preview” (Visualizar), cole o link para uma versão da web do template ou apenas para o elemento que você deseja que os usuários compartilhem.

Habilitando Compartilhamento Social em Emails_Stripo

Para o manual sobre como obter o link para o "Web version" (Versão Web) do seu email, consulte o blog na postagem indicada abaixo.

You might also like

Stripo Sending Test Emails Featured Image

Adicionando links às guias do menu

Os menus geralmente nos ajudam a levar os destinatários de emails para um site.

Portanto, você precisa inserir os respectivos links.

Stripo Adicionando Links em Emails Exemplos do Menu com Links por Gap

(Fonte: Email da Gap)

How to add a link to menu tabs with Stripo:

  • arraste uma estrutura/linha de 1 ou 2 colunas em nosso email;
  • arraste o bloco do Menu;
  • clique duas vezes sobre ele para ativar o painel de configurações para trabalho futuro com este elemento;
  • selecione o tipo de menu - links (o mais comum), ícones ou links e ícones;

Links em menus de e-mail_Stripo

  • faça o design das guias do menu;
  • dê um nome para cada guia do menu
  • cole um link para cada guia do menu.

Adicionando Links a Menus_Stripo

Lembre-se: No painel de configurações, as guias do menu são chamadas de “Itens”.

Adicionar links âncora em emails

Como dissemos antes, quando seus emails são muito longos, é melhor usar links âncora, pois eles nos ajudam os destinatários a navegar pelos mail e os leva diretamente para a seção em que estão mais interessados, sem a necessidade de rolar e continuar.

Exemplo de links âncora em e-mails_Gmail

Como adicionar links âncora em emails com Stripo

Forma 1. Ativando a opção "Adicionar link de âncora". Não requer nenhum trabalho com código
  • crie o menu/barra de navegação conforme mostramos acima;
  • dê a cada guia um nome claro;
  • escolha o elemento ao qual deseja vincular a guia do menu;
  • no painel de configurações, ative a opção “ Add an anchor link” (Adicionar um link de âncora) para este elemento específico;
  • dê um nome a ela;

Links de âncora em emails_Habilitando a opção

  • agora vá para a guia de menu necessária;
  • no painel de configurações, defina "Âncora" como um tipo de link e escolha o nome da âncora desejada;

Como criar links âncora em e-mails com Stripo

  • pronto!.
Adicione links âncora em e-mails rapidamente
Junte-se à Stripo
Forma 2. Trabalhando com o código de email
  • monte a barra de menu de navegação em um cabeçalho de email;

Como criar um link no e-mail_Criando menu para links âncora

  • insira o bloco HTML em seu email exatamente acima da seção para onde deseja levar seus destinatários assim que eles clicarem na respectiva guia do menu;

Stripo Adicionando Links de Âncora_Arrastando Bloco HTML

  • clique duas vezes neste bloco em seu email para abrir o editor de código HTML;

Stripo Adicionando Links de Âncora no Editor de Código de Emails

  • no editor de código, substitua a linha existente por este elemento de código:
<a name="yourlabel"></a>

Onde “yourlabel” representa o nome do parágrafo ao qual você vai conectar o link de âncora. No meu exemplo, é “music”. Na verdade, você pode chamá-lo do que quiser, mas não insira nenhum “espaço” ou qualquer caractere de trabalho dentro dele - apenas uma única palavra entre aspas;

Construindo Links de Âncora_Adicionando bloco HTML

  • agora, para vincular este parágrafo à respectiva guia de menu, precisamos clicar duas vezes no respectivo item de menu no cabeçalho do email;
  • assim que o menu ficar realçado/ativo (como mostramos abaixo), abra o editor de código clicando no botão “Code editor” (editor de código) (fazemos desta forma para trabalhar diretamente com esta parte específica do email):

Stripo Adicionando Links de Âncora no Editor de Código de Abertura de E-mails

  • no editor de código, após a tag “href =” onde normalmente adicionamos hiperlinks, você deve inserir este elemento “#yourlabel”. O elemento de código que inseri após a tag “href =” tinha esta aparência “#music”

Stripo trabalhando com editor de e-mail HTML para inserir links Andhor

  • você precisa fazer o mesmo com todas as guias do menu para ancorá-las com os respectivos elementos de email.

É necessário incluir a hashtag “#“ após a tag “href =”, corrija o “rótulo” que você usou para sua âncora. Todas as outras tags, tais como o fechamento </a>, serão adicionadas por conta própria pelo Stripo.

Forma 3. Trabalhando com o código de email, versão 2

Quando seu email está terminado, você deve:

  • encontre o local para o qual você precisa direcionar os usuários quando eles clicarem sobre o link de âncora;
  • clique duas vezes neste elemento para ativá-lo;
  • abra o editor de código (como mostrado acima);
  • cole este exemplo de código <a name="yourlabel"> </a> no código do elemento desejado. "Yourlabel" representa o nome da seção desejada;

Adicionando Links de Âncora_Via 2

  • agora vá para a guia de menu que deve direcionar os usuários para a seção mencionada;
  • clique no modelo para ativar;
  • no painel de configurações, altere o tipo de link de "site" para "outro". Fazemos isso para evitar que qualquer ESP adicione o elemento "https: //" ao código de email;

Adicionando Links de Âncora_Alterando o Tipo de Link no Painel de Configurações

  • insira o nome da sessão precedida por uma hashtag. Em nosso caso, é #yourlabel ;

Adicionando tags a links âncora

  • pronto!

Importante observar:

Links de âncora não funcionam no editor. Para verificá-los, envie um email de teste ou abra o link "Visualizar no navegador" em uma nova guia.

Verificando Links de Âncora

Suporte para links âncora em emails:

Suporte para links de âncora

Importante:

Links de âncora não funcionam em emails AMP HTML porque o validador de código AMP não permite "#" e "nome" na tag <a>.

Considerações finais

Links são parte integrante de toda newsletter por email, pois navegam em nossos destinatários e nos ajudam a rastrear a atividade dos usuários. E mostramos como adicioná-los a vários elementos de email.

Mas saiba que você não pode testar os links enquanto trabalha com o editor. Você precisa enviar um email de teste para isso.

Que seus destinatários estejam sempre satisfeitos com as newsletters que você envia, que eles cliquem nos links que seus emails contêm. Nossos recursos técnicos exclusivos e templates de email estruturados de maneira ordenada facilitarão este processo para você.

Se você tiver qualquer dúvida ou preocupação, envie um email para contact@stripo.email ou deixe um comentário abaixo.

Crie emails úteis rapidamente com Stripo
Este artigo foi útil?
Tell us your thoughts
Obrigado pelo seu feedback!
4 comentários
Jonathan Gittos há 8 meses
Some spam filters flag up URLs longer than 120 characters. It would be useful to have a way of limiting or shortening their length. Is that possible without manual code editing?
Hanna Kuznietsova há 8 meses
Hello, Jonathan. Thank you for your question. We've integrated with Bit.ly to enable link shortening right in the editor. To activate this option, you need to connect your Bitl.ly account with your Stripo account just once. And then you will, with one click, shorten all your links inside the email. Please find the manual here. https://support.stripo.email/en/articles/6525868-shorten-the-link-length-integrating-with-the-bit-ly-account Best regards.
Michelle Del Rey há 9 meses
Is there a way to add an Outside Anchor Link to an Email?
Hanna Kuznietsova há 8 meses
Hello, Michelle. Thank you for your question. I am sorry for this delay. The way of adding anchor links described here works only inside the email. However, you can copy an anchor link on your website if your site supports this (e.g., https://tinyurl.com/29tu93o2) and just paste this link as a regular link in the email. Best regards.
Tipo
Indústria
Estações
Integração
Editor da Stripo
Simplifique o processo de produção de e-mail.
Plug-in da Stripo
Integre o editor arrastar e soltar da Stripo ao seu aplicativo da web.
Solicite um modelo personalizado
Nossa equipe pode criá-lo e programá-lo para você. Basta preencher o briefing, e entraremos em contato com você em breve.