Construtor de e-mails

Crie e-mails bonitos facilmente com nosso construtor de arrastar e soltar

O construtor de e-mails permite que você crie designs de e-mail de alta qualidade e responsivos. Você pode abrir o construtor na aba E-mail do construtor de campanhas, clicando em Criar com o construtor.

Entendendo o construtor: configurações, linhas e conteúdo

Uma das maiores forças do construtor de arrastar e soltar é que ele oferece aos profissionais criativos uma flexibilidade de design tremenda.

Isso é alcançado separando os conceitos de:

• Configurações: que se aplicam a toda a mensagem.

• Linhas: linhas de conteúdo na mensagem, que podem ser adicionadas, removidas, copiadas e movidas.

• Conteúdo: blocos individuais de conteúdo: imagens, texto, botões, etc., que também podem ser adicionados, removidos, copiados e movidos.

Configurações

Essas são as configurações gerais da mensagem, que são herdadas pelas linhas e blocos de conteúdo, o que é muito útil para construir uma mensagem coerente rapidamente.

É possível configurar os seguintes elementos:

• Largura da área de conteúdo: defina a largura de exibição da sua área de conteúdo. Isso é usado para limitar a exibição de mensagens quando o dispositivo tem uma tela maior que a largura. Você pode pensar nisso como uma largura máxima para essa área de conteúdo. Em dispositivos pequenos, isso será ignorado.

• Alinhamento das áreas de conteúdo: selecione se o conteúdo está centralizado ou alinhado à esquerda

• Cor de fundo: a cor padrão de fundo da mensagem. Você poderá sobrescrevê-lo em qualquer linha, coluna ou bloco de conteúdo ao definir propriedades para esses elementos.

• Cor de fundo da área de conteúdo: a cor padrão de fundo para a área de conteúdo, que é a área para a qual você definiu a largura acima.

• Fonte padrão: a família de fontes padrão que todos os elementos de conteúdo da mensagem irão herdar. É possível sobrescrever essa seleção no nível do bloco de conteúdo.

• Cor do link: a cor padrão do link que todos os links herdarão a menos que você a substitua para elementos individuais.

Linhas

Esta aba permite que você selecione diferentes tipos de linhas para inserir na mensagem.

Linhas são unidades estruturais que definem a composição horizontal de uma seção da mensagem usando colunas. Você pode usar de uma a seis colunas dentro de uma linha.

Usar mais de uma coluna permite que você coloque diferentes elementos de conteúdo lado a lado.

Você pode adicionar qualquer número de linhas às suas mensagens (arrastando e soltando), independentemente do modelo que escolheu no início.

Cada linha tem suas próprias configurações, o que te dá uma flexibilidade que antes só era alcançada com um modelo de e-mail criado do zero com HTML e CSS. Por exemplo, você pode selecionar uma cor de fundo para toda a linha, apenas para a área da mensagem ou uma coluna específica dentro dela.

Conteúdo

Esta seção inclui uma série de peças que representam os diferentes tipos de conteúdo que você pode usar em sua mensagem. Mais estarão disponíveis no futuro.

Para usá-los, basta arrastar um para dentro de uma coluna, ele vai se ajustar automaticamente para a largura da coluna.

Cada bloco de conteúdo tem suas próprias configurações, como controle granular sobre o preenchimento (midding). O painel do lado direito muda automaticamente para um painel de propriedades para o elemento de conteúdo selecionado.

Seleção de linhas e blocos de conteúdo

Dependendo da área que você quer editar, talvez seja necessário selecionar um bloco de conteúdo ou linha.

Interagindo com um bloco de conteúdo

Se você apenas passar o mouse sobre um bloco de conteúdo (uma imagem no exemplo abaixo), o construtor mostrará um ícone de movimento que permite mover esse bloco para outro lugar.

No entanto, se você clicar no bloco de conteúdo, o esboço do conteúdo será destacado e dois botões aparecerão permitindo que você exclua o bloco ou crie uma cópia. Além disso, o menu lateral direito mostrará a seção de propriedades daquele bloco de conteúdo, onde você pode modificar uma série de propriedades para esse elemento.

Interagindo com uma fileira

Ao passar o mouse sobre uma área livre de conteúdo (ou seja, a linha onde o conteúdo está localizado) será novamente destacado o contorno de toda a linha e aparecerá o ícone para mover a linha dentro do design do e-mail.

Assim que você clica em uma linha, o construtor desmarca qualquer bloco de conteúdo que já tenha sido selecionado, seleciona a linha e mostra dois ícones que permitem remover ou clonar toda a linha e todo o seu conteúdo. Nesse caso, o menu à direita exibirá uma série de propriedades que se aplicam àquela coluna dentro da linha (que pode conter mais de uma coluna). Condições de exibição podem ser aplicadas a qualquer linha.

Editando as propriedades de uma linha

Primeiro, passe o mouse sobre uma área da linha que não tenha conteúdo de mensagem e clique nela para selecioná-la.

O lado direito do construtor vai mudar para a aba de linhas , que mostra algumas propriedades que se aplicam a toda a linha (por exemplo, cor de fundo, imagem de fundo, preenchimento de volume, etc.)...

... e alguns que se aplicam a cada coluna da linha. Uma linha pode conter várias colunas, e você pode controlar várias configurações independentemente para cada coluna.

Quando estiver satisfeito com as configurações de cada linha, salve clicando em para reutilizar para modelos futuros

Visualizando o e-mail

Para gerar uma prévia do e-mail, no topo clique em Prévia. Isso permite que você veja uma prévia de como o e-mail ficaria nas versões desktop e mobile. Ativar o controle deslizante de pré-visualização do modo escuro permite que os usuários simulem a experiência de renderizar designs em dispositivos com o modo escuro ativado.

Pré-visualização de texto

Clique em Visualização de Texto para ver uma versão apenas de texto do seu e-mail.

Recursos adicionais

Temos uma seção completa de documentação sobre como trabalhar com recursos específicos dentro do construtor:

• Usando o gerenciador de arquivos

• Procure fotos gratuitas de banco de imagens para usar nos seus e-mails

• Adicionando uma imagem de fundo aos seus e-mails

• Editando propriedades da imagem

• Uso de imagens dinâmicas e personalizadas

• Adicionando vídeo ao seu e-mail

• Trabalhando com HTML personalizado

• Salvando linhas de conteúdo para uso futuro

• Ocultando conteúdo em dispositivos móveis