Simplifique seu processo de criação de e-mails com nosso eficiente editor em linha no Construtor de e-mails para modelos e campanhas. Essa ferramenta oferece uma experiência dinâmica e fácil de usar, garantindo um resultado de qualidade com maior velocidade e conveniência.
O que é o Editor em linha do Construtor de e-mails?
O Construtor de e-mails Inline Editor é uma ferramenta poderosa incorporada à nossa plataforma de modelos e campanhas que permite criar e personalizar e-mails com eficiência e facilidade sem precedentes. Ele apresenta uma interface amigável que elimina a complexidade do design e da formatação de e-mails.
O Construtor de e-mails Inline Editor utiliza o princípio de edição "O que você vê é o que você obtém" (WYSIWYG). Imagine que você está redigindo um e-mail e decide colocar uma frase em negrito, inserir uma imagem após um parágrafo ou alterar a cor de um título. À medida que você faz essas alterações no editor, elas são refletidas imediatamente, exatamente como aparecem no e-mail final. Isso lhe proporciona uma visualização em tempo real e uma experiência de edição direta, ajudando-o a criar e-mails melhores com mais eficiência.
Essa ferramenta robusta oferece suporte a vários recursos de personalização, permitindo que você estilize o conteúdo do e-mail usando vários cabeçalhos e formatos de parágrafo. Você pode escolher entre uma seleção de fontes compatíveis, aplicar diferentes tamanhos de texto que variam de 8px a 96px e colorir o texto usando código hexadecimal para uma seleção precisa de cores. Também é possível aplicar formatação de texto, como negrito, itálico, sublinhado e tachado, ou adicionar hiperlinks para redirecionamento.
Além disso, o editor em linha permite valores personalizados, proporcionando melhor controle sobre o conteúdo. A ferramenta também oferece suporte à geração de conteúdo assistida por IA, o que pode ajudá-lo a criar conteúdo de e-mail envolvente com mais rapidez.
Observação: para manter a uniformidade na estrutura de seus e-mails, implementamos uma atualização do preenchimento padrão. Agora você pode gerenciar o espaçamento em torno do seu conteúdo. Lembre-se de que as configurações padrão de preenchimento são as seguintes:
Top Padding: 12
Bottom Padding: 12
Left Padding: 24
Right Padding: 24
Como usar o Construtor de e-mails e seu Editor em linha?
Navegue até Marketing > E-mails > Modelos
Aqui você pode criar um novo modelo ou editar um modelo existente.
Navegando na nova interface do usuário
Ao acessar o Construtor de e-mails, você será recebido por uma interface de usuário elegante e intuitiva. Na parte superior, você encontrará uma barra de ferramentas com diferentes funcionalidades:
O botão "Add Elements" permite que você introduza novo conteúdo em seu e-mail, desde texto e imagens até estruturas mais complexas.
A opção "Manage Elements" (Gerenciar elementos) oferece uma visão geral de todos os elementos do seu e-mail, permitindo que você os selecione e ajuste facilmente.
Por fim, a configuração "Appearance" permite controlar o estilo global do seu e-mail, incluindo itens como cor de fundo, divisor, estilo CSS personalizado e formatação para celular.
Essas funcionalidades foram projetadas para lhe dar controle total sobre o design do seu e-mail, desde os componentes individuais até a aparência geral.
Adição de elementos
Clique na guia Add Elements (Adicionar elementos) para arrastar e soltar os layouts na página, de modo que você possa soltar o elemento em qualquer layout existente
Layouts
Veja a seguir uma explicação detalhada de cada layout:
1: Esse layout representa uma estrutura de coluna única. Todo o conteúdo é colocado em uma linha vertical reta. Esse é o layout mais básico e um dos mais comuns usados em e-mails. É ótimo para facilitar a leitura, especialmente em telas menores, como dispositivos móveis.
2: Esse layout corresponde a uma estrutura de duas colunas. O conteúdo de seu e-mail é dividido em duas colunas verticais. Esse layout é ideal para exibir dois grupos de conteúdo lado a lado, como uma imagem e um bloco de texto ou dois artigos de um feed RSS.
1/3: 2/3 e 2/3 : 1/3: Esses layouts representam uma estrutura em que o conteúdo é dividido em duas colunas desiguais. Em 1/3: 2/3, uma coluna ocupa 1/3 da largura e a outra ocupa 2/3. Isso é invertido no layout 2/3: 1/3. Esses layouts são ótimos para destacar uma parte do conteúdo mais do que a outra, como uma imagem e uma descrição que a acompanha, em que a imagem é o foco principal.
1/4: 3/4 e 3/4 : 1/4: Semelhante ao anterior, mas aqui uma coluna ocupa 1/4 do espaço e a outra ocupa 3/4, e vice-versa. Esse layout é útil quando uma parte do conteúdo é significativamente mais importante do que a outra, como um pequeno menu de navegação ao lado de uma grande área de conteúdo.
4: Esse layout refere-se a uma estrutura de quatro colunas. O conteúdo do e-mail é dividido em quatro colunas verticais iguais. Isso é útil para apresentar várias partes de conteúdo de igual importância lado a lado, como uma grade de imagens ou vários artigos de um feed RSS.
Esses layouts oferecem várias maneiras de estruturar e apresentar seu conteúdo, dependendo de suas necessidades específicas e do tipo de e-mail que está enviando. Ao conhecer as diferentes opções, você pode escolher o layout mais eficaz para o seu e-mail.
Para adicionar qualquer um desses elementos ao seu e-mail, arraste-os e solte-os na tela. Quando você selecionar um elemento para edição, o Inline Editor será exibido, oferecendo várias opções para modificar o elemento escolhido de acordo com suas necessidades.
Elementos
Aqui está uma lista abrangente de tipos de conteúdo que você pode adicionar ao seu e-mail:
Texto: Esse elemento versátil pode ser usado para títulos, parágrafos, legendas e muito mais. Com o editor em linha, você pode ajustar todos os aspectos do texto, desde o estilo da fonte até a cor e o alinhamento.
Imagem: Se você quiser incluir fotos, gráficos ou qualquer outro conteúdo visual, o elemento Image é a ferramenta de que você precisa. Você pode carregar imagens diretamente do seu computador ou vinculá-las de uma fonte externa.
Botão: Aprimore a interação do usuário com o elemento Button. Você pode criar um link para uma página da Web, iniciar um download ou acionar qualquer outra ação baseada em cliques.
Observação: Digite o texto que deseja exibir no botão. Por exemplo, você pode usar "Follow Me" para convidar os leitores a seguir um link para sua página de mídia social
Divisor: O elemento Divisor permite que você introduza separações claras entre as diferentes seções do seu e-mail. Personalize a cor, a largura e o estilo de acordo com seu design.
Social: Deseja que os destinatários visitem seus perfis de mídia social? O elemento Social permite incluir facilmente ícones vinculados a várias plataformas de mídia social.
Rodapé: Use o elemento Footer para incluir informações essenciais, como detalhes de contato, endereço da empresa ou links de cancelamento de assinatura.
Código: Precisa de recursos mais avançados? O elemento Code (Código) permite inserir código HTML personalizado diretamente em seu e-mail. É aqui que você insere seu código personalizado. Isso permite que você crie layouts e componentes mais avançados em seu e-mail.
Observação: o bloco Código destina-se a usuários que dominam HTML. Por precaução, recomendamos que você se familiarize com os fundamentos do HTML antes de usar esse recurso. Para obter orientação, você pode achar estes recursos úteis:
Vídeo: Envolva seus destinatários com conteúdo multimídia. Insira um elemento de vídeo e vincule-o ao seu conteúdo de vídeo hospedado.
Carrinho de compras: se você atua no setor de comércio eletrônico, o elemento Carrinho de compras é uma ferramenta útil para incluir detalhes de produtos, preços e links diretos para sua loja on-line. É uma maneira de lembrá-los dos produtos nos quais estão interessados e incentivá-los a finalizar suas compras.
Cabeçalho de RSS: O bloco Cabeçalho de RSS no Construtor de e-mails é uma ferramenta poderosa que permite preencher dinamicamente as tags <channel> do seu RSS Feed em sua campanha de e-mail.
Itens de RSS: Ao lidar com feeds RSS, o elemento "Itens RSS" é uma parte crucial de um Construtor de e-mails em plataformas de marketing por e-mail. Ele funciona essencialmente como um espaço reservado de conteúdo dinâmico que preenche o conteúdo do RSS Feed em sua campanha de e-mail. Os itens de RSS podem variar de postagens de blog, atualizações de notícias, artigos ou qualquer conteúdo publicado acessível por meio de um feed de RSS.
Gerenciamento de texto e formatação
Um editor em linha é uma ferramenta avançada que permite gerenciar facilmente o texto e sua formatação. Quando você destaca qualquer parte do texto, uma série de opções fica disponível no editor.
Você pode alterar o tipo de título.
Selecione uma fonte diferente, ajuste o tamanho da fonte e modifique a cor do texto
E não para por aí: opções de negrito, itálico, sublinhado e tachado também estão disponíveis
Se quiser adicionar um hiperlink ao seu texto, o editor inline permite que você o faça, dando-lhe controle sobre o texto de exibição e o URL de destino
Você também pode ajustar o alinhamento do texto e a altura da linha ou introduzir marcadores em seu texto.
Uso de opções avançadas de edição
O editor em linha também vem equipado com opções avançadas de edição. O recurso "Clear Format" permite remover qualquer formatação existente de uma seção do texto, uma ferramenta útil ao colar texto de fontes externas.
Valores personalizados: Eles dão um toque personalizado aos seus e-mails ao incorporar detalhes específicos do destinatário, como nome ou local. Essa personalização pode aumentar a relevância de seu e-mail para cada destinatário, melhorando assim as taxas de envolvimento.
Links de acionamento: Permitem que os destinatários realizem determinadas ações diretamente no e-mail, como confirmar uma assinatura, cancelar a assinatura ou acessar uma oferta especial. Esses elementos interativos podem impulsionar o envolvimento e aumentar as conversões, simplificando as ações do usuário.
Além disso, o recurso "ContentAI" aproveita a inteligência artificial para ajudar a gerar conteúdo de texto. A ferramenta pode gerar automaticamente conteúdo de texto relevante para você, fornecendo títulos de conteúdo, descrições e palavras-chave.
Gerenciamento de elementos
A função "Gerenciar elementos" oferece controle sobre cada elemento do seu e-mail. A seleção de um elemento nessa seção permite modificar sua visibilidade para diferentes dispositivos - desktop, celular ou ambos.
As configurações de visibilidade permitem controlar como determinados elementos aparecem em diferentes dispositivos. Especificamente, as configurações de "visibilidade para celular" e "visibilidade para desktop" permitem escolher quais elementos do seu e-mail ou página da Web devem ser exibidos quando visualizados em um desktop ou dispositivo móvel.
A visibilidade para celular refere-se à forma como os elementos de seu e-mail ou página da Web são exibidos em dispositivos móveis, como smartphones ou tablets. Considerando os tamanhos menores de tela desses dispositivos, você pode optar por ocultar determinados elementos que não são bem exibidos ou simplificar o conteúdo para facilitar o consumo em dispositivos móveis. Isso também pode envolver a reestruturação ou o redimensionamento de elementos para um layout mais compatível com dispositivos móveis.
A visibilidade para computadores refere-se à forma como os elementos de seu e-mail ou página da Web são visualizados em dispositivos de computador. Como as telas de desktop são maiores e oferecem mais espaço, você pode incluir elementos adicionais que não caberiam bem em uma tela de celular. Além disso, os elementos que exigem ações de passar o mouse, que não são aplicáveis em dispositivos móveis, podem ser exibidos.
Além disso, cada elemento pode ser editado de forma independente, permitindo que você altere suas propriedades.
Você pode remover um elemento da seção "Gerenciar elementos" se ele não se encaixar no seu e-mail.
Sempre que você passar o cursor do mouse e clicar em uma seção, coluna ou elemento na seção Gerenciar elementos, a tela rolará para a seção, coluna ou elemento sobre o qual você está passando o cursor.
Ajuste da aparência e do estilo
A função "Appearance" é o local ideal para ajustar a aparência do seu modelo.
Modelo
Aqui você pode escolher o esquema de cores do seu modelo, carregar uma imagem de fundo e até mesmo definir a largura do conteúdo do seu e-mail.
Botão:
A seção "Button" (Botão) nas configurações de aparência permite projetar e estilizar botões orientados à ação para e-mails interativos e envolventes.
Divisor:
A seção "Divider" (Divisor) nas configurações de aparência permite incorporar linhas personalizadas para estruturar e separar o conteúdo do e-mail.
CSS personalizado:
A seção "Custom CSS" permite adicionar estilos CSS para personalizar ainda mais o layout do e-mail. No entanto, isso requer um bom conhecimento de CSS e suas implicações no design de e-mail. O CSS em e-mails funciona de forma ligeiramente diferente do que no design da Web devido à variedade de clientes de e-mail e seus recursos de renderização.
Aqui estão alguns recursos que podem ajudá-lo a começar a usar o CSS:
CSS Tricks: https://css-tricks.com/
Esse site fornece uma grande quantidade de informações sobre CSS e como usá-lo de forma eficaz, incluindo muitos artigos específicos sobre o uso de CSS em e-mail.
A Litmus é uma conhecida ferramenta de teste de e-mail, e seu blog apresenta muitos artigos detalhados sobre codificação de e-mail, inclusive CSS.
Revista Smashing: https://www.smashingmagazine.com/2017/01/introduction-building-sending-html-email-for-web-developers/
Uma introdução à criação e ao envio de e-mails em HTML para desenvolvedores da Web: Este guia oferece uma visão geral abrangente de HTML e CSS em e-mails.
Usando CSS: A rede de desenvolvedores da Mozilla é um recurso confiável para desenvolvedores da Web. Este guia explica como usar as propriedades personalizadas do CSS, que podem ser úteis em seu bloco CSS personalizado.
Workshop de design de e-mail: CSS em e-mail: https://emaildesign.beefree.io/css-in-email/
Este guia oferece uma visão geral clara dos conceitos básicos do uso de CSS em e-mail.
Posso enviar um e-mail...: Como o 'Can i use...', mas para e-mail: https://www.caniemail.com/
Um ótimo recurso para verificar quais propriedades CSS e elementos HTML são compatíveis com os principais clientes de e-mail.
Formatação para celular
No mundo de hoje, é importante que seus e-mails tenham boa aparência em todos os dispositivos. Com isso em mente, o Editor em linha do Construtor de e-mails fornece uma seção especial para formatação móvel.
Aqui, você pode especificar quais títulos, parágrafos e botões devem estar visíveis quando o e-mail for visualizado em um dispositivo móvel. Isso garante que seus e-mails sejam otimizados para visualização em computadores e dispositivos móveis.
Práticas recomendadas de configuração de visualização de e-mail para celular:
Ao configurar e-mails para celular, você precisa prestar muita atenção a algumas áreas importantes que contribuem para a usabilidade e a eficácia gerais dos seus e-mails:
Use um layout de coluna única: Os layouts de coluna única funcionam melhor para dispositivos móveis, pois são mais fáceis de serem reduzidos para telas menores. Várias colunas podem ficar desordenadas em uma tela de celular e podem confundir a navegação dos usuários.
Otimize as imagens: Certifique-se de que suas imagens sejam de alta qualidade, mas também mantenha o tamanho do arquivo pequeno para um carregamento rápido. Considere o uso de imagens responsivas que se ajustam automaticamente à tela em que são exibidas. Não se esqueça de incluir texto alternativo para acessibilidade.
Botões amigáveis ao toque: Em dispositivos móveis, é mais provável que suas CTAs sejam tocadas com o dedo do que clicadas com o mouse. Certifique-se de que seus botões sejam grandes o suficiente para serem facilmente tocados - recomenda-se um tamanho mínimo de 44px por 44px.
Limite a quantidade de texto: Em dispositivos móveis, textos longos podem ser assustadores. Seja conciso e divida o texto em partes pequenas e gerenciáveis. Use marcadores e subtítulos para facilitar a leitura.
Use um design de e-mail responsivo: Isso garantirá que seu e-mail se ajustará automaticamente à tela de qualquer dispositivo em que for visualizado.
Visualize e teste: Sempre visualize e teste seus e-mails em diferentes dispositivos e clientes de e-mail para garantir que sejam exibidos corretamente.
Inclua espaço em branco: O espaço em branco não é um espaço desperdiçado. Ele torna seu e-mail mais limpo e mais fácil de ler em uma tela pequena.
Tamanho e estilo da fonte: Mantenha o tamanho da fonte grande o suficiente para ser legível em telas pequenas. Geralmente, recomenda-se um tamanho de 14 para texto e 22 para títulos. Evite fontes sofisticadas que possam ser difíceis de ler.
CTAs claras e concisas: Certifique-se de que sua chamada para ação seja clara, concisa e fácil de encontrar. O melhor lugar para um botão de CTA geralmente é no meio da tela.
Otimize as linhas de assunto e o texto do pré-cabeçalho: Mantenha suas linhas de assunto curtas e atraentes e utilize o texto do pré-cabeçalho para fornecer um resumo ou um teaser do conteúdo do e-mail. Também é uma boa ideia fazer um teste A/B com diferentes versões de linhas de assunto para descobrir o que funciona melhor para o seu público.
Opte por texto simples em vez de imagens: Alguns clientes de e-mail podem não exibir imagens automaticamente. Para garantir que sua mensagem seja transmitida, use texto o máximo possível e use imagens somente quando necessário.
Opção de cancelamento de assinatura: Facilite para os destinatários a opção de cancelar o recebimento de seus e-mails. Isso não é apenas uma exigência legal, mas também melhora a experiência do usuário.
Acessibilidade: Torne seu e-mail acessível a todos. Isso inclui usar fontes maiores, garantir um bom contraste entre o texto e o plano de fundo e incluir texto alternativo para imagens.
Lembre-se de que as práticas recomendadas para a configuração de e-mail móvel podem variar dependendo do seu público específico e do tipo de conteúdo que você está enviando. Sempre teste abordagens diferentes para ver o que funciona melhor para seu público.
Aqui estão alguns recursos que podem ajudar a consolidar ainda mais as práticas recomendadas de design de e-mail móvel:
Design de e-mail móvel Leitura adicional:
Utilização de cores no design de e-mail Leitura adicional:
Otimização de imagens para uso em dispositivos móveis Leitura adicional:
Dicas para design de CTA Leitura adicional:
Melhor uso do espaço Leitura adicional:
Melhor uso da rolagem Leitura adicional:
O teste A/B de e-mails é necessário? Leitura adicional:
Diretrizes de acessibilidade para e-mails Leitura adicional:
Design de e-mail responsivo e compatível com dispositivos móveis Leitura adicional:
Práticas recomendadas de configuração de e-mail móvel Leitura adicional:
Perguntas frequentes
P: Quero testar diferentes elementos de e-mail para ver o que funciona melhor. Como o Construtor de e-mails pode me ajudar?
R: Você pode utilizar o recurso de teste A/B, que é compatível com o Construtor de e-mails. Isso permite que você teste diferentes componentes de e-mail, como linhas de assunto, conteúdo e CTAs, para ver o que repercute no seu público.
P: Sou proprietário de um restaurante e quero informar os clientes sobre os novos itens do menu. Qual modelo devo usar?
R: Use o modelo "Restaurant Generic" (Genérico de restaurante). Ele oferece uma variedade de layouts adequados para a apresentação de novos pratos.
P: Tenho um escritório de advocacia e preciso anunciar novos serviços. Qual modelo é mais adequado para isso?
R: Os modelos "Legal Minds" ou "Justice Law Firm" são úteis. Eles são profissionais e perfeitos para a apresentação de serviços.
P: Gerencio uma organização beneficente. Como posso usar o Construtor de e-mails para solicitar doações?
R: Use os modelos "Helping Hand Charity" ou "Giving Back Foundation" para criar mensagens convincentes sobre sua causa e a importância das doações.
P: Tenho uma clínica de fisioterapia e quero compartilhar dicas de saúde e exercícios com meus clientes. Qual modelo devo usar?
R: Os modelos "Physical Therapy" foram criados para compartilhar dicas de saúde e informações sobre exercícios.
P: Tenho uma empresa de contabilidade e quero enviar boletins informativos com dicas de gerenciamento financeiro. Qual modelo seria mais adequado?
R: Use os modelos "Accurate Accounting Agency" (Agência de contabilidade precisa) ou "Accounting Generic" (Contabilidade genérica). Eles são perfeitos para compartilhar dicas e conselhos financeiros.
P: Gerencio uma agência imobiliária. Como posso usar o Construtor de e-mails para mostrar novas propriedades?
R: Você pode usar qualquer um dos modelos "Real Estate". Cada um deles oferece um layout profissional para a apresentação de propriedades.
P: Tenho um salão de beleza e quero anunciar novos serviços e promoções. Qual modelo devo usar?
R: Os modelos "Radiance Beauty" ou "Hair Salon Generic" seriam perfeitos. Eles foram criados para destacar serviços e ofertas de beleza.
P: Tenho uma agência de viagens e quero promover nossos pacotes de férias. O que você recomendaria?
R: Os modelos "Pinnacle Travel" e "Getaways Travel" foram projetados para exibir pacotes de viagem.
P: Tenho uma clínica odontológica e quero enviar lembretes de check-up. Qual é o melhor modelo para isso?
R: Os modelos "Dentist" foram criados para consultórios odontológicos.
P: Gerencio um estúdio de ioga e quero compartilhar os horários das aulas e dicas de saúde. Qual modelo você sugere?
R: Use qualquer um dos modelos "Yoga Generic" ou "Yoga" numerados. Eles são perfeitos para compartilhar horários de aulas e dicas de saúde.
P: Tenho uma oficina mecânica. Como posso usar o Construtor de e-mails para anunciar nossos serviços e promoções?
R: Você pode usar os modelos "Auto Repair" para promover seus serviços e ofertas.
P: Sou proprietário de uma academia e quero compartilhar dicas de condicionamento físico e horários de aulas com meus clientes. O que você recomendaria?
R: Você deve considerar o uso de qualquer um dos modelos "Gym" (Academia). Eles foram projetados especificamente para conteúdo relacionado a condicionamento físico.
P: Dirijo um centro de bem-estar holístico e quero compartilhar dicas de bem-estar com meus clientes. Qual modelo devo usar?
R: O modelo "Holistic Wellness Image Layer Generic" seria uma excelente opção. Ele é perfeito para dicas e conselhos de bem-estar.
P: Tenho uma clínica médica e quero anunciar novos tratamentos e promoções. Qual é o melhor modelo para isso?
R: Os modelos "MedSpa" foram criados para mostrar tratamentos e ofertas em um Medspa.
P: Tenho um serviço de paisagismo. Como posso usar o Construtor de e-mails para mostrar meu trabalho?
R: O modelo "Landscaping Image Layer Generic 1" oferece um layout profissional para apresentar trabalhos e serviços de paisagismo.
P: Dirijo uma empresa de pontuação de crédito e quero compartilhar conselhos financeiros. Qual modelo seria o mais adequado?
R: Use os modelos "Credit Score" (Pontuação de crédito). Eles foram especialmente projetados para compartilhar conselhos e dicas financeiras.
P: Gerencio uma empresa de energia solar. Qual modelo devo usar para anunciar novos produtos e serviços?
R: Os modelos "Solar Generic" (Solar genérico) ou "Solar" numerado são ideais para apresentar produtos e serviços de energia solar.
P: Sou proprietário de um escritório de advocacia e quero enviar boletins informativos com orientações jurídicas. Qual modelo seria mais adequado?
R: Você pode usar os modelos "Attorney Generic" (Advogado genérico) ou "Legal Minds" (Mentes jurídicas) para compartilhar orientações e atualizações jurídicas.
P: Tenho uma academia de escalada. Como posso usar o Construtor de e-mails para promover nossas aulas de treinamento?
R: Use o modelo "Peak Climbing" para apresentar suas aulas de escalada e sessões de treinamento.
P: Administro um abrigo para animais de estimação e quero enviar atualizações sobre os animais disponíveis para adoção. Qual modelo devo usar?
R: Os modelos "Dog Shelter" (Abrigo de cães) e "Cat's Cradle" (Berço de gatos) são perfeitos para promover animais de estimação disponíveis para adoção.