Introdução ao Dinamize Builder

O editor Dinamize Builder oferece novas possibilidades para a criação das suas landing pages para captar novos contatos e para seus envios de email marketing.

Além de seguir o estilo de edição do nosso Drag and Drop, o Dinamize Builder oferece recursos que facilitam a criação de conteúdo pela nossa plataforma.

Tudo que você vai inserir no seu email ou na landing page, como por exemplo colunas, blocos de imagem e texto e outros elementos que vão compor suas ações de marketing.

Resumo da área de Conteúdo nas landing pages

Resumo dos blocos de email no Dinamize Builder

Nesta aba, serão realizados os ajustes relacionados ao tamanho de cada elemento, posicionamento, efeitos e outras personalizações.

Exemplo: em “Conteúdos” você adiciona um botão em sua peça de email ou landing page e em “Estilos”, você altera a cor, tamanho e outras personalizações dele.

Área onde você consegue identificar cada um dos blocos de conteúdo inseridos nos seus emails ou landing pages e acessar cada um deles com maior facilidade.

Veja como funcionam as camadas na edição de landing pages

Acessando o editor

Ao acessar o menu Canais e iniciar a criação de emails, basta clicar em Editor de email no passo Origem de conteúdo:

Origem do conteúdo do email → editor de email da Dinamize:

Origem do conteúdo - editor da Dinamize

Depois disso, é só selecionar a opção Dinamize Builder para começar suas criações.

Selecionando editor

Drag And Drop

Diversos recursos para personalizar seus conteúdos e um formato de uso adequado independente do seu nível de conhecimento. Confira o manual completo.

Dinamize Builder

Todas as funcionalidades do Drag And Drop e com o mesmo estilo de edição, porém oferece novos recursos para tornar seus emails e landing pages ainda mais originais!

Modelos de email e landing pages

Se você ainda não tem uma ideia inicial para seus conteúdos, nossos modelos podem te ajudar!

É só clicar no ícone em destaque na imagem, que fica no canto superior direito da tela de edição:

Acesso ao gerenciador de modelos no Builder.

Depois disso, é só identificar a categoria que mais se encaixa com o tipo de conteúdo que deseja criar e escolher o modelo preferido!

Modelos de email da Dinamize divididos por categoria

Desfazer e refazer

Durante a edição do documento é natural que alguma ação não desejada ocorra ao estilizar o documento. Para estes casos, temos 2 opções que permitem desfazer e refazer a edição do conteúdo.

  • Desfazer: desfaz as últimas edições realizadas na peça.
  • Refazer: refaz alterações que foram desfeitas previamente.

Desfazer e refazer edições

Blocos de conteúdo

Nesta aba, estão todos os recursos disponíveis para a criação e personalização dos seus envios de email e páginas para a captação de novos contatos.

Colunas

Uma boa forma de organizar a estrutura da sua peça de email ou fazer com que ela fique ainda mais personalizada é através da inserção de colunas no email.

Colunas simples

Opções de colunas simples (uma, duas ou três colunas) no editor de email. Selecionando uma destas opções, a largura máxima será proporcional ao tamanho da edição padrão do e-mail marketing

Colunas simples - editor de email

Colunas com extensão

Opções de colunas com extensões e colunas sem extensões. Selecionando uma destas opções, a largura máxima será proporcional ao tamanho da visualização disponível na tela. 

Colunas com extensões

Ao longo da criação da peça, você pode alternar entre os tipos de bloco para identificar qual se encaixa melhor no conteúdo como um todo:

Extensão habilitada com um clique no editor da Dinamize

Alternando blocos

Quando estiver criando uma Landing Page e optar pelo uso de 3 colunas, por exemplo, você pode ainda definir qual o tamanho de cada uma das colunas. 

tipos de blocos builder

Em colunas com tamanhos distintos, pode inserir uma mescla de textos e imagens, como no exemplo abaixo:

adicionando textos em colunas com tamanhos distintos

Outra alternativa é utilizar o seu formulário ao lado de textos explicativos sobre o produto ou serviço que você quer promover:

Formulário de cadastro ao lado de bloco de texto

Nas colunas com a mesma largura, por exemplo, você pode apresentar 3 produtos distintos e adicionar um botão abaixo de cada um deles para que o usuário possa acessar páginas com mais detalhes sobre os itens.

Textos e CTAs para produtos

Na criação de um email, quando adicionar um número específico de colunas, mas mudar de ideia, é só remover a coluna que deseja e seguir criando!

Removendo uma das colunas da edição de email no editor da Dinamize

Bordas

A configuração de bordas está disponível apenas na criação de Landing Pages. Na nova versão, disponibilizamos diversos estilos para personalização de bordas em seu conteúdo.

Alterando borda dos botoes

 

Você pode alterar o raio da borda de 2 formas:

Equivalentes: onde todos os lados da borda são arredondados simultaneamente com apenas um ajuste;

Personalizadas: onde cada lado da borda será arredondado de acordo com a configuração manual.

Além disso, informações como sombra, largura, cor e estilo podem ser alteradas também!

Ajuste de sombra da borda

Estilos de borda

  • Solid: borda contínua
  • Dotted: borda pontilhada
  • Dashed: borda com traços
  • Double: borda dupla
  • Groove: borda em entalhe
  • Ridge: borda em ressalto
  • Inset: borda em baixo relevo
  • Outset: borda em alto relevo

Imagens

No editor Dinamize Builder é possível trabalhar com imagens de forma mais dinâmica, com mais liberdade em suas criações.

Inserindo e redimensionando imagens

Ao lado esquerdo, na aba de Conteúdo você precisará selecionar uma quantidade de colunas, podendo escolher entre 1, 2 ou 3. Arraste ela para o seu template:

Adicionando imagem no conteúdo do email

Adicionar imagem

Em seguida arraste o conteúdo Imagem para uma das colunas adicionadas:

arrastando bloco de imagem ao conteúdo do email

Clique duas vezes sobre o bloco de imagem, selecione uma imagem salva em sua galeria, importe novas imagens a partir de URLs ou de seu próprio computador.

Inserção de imagens via URL e videos

Ao inserir uma imagem, algumas configurações de Estilo podem vir por padrão, então sua imagem pode ficar menor do que o desejado. Contudo, basta ajustar essas configurações para que ela se ajuste de acordo com a sua necessidade.

Ajuste de espaçamento

Ajuste as dimensões de sua imagem alterando na aba Estilo os itens de Espaçamento interno e Tamanho.

Você pode clicar no ícone de X ao lado de Espaçamento interno e Largura, para ignorar as configurações padrão e alterar a medida para px (Pixel). Desta forma, a imagem já irá tomar proporções maiores, dentro do limite da coluna selecionada. A partir disso, altere conforme precisar.

Alteração do espaçamento de imagens

Inserindo e redimensionando imagens em blocos na landing page

Ao lado esquerdo, na aba de Conteúdo você precisará selecionar uma quantidade de colunas, podendo escolher entre 1, 2 ou 3 e também selecionar os tamanhos das colunas, caso escolha o bloco com 3.

tipos de colunas no editor de landing pages

Arraste a estrutura desejada para o seu template:

Nova coluna no editor

Em seguida arraste o conteúdo Imagem para uma das colunas adicionadas:

Inserção de imagem em colunas

Sempre que você adicionar uma figura serão apresentadas as opções de alinhamento no menu de “Configurações”.

É possível definir a posição como “Esquerda”, “Direita”, “Centralizada”, “Nenhum”.

posicao e redimensionamento de imagem

Se preferir, você pode ajustar a posição manualmente através da seção Espaçamento:

Ajuste de espaçamento

É possível redimensionar a imagem clicando nos pontos laterais do arquivo, e movendo com o cursor do mouse, para dentro ou para fora, para diminuir ou aumentar. Lembrando que a imagem sempre vai se adequar ao tamanho da coluna, nunca será maior que ela.

Como adicionar a logo da empresa em sua landing page

Vamos adicionar um bloco com 1 coluna, diminuir um pouco a dimensão da imagem e escolher a posição, para deixá-la centralizada:

Adicionando logo da empresa em sua landing page pelo Dinamize Builder

Cabeçalho

No cabeçalho você encontra o link de visualização externa, onde caso seu contato não consiga visualizar o conteúdo no email, pode clicar no link e visualizar no navegador.

Rodapé

Adicione informações adicionais relacionadas a sua peça e/ou sua empresa ajustando tamanho, tipo e estilo da fonte, incluir links, tabulações, listas, tabelas e o link de descadastro.

Bloco de textos

Adicione informações adicionais relacionadas a sua peça e/ou sua empresa ajustando tamanho, tipo e estilo da fonte, incluir links, tabulações, listas, tabelas e o link de descadastro.

Basta dar dois cliques no texto inserido e começar a editar sem complicações.

Os blocos de texto podem ser usados para:

  • Iniciar a comunicação com os usuários e introduzir o assunto que deseja abordar;
  • Detalhar os benefícios dos seus produtos;
  • Dar sequência ao relacionamento com os contatos – no caso do email, a mensagem de boas-vindas pode conter textos que relembrem o contato do seu cadastro para receber novidades.
Edição do bloco de texto com dois cliques

Espaçamento entre linhas e letras!

Que tal mais possibilidades para estilizar seus blocos de texto em emails e landing pages, hein?

Espçamento entre linhas no bloco de texto

Imagens

As imagens escolhidas para suas páginas e para os envios de email marketing são decisivas para incentivar a interação dos usuários.

Você pode adicionar as imagens clicando no ícone que está no lado esquerdo da tela e arrastando até os locais que preferir:

Adicionando imagens em colunas

Para trocar o conteúdo padrão pelas suas imagens, basta clicar duas vezes e adicionar. Você pode inserir as imagens da sua biblioteca, adicionar novas imagens fazendo upload do arquivo (formatos aceitos .JPEG, .PNG e .GIF) ou ainda através da URL dessa imagem.

Upload de imagem por arquivo do computador

Depois de adicionar as imagens, você consegue ajustar o tamanho delas para que seus emails e landing page fiquem do jeitinho que deseja!

Ajustando tamanho da imagem

Video no email marketing

Além de adicionar imagens, você consegue inserir vídeos em seu conteúdo, para deixar o envio ainda mais personalizado. É possível inserir vídeos postados no Youtube ou no Vimeo.

Temos uma área específica para isso, mas lembre-se: o vídeo não será reproduzido diretamente no emque direciona o usuário para o player do vídeo.

Lembre-se de ajustar o vídeo na sua mensagem para que ele seja exibido da melhor forma:

Inserindo vídeos no email marketing

Bloco de navegação

Recurso indispensável para incluir menus superiores na sua peça, como por exemplo em um site. É só arrastar o bloco “Navegação” até o local desejado e incluir um de redirecionamento para cada um dos botões.

Veja na prática:

Adicionando bloco de navegação no editor builder para email marketing

E o mais legal é que ele possui a opção de menu Hamburguer, adequando-se a dispositivos mobile, principalmente. Para ativá-la, clique duas vezes em cima do bloco de Navegação, vá ao menu Estilos e altere a opção Hamburguer para ON:

Modo hamburger no bloco de navegação

Dá só uma olhada em como fica a visualização nos dispositivos móveis:

Navegação no email com menu hamburger aplicado

HERO (bloco com imagem de fundo + título + CTA)

O recurso Hero oferece uma nova opção para deixar seus envios ainda mais interessantes.

Com ele, você insere uma imagem com um texto na frente dela, ou seja, a imagem conversa com a chamada de texto.

Você ainda consegue colocar um botão para direcionar os contatos para o seu site ou qualquer outra página.

Bloco pré-definido com CTA de alta conversão

Grupo de botões

Já pensou em criar emails com pesquisas de NPS ou então identificar o tamanho de calçados ou roupas usados pelos seus usuários com um clique?

Com o Dinamize Builder, isso é fácil fácil!

Bloco NPS aplicado no email

Basta arrastar o bloco “Grupo de botões” ao local indicado e fazer os ajustes necessários:

  • Definir o número de botões no bloco;
  • Editar o valor de cada botão, caso queira identificar tamanho de calçados ou de roupas que interessam seu públic;
  • Adicionar links para garantir o direcionamento e eventuais segmentações no futuro.

Adicionando grupo de botões e editando texto

grupo de botões para identificar tamanho do calçado-min

Social media

Que tal incentivar os contatos a compartilharem os conteúdos que você cria nas redes sociais ou então direcioná-los para suas redes sociais?

Ao selecionar a opção “Siga-nos” leva os contatos aos seus perfis nas redes sociais:

+ Seguidores nas redes sociais

Utilizando a opção “siga-nos”, você adiciona suas redes e faz com que o público que recebe os emails acompanhe sua marca nos diferentes canais que explora!

Compartilhamento de conteúdo

Use a opção “compartilhe nas redes sociais” para que os usuários possam levar o conteúdo que você cria para novos consumidores em potencial!

Depois de escolher o tipo de ação que pretende incluir no envio, é só adicionar os ícones desejados e fazer as configurações necessárias.

Feed RSS

Envios a partir de RSS permitem programar seu email com conteúdo personalizado a partir do feed de um blog ou de diferentes blogs em um único envio. O email pode ser enviado diariamente, semanalmente ou até mensalmente.

Configuração de RSS

Quando forem realizados envios com a peça configurada com o RSS, o sistema buscará no feed cadastrado os últimos posts publicados. É possível incluir até 60 publicações originadas desta maneira, levando em conta fatores como:

  • Data da última publicação
  • Idioma
  • Quantidade mínima e máxima para o envio
  • Período máximo que a publicação pode ter sido realizada

Para integrar, arraste o elemento RSS para o local da peça em que deseja exibir as notícias.

Adicionando feed rss no email

Espaçamento

Com o editor Dinamize Builder, é possível inserir espaçamento entre blocos. Com isso, você consegue ajustar o conteúdo e fazer com que cada elemento tenha o devido destaque.

Você pode utilizar as cores da sua marca no espaçamento para deixar o conteúdo ainda mais personalizado.

Adicionando espaçamentos na peça de email

Separador

O separador funciona como uma quebra visual do conteúdo proposto na peça de email. Quando você percebe que o layout está ficando pesado e o conteúdo não tem uma relação direta com o assunto principal, usar o separador é uma boa alternativa.

A linha horizontal pode ser usada para dividir blocos e conteúdos, passando um senso de organização e melhorando a estética do seu email. Escolha a cor, tamanho e espaçamento do separador nas configurações.

divisor no email

Ajuda

Durante o uso do sistema haverão botões com uma instrução ao lado de cada menu indicando o que ele representa.

Posicionando o mouse sobre o ícone de interrogação (“?”) um balão com a informação correspondente será apresentado.

Se você clicar no botão (“?”), vamos exibir uma prévia do efeito para você compreender o seu funcionamento na prática! 

Ícones de ajuda no editor dinamize builder

Recursos exclusivos para o editor de landing pages

Menu de configurações gerais do documento

No canto superior direito do editor é possível identificar um ícone de engrenagem que representa a guia de configurações do documento.

acessar configurações do documento

Opções de configuração

  • Título: Este nome vai representar o título da página. Quando o usuário acessar no navegador, esta será a informação que aparecerá na aba do browser.
  • Palavras-chave: Representam as meta-keywords que serão utilizadas para identificar sua página pelos buscadores na internet.
  • Descrição: Representa a meta-description do documento. Será usado para descrever o que a sua página está divulgando.
  • Idioma: Qual o idioma que a página está sendo divulgada.
  • Google Analytics: Código que conecta o Analytics da sua empresa com a landing page que está sendo criada.
  • Facebook Pixel: Código de pixel do Facebook. Adicione o código de rastreio do Facebook para relacionar à sua página.
  • Google Tag Manager: Código do google tag manager. Ao inseri-lo, sua página passará a permitir a execução de códigos terceiros criados no GTM.
  • Google Fonts: Adicione o nome de uma fonte do serviço “Google Fonts” e então ela será habilitada para utilização dentro do editor.
  • Fonte padrão do documento: Escolha uma fonte padrão que será aplicada a todo o documento.
  • Javascript: Utilize este bloco para inserir scripts personalizados diretamente na página. Aqui você pode manipular os elementos da Landing Page através de programação.
  • CSS: Utilize este bloco para editar a estilização da página através de CSS. Aqui você pode alterar os elementos da Landing Page através de programação.
  • Adicionar CDN: Este bloco pode ser utilizado para adicionar scripts de outras origens no Builder.
 

configurações de documento - landing page

Formulários

Nada melhor do que explorar as páginas criadas pelo Dinamize Builder para captar contatos qualificados, não acha?

Na edição de conteúdo da sua landing page, clique no item “Formulários” e arraste até o ponto em que deseja incluí-lo:

Depois de incluir o formulário, basta personalizá-lo inserindo os campos que os leads devem informar e quais deles devem ser preenchidos de forma obrigatória.

Inserção de formulários em landing page

DICA: solicite apenas dados relevantes para manter uma comunicação personalizada com os contatos captados; pedir muitas informações pode fazer com que os usuários não concluam o cadastro – o que impacta diretamente suas vendas.

Animações

Animações pré-definidas

Este é um menu dedicado à animações diversas. Você pode estilizar a sua landing page adicionando uma animação em qualquer elemento da página. Esse efeito pode ser acionado em três momentos distintos:

  • Quando o usuário passar o mouse sobre o elemento
  • Quando o usuário clicar sobre o elemento
  • Quando a rolagem da página atingir o local onde o elemento está localizado.

Defina o evento, o tipo de animação e velocidade. Depois observe a prévia e aplique no elemento.

Animação pré-definida nas landing pages

 

Animações manuais

Efeito Hover

Este é um efeito que altera a aparência de um determinado bloco de conteúdo da landing page quando o usuário passa o mouse por cima dela.

Clique no elemento no qual deseja aplicar esse efeito, vá até a aba Estilos e altere Estado para Hover:

Alterando estado para hover

Definido o efeito Hover, é só definir quais personalizações você pretende fazer – como alterar a cor do bloco selecionado, o tamanho ou alguma outra formatação relacionada a ele.

Efeito após clique no elemento

Da mesma forma que é possível adicionar o efeito hover, você também consegue adicionar um efeito para quando o usuário clicar em determinado bloco de conteúdo da sua landing page.

alternando estado para ClickPara alterar o estado de edição, é só selecionar o elemento desejado e ir até a área Estilos; depois disso, é só ir até a opção “Estado”, alterar para Click e definir como o elemento deve ser exibido quando o usuário clicar nele.

Imagem com efeito Parallax

No editor você pode optar por estilizar o plano de fundo de uma landing page, mantendo-o fixo ao utilizar o scroll do mouse. Esse efeito chamamos de “Parallax”. Dessa forma terá a impressão de visualizar a diferença na posição dos elementos em diferentes faixas de visão.

Selecione o bloco de conteúdo em que deseja aplicar a imagem com o efeito e vá até “Estilos”. Então, em “Plano de fundo”, clique em imagens:

adicionando imagem para efeito parallax

Adicione a imagem desejada na galeria e, depois disso, ative o efeito paralax. 

Ajuste posição e tamanho do fundo para garantir que a imagem ocupe o espaço desejado e clique em “Concluir”.

Se quiser mais informações sobre como adicionar um efeito deste tipo nas páginas criadas pelo Dinamize Builder, dá uma olhada neste tutorial.

parallax ativado

Você pode adicionar imagens de fundo com efeito parallax em diversos blocos de conteúdo, como no exemplo abaixo:

Efeito Parallax aplicado à landing page feita no Dinamize Builder

Temporizador

Tem uma promoção ou um evento especial para divulgar e quer destacar que estará disponível por tempo limitado? Agora você pode inserir um temporizador direto pelo nosso editor!

Basta arrastar o bloco até a área que desejar e mostrar aos visitantes da landing page que eles têm um prazo específico para se cadastrar e aproveitar cada benefício.

adicionando temporizador na landing page

Depois de adicionar o temporizador, é só definir qual o prazo de encerramento da contagem.

Esse ajuste é feito na aba “Estilos”, onde você deve informar a data final. Informe também um texto que sinalize que o prazo para obter o benefício oferecido chegou ao fim. Assim, quem acessar sua LP depois do período estabelecido vai entender que sua ação chegou ao fim.

Contador aplicado na landing page

Tutorial: como inserir contagem regressiva em suas landing pages

Inserindo vídeos na Landing Page

Incluir vídeos na sua Landing Page é uma boa pedida para:

  • Compartilhar apresentações institucionais
  • Mostrar utilização de produtos
  • Destacar benefícios que podem ser obtidos
  • Apresentar depoimentos de clientes

É só selecionar o bloco “vídeo” e arrastar até o local desejado:

Adicionando vídeo na Landing Page

Fornecedor – opções disponíveis:

  • HTML5 Source
  • YouTube
  • YouTube (no cookie)
  • Vimeo

Depois de especificar o endereço do seu vídeo, você pode ajustar o tamanho dele na página da forma que achar melhor.

Código customizado

Com o código customizado, você aumenta a quantidade de recursos disponíveis em suas landing pages. Depois de arrastar o bloco para o conteúdo da página que você está criando, é só adicionar o código referente ao tipo de conteúdo que deseja incluir.

Importante: este recurso não permite a adição de scripts personalizados.

Se você precisar inserir dados em Javascript, utilize o menu de “Configurações do documento” no canto superior direito da página.

Animação de confete ao se cadastrar

De forma simplificada, você pode adicionar uma animação para quando o usuário concluir o cadastro em formulários de landing pages criadas no Dinamize Builder:

Com um código personalizado, você pode transformar a experiência do usuário!

Barra de progresso na navegação

Outra alternativa de personalização que pode tornar a navegação dos usuários ainda mais interessante! Utilizando códigos personalizados, você consegue incluir uma barra de progresso na landing page criada pelo nosso editor avançado.

FavIcon no título da página

Utilizando o Dinamize Builder, você vai conseguir adicionar de forma simples um ícone ao lado do título da landing page criada, como no exemplo abaixo:

Confira o tutorial completo para saber como adicionar um FavIcon nas suas páginas a partir do Dinamize Builder ou até mesmo pelo Google Tag Manager – caso queira utilizar o recurso no editor Drag And Drop.

Texto pré-header

O assunto em combinação com o pré-header representa um dos fatores que irão definir o sucesso de sua campanha de email marketing. Isso porque até 64% das pessoas afirmam ter aberto o email marketing somente por causa da linha de assunto.

Durante a edição do e-mail no editor da Dinamize, você pode selecionar nas configurações do documento a opção de incluir um texto pré-header através do menu no canto superior esquerdo da tela:

Preview do email

No “Preview do email” é possível pré-visualizar como ficará o conteúdo em diferentes telas: desktop, tablet, celular modo panorâmico e celular modo retrato.

Assim você tem uma visão geral de como os seus contatos receberão o seu conteúdo.

Sumário

Utilizamos cookies para melhorar a sua experiência em nosso site. Para mais informações, visite nossa Política de Privacidade.