Guia completo: Como criar e-mails do zero com Stripo

Ao abrir o Stripo pela primeira vez, é normal se sentir perdido e não saber por onde começar. Mas aquele e-mail importante precisa ser enviado logo, com o prazo batendo à porta. Venha explorar conosco os recursos mais essenciais do Stripo e aprenda, passo a passo, a criar seu e-mail do começo ao fim.

Como começar a montar seu e-mail

Com o Stripo, você tem três opções para iniciar a criação do seu modelo de e-mal:

1. Opte por um modelo em branco para ter total liberdade na criação da estrutura do seu e-mail, usando blocos e módulos básicos (falaremos mais sobre isso em breve).
2. Comece com modelos básicos para ter uma base sólida e ideias de como seu e-mail pode ficar.
3. Explore nossos 1.650 modelos prontos, escolha o que mais gostar e personalize do seu jeito.

Para selecionar uma dessas opções, é só clicar na que você quer quando estiver na tela de Mensagem de E-mail.

Escolhendo a opção de E-mail em Branco

Quando você escolhe essa opção, nosso editor abre com uma estrutura básica de e-mail pronta para você personalizar.

O modelo básico é formado por três partes principais: cabeçalho, bloco de conteúdo e rodapé.

Essa estrutura dá total liberdade criativa: você pode criar o modelo que quiser usando as ferramentas do editor, que apresentaremos em breve. Cada parte pode ser preenchida com os blocos necessários, permitindo que você construa o e-mail exatamente do jeito que imagina (falaremos mais sobre os blocos em breve).

Escolhendo a opção de Modelo Básico

Ao selecionar esta opção, você acessa uma tela com diversas opções de modelos básicos, como Modelo em Branco, Modelo Mestre e layouts de categorias comuns de marketing por e-mail (Promoções, E-mails Gatilho, Informativos, entre outros). Ao clicar em qualquer modelo, ele abre no editor para que você possa começar a personalizá-lo.

Opção de modelo HTML

Essa opção é voltada para quem tem conhecimento técnico e sabe codificar e-mails. Ao selecioná-la, o editor de código é aberto automaticamente, permitindo trabalhar diretamente no HTML.

Na prática, você começa com uma tela em branco e pode construir seu e-mail do zero, escrevendo o código manualmente.

Escolhendo um dos mais de 1.650 modelos prontos

Quando o prazo está apertado e não dá tempo de criar do zero, você pode explorar nossa ampla biblioteca de modelos prontos, desenvolvidos pela equipe de design. Há opções para qualquer ocasião, setor ou funcionalidade que você precise para suas campanhas de e-mail marketing. Com modelos gratuitos e premium disponíveis, basta clicar em um deles para abri-lo no editor e personalizar como quiser.

1. Estilos Gerais

Ao criar um e-mail no Stripo, a seção Estilos e Layouts Gerais é o primeiro lugar para fazer ajustes que definirão as regras básicas de design do seu modelo. Essas regras garantem que todos os elementos do e-mail permaneçam consistentes e sigam o mesmo padrão visual.

O bloco ocupa o topo da hierarquia dos elementos do e-mail, o que significa que ele precisa conter elementos filhos. A estrutura é um desses elementos e está presente em todos os blocos por padrão.

Na tela principal do editor, clique em Estilos Gerais para acessar o menu completo. Ele é organizado em quatro seções, cada uma com opções gerais para uma parte específica do e-mail: 

• Estilos e Layouts Globais funcionam como o centro de controle do design, afetando elementos como fundo, alinhamento, opção de conteúdo da direita para a esquerda, entre outros;
• Estilos de Bloco permitem aplicar configurações gerais a cada bloco do seu e-mail (cabeçalhos, seções de conteúdo, rodapés, etc.), incluindo família de fontes, espaçamento, tamanho de fonte e muito mais;
• Estilos de Cabeçalho funcionam como os Estilos de Bloco, mas se aplicam apenas aos cabeçalhos, permitindo variar seu visual dentro do design do e-mail, se desejar;
• Estilos de Botão definem configurações gerais para todos os botões do modelo, incluindo cores, espaçamento, tamanhos, fontes e outros detalhes.

• Estilos e Layouts Globais

Aqui você define as regras de estilo principais que valerão para todo o e-mail, e é o primeiro passo ao criar sua mensagem. Comece definindo a cor de fundo ou adicionando uma imagem de fundo para o e-mail inteiro.

Além disso, é preciso ajustar a largura do conteúdo e o alinhamento geral do e-mail, definindo assim a estrutura básica da sua mensagem.

Também é possível definir opções adicionais, como sublinhar links, tornar o design responsivo (o e-mail se ajusta automaticamente para uma única coluna em telas pequenas), aplicar regras RTL ao conteúdo inteiro e personalizar listas usando Estilos de Listas Personalizadas.

Não se esqueça de configurar também os espaçamentos internos e margens gerais. Por último, os Estilos Padrão permitem escolher entre usar os estilos CSS padrão do Stripo ou ter total liberdade para aplicar seu próprio CSS.

O fundo do conteúdo do e-mail é aplicado em toda a área da mensagem. No desktop, ele cobre toda a extensão do e-mail, enquanto no mobile ele pode ficar oculto (como o fundo vermelho no exemplo abaixo). Também é possível usar uma imagem como fundo, caso as cores não sejam suficientes para o seu design.

Por padrão, a largura do e-mail é 600px, o tamanho mais usado atualmente.

Ao ajustar essas configurações, você economiza muito tempo de edição, já que os parâmetros definidos são aplicados automaticamente a todos os elementos do conteúdo do e-mail.

Qualquer estilo aplicado a uma linha, contêiner ou bloco específico que seja diferente das Configurações Gerais substituirá o estilo geral.

• Configurando estilos para blocos

Clique em Estilos de Bloco para acessar um submenu exclusivo e ajustar os estilos gerais de todos os blocos.

Vale lembrar que cada botão abre uma seção dedicada, permitindo ajustar os estilos gerais de cada tipo de bloco no seu modelo. Teste as opções e configure os detalhes necessários para que seu design permaneça consistente, não importa qual bloco você adicione.

• Configurando cabeçalhos

Clique em Estilos de Cabeçalho para abrir um menu compacto, onde você pode ajustar todas as opções gerais dos seus cabeçalhos. Ele é mais simples que o menu de blocos, e as configurações definidas se aplicam automaticamente a todos os cabeçalhos do seu e-mail.

• Configurando botões

Por fim, há os Estilos de Botão. Clique nesta seção para abrir o menu e ajustar os estilos de todos os botões que você inserir no seu modelo de e-mail.

2. Criando o cabeçalho

O cabeçalho do e-mail é o primeiro elemento que chama a atenção do leitor. Geralmente, inclui o logo da marca e o menu de navegação.

Antes de mais nada, defina o visual do seu cabeçalho. Há diversos estilos de design que você pode escolher.

Ainda assim, o estilo mais comum em e-commerce é ter o logo no topo, com o menu posicionado ao lado dele.

Para montar esse cabeçalho, você só precisa de uma linha com dois contêineres para organizar o conteúdo.

• Como adicionar um logo aos seus e-mails com o Stripo

Primeiro, prepare uma estrutura de 2 colunas no seu modelo em branco. Em seguida, passe o mouse sobre o primeiro contêiner e clique no botão Imagem ou simplesmente arraste o bloco de imagem para a primeira coluna.

Ao clicar, o menu Galeria de Imagens será aberto. Ali, você pode adicionar sua própria imagem ou selecionar entre imagens prontas criadas pelos designers, distribuídas em categorias como Temporadas, Decorações, Banco de Fotos, entre outras.

Depois de adicionar a imagem, você pode configurar um link para direcionar os destinatários ao seu site, definir o texto alternativo, ajustar o tamanho exato do logo e explorar outras opções para personalizar o logo do jeito que precisa.

Para adicionar um fundo ao bloco que contém o logo e o menu, use uma URL de uma imagem do logo no formato PNG com fundo transparente.

Por que colocar um link no logo? Porque é comum que os destinatários cliquem nele para visitar seu site de forma rápida.

Por que colocar texto alternativo no logo? Primeiro, ajuda a passar pelos filtros anti-spam; segundo, informa aos destinatários o que a imagem representa caso não consigam visualizar imagens; e terceiro, garante conformidade com as melhores práticas de acessibilidade em e-mails.

• Como adicionar um menu aos seus e-mails com o Stripo

Para inserir um menu no cabeçalho, arraste o bloco de menu e solte-o no contêiner ao lado do logo.

Clicando no bloco de menu, você acessa suas opções, podendo ajustar tanto o conteúdo quanto o design do menu de diversas maneiras.

Antes de tudo, selecione o tipo de menu: somente links de texto, apenas ícones (com links por trás) ou uma combinação dos dois. Em seguida, ajuste a quantidade de itens do menu usando o contador Número de Itens do Menu.

Agora, configure cada item do menu: dê nomes, adicione os links correspondentes e defina se devem aparecer em diferentes dispositivos. Para remover um item, clique no ícone da lixeira. Não se esqueça de preencher todos os campos de cada item.

Por fim, ajuste as configurações gerais do bloco de menu, como alinhamento ao contêiner, espaçamentos internos e margens, e seu menu estará pronto para uso.

3. Trabalhando com textos

O próximo passo é o conteúdo do e-mail. Com o Stripo, inserir textos nas suas mensagens é simples e rápido.

• Como adicionar texto aos seus e-mails com o Stripo

Se sua estrutura já tiver contêineres, basta passar o mouse sobre eles e clicar em Texto ou arrastar um bloco de texto para dentro do contêiner para adicionar conteúdo.

Depois de adicionar, você verá um espaço reservado para texto, que pode apagar e digitar seu próprio conteúdo. Além disso, nosso bloco de texto possui um menu de opções dedicado, onde você pode ajustar seu texto.

Os estilos definidos em Estilos Gerais para blocos e cabeçalhos são herdados automaticamente pelo texto. Mas, se quiser criar um estilo próprio, é possível configurar estilos de parágrafo, aplicar negrito, itálico, sublinhado e outros efeitos, além de ajustar alinhamento e recuo para cada texto que você adicionar.

Na aba Estilos, é possível personalizar a fonte, tamanho, cor, altura da linha e até o fundo deste bloco de texto.

• Como adicionar links ao texto com o Stripo

Para inserir um link, destaque as palavras desejadas (ou aplique ao texto completo), clique no botão Link e cole a URL no campo correspondente.

Atenção:

É recomendável ativar a quebra de palavras nos e-mails quando os links não estiverem em botões ou quando houver palavras muito longas. Por exemplo, em e-mails escritos em alemão, isso evita que seja necessário rolar horizontalmente em dispositivos móveis. Para isso, basta ativar o botão de quebra de palavras. Note que essa função não funciona para textos em chinês, coreano ou japonês.

• Inserindo outros conteúdos no bloco de texto

Além do texto, você pode incluir imagens, emojis, símbolos especiais, tabelas e listas (marcadas ou numeradas) no seu bloco de texto.

No bloco de texto, cada botão da seção Inserir abre um submenu, permitindo que você adicione o tipo de conteúdo que quiser.

• Texto da direita para a esquerda (RTL)

Ao criar e-mails para públicos que usam idiomas com escrita RTL, é essencial ajustar o conteúdo do e-mail. Para isso, utilize o recurso RTL: vá em Estilos Gerais e ative a opção Texto da direita para a esquerda.

Depois de ativar, todo o conteúdo do seu e-mail seguirá as regras de escrita RTL.

Para mais detalhes sobre essa funcionalidade, confira nosso artigo completo sobre o assunto.

• Traduções

Enviar campanhas de e-mail para públicos internacionais pode ser bem complicado, e quanto mais idiomas você precisar cobrir, maior o desafio. Traduzir os e-mails manualmente consome bastante tempo. Por isso, o Stripo oferece uma função de tradução integrada para simplificar esse processo.

Clique no botão para acessar o menu de tradução.

Escolha o idioma para o qual quer traduzir seu e-mail.

Após escolher os idiomas, pressione o botão Traduzir.

Em poucos segundos, a versão traduzida do e-mail será salva, permitindo que você faça ajustes e a utilize em suas campanhas.

4. Personalizando o conteúdo do e-mail

Mensagens com conteúdo personalizado ajudam sua marca a se destacar e a se conectar de forma mais próxima com os destinatários.

Insira merge tags nas saudações (como no exemplo abaixo) e no rodapé do e-mail para indicar o endereço do destinatário, garantindo que os e-mails automáticos sempre cumprimentem a pessoa pelo nome.

No Stripo, você pode inserir merge tags em qualquer parte do conteúdo do seu modelo de e-mail.

• Como adicionar merge tags em e-mails com o Stripo

Clique no bloco de texto e, na seção Inserir, use a lista suspensa para adicionar as merge tags que desejar.

Ao clicar, o menu se expande, e você pode selecionar a merge tag adequada conforme suas necessidades de personalização, o ESP utilizado e as configurações do projeto.

Ao selecionar a merge tag (como no exemplo, a tag Primeiro Nome), ela será inserida no bloco de texto, permitindo adicionar mais palavras e criar uma mensagem personalizada completa.

O seu ESP vai substituir essa merge tag pelo primeiro nome de cada destinatário. Caso o dado não esteja disponível, o campo permanecerá vazio.

Para entender melhor como usar merge tags, confira nosso artigo no Centro de Ajuda.

5. Inserindo imagens

As imagens são essenciais em qualquer e-mail. Por mais impactante que seja o seu texto, incluir imagens é fundamental, já que elas despertam emoções e mostram seus produtos de maneira atraente.

• Adicionando imagens em e-mails com o Stripo

Comece preparando uma estrutura com a quantidade de colunas necessária no seu modelo HTML. Depois, arraste o bloco de imagem para o contêiner escolhido ou clique na opção Imagem ao passar o mouse sobre o contêiner.

Depois de adicionar o bloco, existem diversas formas de incluir imagens no seu modelo.

1. Arrastando ou enviando uma imagem

Basta arrastar a imagem que você quer usar para a campanha ou fazer o upload do seu computador clicando na área de arrastar e soltar.

2. Usando URL externa

Caso a imagem não esteja no seu computador, você pode adicionar um link direto da imagem disponível na internet.

Clique em Colar URL na área de arrastar e soltar para abrir o menu. Depois, cole o link do seu e-mail e decida se quer salvar na Galeria de Imagens ou manter como imagem externa. Atenção: imagens externas podem sumir do seu modelo se forem removidas ou movidas da fonte original.

3. Inserindo imagens da Galeria de Imagens

Ao enviar imagens ou salvá-las na galeria, como no exemplo acima, elas ficam armazenadas na sua galeria pessoal. Basta clicar em uma imagem para que ela seja automaticamente adicionada ao bloco correspondente.

As imagens são exibidas da mais recente para a mais antiga. Se houver muitas, você pode usar a busca pelo nome para encontrar a que precisa.

Para adicionar uma imagem ao seu e-mail HTML, basta clicar na imagem escolhida, e ela será inserida automaticamente no seu modelo.

4. Explore nosso banco de imagens e aproveite milhares de opções gratuitas

Com o Stripo, todas as imagens são grátis para usar nos seus designs. Além disso, você pode escolher entre uma grande variedade de fotos profissionais. Basta acessar o menu, navegar pela biblioteca e encontrar as imagens ideais para o seu projeto.

5. Gerando imagens com IA generativa

Para criar uma imagem única para o seu banner, basta usar a opção AI Image. Lá você encontra um menu próprio para inserir seu prompt, ajustar configurações como modelo de IA, estilo e dimensões, e gerar exatamente a imagem que deseja..

6. Edição de imagens

Na seção anterior, vimos como enviar e salvar imagens.

Agora, como editar essas imagens no Stripo?

Nesta seção, você vai aprender a editar imagens usadas em cards de produtos, assinaturas, logos, apresentação de palestrantes, divulgação de eventos e muito mais.

• Como editar imagens no Stripo

Após enviar a imagem, basta clicar nela e, nas configurações do bloco de imagem, selecionar a opção Editar imagem.

Um mini editor será aberto, permitindo que você personalize sua imagem de diversas formas, como:

• aplicar filtros e ajustar as cores;
• recortar, redimensionar e mudar o formato;
• desenhar sobre a imagem e adicionar formas, textos, adesivos e molduras;
• arredondar cantos, inserir fundos e combinar imagens.

7. Criação de banners

O banner é como a vitrine da sua newsletter - por isso, vale a pena caprichar nele.

Geralmente, um banner é uma imagem que chama a atenção e desperta emoções no público, acompanhada de um texto que complementa a mensagem.

• Como criar um banner de e-mail no Stripo

Primeiro, crie uma estrutura de uma coluna para o seu banner. Em seguida, arraste o bloco de Banner e posicione-o dentro dessa estrutura.

Ao clicar no bloco, um menu será exibido para você adicionar uma imagem ao banner. O processo é o mesmo que mostramos na seção de inserção de imagens.

Após adicionar a imagem, você poderá usar as configurações do bloco de Banner para ajustar o tamanho, recortar, inserir um link clicável, ocultar o banner em certos dispositivos, adicionar texto alternativo, definir margens e incluir o bloco em diferentes versões do e-mail.

E não deixe de usar a opção Estilos, onde você pode girar a imagem do banner, ajustar a cor de fundo e aplicar filtros.

Além disso, o bloco oferece opções específicas para adicionar textos e imagens sobre o banner. Algumas funções aparecem desativadas, pois ainda estão em desenvolvimento e serão lançadas em breve.

Ao clicar em Texto, um campo editável será adicionado para você inserir sua mensagem. Esse texto tem um menu próprio, onde é possível ajustar fonte, estilo, opacidade, rotação e outros detalhes. Você também pode mover ou girar o texto arrastando os pontos brancos nos cantos e no topo da caixa.

Ao clicar em Imagem, o mesmo menu de inserção de imagens será aberto.

Depois de adicionada, essa imagem também terá um menu de opções próprio, que é o mesmo do banner completo, permitindo que você edite a imagem adicional conforme seu estilo e necessidades.

8. Efeito rollover de imagem

O efeito rollover deixa seus e-mails mais interativos e envolventes. Ele também ajuda a economizar espaço, permitindo ocultar informações do produto atrás da imagem. Além disso, dá para criar experiências divertidas, como fazer o usuário “descobrir” um cupom. Por isso, vale muito a pena usar esse recurso nos seus e-mails.

Mas como criar isso na prática? Essa técnica foi desenvolvida pela nossa equipe e ajustada tanto para o nosso sistema quanto para funcionar bem nos principais clientes de e-mail.

• Como criar um efeito rollover de imagem no Stripo

Criar esse efeito é bem simples: adicione a imagem no local desejado do e-mail e clique nela para abrir as configurações. Em seguida, procure pela opção de Efeito Rollover.

Ao clicar nessa opção, um novo menu será aberto para você adicionar a imagem que será exibida quando o usuário passar o mouse sobre ela.

Após adicionar a imagem, você pode editá-la ou substituí-la normalmente, como faria com qualquer outra imagem no Stripo.

Importante: Esse recurso funciona apenas em alguns clientes de e-mail, como Yahoo! Mail, Gmail e Apple Mail (no desktop). Além disso, as duas imagens precisam ter exatamente o mesmo tamanho, pixel por pixel.

9. Adicionando vídeos em e-mails

No Stripo, você pode incluir vídeos nos seus modelos de duas maneiras:

1. Usando o bloco de Vídeo.
2. Incorporando o vídeo via código.

(Fonte: E-mail enviado pela Charity: Water)

Vamos explicar as duas opções para te ajudar a escolher a que melhor atende às suas necessidades.

• Método 1. Usando o bloco de Vídeo

Essa é a forma mais segura de adicionar vídeos, já que funciona bem em qualquer cliente de e-mail e dispositivo.

Para começar, arraste o bloco de Vídeo para a estrutura desejada e clique nele.

Ao clicar no bloco, um menu de opções será exibido para que você possa fazer todos os ajustes que precisar.

O principal passo é inserir o link do vídeo nos campos indicados. Após isso, o editor automaticamente puxa o vídeo, gera a miniatura e cria um texto alternativo com base no título - que você pode ajustar se quiser.

Você pode trocar a miniatura a qualquer momento usando a opção de Miniatura Personalizada, que abre o mesmo menu de inserção de imagens. Também é possível ajustar o estilo do botão de reprodução ou até ocultá-lo. Além disso, vale configurar o tamanho do bloco e decidir se a miniatura será responsiva - ou seja, se ela vai se adaptar automaticamente ao tamanho da tela.

• Método 2. Incorporando vídeo

Nesse caso, o vídeo é reproduzido dentro do próprio e-mail, sem que o usuário precise sair para outro site.

O Stripo oferece um código universal que permite exibir o vídeo que você quer compartilhar para todos os seus assinantes.

Recomendamos seguir estes passos:

1. Insira o código no modelo de e-mail.
2. Depois, personalize-o adicionando seus próprios links.

Como incorporar um vídeo no Stripo

Para isso, usamos o bloco HTML, desenvolvido para facilitar o uso de código em e-mails. Basta arrastá-lo e soltá-lo em qualquer parte do seu modelo.

Ao clicar nele, você abre o editor de código integrado, onde é possível ver e editar o código por trás do seu modelo de e-mail.

Agora, copie este código para incorporar o vídeo:

<video class="adapt-img" controls="controls" poster="https://jenbfo.stripocdn.email/content/guids/videoImgGuid/images/image16586923322854343.png" width="100%" height="313">

<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="http://www.w3schools.com/html/mov_bbb.webm" type="video/webm">



<!-- fallback -->



<a href="https://www.youtube.com/watch?v=ryqOEPk51Lg/" class="esd-frame-element esd-hover-element esdev-disable-select">

<img class="adapt-img" src="https://jenbfo.stripocdn.email/content/guids/videoImgGuid/images/image16586923322854343.png" alt="" width="100%" height="313"></a>

</video>

E cole aqui (substituindo o texto de exemplo) e depois clique em Aplicar código:

Depois de aplicar, será exibido um layout básico com o reprodutor de vídeo incorporado e o vídeo de exemplo.

O único passo restante é substituir os links pelos seus próprios, para que o vídeo seja exibido corretamente. Todos os links que precisam ser alterados estão aqui:

1. O primeiro link é da miniatura do vídeo. Alguns dispositivos conseguem gerar essa imagem automaticamente a partir de um arquivo MP4, mas ela não será exibida corretamente em iPhones e em telas Retina. Insira esse link no atributo “Poster”.
2. Os dois links seguintes são dos arquivos de vídeo nos formatos .MP4 e .WebM. Links do YouTube ou Vimeo não são compatíveis nesse caso. Basta substituir os links após o atributo “source src” pelos seus próprios arquivos.
3. Os dois links restantes, após a palavra “fallback”, correspondem ao vídeo no YouTube e à sua imagem de pré-visualização. Eles funcionam como alternativa para clientes de e-mail que não suportam vídeos incorporados. Envie seu vídeo para o YouTube ou Vimeo e também a imagem de miniatura. Depois, substitua os links dos atributos “href” e “src” pelos seus próprios.

​10. Adicionando botões de CTA

Um botão é basicamente um link com um design mais atraente. Ele precisa se destacar visualmente, e seu texto deve ser direto, claro e objetivo.

Antes, você definiu o estilo de todos os botões na seção de Estilos Gerais. Mas, se quiser deixar um botão específico diferente, veja como fazer.

• Como criar um botão de CTA no Stripo

Criar um botão de CTA é muito simples: basta arrastar o bloco de botão e soltá-lo em qualquer parte do seu modelo.

Em seguida, clique no botão para abrir as configurações e fazer todos os ajustes que precisar.

O essencial em qualquer CTA é um link válido e uma mensagem clara e persuasiva que incentive o clique. Basta inserir o link e o texto do botão nos campos indicados.

Depois, você pode ajustar o alinhamento do botão de CTA, definir sua altura exata no e-mail, adicionar um ícone e escolher se ele deve ou não ser exibido em determinados dispositivos.

Nas configurações básicas, você também pode ajustar o espaçamento interno e as margens, incluir o CTA em diferentes versões do e-mail e adicionar um link âncora.

Para personalizar o design do seu botão de CTA, acesse a seção Estilos e abra o menu de configurações. Lá, você pode ajustar cores, tipografia (tamanho, cor e estilo do texto), fazer o botão ocupar toda a largura do contêiner, adicionar fundo com cor ou imagem, definir bordas e muito mais.

• Efeito hover no botão

Para adicionar um efeito de hover aos botões, vá até as Configurações gerais e ative a opção “Estilos de botão com hover”. Assim, os botões mudam de aparência ao passar o mouse. Nessa área, você também pode personalizar cores, tipografia e bordas do efeito.

Veja um exemplo de como os botões com efeito hover podem ficar.

11. Criação de módulos de produto

Esta é uma seção mais avançada, já que reúne diversos blocos e elementos diferentes.

(Fonte: E-mail enviado pela M&M's)

Em geral, esses cards de produto incluem um resumo do item, uma breve descrição, o preço e um botão de CTA.

Algumas marcas, como a M&M’s, incluem uma breve introdução antes de exibir os produtos, enquanto outras já colocam a promoção logo abaixo do banner ou do vídeo, isso depende totalmente da sua estratégia.

Para montar um card de produto como esse, comece criando uma estrutura de 2 colunas e insira um bloco de Imagem em uma delas. Depois, faça os ajustes necessários.

Em seguida, adicione um bloco de Texto ao lado da imagem. Escreva seu conteúdo e ajuste formatação, fontes e demais detalhes.

Lembre-se de que é possível adicionar vários blocos lado a lado para incluir mais informações e personalizar seus cards de produto como quiser.

Após concluir os textos, adicione um bloco de botão logo abaixo. Em seguida, insira os links necessários e ajuste o design conforme seu estilo usando as opções disponíveis.

Você tem controle total da criação, e os cards de produto são simples de montar, já que são formados por blocos básicos e fáceis de editar.

Se quiser criar mais um ou dois módulos iguais a este, basta passar o mouse sobre o card de produto e clicar em Duplicar.

Em seguida, uma cópia do card de produto será criada logo abaixo do original. A partir daí, você pode editá-la para criar outros cards de produto.

12. Criação de contadores regressivos em e-mails

Os contadores regressivos ajudam a gerar urgência, informam o tempo restante de uma promoção ou mostram quanto falta para o início de um evento.

(Fonte: e-mail da Malooka)

Você pode criar, personalizar e inserir um contador regressivo no seu modelo de e-mail HTML diretamente no editor.

• Como criar e adicionar um contador regressivo no Stripo

Para criar seu contador, basta arrastar o bloco de Contador para qualquer contêiner e clicar nele.

Em seguida, será exibido um menu de configurações com um calendário que se abre automaticamente, permitindo selecionar a data e o horário do contador regressivo.

Depois de configurar a data e o horário, o contador inicia automaticamente a contagem regressiva. Agora você pode fazer alguns ajustes.

Você pode configurar o fuso horário exato do seu contador para facilitar a experiência de usuários em diferentes países. Além disso, é possível adicionar links ao contador para compartilhamento, personalização ou para torná-lo clicável, levando o público para as páginas que você quiser.

As opções Exibir Dias e Rótulos Digitais permitem escolher se o contador mostrará os dias e também os nomes das unidades, como horas, minutos e segundos. Ao desativar, o contador passa a exibir apenas os números.

Você também pode ajustar o formato dos rótulos (maiúsculas/minúsculas), definir o idioma e personalizar o separador conforme seu estilo. Além disso, a opção “Imagem de expiração” permite definir uma imagem que será exibida quando o contador chegar a zero.

As opções de Estilos são bastante completas e permitem personalizar a aparência dos números, rótulos e separadores, deixando o contador alinhado ao design do seu e-mail.

13. Adicionando um espaçador

O espaçador (ou divisor) não tem função de conversão, ele é apenas um elemento visual que ajuda a organizar o e-mail e melhora a legibilidade do conteúdo.

• Como adicionar um espaçador no Stripo

Inserir um espaçador no e-mail é simples: arraste uma estrutura de uma coluna para o seu modelo HTML e, depois, coloque o bloco de Espaçador dentro dela.

Clique no bloco para abrir as configurações. Nele, você pode escolher entre duas formas de exibição: uma linha ou um espaço invisível. Também é possível ajustar largura, estilo, cor, borda e alinhamento.

Tenha em mente que os espaçadores herdam a cor de fundo definida em Estilos Gerais. Por isso, se quiser alterá-la, será necessário ajustar manualmente cada espaçador usando a opção Cor de Fundo do Bloco.

Aqui você pode definir os espaçamentos exatos, adicionar um link âncora (se necessário) e escolher se o espaçador será exibido ou ocultado em diferentes versões do e-mail.

14. Inserindo ícones de redes sociais

Os ícones de redes sociais podem ser posicionados em diferentes partes do e-mail, como no menu, no rodapé ou até no meio do conteúdo, dependendo do que fizer mais sentido para o seu layout.

• Como adicionar ícones de redes sociais no Stripo

Adicionar ícones de redes sociais é simples, já que há um bloco específico para isso. Basta arrastar o bloco de Redes Sociais para o seu modelo e clicar nele para acessar as configurações.

Por padrão, um ícone de rede social já vem ativado. Para adicionar outros, clique no botão “+” e selecione as opções na lista. Como os ícones são inseridos individualmente, será necessário repetir o processo para adicionar todos os que quiser.

Após adicioná-los, os ícones aparecerão no layout e você só precisa inserir os links das suas redes sociais nos campos indicados. Para excluir um ícone, clique no ícone de lixeira ao lado dele.

Você também pode personalizar a aparência dos ícones usando o menu suspenso e selecionando uma das opções de design disponíveis.

E não se esqueça dos ajustes extras disponíveis para todo o bloco de Redes Sociais, como tamanho dos ícones, espaçamento, títulos, cor de fundo e outros detalhes. Essas opções ajudam a ajustar o bloco para que ele se encaixe melhor no design geral do e-mail.

Você também pode pré-definir quais ícones de redes sociais aparecerão no seu bloco de Redes Sociais assim que ele for adicionado, ajustando as configurações do seu projeto. Na sua Conta, vá em Configurações, depois em Workspace, em seguida em Projetos e Grupos, e escolha o projeto desejado.

Em seguida, acesse a aba Redes Sociais, onde você pode adicionar as plataformas desejadas e inserir os links de cada uma delas.

Escolha entre diversos ícones de redes sociais e personalize o bloco de Redes Sociais conforme sua necessidade.

15. Construindo o rodapé do e-mail

O rodapé de e-mail geralmente inclui informações de contato, como o endereço do site, o motivo do envio do e-mail, links para redes sociais (atrás dos ícones), o link de descadastro e o nome da pessoa responsável pela newsletter. Este último é opcional, mas os demais elementos são essenciais.

• Como criar um rodapé de e-mail no Stripo

O rodapé é um elemento composto do e-mail. Para criá-lo, comece arrastando uma estrutura com o número de colunas necessário, adicione blocos de Texto, insira e ajuste seu conteúdo. Em seguida, inclua um bloco de Redes Sociais e personalize-o conforme as redes que você deseja destacar.  

16. Cor de fundo e imagem

Fundos aplicados a contêineres ou linhas individuais ajudam a destacar elementos específicos e direcionar a atenção do leitor. Já quando aplicados ao e-mail inteiro, eles deixam o design mais consistente e harmonioso. Você já definiu a cor principal de fundo antes, mas aqui vai um guia rápido de como aplicá-la em partes específicas do layout.

Neste exemplo, vamos adicionar uma cor de fundo a uma estrutura.

• Como definir a cor de fundo de uma estrutura

Primeiro, clique em qualquer elemento da estrutura e acesse as opções de Estilos. É importante selecionar exatamente a estrutura, pois ao clicar no contêiner você abrirá as configurações dele, o que não é o objetivo neste caso.

Clique em Cor de Fundo para abrir a paleta e selecionar a cor desejada para o fundo da estrutura.

Se você tiver o código exato da cor, basta inseri-lo neste campo.

Para definir a cor de fundo do e-mail inteiro, acesse Estilos Gerais e Layout e ajuste a opção “Cor de Fundo Geral”.

• Como definir uma imagem de fundo para o e-mail inteiro

A imagem de fundo aparece apenas em dispositivos desktop e não é exibida em celulares. Em Estilos Gerais e Layout, clique em “Imagem de Fundo”. Isso abrirá o menu de inserção de imagens, onde você pode escolher uma do banco de fotos ou fazer upload do seu dispositivo para aplicá-la ao fundo do e-mail.

A imagem de fundo foi adicionada, mas vem com um posicionamento padrão. Por isso, será necessário fazer alguns ajustes para deixá-la alinhada ao seu design.

Você pode repetir a imagem de fundo por todo o e-mail, ajustar sua posição horizontal e vertical e também definir largura e altura exatas.

17. Escrevendo linhas de assunto e pré-cabeçalhos

Para adicionar o assunto e o pré-cabeçalho, acesse “Configurações da mensagem” e preencha os dois campos correspondentes.

Você pode inserir o texto que quiser e ainda reforçar sua mensagem com emojis.

O mesmo se aplica aos pré-cabeçalhos, com a opção extra de preenchê-los com espaços em branco.

Se você não tiver tempo para criar o assunto do e-mail manualmente, pode usar os recursos de IA e clicar em “Aprimorar com IA”. Assim, você pode escrever um prompt e gerar rapidamente um assunto ou pré-cabeçalho pronto em poucos segundos.

18. Adaptação do e-mail para dispositivos móveis

Todas as mudanças de design, como dimensões e espaçamentos, são aplicadas por padrão à versão desktop. Ainda assim, você pode ajustar cada detalhe separadamente para a versão mobile.

Para ativar esse modo e editar a versão mobile do e-mail, clique neste botão.

Ao clicar, essas configurações de estilo (e outras opções para cada elemento do e-mail) são exibidas.

Serão alteradas para estas:

Além disso, a versão mobile do e-mail será mostrada no editor, já com a aparência que terá em dispositivos móveis.

Além disso, você pode ocultar elementos na versão mobile caso eles atrapalhem o layout, mantendo um bom visual nos dispositivos móveis. Assim, é possível ter duas versões do e-mail: uma para desktop com todos os elementos e outra para mobile com alguns itens ocultos (ou o contrário).

E lembre-se da opção “Inversão de contêiner”, que permite alterar a ordem dos contêineres no mobile. Para usá-la, primeiro é necessário aplicar a Estrutura Responsiva; depois disso, você pode ativar a inversão.

Veja como fica.

19. Pré-visualização e testes de e-mails

Sempre visualize e teste seus e-mails antes de enviá-los. No Stripo, é fácil pré-visualizar e testar seus modelos antes de publicá-los.

• Como pré-visualizar seu e-mail no Stripo

Depois de finalizar o design do seu modelo, clique em “Pré-visualizar” acima dele.

No modo de visualização, você consegue ver como seu e-mail ficará em computadores e dispositivos móveis.

É possível conferir seu e-mail nos modos Claro e Escuro usando esses botões.

• Enviando um e-mail de teste com o Stripo

Você também pode testar seu e-mail enviando-o para sua própria caixa de entrada e conferir como ele aparecerá nos clientes de e-mail reais. Para isso, clique no botão Testar, que abrirá uma pequena janela.

Insira os endereços de e-mail para o teste no campo indicado e clique em Enviar Teste. Você receberá o e-mail de teste na sua caixa de entrada para conferir como ele ficou.

• Como testar seu e-mail em todos os ambientes populares

Depois de conferir as versões para computador e celular e enviar um e-mail de teste para si mesmo para ajustar possíveis detalhes, é hora de ver exatamente como seus assinantes verão o e-mail, garantindo que o layout seja perfeito. Com a integração ao Email on Acid, você pode visualizar seus e-mails em diversas combinações de clientes e dispositivos direto no Stripo.

Ainda no menu de testes, vá para a seção Clientes de E-mail e clique em Executar Teste.

O teste do seu modelo será executado em vários dispositivos e plataformas. Depois de concluído, você pode clicar em cada resultado para examinar os detalhes de perto.

Selecione as plataformas onde quer testar seu e-mail e confira como o modelo aparece nos modos claro e escuro. Assim, você garante que seu e-mail ficará perfeito em qualquer dispositivo ou cliente de e-mail.

20. Teste de acessibilidade do e-mail

Lembre-se de testar a acessibilidade, já que parte do seu público pode ter deficiência visual, e o design do e-mail precisa estar adequado. No menu Testar Modelo, vá até a seção Acessibilidade e clique em Executar Teste.

O teste rápido exibirá o que está correto em termos de acessibilidade no seu modelo e destacará pequenas falhas que precisam ser ajustadas.

Selecione uma deficiência visual para testar seu e-mail, confira os resultados e faça os ajustes necessários no seu design.

• Como testar a conformidade do e-mail com regras anti-spam

Nada pior do que criar todo o e-mail e ele acabar na pasta de spam. Para prevenir isso, você pode verificar se seu e-mail está em conformidade com as regras anti-spam.

Vá para a seção Spam e clique em Executar Verificação.

O modelo será testado rapidamente nos filtros de spam mais usados, mostrando também alguns detalhes que podem afetar se seu e-mail será considerado spam.

Vale lembrar que todos os e-mails feitos no Stripo já vêm com código totalmente compatível com leitores de tela, então não é preciso se preocupar com esse ponto.

21. Otimizando seu e-mail para o modo escuro

Os temas escuros estão cada vez mais comuns, e não dá para ignorá-los. Por isso, é essencial ajustar o design do seu e-mail para esse modo. Imagens, fontes, ícones e outros elementos podem parecer muito diferentes no tema escuro, então é importante se preparar para isso.

No Stripo, é possível visualizar seu e-mail nos modos Claro e Escuro usando a opção Condições de Exibição. Clique aqui para conhecer a opção Emulação de Tema. Lembre-se: todo e-mail é criado inicialmente no tema Claro.

Ao mudar para o tema escuro, você consegue ver exatamente como seu e-mail ficará e ajustar o design de acordo.

22. Aplicando condições de exibição

Com as condições de exibição, você pode criar e-mails personalizados, mostrando conteúdos diferentes de acordo com regras específicas. Por exemplo, em um e-mail com promoções de tênis masculinos e femininos, você pode configurar dois blocos separados com condições distintas: os homens verão apenas as ofertas masculinas e as mulheres, apenas as femininas.

Para saber mais sobre condições de exibição, confira nosso artigo na Central de Ajuda.

23. Colaborando com ferramentas de trabalho em equipe

Não é preciso criar e-mails sozinho. Trabalhe junto com seus colegas e editem os e-mails em tempo real. Eles podem ajudar na edição, fazer ajustes no design ao mesmo tempo que você e deixar comentários com feedback útil para você aplicar.

Confira todos os detalhes de como funciona no nosso artigo-guia especial.

24. Criando conteúdo interativo

Para deixar seu e-mail mais envolvente, use nossos blocos especiais de conteúdo interativo. Por exemplo, o bloco Carrossel permite criar um carrossel com várias imagens de forma prática.

Quer deixar seu e-mail mais compacto? Use o bloco Acordeão, que permite ocultar ou mostrar as informações conforme necessário.

Quer ouvir seu público? Use o bloco Formulário, que permite aos destinatários enviar suas respostas diretamente, mostrando exatamente de qual e-mail cada resposta veio.

O grande diferencial do conteúdo interativo é que ele funciona totalmente dentro do e-mail, sem precisar enviar o destinatário para outra página. Isso deixa seus e-mails mais dinâmicos e atraentes.

Importante: nem todos os clientes de e-mail suportam conteúdo interativo. Por exemplo, o Outlook ainda não oferece suporte para nenhum tipo de conteúdo interativo.

Para aumentar o engajamento dos seus e-mails, use o gerador de módulos interativos. Ele oferece diversas opções, como roletas da sorte, quizzes, questionários NPS e muito mais. O melhor é que não é preciso ser um expert em tecnologia: tudo é feito de forma intuitiva, e você pode salvar e baixar facilmente os módulos para usar em seus e-mails.

25. Salvando elementos do e-mail como módulos

É possível guardar na sua biblioteca pessoal diversos conteúdos para usar depois: elementos, blocos, contêineres, módulos e seções.

Para salvar um elemento, passe o mouse sobre ele e clique em Salvar como Módulo.

Você precisará nomear o elemento no painel de configurações, para que seja fácil encontrá-lo depois.

Ao salvar módulos assim, você consegue montar e-mails completos simplesmente arrastando os módulos para o seu modelo.

Sugerimos salvar e reutilizar elementos como cabeçalhos, rodapés, informações de contato e contêineres com elementos inteligentes. Enquanto os cabeçalhos e rodapés permanecem inalterados, os contêineres inteligentes podem exigir que você adicione um novo link ao reutilizá-los.

Os módulos do Stripo têm muito mais recursos para tornar seu trabalho mais fácil. Confira nosso artigo para conhecer detalhadamente cada funcionalidade de módulo.

26. Exportando seu e-mail para o ESP

Depois que seu e-mail estiver finalizado, testado e ajustado, você pode enviá-lo facilmente para o seu ESP. O Stripo se integra a mais de 90 ESPs, além de clientes de e-mail como Gmail, Outlook, aplicativos e muito mais.

Você pode enviar seus e-mails para qualquer ESP com apenas 1 clique. E se precisar de outras opções, é possível baixar o e-mail em HTML/AMPHTML, PDF ou até como imagem.

• Exportando seu e-mail do Stripo

Para exportar, clique no botão Exportar que fica acima do modelo.

Depois, no menu aberto, vá até a seção Provedores de E-mail para conferir todos os ESPs integrados disponíveis.

Basta clicar em um ESP, preencher as informações nos ajustes pré-exportação e seu e-mail estará pronto para envio.

O mesmo processo vale para exportar para Aplicativos e como Arquivos (basta clicar nas seções correspondentes do menu).

Dicas e recursos para acelerar a produção de e-mails com o Stripo

Com tantos e-mails para criar e pouco tempo disponível, é essencial tornar o processo mais eficiente. O Stripo oferece várias funcionalidades para facilitar e agilizar a criação dos seus e-mails.

• Botões Desfazer e Refazer

Com esses botões, você pode desfazer uma ação anterior ou refazer alterações para retornar ao estado atual do seu e-mail.

Isso economiza tempo, evitando recriar elementos do zero, e ainda oferece liberdade para experimentar com o design.

• Histórico de Versões

Com ele, você pode acompanhar quem fez alterações nos e-mails e em que momento. Além disso, é possível restaurar qualquer versão do seu e-mail quando necessário.

Isso impede que você tenha que refazer o e-mail do zero caso não goste das últimas alterações realizadas.

Clicando nesse botão “mágico”, você pode conferir todas as versões do e-mail, com datas e os nomes de quem realizou cada alteração.

• Ações de Duplicar e Mover

Uma forma rápida e eficiente de reutilizar elementos similares em diferentes e-mails.

Se você criou uma estrutura de conteúdo perfeita para o seu e-mail e quer reutilizá-la, não precisa refazê-la. É só clicar em Duplicar para gerar uma cópia da estrutura rapidamente.

Depois, use o botão Mover para arrastar o elemento duplicado até o local desejado no seu modelo. Pronto!

• Armazenando e reutilizando modelos existentes

Essa é, sem dúvida, a minha parte favorita. Se você envia e-mails semelhantes com frequência e só precisa atualizar alguns textos ou banners, é só copiar o e-mail anterior e editar apenas os elementos necessários. Pronto!

• Criando um e-mail básico com o Assistente de IA

Para criar rapidamente um layout básico, use o Assistente de IA. Basta escrever um prompt explicando o conteúdo do e-mail e os elementos que deseja incluir, e clicar em Gerar.

Depois de gerado, você pode refinar o layout básico e salvar o modelo para desenvolver e transformar em um e-mail completo.

Conclusão

Agora você já conhece todas as ferramentas para criar um e-mail do zero e muito mais. Esperamos que este guia facilite seu onboarding e estabeleça uma base sólida para fluxos de criação de e-mails mais ágeis e eficientes com o Stripo.