Ir para conteúdo principal
Editor Drag 'n' Drop

Edite o design das suas newsletters e engajamentos

Wioleta Jednaka avatar
Escrito por Wioleta Jednaka
Atualizado há mais de um mês

A edrone está sempre buscando maneiras de lhe ajudar a extrair o máximo possível de resultados das suas newsletters, e isso envolve criar e-mails atrativos e eficientes com facilidade. Pois é exatamente isto que o novo Editor Drag 'n' Drop faz por você!


Primeiros passos

Em ENGAJAMENTOS ou NEWSLETTERS o editor Drag 'n' Drop estará disponível na etapa DESIGN.

NOTA: Se você for um cliente mais recente, o editor Drag 'n' Drop irá abrir por padrão. Se você já tiver usado o editor antigo, poderá escolher entre ambos. Neste caso, se desejar mudar para o editor Drag 'n' Drop, clique no botão NEW DRAG AND DROP EDITOR que estará logo abaixo do seu editor atual. Mas atenção: ao mudar para o editor Drag 'n' Drop, você perderá o design do e-mail anterior!


Interface do Usuário

Vamos dar uma olhada geral em cada elemento que você encontra na sua tela ao abrir o editor, indo de cima para baixo e da esquerda para a direita:

  • Abas de idiomas: Se você estiver configurando uma campanha Multi-idiomas, é aqui que você irá selecionar cada idioma. Note que, para cada idioma, será necessário criar um e-mail diferente. O que recomendamos nestes casos é criar o e-mail em um idioma e, depois que estiver pronto, copiar e colar (veja abaixo) para o outro idioma.

  • Menu drop-down com o tipo de mensagem: Se o seu cenário envolver múltiplos e-mails (por exemplo, o Programa "Indique um Amigo"), é aqui que você irá escolher qual mensagem irá criar. Novamente, cada tipo de mensagem envolverá a criação de um novo e-mail.

  • Remetente e Assunto: Estes campos são autoexplicativos. Você deverá ter escolhido o remetente na etapa anterior, e é aqui que você escreverá o assunto do e-mail. Novamente, um para cada variante (tipo de mensagem e idioma).

  • Actions: aqui você tem quatro opções

    • Salvar: grava o seu trabalho (você pode sair da página e continuar depois)

    • Copiar: copia tudo (e-mail inteiro)

    • Colar: cola tudo (e-mail inteiro)

    • Limpar: limpa tudo (você terá que recomeçar do zero)

    Na parte inferior do Editor Drag 'n' Drop você também encontrará botões de desfazer e refazer na forma de setas.

  • Botão de Templates: O Editor Drag 'n' Drop vem com uma biblioteca de templates que você pode usar como ponto de partida para criar os seus e-mails. Para ficar ainda mais fácil e rápido criar e-mails incríveis, templates específicos estarão pré-selecionados em cada cenário de engajamento. Se você preferir começar do zero, é só clicar no botão Clear. Para recuperar o template apagado, clique no botão Undo. E para selecionar um novo template, clique no botão Templates para abrir a biblioteca de templates.

NOTA: No momento, não é possível criar um novo template personalizado.

  • Menu: Ao lado esquerdo da tela, você verá uma coluna cinza com cinco botões. Aqui estão as ferramentas que você usará para construir e editar seu e-mail. Elas serão apresentadas em detalhes a seguir.

  • Área de trabalo: No centro da tela você encontra o espaço onde irá de fato construir o e-mail.


Conteúdo

Nesta seção, você verá todos os elementos que pode explorar nos seus e-mails. Enquanto a seção Blocos (mais adiante) forma a estrutura dos e-mails, aqui você irá definir o que vai dentro deles: textos, imagens, botões, etc.

Para adicionar um elemento ao seu e-mail basta clicar, arrastar, e soltar. Moleza!

Sua primeira opção ao editar cada elemento será escolher entre as abas Desktop e Mobile. Todos os e-mails criados no editor Drag 'n' Drop são 100% responsivos, mas você pode criar variantes para cada tipo de dispositivo se quiser.

Colunas

Esta é a mesma opção que você encontrará na seção Blocos. Usando este elemento, você estará adicionando uma nova fileira ao seu e-mail, na qual você então poderá determinar uma estrutura de colunas. Veja a seção Blocos para saber mais.

Texto

Use este elemento para adicionar uma caixa de texto.

  • Menu flutuante: ao editar uma caixa de texto, um menu flutuante vai aparecer com várias opções:

    • Fonte e tamanho do texto

    • Bold, itálico, sublinhado, tachado, sobrescrito, subscrito

    • Emojis

    • Alinhar à esquerda, centro ou direita

    • Listas numeradas e não numeradas

    • Cor do texto e do destaque

    • Orientação do texto (esquerda para direita ou direita para esquerda)

    • Links

    • Marcadores (chamados de Merge Tags em inglês, estes são elementos variáveis usados para personalizar conteúdo em texto. Por exemplo, o marcador *|FIRST_NAME|* vai aparecer desta forma enquanto você constrói seu e-mail, mas quando for enviado, aparecerá como o primeiro nome da pessoa que recebeu o e-mail – desde que esta informação esteja configurada corretamente em sua base de contatos, é claro. Obs: Ao utilizar esse marcador é importante não adicionar nenhuma pontuação sem antes dar um espaço para não desconfigurar).

COMO ADICIONAR CUPONS

Para incluir cupons em seus emails, use o marcador *|COUPON|* dentro de uma caixa de texto. Note que, ao usar este marcador, será necessário fazer o upload de um arquivo CSV com os cupons na seção CUPONS do cenário em questão.

  • Aba TEXTO: aqui você pode alterar a cor, alinhamento (esquerda, centro ou direita) e o espaçamento entre linhas do texto.

  • Aba LINKS: nesta opção você pode escolher se deseja que os links nesta caixa de texto específica sigam o estilo definido na seção Corpo (veja abaixo).

  • Aba GERAL: aqui você pode alterar o espaçamento do container (padding), que é a distância entre os limites do elemento e o seu conteúdo. Caso a chave "Mais opções" esteja desligada, você mudará o espaçamento de todos os lados simultaneamente. Caso ative a chave, poderá alterar cada lado individualmente.

  • Aba DESIGN RECEPTIVO: ao ativar a opção "Ocultar na área de trabalho", o elemento inteiro vai 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. Este elemento é diferente do "Texto" porque cria uma hierarquia de informações diferente, especificando que se trata de um título em vez de um parágrafo.

Isto é especialmente útil para as versões em texto ou HTML do seu e-mail, que podem aparecer aos usuários quando suas imagens não carregarem corretamente, quando a conexão do usuário for fraca demais, ou para usuários que têm deficiências visuais e usam leitores de tela.

  • Menu flutuante: ao editar um título, um menu flutuante vai aparecer com algumas opções:

    • Bold, itálico, sublinhado, tachado, sobrescrito, subscrito

    • Links

    • Emojis

    • Marcadores (chamados de Merge Tags em inglês, estes são elementos variáveis usados para personalizar conteúdo em texto. Por exemplo, o marcador *|FIRST_NAME|* vai aparecer desta forma enquanto você constrói seu e-mail, mas quando for enviado, aparecerá como o primeiro nome da pessoa que recebeu o e-mail – desde que esta informação esteja configurada corretamente em sua base de contatos, é claro. Obs: Ao utilizar esse marcador é importante não adicionar nenhuma pontuação sem antes dar um espaço para não desconfigurar).

  • Aba TEXTO: aqui você pode alterar algumas propriedades do título:

    • Tipo de Título: H1 é o mais alto na hierarquia, H4 o mais baixo.

    • Fonte

    • Tamanho da fonte

    • Cor

    • Alinhamento do Texto (esquerda, centro ou direita)

    • Espaçamento entre linhas

  • Aba LINKS: nesta opção você pode escolher se deseja que os links deste título sigam o estilo definido na seção Corpo (veja abaixo).

  • Aba GERAL: aqui você pode alterar o espaçamento do container (padding), que é a distância entre os limites do elemento e o seu conteúdo. Caso a chave "Mais opções" esteja desligada, você mudará o espaçamento de todos os lados simultaneamente. Caso ative a chave, poderá alterar cada lado individualmente.

  • Aba DESIGN RECEPTIVO: ao ativar a opção "Ocultar na área de trabalho", o elemento inteiro vai aparecer apenas na versão mobile do e-mail.

Imagem

Use este elemento para adicionar imagens (estáticas ou GIFs).

Qual é o tamanho ideal das imagens? As imagens são redimensionadas ao serem inseridas no editor drag 'n' drop e é possível fazer ajustes como zoom. Recomenda-se que a largura seja até 720px e o peso não ultrapasse 1Mb. Não há especificação de altura pois o editor ajusta esse aspecto automaticamente.

  • Aba IMAGEM: aqui é onde você fará o upload da sua imagem. Ao clicar no botão Aplicar efeitos e mais, você abrirá o editor nativo de imagens onde poderá aplicar filtros, cortar, adicionar textos e muito mais. Ao adicionar imagens, você terá algumas opções:

    • Largura automática: ao ativar esta opção, sua imagem ficará tão larga quanto a estrutura onde estiver inserida permitir. Ao desativá-la, você poderá escolher a largura da imagem em valor percentual, sendo 100% a largura da estrutura onde a imagem está inserida.

    • Alinhar: alinhar imagem à esquerda, centro ou direita.

    • Texto alternativo: este texto irá aparecer quando a imagem não carregar, e na versão em texto ou em HTML do seu e-mail. O texto alternativo também é importante para as pessoas com deficiências visuais que usam leitores de tela. Recomendamos sempre incluir uma breve descrição da imagem neste campo.

  • Aba AÇÃO: aqui você pode escolher o que deseja que aconteça quando alguém clicar na imagem. Clique no menu drop-down para encontrar estas opções:

    • Abrir site: esta é a opção mais comum, em que sua imagem basicamente atuará como um botão. Insira o link que você deseja, e opte entre abrir na "Mesma Aba", ou em uma "Nova Aba".

    • Assinar: escolha esta opção se quiser que a sua imagem sirva como um botão de confirmação de inscrição na newsletter.

    • Unsubscribe: escolha esta opção se quiser que a sua imagem sirva como um botão de descadastramento.

    • Gender confirmation (male / female / refused to pass / other): escolha estas opções para transformar sua imagem em botões de confirmação de gênero.

    • Referrer link / Referrer code / Confirm Refer A Friend Participation link: estas opções são específicas para e-mails de programas de indicação. Clique aqui para saber mais.

  • Aba GERAL: aqui você pode alterar o espaçamento do container (padding), que é a distância entre os limites do elemento e o seu conteúdo. Caso a chave "Mais opções" esteja desligada, você mudará o espaçamento de todos os lados simultaneamente. Caso ative a chave, poderá alterar cada lado individualmente.

  • Aba DESIGN RECEPTIVO: ao ativar a opção "Ocultar na área de trabalho", o elemento inteiro vai aparecer apenas na versão mobile do e-mail.

Banner

Esse é um recurso novo do editor que está disponível tanto em seção DESIGN de engajamentos ou newsletter. Esse recurso aprimora a imagem padrão ao adicionar automaticamente efeitos ao arquivo carregado.

Click on BANNER

  • TEXTO: Quando a função é usada, duas linhas de texto ficam visíveis na imagem. O texto é selecionado automaticamente com base no tipo de cenário e no idioma do agente. Isso pode ser alterado manualmente:

    Click on Heading…

  • EFEITOS: quando uma imagem é carregada, os efeitos gráficos são adicionados automaticamente. O efeito disponível no momento é um gradiente, mas a lista será expandida no futuro:

    Click on Image…

Botão

Botões são fundamentais para e-mail marketing! Eis o que você pode fazer com eles no editor Drag 'n' Drop:

  • ACTION tab: aqui você pode escolher o que deseja que aconteça quando alguém clicar no botão. Clique no menu drop-down para encontrar estas opções:

    • Abrir site: esta é a opção mais comum. Insira o link que você deseja, e opte entre abrir na "Mesma Aba", ou em uma "Nova Aba".

    • Assinar: escolha esta opção se quiser que o botão sirva para confirmar a inscrição na newsletter.

    • Unsubscribe: escolha esta opção se quiser que o botão sirva para descadastramento da newsletter.

    • Gender confirmation (male / female / refused to pass / other): escolha estas opções para obter botões de confirmação de gênero.

    • Referrer link / Referrer code / Confirm Refer A Friend Participation link: estas opções são específicas para e-mails de programas de indicação. Clique aqui para saber mais.

  • Aba OPÇÕES DE BOTÃO: aqui você pode alterar a cor do texto, a cor do botão, a largura do botão (automática ou porcentagem) e o alinhamento (esquerda, centro ou direita).

  • Aba ESPAÇAMENTO: aqui você pode alterar o espaçamento entre linhas, o espaçamento do botão (distância entre as bordas do botão e o texto), borda do botão (tipo, espessura, cor), e se deseja bordas arredondadas.

  • Aba GERAL: aqui você pode alterar o espaçamento do container (padding), que é a distância entre os limites do elemento e o seu conteúdo. Caso a chave "Mais opções" esteja desligada, você mudará o espaçamento de todos os lados simultaneamente. Caso ative a chave, poderá alterar cada lado individualmente.

  • Aba DESIGN RECEPTIVO: ao ativar a opção "Ocultar na área de trabalho", o elemento inteiro vai aparecer apenas na versão mobile do e-mail.

Divisor

Este elemento cria uma linha ao longo de toda a largura do elemento onde estiver inserido. Use para separar os conteúdos do seu e-mail.

  • Aba LINHA: aqui você pode alterar a largura do seu divisor, tipo de linha (sólida, pontuada, tracejada), cor da linha, e alinhamento (esquerda, centro ou direita).

  • Aba GERAL: aqui você pode alterar o espaçamento do container (padding), que é a distância entre os limites do elemento e o seu conteúdo. Caso a chave "Mais opções" esteja desligada, você mudará o espaçamento de todos os lados simultaneamente. Caso ative a chave, poderá alterar cada lado individualmente.

  • Aba DESIGN RECEPTIVO: ao ativar a opção "Ocultar na área de trabalho", o elemento inteiro vai aparecer apenas na versão mobile do e-mail.

HTML

Uma das maiores vantagens de se usar o editor Drag 'n' Drop é não ter que escrever uma única linha de código, mas às vezes você pode querer incluir um elemento HTML. Sem problemas!

  • Aba HTML: é aqui que você inclui seu código HTML.

  • Aba GERAL: aqui você pode alterar o espaçamento do container (padding), que é a distância entre os limites do container e o seu conteúdo. Caso a chave "Mais opções" esteja desligada, você mudará o espaçamento de todos os lados simultaneamente. Caso ative a chave, poderá alterar cada lado individualmente.

  • Aba DESIGN RECEPTIVO: ao ativar a opção "Ocultar na área de trabalho", o elemento inteiro vai aparecer apenas na versão mobile do e-mail.

Menu

Você pode incluir um menu em seus e-mails, que funcionarão da mesma forma que o menu em um site.

  • Aba ITENS DO MENU: aqui é onde você irá escrever o nome de cada item do menu, e seu tipo de ação. Geralmente será "abrir site", o que exigirá apenas a URL e a escolha entre abrir em uma nova aba, ou na mesma. Você também pode alterar a posição de cada item clicando e arrastando o botão localizado no canto superior esquerdo do item.

  • Aba ESTILOS: aqui você pode alterar as propriedades visuais do seu menu:

    • Fonte

    • Tamanho do texto

    • Cor do texto

    • 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, " | ")

    • Espaçamento: a distância entre as bordas do elemento e seu conteúdo

  • Aba GERAL: aqui você pode alterar o espaçamento do container (padding), que é a distância entre os limites do elemento e o seu conteúdo. Caso a chave "Mais opções" esteja desligada, você mudará o espaçamento de todos os lados simultaneamente. Caso ative a chave, poderá alterar cada lado individualmente.

  • Aba DESIGN RECEPTIVO: ao ativar a opção "Ocultar na área de trabalho", o elemento inteiro vai aparecer apenas na versão mobile do e-mail.

Social

Você também pode querer levar seus leitores a suas redes sociais, o que é fácil de configurar usando o elemento Social.

  • Aba ÍCONES: aqui você irá escolher quais redes sociais deseja incluir, a aparência dos botões (círculo, arredondado ou quadrado / colorido, preto ou branco) e suas respectivas URLs.

  • Aba GERAL: aqui você pode alterar o espaçamento do container (padding), que é a distância entre os limites do elemento e o seu conteúdo. Caso a chave "Mais opções" esteja desligada, você mudará o espaçamento de todos os lados simultaneamente. Caso ative a chave, poderá alterar cada lado individualmente.

  • Aba DESIGN RECEPTIVO: ao ativar a opção "Ocultar na área de trabalho", o elemento inteiro vai aparecer apenas na versão mobile do e-mail.

Timer

O Timer é o elemento perfeito para gerar uma sensação de urgência. Ele é baseado em uma contagem regressiva que você pode configurar através das variáveis abaixo:

  • Aba CONTAGEM REGRESSIVA: é aqui que você irá configurar as propriedades principais do seu Timer:

    • Hora final: o momento em que a contagem regressiva termina. Após este momento, quando alguém abrir o e-mail, o Timer estará em 00:00:00:00

    • Fuso horário

    • Idioma: o idioma em que suas legendas estarão (você pode escolher entre 16 opções, entre elas Português)

    • Labels: se esta opção estiver ativa, seu Timer terá legendas para Dias, Horas, Minutos e Segundos

    • Cor de fundo, dos dígitos e das legendas

    • Fonte e tamanho dos dígitos

    • Fonte e tamanho das legendas

  • Aba IMAGEM: seu Timer terá algumas das mesmas propriedades que as imagens têm:

    • Largura automática: se esta opção estiver ativa, seu Timer será tão largo quanto o elemento permitir. Se desativada, você poderá escolher uma largura (%)

    • Alinhamento (esquerda, centro ou direita)

    • Texto alternativo: veja as configurações de Imagens para saber mais

  • Aba AÇÃO: aqui você pode basicamente transformar seu Timer em um botão. Verifique as configurações de Botões para saber mais.

  • Aba GERAL: aqui você pode alterar o espaçamento do container (padding), que é a distância entre os limites do elemento e o seu conteúdo. Caso a chave "Mais opções" esteja desligada, você mudará o espaçamento de todos os lados simultaneamente. Caso ative a chave, poderá alterar cada lado individualmente.

  • Aba DESIGN RECEPTIVO: ao ativar a opção "Ocultar na área de trabalho", o elemento inteiro vai aparecer apenas na versão mobile do e-mail.

Vídeo

NOTA: seu vídeo não estará diretamente "embedado" no e-mail, ou seja, não será possível assisti-lo diretamente no e-mail. O Editor Drag 'n' Drop criará uma miniatura do vídeo automaticamente, e a transformará em um botão que leva para o local do vídeo (o link usado na configuração).

  • Aba VÍDEO: cole aqui a URL do seu vídeo (Youtube ou Vimeo)

  • Aba GERAL: aqui você pode alterar o espaçamento do container (padding), que é a distância entre os limites do elemento e o seu conteúdo. Caso a chave "Mais opções" esteja desligada, você mudará o espaçamento de todos os lados simultaneamente. Caso ative a chave, poderá alterar cada lado individualmente.

  • Aba DESIGN RECEPTIVO: ao ativar a opção "Ocultar na área de trabalho", o elemento inteiro vai aparecer apenas na versão mobile do e-mail.

Itens Dinâmicos: Bestsellers

A edrone permite incluir itens dinâmicos em seus e-mails. Usando o elemento Bestsellers, você pode apresentar recomendações de produto personalizadas aos seus leitores. O elemento Bestsellers está disponível para todos os engajamentos.

  • Aba BESTSELLERS: aqui você escolherá quantos produtos quer apresentar, suas categorias no site, e se você deseja usar as recomendações padrão caso não haja uma recomendação personalizada disponível para aquela categoria ou cliente específicos (fallback on recommendations)

  • Aba PRODUCT PROPERTIES: aqui você definirá se deseja apresentar os nomes dos produtos e/ou um botão com call to action. Note que, se optar por incluir um botão com call to action, uma nova aba (CUSTOMIZE CALL TO ACTION) abrirá logo abaixo desta, e apresentará as mesmas possibilidades de configuração que o elemento Botão. Confira as configurações de Botões para saber mais.

  • Aba CUSTOMIZE NAME: aqui você poderá alterar a fonte, tamanho, cor e alinhamento (esquerda, centro ou direita) dos nomes dos produtos, e escolher se prefere títulos curtos (botão "Short titles" ativado) ou longos (desativado).

  • Aba GERAL: aqui você pode alterar o espaçamento do container (padding), que é a distância entre os limites do elemento e o seu conteúdo. Caso a chave "Mais opções" esteja desligada, você mudará o espaçamento de todos os lados simultaneamente. Caso ative a chave, poderá alterar cada lado individualmente.

  • Aba DESIGN RECEPTIVO: ao ativar a opção "Ocultar na área de trabalho", o elemento inteiro vai aparecer apenas na versão mobile do e-mail.

Itens dinâmicos: Viewed, Abandoned, Purchased, Recommended, Observed

Este elemento funciona da mesma forma que os Bestsellers, mas os nomes e funções variam conforme cada cenário de engajamento:

  • INSCRIÇÃO DE NEWSLETTER, NEWSLETTER POR SMS, BIRTHDAY, CHAT SUBSCRIPTION: Este elemento não irá aparecer

  • RECUPERAÇÃO DE CLIENTES, NEWSLETTER DINÂMICA, NEWSLETTER CUSTOMIZADA, PRODUTOS VISUALIZADOS, NEWSLETTER A/B, NEWSLETTER POR CATEGORIA: Viewed products

  • PROGRAMA DE FIDELIDADE, PÓS-VENDA: Purchased products

  • RECUPERAÇÃO DE CARRINHOS ABANDONADOS: Abandoned products

  • CROSS-SELLING, PRODUTOS RECOMENDADOS: Recommended products

  • LISTA DE DESEJOS: Observed products

  • Aba VIEWED / ABANDONED / PURCHASED / RECOMMENDED / OBSERVED PRODUCTS: aqui você escolherá quantos produtos deseja apresentar, e se deseja usar as recomendações padrão caso não haja produtos visualizados a apresentar para aquele usuário específico.

  • Aba PRODUCT PROPERTIES: aqui você definirá se deseja apresentar os nomes dos produtos e/ou um botão com call to action. Note que, se optar por incluir um botão com call to action, uma nova aba (CUSTOMIZE CALL TO ACTION) abrirá logo abaixo desta, e apresentará as mesmas possibilidades de configuração que o elemento Botão. Confira as configurações de Botões para saber mais.

  • Aba CUSTOMIZE NAME: aqui você poderá alterar a fonte, tamanho, cor e alinhamento (esquerda, centro ou direita) dos nomes dos produtos, e escolher se prefere títulos curtos (botão "Short titles" ativado) ou longos (desativado).

  • Aba GERAL: aqui você pode alterar o espaçamento do container (padding), que é a distância entre os limites do elemento e o seu conteúdo. Caso a chave "Mais opções" esteja desligada, você mudará o espaçamento de todos os lados simultaneamente. Caso ative a chave, poderá alterar cada lado individualmente.

  • Aba DESIGN RECEPTIVO: ao ativar a opção "Ocultar na área de trabalho", o elemento inteiro vai aparecer apenas na versão mobile do e-mail.

Fallback to Bestsellers

Para aumentar as conversões vindas dos e-mails, queremos mostrar mais produtos para cada usuário. Por isso, dentro de elementos dinâmicos como:

  • Viewed products (fallback desativado por padrão)

  • Abandoned Carts (fallback desativado por padrão)

  • Recommended products (fallback ativado por padrão)

Agora você encontrará uma opção chamada “Fallback to Bestsellers”:

Quando esta opção estiver ativada e não houver produtos suficientes para serem apresentados no e-mail, produtos adicionais (Bestsellers) serão incluídos automaticamente no grid de produtos. Isso evitará espaços vazios dentro do e-mail e, esperamos, aumentará as vendas!

Note que uma etiqueta BESTSELLER é adicionada para diferentes estas sugestões de "fallback" das demais. As cores podem ser customizadas para se adequar à identidade visual de cada loja.


Blocos

Cada linha de elementos é chamada de bloco. Você pode ter quantos elementos quiser dentro de um bloco. Lembre-se que quanto mais elementos houver em um bloco, maior será a chance de que, principalmente em dispositivos móveis, esses elementos sejam menos legíveis em dispositivos móveis.

Nesta seção, você poderá escolher diferentes estruturas de colunas do seu e-mail e editar as propriedades de cada bloco. Clique em uma fileira para visualizar as opções:

Desktop ou Mobile

Sua primeira opção ao editar cada fileira será escolher entre as abas Desktop e Mobile. Todos os e-mails criados no editor Drag 'n' Drop são 100% responsivos, mas você pode criar variantes para cada tipo de dispositivo se quiser.

Propriedades da Coluna

Aqui você poderá alterar as propriedades de cada coluna individualmente. Selecione cada coluna logo abaixo do título da aba.

  • Cor de Fundo: altera a cor de fundo da coluna. Note que isto irá alterar apenas o fundo daquela coluna específica, e não da coluna ao lado. Se você deseja alterar a cor de fundo de ambas as colunas simultaneamente, vá até a opção "Cor de fundo do conteúdo" (abaixo).

  • Espaçamento: esta é a distância entre os limites da coluna e o seu conteúdo. Caso a chave "Mais opções" esteja desligada, você mudará o espaçamento de todos os lados simultaneamente. Caso ative a chave, poderá alterar cada lado individualmente.

  • Borda: aqui você poderá alterar o tipo de borda (sólida, pontuada ou tracejada), sua espessura (em pixels) e cor. Ao contrário da "Cor de Fundo", não é possível alterar as bordas das colunas simultaneamente.

Propriedades da Linha

  • Cor de Fundo: aqui você poderá alterar a cor de fundo da fileira, sem afetar a cor de fundo das colunas. Em outras palavras, você estará alterando o espaço negativo em ambos os lados do seu e-mail, limitado à altura da fileira.

  • Cor de fundo do conteúdo: aqui você poderá alterar a cor de fundo de todas as colunas simultaneamente.

  • Imagem de Fundo: você pode fazer o upload de uma imagem para usar como o fundo de cada fileira. Assim como a "Cor de Fundo", a imagem estará limitada à altura da fileira. Você terá três opções para a imagem:

    • 100% de largura: ao ativar esta opção, sua imagem será tão larga quanto o espaço negativo em ambos os lados do seu e-mail. Ao desativá-la, sua imagem se tornará o fundo das colunas, limitada pela altura da fileira.

    • Repetir: ao ativar esta opção, sua imagem se repetirá automaticamente nos eixos horizontal e vertical. Isto é especialmente útil para criar padrões. Usando pequenas imagens repetidas, o peso do seu e-mail (em kb) será muito menor do que usando uma grande imagem com o padrão.

    • Centralizar: ao ativar esta opção, sua imagem se alinhará ao centro do e-mail

  • Espaçamento: esta é a distância entre os limites da fileira e o seu conteúdo. Caso a chave "Mais opções" esteja desligada, você mudará o espaçamento de todos os lados simultaneamente. Caso ative a chave, poderá alterar cada lado individualmente.

Design Receptivo

Ao ativar a opção "Ocultar na área de trabalho", a fileira inteira vai aparecer apenas na versão mobile do e-mail.

Dica 01: Caso você use os mesmos blocos (por exemplo, uma combinação de título + imagem + botão) com frequência, 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 para criar e-mails com estruturas mais complexas. Clique aqui para ver uma gravação de como usar os blocos para criar um rodapé responsivo.


Corpo

Nesta seção, você irá configurar aspectos mais gerais do seu e-mail.

  • Cor de fundo: a cor do espaço negativo em volta do seu e-mail.

  • Largura do conteúdo: a largura da sua newsletter (em pixels) na versão desktop. O valor padrão é 600 px, mas você pode alterar para o valor que preferir.

  • Alinhamento do Conteúdo: Você pode optar por alinhar sua newsletter à esquerda ou ao centro.

  • Fonte: Aqui você pode escolher entre 25 fontes.

  • LINKS: Aqui você pode alterar a cor dos seus links, e se eles estarão sublinhados ou não. Estas são configurações gerais, que podem ser alteradas individualmente no elemento Texto da seção Conteúdo.


Imagens

Nesta seção, você poderá escolher dentre milhões de fotos stock gratuitas e de alta qualidade. É só pesquisar o que você precisa e escolher as fotos que preferir.


Uploads

Nesta seção, você poderá fazer o upload de suas imagens e GIFs. Uma das funcionalidades mais interessantes do editor Drag 'n' Drop é a biblioteca de mídia, onde todas as suas imagens ficarão armazenadas.

Para incluir as imagens no seu e-mail, basta clicar e arrastar. Também é possível deletar qualquer imagem que você não precisar mais. Basta clicar no botão ⋯ e escolher "Apagar".


Precisa de mais ajuda?

Se você tem mais dúvidas sobre o Editor Drag 'n' Drop, fique à vontade para entrar em contato conosco pelo e-mail hello@edrone.me


Isto respondeu à sua pergunta?