Criar template com o editor Wake Experience – Wake Experience

O Editor Wake Experience é uma ferramenta desenvolvida para facilitar a criação de e-mails marketing de forma personalizada, dinâmica e responsiva. Com uma interface drag and drop, é possível criar layouts adaptáveis para desktop e mobile, otimizando a performance das campanhas e melhorando a experiência do cliente.

Principais Funcionalidades

Editor Responsivo

Controle de visualização e edição para desktop e mobile
Layouts que se adaptam automaticamente ao dispositivo do cliente

Layouts Flexíveis

Estruturas pré-definidas com até 6 colunas
Personalização avançada de alinhamento e espaçamento

Elementos Visuais

Texto: hiperlinks para preview, opt-out e CTAs
Imagens: JPEG, PNG e GIF, com editor interno
Vídeos: URLs do YouTube ou Vimeo
Botões (CTA): formatos, cores e links personalizáveis
Redes Sociais: ícones com links configuráveis

Integração com XML

Inclusão automática de produtos, preços e imagens
Ideal para campanhas dinâmicas com dados sempre atualizados

Como usar o editor

1.Acessar o editor

No painel, vá em Campanhas, seleciona E-mail e em como quer citar a sua campanha, selecione Com o editor de e-mails Wake experience.

Ou acesse Campanhas > Templates, clique em Criar com o Editor e selecione a opção Template em branco para criar um template do zero ou selecione um dos templates existentes para editá-lo.

2.Montar o Layout (Drag and Drop)

Utilize o recurso de arrastar e soltar para adicionar conteúdos como textos, imagens, botões e outros elementos.
3.Preencha os conteúdos escolhidos
Título: Digite o título desejado e utilize as opções de edição de texto para personalizá-lo.

Em Title Properties, você pode ajustar tamanho, fonte, espessura, cor do texto, cor do link, alinhamento, altura, espaçamento entre letras, direção do texto e configurar as opções do bloco. Não se esqueça de definir a visualização para desktop e mobile.
Parágrafo: Insira o texto e utilize as opções de formatação para adaptá-lo ao design do e-mail.

Em Configurações do Parágrafo, você pode ajustar a fonte, espessura, tamanho, cor do texto e dos links, alinhamento, espaçamento entre parágrafos, altura da linha, espaçamento entre letras e direção do texto. Além disso, é possível configurar as opções do bloco para melhor disposição do conteúdo. Certifique-se de ajustar a visualização para desktop e mobile.
Listagem: Insira o nome da listagem e utilize as opções de personalização para ajustar o formato do texto.

Em Configurações da Lista, você pode definir o tipo e estilo da lista, além de configurar a fonte, espessura, tamanho, cor do texto e dos links, alinhamento, espaçamento entre itens, recuo de itens alinhados, altura da linha, espaçamento entre letras e direção do texto. Também é possível ajustar as opções do bloco para melhor disposição do conteúdo. Não se esqueça de configurar a visualização para desktop e mobile.
Imagem: Arraste e solte o arquivo ou clique em Procurar para selecionar a imagem desejada.

Ao procurar, você pode fazer upload de uma imagem do seu computador ou escolher uma foto gratuita do nosso banco de imagens.
Botão: Defina um nome para o botão e utilize os recursos de personalização para ajustar o texto.

Em Configurações do Botão, você pode configurar o tipo de link, largura, fonte, espessura da fonte, tamanho da fonte, cor de fundo, cor do texto, alinhamento, espaçamento entre letras, curvatura, preenchimento, borda e direção do texto. Além disso, é possível ajustar as opções do bloco para melhor organização do conteúdo. Certifique-se de configurar corretamente para desktop e mobile.
Tabela: Insira os dados que devem compor a tabela e utilize os recursos de formatação de texto para personalizá-los.

Em Configurações da Tabela, você pode ajustar a quantidade de colunas e linhas, borda, cor de fundo, ativar ou não linhas listradas e linha de cabeçalho, além de definir espessura e tamanho da fonte, cor do texto, cor do link, alinhamento, altura da linha, espaçamento entre letras e direção do texto. Também é possível configurar as opções do bloco para melhor organização do conteúdo. Certifique-se de ajustar corretamente para desktop e mobile.
Divisor: No menu Configurações do Divisor, você pode definir se o elemento será transparente ou visível, ajustar a espessura da linha, largura, alinhamento e personalizar as opções do bloco para melhor organização do conteúdo. Certifique-se de configurar corretamente a visualização para desktop e mobile.
Redes Sociais: No menu Configurações de Redes Sociais, insira a URL de cada rede e personalize a exibição conforme necessário. Você pode adicionar novos ícones, ajustar o alinhamento, definir o espaçamento entre os ícones e configurar as opções do bloco para melhor organização do conteúdo. Certifique-se de ajustar corretamente a visualização para desktop e mobile.
HTML: Utilize código HTML personalizado para adicionar conteúdos avançados e personalizações extras ao e-mail.
Vídeo: Insira vídeos através de links do YouTube ou Vimeo para tornar o e-mail mais dinâmico e interativo.
Ícones: Em Configurações de Ícones, você pode alterar a imagem dos ícones, aplicar efeitos visuais, adicionar ou excluir ícones e personalizar sua exibição. Além disso, é possível ajustar a fonte, espessura e tamanho do texto, definir a cor do texto, alinhamento, espaçamento entre letras, tamanho dos ícones e o espaçamento entre eles para melhor organização do conteúdo.
Menu: No menu Configurações de Menu, você pode adicionar itens preenchendo o texto, URL e título, além de definir onde o link será aberto. Também é possível personalizar a fonte, espessura e tamanho do texto, ajustar a cor do texto e do link, definir alinhamento, espaçamento entre letras, separador, formato hambúrguer e a distância entre os itens para melhor organização do conteúdo.
Texto: Insira textos complementares e personalize-os conforme necessário. No menu Configurações de Texto, você pode personalizar a cor do texto e do link, além de ajustar a altura da linha e o espaçamento entre letras para melhor apresentação do conteúdo.

Configurar HTML Dinâmico

Inclua variáveis do XML para personalização
Ajuste tamanhos, margens e paddings

Pré-visualizar e Ajustar

Teste o layout em desktop e mobile
Utilize a visualização mobile para garantir responsividade

Finalizar e Enviar

Envie um teste para validação
Ative o disparo para as audiências configuradas

Melhorias – Janeiro de 2025

Visualização Mobile Aprimorada

Pré-visualização e ajustes direto no editor
Melhor controle de alinhamento e distribuição

Novas Configurações de Conteúdo

Parágrafo: Insira blocos de texto com opções de formatação para descrições detalhadas.
Tabelas: Organize informações como preços ou especificações em tabelas personalizáveis.
Listagem: Crie listas para destacar benefícios ou etapas de forma clara.
Distanciador: Adicione espaçamentos ajustáveis para melhorar o layout visual.
Menu: Inclua menus horizontais com links para guiar o cliente a páginas específicas.

Configurações Opcionais
- Imagem de Fundo no E-mail: Personalize o visual do e-mail adicionando uma imagem de fundo, tornando-o mais atrativo e alinhado à identidade visual da campanha.
- Pre-Header, Título e Assunto (Meta Tag): Configure facilmente o pre-header, o título e o assunto para destacar a mensagem no inbox e aumentar a taxa de abertura.
- Definição de Idioma do Template: Escolha o idioma padrão do template, garantindo compatibilidade e acessibilidade em diferentes contextos.

Pontos de Atenção

Responsividade: sempre revise no mobile
Imagens: até 100 KB por imagem (máx. 600 KB no total)
XML atualizado: necessário para dados dinâmicos
Buscar produtos: a busca é feita exclusivamente pelo ID do produto cadastrado dentro do XML ou API (não é possível buscar pelo nome)

Benefícios

Flexibilidade: personalização completa dos elementos
Automação: dados dinâmicos em tempo real via XML
Melhor experiência: layouts profissionais em qualquer dispositivo

Com as melhorias de visualização mobile e personalização avançada, o editor oferece mais controle e eficiência na criação de campanhas. Utilize esses recursos para criar e-mails que se destacam pela responsividade e personalização.