Como Criar Templates de E-mail

1. Acessar o Studio

No menu lateral da plataforma, clique em Studio.
Em seguida, selecione + Novo Template > Template E-mail.

2. Definir as informações iniciais do template

Na tela inicial de criação:

1. Nome do template
   Informe um nome para identificar o template no Studio. Esse nome é interno e facilita a organização e busca.

2. Tipo de template
   Selecione o tipo de template:

   • Marketing: utilizado para comunicações promocionais, ofertas, campanhas e divulgações.

   • Transacional (em breve): será utilizado para comunicações operacionais, como confirmações, atualizações de status e mensagens acionadas por eventos.

Após preencher essas informações, clique em Continuar para acessar o editor.

3. Criar template com o Editor Wake Experience

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
  

4. Salvar o template

No canto superior direito da tela, você terá duas opções:

• Salvar rascunho
  Utilize essa opção caso não tenha finalizado a criação. O template ficará salvo como rascunho no Studio para edição posterior.

• Salvar e continuar
  Ao finalizar, o template será salvo e ficará disponível no Studio, pronto para uso conforme seu status.