Exibições:

Introdução

O e-mail marketing continua desafiando os prognósticos e se provando, ano a ano, uma das formas de marketing digital com melhor retorno. As redes sociais não substituíram o papel do e-mail, que está firmado como um meio necessário e definitivo para marketing digital.

O Code-K Campaign possui ferramentas de fácil utilização para criação de layouts de qualidade para e-mail marketing. O Designer de E-mail permite a criação, em poucos minutos, de layouts arrojados para utilização nas campanhas, basta arrastar e soltar os componentes.

Em e-mail marketing, confiabilidade é tudo. O Code-K Campaign garante que os e-mails sejam entregues utilizando servidores de boa reputação. O Code-K Campaign também auxilia os usuários na observância de boas práticas essenciais durante a construção e disparo das mensagens.

Criando um Layout de E-mail no Modo Designer  

Os Layouts de E-mail contêm as formatações e informações básicas para cada disparo. Um mesmo layout pode ser utilizado em várias campanhas e ações no Code-K Campaign.

Os layouts são criados no menu principal do Code-K Campaign.

Na lista de Layouts de E-mail, basta criar um novo registro, clique no botão “+NOVO” e escolher o Modo Designer, em seguida clicar no menu relacionado e selecionar o menu Designer:

Ao abrir a tela do Designer, será carregado um modelo de e-mail, que é totalmente configurável conforme necessidade, utilizando os recursos de arrastar e soltar:


 

Componentes


Os componentes permitem a inserção rápida de blocos HTML no Layout de E-mail, tornando simples a criação de layouts complexos e visualmente atraentes. Os componentes podem ser selecionados na barra do lado direito do construtor, dentro da opção “Designer”, e arrastados para a página de criação. Os componentes disponíveis para um Layout de E-mail são do tipo Texto, Espaço, Divisor, Botão, Social, Imagem, Código, Cabeçalho e Rodapé estes elementos serão melhor detalhados a seguir.

Tipo de Componentes


A seguir vamos detalhar os tipos de componentes disponíveis para a construção de um Layout de E-mail.

Seção 


É um campo múltiplo que pode ser configurado para conter imagens, texto ou botões, exibidos em até 3 colunas.

Os itens configuráveis desse componente são:

  • Cor de fundo: Define a cor de fundo do componente, informada por seleção ou pelo número hexadecimal da cor correspondente;
  • Imagem de Fundo: Define uma imagem para ser utilizada como plano de fundo;
  • Colunas: Define quantas colunas serão inseridas neste componente, permitindo o limite de até 3 colunas;
  • Tipo de seleção: Tipo da coluna a ser inserida, as colunas podem ser:
    • Texto;
    • Imagem;
    • Botão.
  • Margem abaixo: Define a margem inferior do componente;
  • Margem acima: Define a margem superior do componente;

Os componentes de texto, imagem e botões serão explicados a seguir.
 

Texto


É um campo do tipo texto, com um editor embutido, tornando possível realizar edições na formatação do texto inserido.

 Os itens configuráveis desse componente são:

  • Cor de fundo: Define a cor de fundo do componente, informada por seleção ou pelo número hexadecimal da cor correspondente;
  • Imagem de Fundo: Define uma imagem para ser utilizada como plano de fundo;
  • Texto: Área para formatação de texto, composta pelos seguintes elementos:
    • Template: Permite a inserção de informações presentes nos campos das entidades Conta, Contato e Cliente Potencial do Dynamics CRM no Layout de E-mail;
    • Cor Recente: Permite escolher a cor do texto e a cor de fundo dele;
    • Lista com Marcadores: Insere um marcador ao texto;
    • Lista Numerada: Insere um marcador numerado no texto;
    • Parágrafo: Consiste na ordenação do alinhamento do texto, colocando-o:
      • A direita;
      • Ao centro;
      • A esquerda;
      • Justificado;
      • Menor Tabulação;
      • Maior Tabulação.
    • Altura da linha: Espaçamento da linha;
    • Negrito;
    • Itálico;
    • Sublinhado;
    • Remover estilo da fonte: Limpar a formatação realizada;
    • Fonte;
    • Tamanho da Fonte;
    • Link: adicionar um link ao texto (hiperlink);
    • Tela Cheia: Aumentar a tela para parametrização;
    • Ver código-fonte.
  • Colunas: Define quantas colunas serão inseridas neste componente, permitindo o limite de até 3 colunas;
  • Margem abaixo: Define a margem inferior do componente;
  • Margem acima: Define a margem superior do componente.


 

Espaço


Este componente é utilizado para adicionar o espaçamento entre componentes, sendo composto pelos seguintes itens:

Os itens configuráveis desse componente são:

  • Cor de fundo: Define a cor de fundo do componente, informada por seleção ou pelo número hexadecimal da cor correspondente;
  • Imagem de Fundo: Define uma imagem para ser utilizada como plano de fundo;
  • Altura: Largura do componente no designer.

Divisor


Este componente é utilizado para separar os componentes utilizando uma linha de espessura configurável.

Os itens configuráveis desse componente são:

  • Cor de fundo: Define a cor de fundo do componente, informada por seleção ou pelo número hexadecimal da cor correspondente;
  • Imagem de Fundo: Define uma imagem para ser utilizada como plano de fundo;
  • Cor do divisor: Cor que será aplicada ao divisor do componente por seleção ou informando o número hexadecimal correspondente;
  • Altura: Definição da largura do divisor;
  • Margem abaixo: Define a margem inferior do componente;
  • Margem acima: Define a margem superior do componente.


Componente utilizado para a inserção de até 3 botões no mesmo componente, sendo possível uma ação independente para cada um.

Os itens configuráveis desse componente são:

  • Cor de fundo: Define a cor de fundo do componente, informada por seleção ou pelo número hexadecimal da cor correspondente;
  • Imagem de Fundo: Define uma imagem para ser utilizada como plano de fundo;
  • Colunas: Define quantas colunas serão inseridas neste componente, permitindo o limite de até 3 colunas;
  • Alinhamento: Define o posicionamento do botão no formulário da Landing Page;
  • URL: Endereço da página a qual o botão irá redirecionar o usuário após ser acionado;
  • Texto: Área para formatação de texto, composta pelos seguintes elementos:
    • Cor Recente: Permite escolher a cor do texto e a cor de fundo dele;
    • Lista com Marcadores: Insere um marcador ao texto;
    • Lista Numerada: Insere um marcador numerado no texto;
    • Parágrafo: Consiste na ordenação do alinhamento do texto, colocando-o:
      • A direita;
      • Ao centro;
      • A esquerda;
      • Justificado;
      • Menor Tabulação;
      • Maior Tabulação.
    • Altura da linha: Espaçamento da linha;
    • Negrito;
    • Itálico;
    • Sublinhado;
    • Remover estilo da fonte: Limpar a formatação realizada;
    • Fonte;
    • Tamanho da Fonte;
    • Link: adicionar um link ao texto (hiperlink);
    • Tela Cheia: Aumentar a tela para parametrização;
    • Ver código-fonte.
  • Cor do Texto: Define qual será a cor utilizada no texto do botão selecionado;
  • Cor de Fundo: Define qual será a cor de fundo do botão selecionado;
  • Arredondamento: Configura a suavização das pontas do botão deixando-o mais arredondado.


Componente utilizado para configuração de botões de acesso rápido as mídias sociais.


Os itens configuráveis desse componente são:

  • Cor de fundo: Define a cor de fundo do componente, informada por seleção ou pelo número hexadecimal da cor correspondente;
  • Imagem de Fundo: Define uma imagem para ser utilizada como plano de fundo;
  • Tamanho do Link: Tamanhos dos ícones das mídias sociais, sendo disponibilizados em 32, 48 e 64 pixels;
  • Estilo do Link: Variação da formatação do ícone das mídias sociais, estando disponíveis nos estilos:
    • Padrão;
    • Preto;
    • Círculo;
    • Círculo Preto;
    • Esfera Preta;
    • Quadrado;
    • Quadrado Preto.
  • +: Adiciona um novo ícone para as mídias sociais existentes no componente, sendo elas:
    • Cloud;
    • RSS;
    • Facebook;
    • LinkedIn;
    • Twitter;
    • YouTube;
    • Foursquare;
    • Instagram;
    • Google+;
    • Tumblr;
    • Pinterest;
    • Vimeo.
  • Links: São os links que direcionam para as redes sociais;
  • Margem abaixo: Define a margem inferior do componente;
  • Margem acima: Define a margem superior do componente.  


Componente que exibe uma ou mais Imagens na página, podem ser utilizadas para o redirecionamento do cliente para um link específico.

Os itens configuráveis desse componente são:

  • Cor de fundo: Define a cor de fundo do componente, informada por seleção ou pelo número hexadecimal da cor correspondente;
  • Imagem de Fundo: Define uma imagem para ser utilizada como plano de fundo;
  • Colunas: Define quantas colunas serão inseridas neste componente, permitindo o limite de até 3 colunas;
  • Alinhamento: Define o posicionamento do botão no formulário da Landing Page;
  • Imagem: Insere a imagem que será utilizada neste complemento;
  • URL: Endereço para qual o usuário será redirecionado ao clicar na imagem;
  • Margem abaixo: Define a margem inferior do componente;
  • Margem acima: Define a margem superior do componente.


 

Código


Componente utilizado para inserção de código fonte, customizado pelo usuário, na Landing Page.

Os itens configuráveis desse componente são:

  • Cor de fundo: Define a cor de fundo do componente, informada por seleção ou pelo número hexadecimal da cor correspondente;
  • Código: Código fonte que poderá ser implementado na Landing Page.


 

Cabeçalho


Componente para a inserção do cabeçalho da mensagem, local onde podem ser inseridas serão informações de destaque do Layout de E-mail ou que possam auxiliar o receptor da mensagem em identificação e navegação.

Os itens configuráveis desse componente são:

  • Cor de fundo: Define a cor de fundo do componente, informada por seleção ou pelo número hexadecimal da cor correspondente;
  • Imagem de Fundo: Define uma imagem para ser utilizada como plano de fundo;
  • Colunas: Define quantas colunas serão inseridas neste componente, permitindo o limite de até 3 colunas;
  • Texto: Área para formatação de texto, composta pelos seguintes elementos:
    • Template: Permite a inserção de informações presentes nos campos das entidades Conta, Contato e Cliente Potencial do Dynamics CRM no Layout de E-mail;
    • Cor Recente: Permite escolher a cor do texto e a cor de fundo dele.
    • Lista com Marcadores: Insere um marcador ao texto;
    • Lista Numerada: Insere um marcador numerado no texto;
    • Parágrafo: Consiste na ordenação do alinhamento do texto, colocando-o:
      • A direita;
      • Ao centro;
      • A esquerda;
      • Justificado;
      • Menor Tabulação;
      • Maior Tabulação.
    • Altura da linha: Espaçamento da linha;
    • Negrito;
    • Itálico;
    • Sublinhado;
    • Remover estilo da fonte: Limpar a formatação realizada;
    • Fonte;
    • Tamanho da Fonte;
    • Link: adicionar um link ao texto (hiperlink);
    • Tela Cheia: Aumentar a tela para parametrização;
    • Ver código-fonte.
  • Margem abaixo: Define a margem inferior do componente;
  • Margem acima: Define a margem superior do componente.

Rodapé

Componente para a inserção do rodapé da mensagem, local disponível para inserção de informações adicionais, links para opt out e informações relevantes sobre o remetente do e-mail.

Os itens configuráveis desse componente são:

  • Cor de fundo: Define a cor de fundo do componente, informada por seleção ou pelo número hexadecimal da cor correspondente;
  • Imagem de Fundo: Define uma imagem para ser utilizada como plano de fundo;
  • Colunas: Define quantas colunas serão inseridas neste componente, permitindo o limite de até 3 colunas;
  • Texto: Área para formatação de texto, composta pelos seguintes elementos:
    • Template: Permite a inserção de informações presentes nos campos das entidades Conta, Contato e Cliente Potencial do Dynamics CRM no Layout de E-mail;
    • Cor Recente: Permite escolher a cor do texto e a cor de fundo dele;
    • Lista com Marcadores: Insere um marcador ao texto;
    • Lista Numerada: Insere um marcador numerado no texto;
    • Parágrafo: Consiste na ordenação do alinhamento do texto, colocando-o:
      • A direita;
      • Ao centro;
      • A esquerda;
      • Justificado;
      • Menor Tabulação;
      • Maior Tabulação.
    • Altura da linha: Espaçamento da linha;
    • Negrito;
    • Itálico;
    • Sublinhado;
    • Remover estilo da fonte: Limpar a formatação realizada;
    • Fonte;
    • Tamanho da Fonte;
    • Link: adicionar um link ao texto (hiperlink);
    • Tela Cheia: Aumentar a tela para parametrização;
    • Ver código-fonte.
  • Margem abaixo: Define a margem inferior do componente;
  • Margem acima: Define a margem superior do componente.