Newsletters são uma excelente forma de se comunicar com seus clientes. No entanto, enviar apenas e-mails em texto simples não é suficiente. Com a crescente competição pela atenção na caixa de entrada, destacar suas mensagens não é apenas uma questão de bom design – é uma necessidade.
Pensando nisso, a edrone desenvolveu o Editor Drag 'n' Drop: uma ferramenta que facilita a criação de newsletters bonitas e eficientes, de forma prática e rápida.
Assista ao vídeo
Como criar o design de uma mensagem no Editor Drag n' Drop:
Interface do Editor
Vamos conhecer os principais elementos do editor, organizados de cima para baixo e da esquerda para a direita:
Menu suspenso – Tipo de mensagem: Se o cenário incluir mais de um e-mail (como em Produtos Recomendados), você poderá escolher qual mensagem deseja editar.
Informações do remetente e linha de assunto: Essas opções são bastante intuitivas. Você terá escolhido o remetente em Configurações, e aqui é onde você escreve o assunto da mensagem. Lembre-se de definir uma versão para cada variante (idioma e tipo de mensagem).
Botões de ação: Aqui você pode escolher entre as cinco ações abaixo:
Salvar: salva o seu progresso.
Copiar: copia todo o conteúdo.
Colar: cola o conteúdo copiado.
Limpar: apaga tudo para você recomeçar do zero.Botão Templates: O Editor Drag 'n' Drop oferece vários templates pré-definidos que servem como ponto de partida para a criação dos seus e-mails. Para facilitar ainda mais, templates específicos serão carregados automaticamente para cada cenário.
Se desejar começar do zero, clique no botão “Limpar” na barra de navegação do editor. Para restaurar o template anterior, clique em “Desfazer”. Para selecionar outro modelo, abra a lista de templates clicando no botão “Templates”.Selecionar uma mensagem: O editor salva suas mensagens recentes, permitindo que você retorne a uma versão anterior da mensagem sempre que precisar!
NOTA: Você poderá criar um novo template personalizado, salvá-lo e utilizá-lo no novo criador Newsletter Hub!
Na parte inferior do Editor Drag 'n' Drop, você também encontrará os botões Desfazer e Refazer em formato de setas. É também nesse local que você pode visualizar como o seu e-mail aparecerá em mobile, desktop e modo escuro!
Menu: No lado direito da tela, você verá uma coluna cinza com cinco botões. É aqui que você selecionará e editará os elementos visuais dos seus e-mails. Eles são discutidos em detalhes abaixo.
Área de Trabalho: No centro da sua tela está o espaço onde você realmente construirá seu e-mail.
Conteúdo
Nesta seção, você encontrará todos os elementos que pode adicionar aos seus e-mails. Enquanto a seção Blocos (veja abaixo) define a estrutura do seu e-mail, aqui você define o que vai dentro dela: textos, imagens, botões, etc.
Para adicionar cada elemento ao seu e-mail, basta clicar, arrastar e soltar. É simples assim!
Sua primeira opção ao editar cada elemento é escolher entre as abas Desktop e Mobile. Todo e-mail criado com o Editor Drag 'n' Drop será 100% responsivo, mas você pode criar uma variante específica do e-mail para cada tipo de dispositivo.
Viu aqueles ícones ao lado do texto, título, imagem e botão? Esses elementos contam com o auxílio de IA! Você pode saber mais sobre isso aqui!
Colunas
Essa é a mesma opção que você encontrará na seção Blocos. Ao usar este elemento, você estará essencialmente criando uma nova linha no seu e-mail, onde poderá definir a estrutura de colunas dessa linha. Consulte a seção Blocos para saber mais.
Texto
Use esse elemento para adicionar uma caixa de texto.
Menu flutuante: Ao editar uma caixa de texto, um menu flutuante aparecerá com diversas opções:
Fonte e tamanho da fonte
Negrito, itálico, sublinhado, tachado, sobrescrito, subscrito
Emojis
Alinhamento à esquerda, centralizado ou à direita
Listas ordenadas e não ordenadas
Cor do texto e cor do plano de fundo
Orientação do texto (da esquerda para a direita ou da direita para a esquerda)
Links
Tags dinâmicas (são elementos variáveis usados para personalizar o conteúdo. Por exemplo, a tag dinâmica "primeiro nome" aparecerá como |FIRST_NAME| enquanto você estiver criando o e-mail, mas será exibida com o nome real do destinatário quando ele receber o e-mail – desde que essa informação esteja na sua base de dados, é claro).
COMO ADICIONAR CUPONS
Para adicionar cupons de desconto aos seus e-mails, use a tag dinâmica *|COUPON|* dentro de uma caixa de texto. Lembre-se de que, ao usar essa tag, será necessário fazer o upload de um arquivo CSV com os cupons na seção CUPONS do seu cenário.
Aba TEXTO: Aqui, você pode alterar a cor do texto, o alinhamento (esquerda, centro ou direita) e a altura da linha.
Aba LINKS: Nesta opção, você pode definir se os links dessa caixa de texto específica herdarão o estilo do corpo do e-mail inteiro (veja a seção Corpo abaixo).
Aba GERAL: Aqui, você pode alterar o padding (espaçamento interno) da caixa de texto, que é a distância entre as bordas do elemento e o conteúdo. Se o botão "Mais Opções" estiver desativado, o padding será alterado simultaneamente para todos os lados. Se ativado, você poderá ajustar o padding de cada lado individualmente.
Aba DESIGN RESPONSIVO: Ao ativar a opção “Ocultar no Desktop”, a caixa de texto aparecerá apenas na versão mobile do e-mail.
Título
Use este elemento para adicionar títulos e subtítulos ao seu e-mail. Ele é diferente do elemento "Texto" porque cria uma hierarquia de informação distinta, especificando que o texto é um título, e não um parágrafo.
Isso é especialmente útil para a versão texto puro e HTML do seu e-mail, que pode ser exibida caso as imagens não carreguem, a conexão do assinante esteja fraca ou para usuários com deficiências visuais que utilizam leitores de tela.
Menu flutuante: Ao editar um título, um menu flutuante aparecerá com algumas opções:
Negrito, itálico, sublinhado, tachado, sobrescrito, subscrito
Links
Emojis
Tags dinâmicas (são elementos variáveis usados para personalizar o conteúdo. Por exemplo, a tag dinâmica "primeiro nome" aparecerá como |FIRST_NAME| enquanto você cria o e-mail, mas será exibida com o nome real do destinatário quando ele receber o e-mail – desde que essa informação esteja na sua base de dados, é claro).
Aba TEXTO: Aqui, você pode alterar algumas propriedades do título:
Tipo de Título: H1 é a hierarquia mais alta; H4, a mais baixa.
Fonte
Tamanho da Fonte
Cor
Alinhamento do Texto (esquerda, centro ou direita)
Altura da Linha
Aba LINKS: Nesta opção, você pode definir se os links deste título específico herdarão o estilo do corpo do e-mail (veja a seção Corpo abaixo).
Aba GERAL: Aqui, você pode ajustar o padding (espaçamento interno) do título, que é a distância entre as bordas do elemento e seu conteúdo. Se o botão "Mais Opções" estiver desativado, o padding será ajustado simultaneamente para todos os lados. Se ativado, você poderá configurar o padding de cada lado individualmente.
Aba DESIGN RESPONSIVO: Ao ativar a opção "Ocultar no Desktop", esse título será exibido apenas na versão mobile do e-mail.
Imagem
Use este elemento para adicionar uma imagem (estática ou GIF).
Aba IMAGEM: Aqui você fará o upload da sua imagem. Ao clicar no botão Aplicar Efeitos & Mais, você abrirá o editor de imagem integrado, que oferece várias opções de edição, como aplicar filtros, cortar, adicionar texto e muito mais. Quando você adicionar uma imagem, haverá algumas opções:
Largura automática: ao selecionar essa opção, sua imagem será tão larga quanto possível. Quando essa opção estiver desativada, você poderá escolher a largura da imagem como uma porcentagem da largura total.
Alinhar: alinhar a imagem à esquerda, ao centro ou à direita.
Texto alternativo: este é o texto que os navegadores de seus assinantes mostrarão se a imagem falhar ao carregar, ou em uma versão de texto simples ou HTML do seu e-mail. Isso também é importante para pessoas com deficiência visual que utilizam leitores de tela. Recomendamos sempre incluir uma breve descrição de cada imagem aqui.
Aba AÇÃO: Aqui você pode escolher o que deve acontecer quando seus leitores clicarem na sua imagem e qual deve ser essa ação. Clique no menu suspenso no canto superior direito desta seção para encontrar as opções:
Abrir site: esta é a opção mais comum, onde você basicamente faz com que a imagem atue como um botão. Basta inserir o link que você quer que seus leitores abram e escolher se deseja que o link abra na "Mesma Guia" ou em uma "Nova Guia".
Assinar: escolha essa opção para transformar sua imagem em um botão de "assinar".
Cancelar inscrição: escolha essa opção para transformar sua imagem em um botão de "cancelar inscrição".
Confirmação de gênero (masculino / feminino / recusou passar / outro): escolha essa opção para transformar sua imagem em botões de confirmação de gênero.
Link de referenciador / Código de referenciador / Link para confirmar a participação no programa de afiliados: essas opções são específicas para e-mails de programas de afiliados. Clique aqui para mais informações.
Aba GERAL: Aqui você pode alterar o padding (espaçamento interno) da sua imagem, que é a distância entre as bordas do elemento e seu conteúdo. Se o botão "Mais Opções" estiver desativado, você alterará o padding de todos os lados simultaneamente. Se ativado, você poderá mudar o padding de cada lado individualmente.
Aba DESIGN RESPONSIVO: Ao ativar a opção "Ocultar no Desktop", essa imagem aparecerá apenas na versão mobile do seu e-mail.
Banner
O Banner é uma nova ferramenta no editor DESIGN (Unlayer) e está disponível em todos os tipos de engajamento. Ela amplia as capacidades da imagem padrão ao adicionar efeitos automaticamente à imagem carregada.
TEXTO: Escrevemos duas linhas de texto na imagem. O texto é automaticamente escolhido com base no Tipo de Engajamento e no Idioma do Agente. Ele pode ser alterado manualmente.
EFEITOS: Após o upload da imagem, adicionamos automaticamente efeitos gráficos.
Botão
Botões são fundamentais no marketing por e-mail! Veja o que você pode fazer com eles no Editor Drag 'n' Drop.
ABA AÇÃO: Aqui você pode escolher o que deve acontecer quando seus leitores clicarem no botão e qual ação deve ser executada. Clique no menu suspenso no canto superior direito desta seção para encontrar estas opções:
Abrir website: Esta é a opção mais comum. Basta inserir o link que você deseja que seus leitores abram e escolher se quer que o link seja aberto na "Mesma Aba" ou em uma "Nova Aba".
Inscrever-se: Escolha esta opção para criar um botão de "inscrição".
Cancelar inscrição: Escolha esta opção para criar um botão de "cancelamento de inscrição".
Confirmação de gênero (masculino / feminino / recusou-se a passar / outro): Escolha esta opção para criar botões de confirmação de gênero.
Link de referência / Código de referência / Confirmar participação no programa de afiliados: Essas opções são específicas para e-mails de programas de afiliados. Clique aqui para mais informações.
ABA OPÇÕES DO BOTÃO: Aqui você pode alterar a cor do texto do botão, a cor de fundo (cor do botão), a largura (tamanho total ou percentual) e o alinhamento (esquerda, centro ou direita).
ABA ESPAÇAMENTO: Aqui você pode alterar a altura da linha do botão, o preenchimento (distância entre a borda do botão e o texto), a borda (tipo, largura, cor) e os cantos arredondados.
ABA GERAL: Aqui você pode alterar o preenchimento do botão, que é a distância entre as bordas do elemento e seu conteúdo (ou seja, o espaço ao redor do botão). Se o interruptor "Mais Opções" estiver desligado, você alterará o preenchimento de todos os lados simultaneamente. Se você ativar o "Mais Opções", poderá alterar o preenchimento de cada lado individualmente.
ABA DESIGN RESPONSIVO: Ao ativar o interruptor "Ocultar no Desktop", esse botão aparecerá apenas na versão móvel do seu e-mail.
Divisor
Este elemento cria uma linha na largura do contêiner. Use-o para separar seções do seu e-mail.
ABA LINHA: Aqui você pode alterar a largura do divisor, o tipo da linha (sólida, pontilhada, tracejada), a altura da linha (em pixels), a cor da linha e o alinhamento (esquerda, centro ou direita).
ABA GERAL: Aqui você pode alterar o preenchimento do divisor, que é a distância entre as bordas do elemento e seu conteúdo. Se o interruptor "Mais Opções" estiver desligado, você alterará o preenchimento de todos os lados simultaneamente. Se você ativar o "Mais Opções", poderá alterar o preenchimento de cada lado individualmente.
ABA DESIGN RESPONSIVO: Ao ativar o interruptor "Ocultar no Desktop", esse divisor aparecerá apenas na versão móvel do seu e-mail.
HTML
Um dos maiores benefícios de usar o Editor Drag 'n' Drop é não precisar codificar nada, mas às vezes você pode querer incluir um elemento HTML. Sem problemas! Veja o que você pode fazer com ele.
ABA HTML: Aqui é onde você insere seu código HTML.
ABA GERAL: Aqui você pode alterar o preenchimento do seu elemento HTML, que é a distância entre o elemento e seu conteúdo (ou seja, o espaço fora do elemento HTML). Se o interruptor "Mais Opções" estiver desligado, você alterará o preenchimento de todos os lados simultaneamente. Se você ativar o "Mais Opções", poderá alterar o preenchimento de cada lado individualmente.
ABA DESIGN RESPONSIVO: Ao ativar o interruptor "Ocultar no Desktop", esse elemento HTML aparecerá apenas na versão móvel do seu e-mail.
Menu
Você pode adicionar um menu aos seus e-mails, que funciona de maneira semelhante a um menu em um site.
ABA ITENS DO MENU: Aqui você escreverá o nome de cada item e escolherá o Tipo de Ação. Normalmente, será "abrir site", o que requer uma URL e a escolha entre abrir o link na mesma aba ou em uma nova. Você também pode alterar a posição de cada item clicando e arrastando o botão no canto superior esquerdo do item.
ABA ESTILOS: Aqui você pode alterar as propriedades visuais do seu menu:
Família da Fonte
Tamanho da Fonte
Cor da Fonte
Cor do Link
Alinhamento (esquerda, centro ou direita)
Layout (horizontal ou vertical)
Separador: um caractere ou símbolo separando cada item do menu (por exemplo, |)
Preenchimento: a distância entre a borda de cada item e seu conteúdo
ABA GERAL: Aqui você pode alterar o preenchimento do seu menu, que é a distância entre o elemento e seu conteúdo. Se o interruptor "Mais Opções" estiver desligado, você alterará o preenchimento de todos os lados simultaneamente. Se você ativar o "Mais Opções", poderá alterar o preenchimento de cada lado individualmente.
ABA DESIGN RESPONSIVO: Ao ativar o interruptor "Ocultar no Desktop", esse menu aparecerá apenas na versão móvel do seu e-mail.
Social
Você pode querer direcionar seus leitores do e-mail para seus canais de mídia social. Isso é facilmente alcançado com o elemento Social.
ABA ÍCONES: Aqui você escolherá quais botões de redes sociais deseja adicionar, sua aparência (círculo, arredondado ou quadrado / colorido ou preto e branco) e URLs.
ABA GERAL: Aqui você pode alterar o preenchimento do seu menu social, que é a distância entre o elemento e seu conteúdo. Se o interruptor "Mais Opções" estiver desligado, você alterará o preenchimento de todos os lados simultaneamente. Se você ativar o "Mais Opções", poderá alterar o preenchimento de cada lado individualmente.
ABA DESIGN RESPONSIVO: Ao ativar o interruptor "Ocultar no Desktop", esse menu social aparecerá apenas na versão móvel do seu e-mail.
Timer
O elemento Timer é perfeito para gerar um senso de urgência. Ele cria uma contagem regressiva com base nas configurações abaixo:
ABA COUNTDOWN: Aqui você configurará as principais propriedades do seu timer
Hora de Término: Quando o timer irá acabar. Após esse momento, quando alguém abrir seu e-mail, o timer mostrará 00:00:00:00.
Fuso Horário: O fuso horário da sua hora de término.
Idioma: Em qual idioma suas etiquetas estarão (escolha entre 16 opções).
Etiquetas: Se essa opção estiver ativada, seu timer terá etiquetas para Dias, Horas, Minutos e Segundos.
Cores de Fundo, Dígitos e Etiquetas.
Fonte e Tamanho da Fonte dos Dígitos.
**Fonte e Tamanho da Fonte das Etiquetas.
ABA IMAGEM: Seu timer terá algumas das mesmas propriedades das imagens:
Auto largura: Se essa opção estiver ativa, seu timer ocupará toda a largura do seu contêiner. Se desativada, você poderá escolher a largura.
Alinhamento: (esquerda, centro ou direita).
Texto Alternativo: Consulte as configurações de imagem acima para mais informações.
ABA AÇÃO: Aqui você pode basicamente transformar seu Timer em um Botão. Consulte as configurações do botão acima para mais informações.
ABA GERAL: Aqui você pode alterar o preenchimento do seu timer, que é a distância entre o elemento e seu conteúdo. Se o interruptor "Mais Opções" estiver desligado, você alterará o preenchimento de todos os lados simultaneamente. Se ativar "Mais Opções", poderá alterar o preenchimento de cada lado individualmente.
ABA DESIGN RESPONSIVO: Ao ativar o interruptor "Ocultar no Desktop", esse timer aparecerá apenas na versão móvel do seu e-mail.
Vídeo
Adicionar um vídeo aos seus e-mails é tão simples quanto colar uma URL em uma caixa de texto!
NOTA: Seu vídeo não será diretamente incorporado ao e-mail, o que significa que não será possível reproduzi-lo dentro do e-mail. O editor Drag 'n' Drop cria automaticamente uma miniatura do seu vídeo e transforma-a em um botão, que redirecionará seus leitores para o link que você usou.
ABA VÍDEO: Cole a URL do seu vídeo (YouTube ou Vimeo) aqui.
ABA GERAL: Aqui você pode alterar o preenchimento do seu vídeo, que é a distância entre o elemento e seu conteúdo. Se o interruptor "Mais Opções" estiver desligado, você alterará o preenchimento de todos os lados simultaneamente. Se ativar "Mais Opções", poderá alterar o preenchimento de cada lado individualmente.
ABA DESIGN RESPONSIVO: Ao atiifvar o interruptor "Ocultar no Desktop", esse vídeo aparecerá apenas na versão móvel do seu e-mail.
Itens Dinâmicos: Produtos Mais Vendidos
A edrone permite que você adicione itens dinâmicos aos seus e-mails. Usando o elemento "Produtos Mais Vendidos", você pode exibir recomendações personalizadas de produtos para seus leitores. O elemento "Produtos Mais Vendidos" está disponível para todos os tipos de engajamento.
ABA PRODUTOS MAIS VENDIDOS: Aqui você escolherá quantos produtos deseja exibir, suas categorias em seu site e se deseja ou não usar recomendações de fallback (recomendações de produtos padrão caso não haja bestsellers para aquela categoria).
ABA PROPRIEDADES DO PRODUTO: Aqui você escolherá se deseja exibir os nomes dos produtos e/ou adicionar um botão de call to action (chamada para ação). Note que, se escolher adicionar uma chamada para ação, uma nova aba aparecerá abaixo (PERSONALIZAR CHAMADA PARA AÇÃO), e terá as mesmas opções de configuração dos botões regulares. Veja as configurações de Botão acima para mais informações.
ABA PERSONALIZAR NOME: Aqui você pode alterar a fonte do nome do produto, o tamanho da fonte, a cor, o alinhamento (esquerda, centro ou direita) e escolher entre títulos curtos e longos.
ABA GERAL: Aqui você pode alterar o preenchimento, que é a distância entre o elemento e seu conteúdo. Se o interruptor "Mais Opções" estiver desligado, você alterará o preenchimento de todos os lados simultaneamente. Se ativar "Mais Opções", poderá alterar o preenchimento de cada lado individualmente.
ABA DESIGN RESPONSIVO: Ao ativar o interruptor "Ocultar no Desktop", essas recomendações de produtos aparecerão apenas na versão móvel do seu e-mail.
Itens Dinâmicos: Visualizados, Abandonados, Comprados, Recomendados, Observados
Este elemento funciona de maneira semelhante ao "Produtos Mais Vendidos", mas seu nome e função variam de acordo com cada cenário:
ASSINATURA DE NEWSLETTER, SMS NEWSLETTER, ANIVERSÁRIO, ASSINATURA DE CHAT: Este elemento não aparecerá.
RECUPERAR CLIENTES, NEWSLETTER DINÂMICA, PERSONALIZADO, PRODUTOS VISUALIZADOS, NEWSLETTER A/B, CATEGORIAS DE NEWSLETTER: Produtos visualizados
PROGRAMA DE FIDELIDADE, PÓS-VENDA: Produtos comprados
RECUPERAR CARRINHOS ABANDONADOS: Produtos abandonados
CROSS-SELLING, RECOMENDAR: Produtos recomendados
LISTA DE DESEJOS: Produtos observados
ABA PRODUTOS VISUALIZADOS / ABANDONADOS / COMPRADOS / RECOMENDADOS / OBSERVADOS: Aqui você escolherá quantos produtos deseja exibir e se deseja ou não usar recomendações de fallback.
ABA PROPRIEDADES DO PRODUTO: Aqui você escolherá se deseja exibir os nomes dos produtos e/ou adicionar um botão de call to action (chamada para ação). Note que, se escolher adicionar uma chamada para ação, uma nova aba aparecerá abaixo (PERSONALIZAR CHAMADA PARA AÇÃO), e terá as mesmas opções de configuração dos botões regulares. Veja as configurações de Botão acima para mais informações.
ABA PERSONALIZAR NOME: Aqui você pode alterar a fonte do nome do produto, o tamanho da fonte, a cor, o alinhamento (esquerda, centro ou direita) e escolher entre títulos curtos e longos.
ABA GERAL: Aqui você pode alterar o preenchimento, que é a distância entre o elemento e seu conteúdo. Se o interruptor "Mais Opções" estiver desligado, você alterará o preenchimento de todos os lados simultaneamente. Se ativar "Mais Opções", poderá alterar o preenchimento de cada lado individualmente.
ABA DESIGN RESPONSIVO: Ao ativar o interruptor "Ocultar no Desktop", essas recomendações de produtos aparecerão apenas na versão móvel do seu e-mail.
Fallback para Produtos Mais Vendidos
Para aumentar as conversões gerais dos e-mails, queremos apresentar mais produtos para o usuário. Como resultado, dentro de elementos dinâmicos como:
Produtos Visualizados (desativado por padrão)
Carrinhos Abandonados (desativado por padrão)
Produtos Recomendados (ativado por padrão)
Agora existe uma opção chamada "Fallback para Produtos Mais Vendidos":
Quando essa opção estiver ativada e não houver produtos suficientes para apresentar no e-mail, produtos adicionais (Produtos Mais Vendidos) serão adicionados automaticamente à grade de produtos. Isso evitará espaços vazios no e-mail e, esperamos, aumentará as vendas!
Observe que uma etiqueta MELHOR VENDA é adicionada para diferenciar essas sugestões de fallback das outras. As cores podem ser personalizadas para se adequar à sua identidade visual.
Blocos
Cada linha de elementos é chamada de bloco. Você pode ter quantos elementos quiser dentro de um bloco. Lembre-se de que quanto mais elementos em um bloco, maior a chance de, especialmente em dispositivos móveis, esses elementos se tornarem menos legíveis.
Nesta seção, você pode escolher entre diferentes estruturas de coluna e editar seu e-mail no nível do bloco. Clique em uma linha para visualizar as opções.
Desktop ou Mobile
Sua primeira opção ao editar uma linha é escolher entre as abas Desktop e Mobile. Cada e-mail projetado usando o Editor Drag 'n' Drop será 100% responsivo, mas você pode criar uma variante específica do seu e-mail para cada tipo de dispositivo.
Propriedades da Coluna
Aqui, você poderá alterar as propriedades de cada coluna individualmente. Selecione cada coluna logo abaixo do cabeçalho PROPRIEDADES DA COLUNA.
Cor de Fundo: altere a cor de fundo da coluna. Observe que isso mudará apenas o fundo dessa coluna específica, e não a da coluna ao lado. Se desejar alterar a cor de fundo de ambas as colunas simultaneamente, vá para a opção "Cor de Fundo do Conteúdo" em Propriedades da Linha (abaixo).
Espaçamento (Padding): esse é o espaço interno entre as bordas da coluna e seu conteúdo. Se a opção "Mais Opções" estiver desligada, você alterará o espaçamento de todos os lados simultaneamente. Se ativar "Mais Opções", poderá alterar o espaçamento de cada lado individualmente.
Borda: aqui você pode alterar o tipo de borda da coluna (sólida, pontilhada ou tracejada), largura (em pixels) e cor. Ao contrário da cor de fundo, não é possível editar as bordas de todas as colunas simultaneamente.
Propriedades da Linha
Cor de Fundo: aqui você pode alterar a cor de fundo da linha, sem afetar a cor de fundo das colunas. Em outras palavras, você alterará a cor do espaço vazio em ambos os lados do seu e-mail, alinhado com a altura da linha.
Cor de Fundo do Conteúdo: aqui você pode alterar a cor de fundo de todas as colunas de uma vez.
Imagem de Fundo: você pode fazer o upload de uma imagem para o fundo de cada linha. Assim como na cor de fundo, isso será limitado à altura da linha. Você tem três opções para sua imagem:
Largura Completa: ao ativar essa opção, sua imagem se espalhará por toda a largura do espaço vazio em ambos os lados do seu e-mail. Ao desativá-la, sua imagem será o fundo do conteúdo, limitado à altura da linha.
Repetir: ao ativar essa opção, sua imagem será repetida automaticamente, horizontal e verticalmente. Isso é especialmente útil para criar padrões de fundo. Usando imagens pequenas repetidas em um padrão, o tamanho do arquivo do seu e-mail será muito menor do que usar uma única imagem em largura total.
Centralizar: ao ativar essa opção, sua imagem será centralizada.
Espaçamento (Padding): o espaço interno entre as bordas da linha e seu conteúdo. Se a opção "Mais Opções" estiver desligada, você alterará o espaçamento de todos os lados simultaneamente. Se ativar "Mais Opções", poderá alterar o espaçamento de cada lado individualmente.
Design Responsivo
Ao ativar a opção "Ocultar no Desktop", essa linha inteira aparecerá apenas na versão mobile do seu e-mail.
DICA 01: Se você usar os mesmos blocos frequentemente (por exemplo, uma combinação de título + imagem + botão), ou em campanhas diferentes, é possível salvar um bloco e reutilizá-lo. Clique aqui para ver uma gravação de como fazer isso.
Dica 02: Blocos são especialmente úteis ao criar e-mails com estruturas mais complexas. Clique aqui para ver uma gravação mostrando como usar blocos para criar um rodapé responsivo.
Corpo
Nesta seção, você configurará alguns dos aspectos mais gerais do seu e-mail.
Cor do texto: A cor de todo o seu texto.
Cor de fundo: A cor do espaço negativo ao redor da sua newsletter.
Largura do conteúdo: A largura da sua newsletter em telas de desktop. Por padrão, é configurada para 600 pixels, mas você pode alterá-la como preferir.
Alinhamento do conteúdo: Você pode escolher entre alinhar à esquerda ou alinhar ao centro. Por padrão, está configurado para alinhar ao centro.
Família de fontes: Aqui você pode escolher entre mais de 25 fontes.
Links: Nesta opção, você pode alterar a cor dos seus links e decidir se eles terão sublinhado ou não. Essas são configurações gerais que podem ser ajustadas individualmente no elemento "Texto" da seção Conteúdo.
Imagens
Nesta seção, você pode escolher entre milhões de imagens de alta qualidade gratuitas. Basta buscar o que você precisa na barra de ferramentas e selecionar as imagens que mais gostar.
Upload
Esta seção é onde você fará o upload das suas próprias imagens e GIFs. Uma das características mais interessantes do novo Editor Drag 'n' Drop é que todas as suas imagens serão salvas na sua biblioteca de mídia.
Você pode arrastar e soltar diretamente da sua biblioteca de mídia para o seu e-mail. Também é possível excluir qualquer imagem ou GIF que não precisar mais clicando no botão ⋯ e selecionando "Excluir".
Precisa de ajuda adicional?
Se você tiver mais alguma dúvida sobre o Editor Drag 'n' Drop, não hesite em entrar em contato conosco pelo e-mail hello@edrone.me.