Precisa de ajuda? Temos aqui as informações que você precisa!

Página Inicial da Base de Conhecimentos aero-right Templates e Editor de Emails aero-right Seções e Blocos do Email

Seções e Blocos do Email

Templates e Editor de Emails Atualizado em Abril 21, 2021

Você pode adicionar novas seções e reorganizar os blocos conforme for montando o layout de sua campanha de email. 

Use as seções para adicionar novas colunas ao seu email e blocos para adicionar novos conteúdos, como imagens, texto ou botões. Com o Editor de Arrastar e Soltar, customizar seus emails é fácil e rápido, algo que nossos clientes amam e valorizam bastante.

Neste artigo, abordaremos sobre:

 

 


 

Seções

 

As Seções são utilizadas para estruturar seu email no Editor, permitindo que você divida seus blocos de conteúdo como que em caixas individuais. Você pode adicionar novas seções e excluir seções conforme for montando o layout do seu email e customizando cada parte do email individualmente.

 

Veja como as seções funcionam:

  1. Opção de Adicionar – Nesta opção, você poderá escolher entre cinco tipos diferentes de colunas que podem ser adicionadas ao layout do seu email. Não há limite para o número de seções que seu email pode ter. As seções disponíveis são:
    • Uma Coluna
    • Duas Colunas
    • Três Colunas
    • Duas Colunas com uma barra lateral à Esquerda
    • Duas Colunas com uma barra lateral à Direita
  2. Lápis – Esta opção abre as configurações de estilo para aquela seção específica. Você pode atribuir uma cor de fundo e uma borda para uma seção inteira ou para cada coluna, se estiver utilizando uma seção com várias colunas.
    • As configurações de estilo de uma seção também podem ser abertas ao clicar em qualquer lugar fora da área dessa seção.
    • Observe que os blocos de conteúdo podem ser estilizados individualmente nas configurações do bloco.
  3. Seta para Cima e Seta para baixo – Permite que você mude a ordenação das seções dentro do seu email.
    • Todas as seções, exceto as seções de pré-cabeçalho e rodapé, podem ser movidas para cima ou para baixo. Nenhuma outra seção pode ser colocada acima do pré-cabeçalho ou abaixo da seção de rodapé.
    • O bloco de rodapé que contém os links de assinatura pode ser movido por todo o email. No entanto, recomendamos mantê-lo no próprio rodapé do seu email. Ao manter esse bloco na seção inferior do seu email, você disponibiliza aos seus inscritos uma maneira fácil de gerenciar a assinatura ou cancelar a inscrição.
  4. Lixeira – Exclui uma seção. Sempre que você excluir uma seção, qualquer conteúdo adicionado anteriormente, como blocos ou estilos, também será excluído. Esta opção não poderá ser revertida. Para evitar que você perca algum conteúdo importante, será solicitado que você confirme a exclusão.

 

Voltar ao topo

 


 

Estilos Gerais

 

Nas configurações de Estilos Gerais, você pode gerenciar o esquema de cores do seu email. Você também poderá adicionar uma cor de fundo e uma borda ao seu email.

Esquemas de Cor

Dentre os 27 esquemas de cor diferentes disponíveis, você pode escolher aquele que melhor se adapta às suas necessidades. As seções e os blocos ainda poderão ser personalizados individualmente, mesmo se houver um esquema de cores específico selecionado.

Cor de Fundo

Esta opção permite que você selecione uma cor específica para o fundo do seu email. Você pode escolher uma das cores disponíveis ou adicionar o código hexadecimal da cor desejada. Seções e blocos individuais poderão ter sua própria cor de fundo.

Borda do Email

Nesta opção, você pode escolher se o seu email terá o fundo com a largura completa ou se terá o fundo emoldurado. O fundo com a largura completa não oferece opções de estilo adicionais.

Já na opção de fundo emoldurado, você pode adicionar ou alterar o seguinte:

  • Borda
  • Cor da Borda 
  • Tamanho da Borda
  • Raio da Borda
    • Aplica o raio da borda, ou seja, os cantos arredondados, ao pré-cabeçalho e ao rodapé do email.
Mostrar Seções

A opção Mostrar Seções permite que você visualize todas as seções do seu email. Selecione Ocultar Seções para deixar de mostrar os nomes das seções. Nessa tela, você também poderá clicar em qualquer bloco para editar.

 

Voltar ao topo


 

Blocos

 

Diferente das seções, os blocos mantêm e exibem todo o conteúdo do seu email. Blocos podem ser usados como elementos de design e também como funcionalidades. Utilize os blocos para adicionar imagens, botões ou textos. Cada bloco de conteúdo possui diferentes opções de estilo.

Para adicionar um bloco ao seu email, clique no bloco desejado e arraste-o para uma das seções do seu email.

Confira abaixo quais são os blocos disponíveis no editor de emails.

 


 

Bloco Imagem e bloco Cartão de Imagem

 

Com estes blocos, você poderá carregar uma imagem ou selecionar uma imagem existente da sua galeria. Para utilizar qualquer um desses blocos, arraste-o para o seu email primeiro. Você terá duas opções para adicionar imagens:

  1. Arraste & Solte uma imagem do seu computador. Ao escolher esta opção, certifique-se de que o bloco esteja aberto antes de soltar a imagem.
  2. Procurar por um arquivo – Ao escolher esta opção, você seleciona uma imagem já presente em sua galeria. Você pode também fazer upload de novas imagens ou utilizar imagens hospedadas em outros sites. Se você tiver a URL de uma imagem, você pode selecionar Inserir Imagem da URL e colar a URL no campo disponível. 
  3. Uma vez que você tiver sua imagem no layout do email, você verá um painel à esquerda com algumas opções de personalização.

Um Bloco Imagem irá incluir uma imagem no seu layout, enquanto o Bloco Cartão de Imagem irá incluir uma imagem com texto dentro de um quadro em seu layout.

Abaixo você pode ver um Bloco Imagem à esquerda e um bloco Cartão de Imagem à direita.

Qual utilizar, afinal?

Utilize o Bloco Imagem quando for necessário adicionar uma imagem simples.

Utilize o Bloco Cartão de Imagem quando for necessário adicionar uma descrição à sua imagem, e caso você mova o bloco de lugar, a descrição também será movida.

Para aprender como utilizar os blocos de imagem e como adicionar imagens à sua conta, clique aqui

Outros artigos que podem ser interessantes:

 

Voltar ao menu Blocos


 

Blocos de Imagem com Legenda

 

Existem três tipos de Blocos de Imagem com Legenda:

  • Texto à Direita
  • Texto à Esquerda
  • Legenda Inferior

Para aprender como adicionar um Bloco de Imagem com Legenda, clique aqui

Um Bloco de Imagem com Legenda é um bloco que permite que você adicione um texto à sua foto. A principal diferença entre blocos com legenda e o Bloco de Cartão de Imagem é que estes blocos não possuem um quadro ou container. Você pode ajustar o padding até a borda do layout, como mostrado abaixo, onde o bloco de legenda está à esquerda, e o bloco de cartão de imagem está à direita.

 

Voltar ao menu Blocos


 

Bloco Texto

 

You can add text to your email through the text block. To use this block, simply drag it to the desired place. Once there, click on it and replace the default text with yours.

Você pode adicionar texto ao seu email através do Bloco Texto. Para utilizá-lo, basta arrastar para onde deseja posicioná-lo. Após isso, mude o texto padrão e insira o seu próprio.

Veja o glossário para compreender melhor sobre as opções Ajustes e Conteúdo dos blocos de textos, visíveis no painel à esquerda.

Para editar o seu texto, utilize a barra de ferramentas localizada acima do seu layout de email. Lá você verá as opções comuns de edição de texto. Você também encontrará outras opções de edição, como por exemplo converter texto em âncora, adicionar um link, uma imagem ou até mesmo vincular um documento.

Copiar e Colar

Caso você tenha um texto que gostaria de copiar e colar no seu email, nós recomendamos utilizar a opção Colar . Essa opção remove qualquer caractere oculto no seu texto que possa interferir na aparência do texto.

Código-fonte

Para adicionar um código-fonte, clique no ícone Código-fonte e então cole seu código.

Caso você não encontre a opção mencionada acima, clique no ícone Ver Mais na barra de ferramentas.

 

Voltar ao menu Blocos


 

Bloco Vídeo

 

Vídeos são ótimas ferramentas visuais. Através deles, você pode apresentar as qualidades de um produto ou as razões pelas quais eles deveriam escolher você ao invés de seus concorrentes. Sempre que possível, utilize vídeos em seu email.

Caso queira aprender como adicionar um vídeo em seu email, clique aqui.

 

Voltar ao menu Blocos


 

Bloco Divisor

 

Divisores são uma ótima opção para criar espaços entre os blocos e seções do seu email, e não precisam ser necessariamente espaços em branco. Para adicionar um divisor, arraste o bloco até a posição desejada. Saiba quais são as possibilidades dos divisores aqui.

 

Voltar ao menu Blocos

 


 

Bloco Botão

 

A CTA (“Call to Action”, ou “Chamada para Ação” em português) é a parte mais interessante do seu email. Os botões podem ser utilizados para motivar seus contatos a visitar uma landing page.

Para adicionar um botão, arraste-o para a posição desejada. No painel da esquerda, você verá as opções para customizar seu botão. Para saber mais sobre as opções de edição dos botões, veja o nosso glossário. Continue lendo para saber mais sobre as configurações do Conteúdo do botão.

  1. Nesta caixa, você irá adicionar o texto do botão, ou seja, a sua CTA (Call to Action). Escreva seu texto de uma maneira que irá atrair a atenção de seus inscritos.
  2. Primeiro, selecione o Tipo de Link. Depois, na seção Link, adicione a URL que deseja redirecionar seus visitantes. Observe que também poderá ser uma URL externa ou mesmo outra região do mesmo email. Existem duas maneiras de adicionar links:
    1. Você pode adicionar um link ao clicar na opção Link na barra de edição de texto.
    2. Também é possível adicionar selecionando diretamente o tipo de link na opção de Conteúdo do bloco Botão. Nota: Para adicionar um link de âncora, você precisa criar uma âncora antes.
  3. Use a barra de edição de texto para personalizar seu texto ou adicionar um link.
  4. Caso você tenha vários botões em seu email, não é necessário ir um a um para personalizá-los. Personalize um botão e apenas marque a opção “Aplicar o estilo a todos”. Assim, todos os botões em seu email passam a ter o mesmo estilo.

 

 

Voltar ao menu Blocos


 

Seguir nas Redes Sociais & Compartilhar nas Redes Sociais

 

Os blocos de redes sociais são essenciais. Nosso editor oferece dois tipos de blocos para adicionar suas redes sociais. Para usar qualquer um dos blocos, arraste-o para a seção de sua escolha.

O bloco Seguir nas Redes Sociais permite adicionar o ícone de suas mídias sociais ou o ícone + texto. Esse bloco permite adicionar até 20 serviços diferentes, incluindo Facebook, Twitter, Whatsapp, Linkedin, YouTube, Pinterest, RSS, Vimeo, TripAdvisor, entre outros.

O bloco Compartilhar nas Redes Sociais adiciona os seguintes serviços: Facebook, Twitter, Linkedin, Myspace e instapaper. Assim, esse bloco permitirá que os usuários compartilhem seu email diretamente nas redes sociais citadas.

Qual bloco utilizar?

Se você deseja redirecionar seus contatos para as suas redes sociais, utilize o bloco de Seguir nas Redes Sociais, assim, eles poderão clicar nas redes sociais onde gostariam de acompanhar ou seguir você.

Agora, se você deseja que os seus contatos compartilhem o seu conteúdo, utilize o bloco Compartilhar nas Redes Sociais.

Siga as instruções abaixo para adicionar um serviço nestes dois blocos:

  1. Arraste o bloco desejado ou clique em um desses blocos já existente em seu layout.
  2. No painel esquerdo, vá até a guia Conteúdo.
  3. Clique no menu suspenso Adicionar um Serviço (ou Add Service), selecione um dos serviços e depois clique no ícone de adicionar ao lado do menu.
  4. Dentro do seu email, clique no ícone de serviço recém adicionado. As opções para personalizar serão exibidas no painel esquerdo.

Adicione a URL do link e personalize os ícones. Ao finalizar as configurações, você pode usar a opção Aplicar raio para todos os blocos no texto para adicionar o mesmo raio a todos os botões.

 

 

Além disso, ao passar o mouse sobre um dos ícones, você terá a opção de movê-lo ou excluí-lo.

 

 

Voltar ao menu Blocos


 

Bloco Barra de Navegação

 

A barra de navegação pode ser usada para direcionar seus contatos para outras partes do seu email, utilizando uma âncora, ou pode ser usada para redirecionar para links externos.

Como adicionar uma barra de navegação

  1. Arraste e solte o bloco de Barra de Navegação para o seu layout. A maioria dos usuários prefere deixar este bloco no cabeçalho do email.
  2. Por padrão, sua barra de navegação ficará semelhante a esta:
  3. Ao clicar em um link da barra de navegação, as configurações serão exibidas no painel esquerdo.
  4. Escolha o tipo de link e personalize da forma que desejar. Você pode remover links ao clicar na opção Remover Link dentro das configurações desse link que você quer remover.
  5. Ao clicar em um link, você também pode alterar a cor e a aparência da borda divisória. A borda é opcional, caso não queira utilizá-la, basta alterar a cor para transparente ou a espessura da linha para 0.

Como personalizar uma barra de navegação

 

Para aprender mais sobre a aba de Ajustes, confira o glossário.

  1. Para adicionar um link, clique no ícone “(+)”. Para personalizar esse link, clique nele e as opções de personalização irão aparecer no painel da esquerda. Você pode adicionar até seis links. Existem duas opções de link: Texto ou imagem. Para saber mais sobre os diferentes tipos de link, clique aqui.
  2. Existem três tipos de layout disponíveis para seus links de navegação. Você pode combinar imagens e textos. Clique nos estilos e selecione o que melhor se encaixa no seu design.
  3. Use as opções de alinhamento horizontal e vertical para personalizar sua barra. A opção Tamanho determina o espaçamento entre cada link.
  4. Na Estilização Mobile, você pode escolher as opções Padrão, Vertical e Vertical Centralizada para determinar a aparência do seu email em um dispositivo móvel.

 

 

Voltar ao menu Blocos


 

Emails de Exemplo

 

Aqui mostramos alguns exemplos de como você pode otimizar seus emails com o uso das Seções.

Os emails de exemplo abaixo mostram as seções e os blocos que foram utilizados em todo o design do email.

Exemplo 1

Começamos adicionando uma Barra de Navegação na seção de Uma coluna do cabeçalho. Neste exemplo, o título foi incluído numa seção com Duas Colunas com uma barra lateral à Esquerda, onde adicionamos blocos de Texto de Imagem. Depois, utilizamos uma seção de Duas Colunas e incluímos blocos Cartão de Imagem para incluir as imagens com uma breve descrição. Na seção inferior, adicionamos ícones de Seguir nas Redes Sociais e solicitamos feedbacks dos inscritos.

 

 

Exemplo 2

Neste exemplo, criamos um email usando seções de Uma Coluna e de Duas Colunas. Nós também adicionamos um Fundo Emoldurado e usamos a opção de Raio da Borda nos Estilos Gerais para dar destaque ao corpo do email.

 

 

Exemplo 3

Neste último exemplo, criamos um email usando várias seções de Uma, Duas e Três Colunas. Usamos um Divisor para criar um espaço entre as seções. Como você pode ver, utilizamos em todo o corpo do email blocos de Imagem, blocos de Texto, blocos de Botão, Blocos de Redes Sociais e um bloco de Vídeo.

 

 

Voltar ao topo


 

Glossário

 

As configurações da aba de Ajustes variam de acordo com o bloco que você estiver editando.

Cor de Fundo

Nesta opção, você pode definir a cor de fundo de um determinado elemento. Para utilizá-la, clique no círculo de cores e selecione uma cor na barra de cores. Se preferir, poderá colar o código hexadecimal da cor diretamente na caixa de texto ao lado. Quando tiver escolhido a cor, clique em Salvar. A opção “Reiniciar” retorna o elemento à sua aparência original.

Estilo da Borda

Alguns elementos têm a opção de borda disponível. Você pode definir a cor da borda clicando no círculo de cores e, em seguida, selecionando uma cor na barra de cores. Nesta opção, você também poderá utilizar códigos hexadecimais. Para o estilo da borda, você pode selecionar um dos nove estilos de linha disponíveis e, em seguida, adicionar uma espessura de 0 a 99. Caso não queira utilizá-la, basta alterar a cor para transparente ou a espessura da linha para 0. A opção “Reiniciar” retorna o elemento à sua aparência original.

Raio da Borda

Alguns elementos possuem a opção de raio da borda disponível. Esta opção define o quão arredondados serão as bordas de um elemento. Você pode definir o raio de 0 a 20. No bloco de botões, ao escolher o raio, você pode marcarAplicar Estilo a todos Botões” para definir que todos os botões tenham o mesmo raio.

Tamanho

Esta é uma opção disponível em alguns blocos, como de Barra de Navegação, Seguir nas Redes Sociais e Compartilhamento nas Redes Sociais. Esta opção define o tamanho do espaço entre um elemento e outro. Para defini-lo, basta deslizar o ponto verde de 0 a 20.

Espaçamento e Margem

Espaçamentos e Margens geralmente são opções disponíveis na aba de Conteúdo, sendo que ambos são relativos ao espaço ao redor de um elemento. Você pode definir o preenchimento ou a margem ao deslizar a barra.

Alinhamento

A opção de Alinhamento é relativa à posição de um elemento. Você pode configurar clicando na opção de Alinhamento desejadas: Ao centro, à esquerda, à direita, inferior ou superior.

Altura da Linha

A opção de Altura da Linha está disponível apenas em blocos de texto e é usada para definir a altura entre uma linha e outra. As opções disponíveis são: Simples, 1.25, 1.5 e Duplo.

Código Hexadecimal

O código hexadecimal é o valor que representa uma determinada cor. Este código começa com um sinal de cerquilha (#) e é seguido por seis caracteres, como por exemplo, #CFCFDA, sendo que os caracteres podem ser números ou letras. Códigos hexadecimais podem ser usados ​​para adicionar as cores específicas de uma marca. Se você não tiver certeza de quais são os códigos hexadecimais das cores que deseja utilizar, você pode usar um software de design ou um seletor de cores online.

Voltar ao topo

 


 

Caso tenha dúvidas sobre este ou outro assunto, entre em contato com nossa equipe de Suporte.

 


Sua Dúvida Foi Respondida?
Você já votou!

Não está encontrando a resposta para sua dúvida?

Abrir um Chamado