timer ~ 13 minutos de leitura
53781 visualizações
19 maio 2021

Como adicionar links hiper e âncora em emails com Stripo

Stripo / Blog / Como adicionar links hiper e âncora em emails com Stripo

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

14 min read

82281 views 4.3

Email Call to Action Best Practices Ler

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.

5 minutos de leitura

62233 visualizações 3

Módulos de conteúdo Stripo: O que são e por que você precisa deles? Ler

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.

7 min read

29316 views 3.7

Preview and Send Test Email in Stripo Ler

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

Você talvez se interesse por

anterior próximo
banner9
06 junho · 15 minutos de leitura
10 Melhores Construtores de Modelos de E-mail para 2022

Todos os construtores de modelos de e-mail são parecidos? Agora você está confuso sobre qual escolher para suas campanhas de e-mail, não é? Não é à toa, pois são muitos. Iremos separar os construtores mais populares para encontrar seus recursos diferenciados para ajudá-lo a encontrar o melhor construtor de e-mail HTML para suas necessidades atuais. Vou tentar criar um modelo em todos esses editores com os mesmos arquivos de mídia para ver se os construtores diferem. Os melhores construtores de...

Design Marketing Modelos
24 maio · 18 minutos de leitura
Melhores fontes para E-mail: Dicas e Truques de Uso

Uma das preocupações mais marcantes no processo de produção de e-mail é a escolha da fonte correta. Peso, altura, largura, cor, forma, espaçamento... Tudo isso importa? Sim, é verdade, mas também uma das coisas mais importantes é escolher a fonte que seja legível. Neste post, iremos lhe mostrar como escolher a melhor fonte profissional para e-mail. Desenhe e-mails elegantes com Stripo em pouco tempo com nossos modelos pré-construídos Navegue   Fontes de e-mail HTML: Regras gerais a serem seguidas Existem...

Design Modelos
Greatest Examples of GIF animations in Emails_Cover Image
27 outubro 2021 · 10 minutos de leitura
16 ótimos exemplos de GIFs animados em e-mails

GIFs em e-mails serão de grande utilidade se você quiser mostrar seu produto, chamar a atenção dos usuários para determinados elementos ou apenas decorar levemente seu texto. Neste artigo, fornecemos alguns dos melhores exemplos de animação gif de e-mail. Exemplos de GIFs animados em e-mails Aqui está um compilado dos melhores exemplos com GIFs em e-mails. Cada GIF cumpre sua missão. 1. Adidas (Fonte: E-mail da Adidas) A Adidas usou animações de e-mail para mostrar quais opções de cores eles...

Design Marketing
08 abril 2021 · 17 minutos de leitura
14 Melhores exemplos de design de assinatura de email

Boas assinaturas de email nos ajudam a construir nosso negócio e a causar uma boa impressão nos clientes. Como este é o último elemento que as pessoas visualizam nos emails, devemos fazer com que nossas assinaturas pessoais sejam criativas e memoráveis. Vamos examinar os melhores exemplos de assinaturas de email e seu uso apropriado em emails e templates de newsletter para emails. Deve-se mencionar que todos os tipos de negócios demandas assinaturas de email profissionais com as informações de contato...

Design Marketing Modelos
Esteja sempre a par das notícias, guias, artigos e manuais de marketing de e-mail