Página Inicial da Base de Conhecimentos 
Editor de Arrastar & Soltar Seções e Blocos do Email
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:
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:
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.
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.
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.
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:
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.
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.
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:
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.
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:
Existem três tipos de Blocos de Imagem com Legenda:
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.
Você pode adicionar texto ao seu email através dos blocos de Texto. Para utilizar um dos blocos de texto, basta arrastar para onde deseja posicioná-lo. Após isso, mude o texto padrão e insira o seu próprio.
Bloco de Texto – Este bloco adiciona um texto simples ao seu layout.
Bloco Texto em Caixa – Este bloco adiciona um texto com uma moldura ao redor.
Texto com imagens – Se precisar adicionar imagens que acompanham algum texto, você pode usar o bloco de cartão de imagem ou os blocos de imagem com legenda.
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.
O recurso de Verificação Ortográfica de Marca de Referência verifica seu conteúdo para garantir que a ortografia em seu e-mail esteja correta. O idioma da Correção Ortográfica será o padrão para o idioma preferido de sua conta. Você pode alterar o idioma ou desativar o recurso de Correção Ortográfica na barra de menu superior do e-mail.
Para ver o corretor ortográfico em ação, abra qualquer bloco de texto e comece a escrever. Palavras mal soletradas são sublinhadas em vermelho. Você pode clicar com o botão direito sobre a palavra para selecionar a ortografia correta ou ignorar o aviso. A opção Mais abrirá outra lista de palavras disponíveis.
IMPORTANTE
O clique direito não funciona: Alguns sistemas operacionais possuem configurações padrão para gestos de clique com o botão direito do mouse. Verifique as configurações do seu mouse ou trackpad se o clique com o botão direito do mouse não solicitar as sugestões ortográficas.
MAIS INFORMAÇÕES
Escolher a opção Ignorar poupa a preferência durante essa instância. Se você fechar o bloco e voltar a ele mais tarde, a palavra mal soletrada aparecerá como mal soletrada.
O recurso de Verificação Ortográfica está atualmente disponível nos seguintes idiomas.
Copie e cole seu conteúdo de outras fontes usando o recurso Easy Paste. O recurso Easy Paste torna a cópia e colagem de conteúdo de outras fontes como seu website, Google e Microsoft Documents rápida e fácil. Você pode remover a formatação original ou mantê-la para corresponder a suas outras páginas.
Para usar o recurso Easy Paste, siga os passos abaixo.
IMPORTANTE
(dependendo do tamanho da tela, este ícone pode estar em Mais Opções)
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.
Formatação de Blocos de Texto
Ao clicar no bloco de texto, você verá as opções de personalização à esquerda.
Na aba de Ajustes, você poderá definir a cor do fundo, o espaçamento e a borda do bloco de texto em caixa.
Use a guia Conteúdo para ajustar a altura da linha e, se necessário, alterar o número de colunas.
Como em qualquer editor de texto, você encontrará as ferramentas básicas de formatação. Na barra superior, você encontrará as opções de personalização de seu texto (negrito, itálico, sublinhado, tachado, cor do texto, tipo de fonte e tamanho).
Aqui você também pode usar as opções de alinhamento e adicionar uma lista numerada ou com marcadores.
Além disso, você pode anexar links, âncoras, imagens, vídeos, arquivos e utilizar as opções de personalização, como as etiquetas.
Você pode adicionar DADOS PERSONALIZADOS aos seus emails dentro de seus blocos de texto. Saiba como:
Clique aqui para ver quais são as FONTES DISPONÍVEIS para usar em sua campanha de email. Para landing pages, você pode usar fontes da Google, clique aqui para saber mais.
Além disso, você pode ADICIONAR LINKS em seus blocos de texto. Clique aqui para saber mais.
Se precisar de mais informações sobre textos em landing pages, clique aqui.
Observação: Em alguns casos, você poderá observar o logotipo TinyMCE ao editar um bloco de texto. O TinyMCE é um serviço terceiro que utilizamos para tornar nosso Editor de Arrastar & Soltar melhor e mais rápido. O logotipo não aparecerá nas suas campanhas de email, somente durante a edição de um bloco de texto.
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.
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.
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.
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:
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.
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
Como personalizar uma barra de navegação
Para aprender mais sobre a aba de Ajustes, confira o glossário.
O bloco de Ecommerce pode ser utilizado para promover a venda dos produtos de sua loja online através dos próprios emails.
O bloco de Ecommerce inclui o seguinte:
Para utilizar este bloco, arraste-o e solte-o para uma das seções do seu email.
Para personalizar seu Bloco de Ecommerce, siga as seguintes etapas:
Se você preferir não usar nenhum dos elementos do bloco, basta desativá-los na guia Conteúdo.
Veja alguns exemplos de como o Bloco de Ecommerce pode ser usado e estilizado.
Para começar, arraste e solte o bloco para o local desejado no layout do seu email.
É importante observar que, para usar o Bloco de Produtos da Shopify, você precisará ter uma conta paga e ativa na Shopify. Ao usar o bloco pela primeira vez, você precisará integrar a Shopify com a sua conta Benchmark. Para saber como fazer a integração, clique aqui.
Uma vez que você tiver completado a integração com sucesso, você verá uma lista de produtos disponíveis.
Selecione então um dos produtos disponíveis. O bloco irá ser preenchido automaticamente com as informações do produto conforme detalhado na sua loja da Shopify.O Bloco de Produtos da Shopify possui as seguintes opções:
Importante
Veja alguns exemplos de como o Bloco de Produtos da Shopify pode ser usado e personalizado:
Otimize o tempo na criação de seus layouts de email utilizando blocos salvos. Os blocos de design podem ser salvos e armazenados para que você utilize em campanhas futuras. O estilo, o texto e as imagens do bloco serão salvos quando você salvar o bloco. Depois que o bloco for adicionado ao seu conteúdo de email, você poderá modificá-lo e o bloco original salvo permanecerá inalterado.
Para salvar um bloco, passe o mouse sobre o bloco em seu layout e clique na opção Salvar Bloco. Dê um nome ao bloco e clique em Salvar e Fechar.
Como utilizar um Bloco Salvo
Como deletar Blocos Salvos
Se não houver mais blocos salvos em sua lista, você pode excluir o Bloco Salvo do seu design.
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.
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.
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.
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.
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 marcar “Aplicar 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.
Caso tenha dúvidas sobre este ou outro assunto, entre em contato com nossa equipe de Suporte.
