Artigos sobre: HOOP E-COMMERCE

Ferramenta de design para landing pages e e-mails

**Introdução**
Se você está procurando um editor de e-mail sem código e fácil de usar, a ferramenta de Design para landing pages e e-mails da Hoop é a solução que você precisa para seu e-commerce. No material a seguir, vamos mostrar como utilizar os modelos e recursos da nossa ferramenta, além de dicas importantes para construir um bom design e ampliar a chance de sucesso na sua taxa de conversão.

O que é a ferramenta
Com destinação ao time de Marketing, a ferramenta da Hoop serve para criar landing pages e e-mails de marketing para automação de mensagens. Landing pages são páginas que têm como principal objetivo a conversão do visitante em leads. Também são conhecidas como páginas de captura, onde há uma oferta central para coleta de informações (acesso a promoção exclusiva, acesso a grupo de whatsapp, etc).

E-mails de marketing são mensagens com o objetivo de promover produtos ou serviços de uma empresa ou marca. Eles são enviados para uma lista de contatos que optaram por receber essas mensagens, geralmente por meio de uma inscrição via newsletter ou landing page. Juntas, elas são um forte recurso para aumentar a captura de leads qualificados que geram conversões e , construção de relacionamento com seus clientes.


Dados Gerais
Para começarmos a criar uma landing page, vamos precisar preencher algumas informações importantes. Na seção de Marketing, acesse Landing Pages e em seguida, clique em Inserir Novo Modelo.

Dê o nome da sua Landing Page. Ela pode ser um nome de uma ação que você está criando ou até mesmo a rota para a qual deseja redirecionar o cliente.




Exemplo: Campanha Promocional de Início de Ano, EBOOK HoopCRM 1ª versão, HoopCRM Página de Agendamento Demonstração. Fique à vontade para escolher o nome que preferir.




Preenchido o nome, clique em Salvar.

Após termos escolhido o nome, será necessário preencher os seguintes campos:

Funil de Destino: Você poderá optar para qual funil de vendas deseja direcionar seus leads capturados (Principal ou E-commerce).
Vendedores vinculados: Você pode escolher se quer vincular esses leads a apenas um vendedor específico ou a um grupo de vendedores.
CTA: defina qual Call-To-Action estará vinculada ao seu design:

WhatsApp: vinculada ao WhatsApp oficial da loja.

Link de Redirecionamento: Redireciona o cliente para sua loja de e-commerce, por exemplo.

Cupom: direcione o cliente para receber um cupom de desconto para compra.

Coleta de Dados: faça um texto de agradecimento pelo cliente ter fornecido seus dados.

Layout

Variação: é a variação do seu layout. Altere pontos chave do seu design e realize teste A/B deles para saber qual irá performar melhor.

Preenchido os dados gerais, vamos criar nosso primeiro design! Como é seu primeiro contato com a ferramenta, vamos selecionar a opção “Criar um Novo Modelo”. Designe o nome do seu modelo.

Após ter mais de um template criado, você pode editá-los selecionando a opção “Atualizar modelo selecionado, clicando na opção “Escolher Modelo Base”

Conheça os recursos para design

A ferramenta de design da Hoop é drag-drop. Portanto, para selecionar os recursos que deseja inserir é só arrastar e soltar na área de trabalho.

Custom Collums:
Custom column são as colunas customizáveis. Você também pode chamar de blocos. Qualquer tipo de landing page ou e-mail é desenhada a partir de blocos. O recurso disponibiliza alguns tipos de blocos pré-moldados onde serão inseridos os conteúdos.






Nas propriedades do recurso de colunas (COLUMN PROPERTIES), você também pode optar por:
Background Colour (cor do plano de fundo)
Escolha a cor do plano de fundo que você deseja inserir. Dica: aplique o design com sua identidade visual.
Padding (preenchimento)
Na parte preenchimento, selecione o tamanho da coluna e conteúdo que vocè irá inserir, tal como se você deseja que ele fique mais à esquerda, no centro ou à direita da coluna que você escolheu.
Border (borda)
Você pode escolher se o conteúdo selecionado terá uma borda no entorno dele. Escolha a espessura da borda, tal como se a borda será sólida, pontilhada ou tracejada.
Rounded Border (arrendondamento de borda)
Você pode escolher o arredondamento da borda em todos os lados (direita ou esquerda).




Buttom
Lembre-se: drag and drop. O recurso de botões será o campo que o usuário irá clicar após se tornar um lead. Escolha uma boa call-to-action para direcionar o usuário e incentivá-lo a clicar no botão (Exemplos: Clique agora, Saiba mais, Acesse aos descontos, Compre somente hoje).





Nas propriedades do recurso de botão (ACTIONS) você também pode optar por:
Action Type (tipo de Ação)
Escolha qual será o objetivo do seu botão para o usuário: abrir um site, enviar um e-mail, ligar para um número de celular, enviar um sms ou abrir um pop-up. Ao escolher seu tipo de ação, preencha as informações que são solicitadas logo abaixo.

Importante: em Pop-Ups, você pode definir se quer que o usuário deve receber o pop-up na mesma aba ou uma aba diferente.
Button Options (opções de botão)
Escolha as cores do texto e do botão que você irá inserir. Lembre-se de utilizar as cores da sua identidade visual!
Spacing (espaçamento)
Defina a altura do seu botão, tal como o preenchimento, borda e arredondamento da borda se for de sua opção.
General (geral)
Este recurso é semelhante ao “Spacing”, porém diferente de editar o posicionamento e altura do botão, ele altera o espaço do bloco. Em linhas gerais, serve para definir se você quer ocupar ou não o espaço do botão para tornar ele responsivo.

Divider
Com a ferramenta de divisor, você pode inserir um divisor na sua landing pages. É uma ferramenta interessante caso queira dar ênfase para divisão de blocos.

Nas propriedades do recurso de divisor (LINE)você também pode optar por:
Width (largura)
Defina o tamanho que o divisor ficará entre os blocos.
Line (linha)
Defina o tipo de linha (sólida, pontilhada ou tracejada), tal como a cor que ela ficará em seu design. Você também pode definir a grossura que o divisor ficará entre os blocos.

Align (Alinhamento)
Defina o alinhamento do seu divisor. Ela pode ficar à esquerda, no centro ou à direita da sua tela.

Form
Form corresponde ao formulário. Este é um recurso importante da nossa ferramenta. É nesse campo que os usuários preencheram seus dados que serão enviados através de oportunidades de negócio no funil de destino que você configurou no início do processo. Você pode preencher quantas opções de dados deseja que preencha, mas aconselhamos até 3 para evitar desistência na página (nome, e-mail e telefone).





Nas propriedades do formulário, você pode alterar:
Submit Action (ação de submissão)
Escolha sua ação de envio para o preenchimento do formulário. Essa parte você definirá

Method (método): como padrão para captura de dados, mantenha o método “GET”
Target: defina se você deseja que o redirecionamento seja na mesma página (SAME TAB) ou um uma nova página (NEW TAB).
Fields (campos)
Selecione os campos que deseja que o usuário forneça ao chegar na sua página.
Clique no ícone do lápis ( 🖋️) para informar a natureza do campo (Exemplo: texto simples, e-mail, senha, data, caixa de texto, entre outros). Em “Show more options (mostrar mais opções)” onde você também pode alterar o preenchimento, borda e arredondamento dos campos.
Layout (disposição)
Define o layout do seu formulário: ajuste de largura, alinhamento e espaçamento entre os campos.
Labels (rótulos)
Defina o tamanho do texto, cor e alinhamento. Em “Show more options (mostrar mais opções)” onde você também pode alterar o preenchimento, borda e arredondamento dos rótulos.
Button (botão)
Defina o título do texto do botão que contém no formulário, assim como cor do texto e do plano de fundo.

Heading
Heading corresponde ao cabeçalho. É nosso cabeçalho onde colocaremos os títulos principais, ou seja, onde queremos que o usuário tome atenção ao visualizar nosso design.







Nas propriedades do cabeçalho, você pode alterar:
Heading Type (tipo de cabeçalho)
Define o tipo de cabeçalho que irá ser colocado ao seu design. Você pode optar pelo Heading 1 até o Heading 4 para organizar seus textos.
Font Family (família da fonte)
Defina a família da fonte. Dica: aplique o design com sua identidade visual. Caso não tenha uma família definida para sua marca, escolha a que mais acredita que agradará seu público-alvo e personas. Utilizamos as fontes padrões da Microsoft.
Font Size (tamanho da fonte)
Defina o tamanho da fonte.
Color (cor)
Defina a cor dos seus títulos. Lembre-se de utilizar as cores da sua identidade visual!
Text Align (alinhamento do texto)
Defina o alinhamento do seu texto. Ele pode ficar à esquerda, no centro ou à direita da sua tela.
Line Height (altura da linha)
Defina a altura da linha para seu cabeçalho, ou seja, o espaçamento que ficará entre os blocos.

Links (hiperligação)
Seu heading também pode ter links clicáveis.






HTML
Caso já tenha uma página feita através de código HTML, você pode inseri-la através da ferramenta da Hoop.

Nas propriedades de HTML, você pode alterar:
HTML (linguagem de marcação de hipertexto)
Insira o código html já criado ou crie um do zero para ser adicionado ao seu design.






Image
Adicione imagens ao seu design. Imagens são importantes pois, elas chamam a atenção do usuário e ajudam a transmitir de maneira mais eficaz o conteúdo da mensagem que se quer transmitir. Além disso, elas ajudam a tornar o conteúdo mais atrativo e fácil de entender.





Importante: As imagens não podem ultrapassar mais de 10MB, caso contrário não serão importadas ao seu material.

Nas propriedades de imagem, você pode alterar:
Auto Width (ajuste automático de largura)
Faça o ajuste automático da largura da imagem, dessa forma sua imagem se enquadra perfeitamente ao seu design.
Align (alinhamento)
Defina o alinhamento da sua imagem. Ela pode ficar à esquerda, no centro ou à direita da sua tela.
Alternative text (texto alternativo)
Caso você queira que sua imagem tenha um texto alternativo de apoio, basta inserí-lo neste campo.

Action (Ação)
Você pode tornar a imagem clicável. Escolha para onde a imagem irá direcionar seu usuário: abrir um site, enviar um e-mail, ligar para um número de celular, enviar um sms ou abrir um pop-up. Ao escolher seu tipo de ação, preencha as informações que são solicitadas logo abaixo, assim como no recurso de botão.

Menu
Menu é uma ferramenta interna usada para criar menus de navegação. Com os menus de navegação, você pode direcionar o seu usuário para onde deseja: página principal, página de contato, informações adicionais, entre outros.




Nas propriedades de Menu, você pode alterar:
Menu itens (itens do menu)
Escolha e configure os itens do menu para onde você deseja direcionar o usuário. Os itens de menu possuem a mesma lógica dos recursos de ação e tipo de ação que apresentamos anteriormente.
Styles (estilos)
Aqui você poderá escolher o estilo dos seu menu: família da fonte, tamanho da fonte, cor do texto, cor do link do texto, alinhamento, layout, definir separador e preenchimento.


Text (texto)
Assim como no recurso de Heading (cabeçalho), é utilizando o recurso de texto que você colocará as informações importantes do seu design.






Nas propriedades de texto, você pode alterar as mesmas opções de recursos que o Heading oferece: cor do texto, alinhamento, altura do texto e inserir links.

Body

Ao lado direito da tela da Hoop, você verá uma coluna em cinza escuro, contendo alguns símbolos. Selecione “Body” para definir o layout de toda a nossa página, incluindo os blocos.

As propriedades de Body (corpo), são um somatório dos recursos que vimos anteriormente, porém sendo trabalhados de forma agrupada. Você pode alterar: cor do texto, cor do plano de fundo, inserir imagens ao plano de fundo, link da imagem, alinhamento e outros recursos importantes para completar o visual do seu design!

Importante: Não esqueça de sempre “Salvar” seu arquivo ao fazer alguma alteração. O botão de Salvar fica localizado no canto superior direito ao lado de “Configurações”.

Rotas

Em caso de landing pages, rotas correspondem ao domínio que será hospedada nossa URL,ou seja, qual será o link que o usuário acessa ao ver nossa página de captura.

Para criar uma nova rota, siga as orientações a seguir:

Passo 1: Clique em adicionar nova rota




Passo 2: Selecione a opção “Criar nova rota”



Passo 3: Insira a rota desejada e clique em “Salvar”





Performance




Veja a performance do seu design: cliques, leads e vendas que foram geradas.


Opt-ins
O opt-in é quando o usuário concorda em ter seus dados pessoais processados. Isso geralmente acontece quando o usuário concorda em receber cookies ou em outros termos especificados na LGPD (Lei Geral de Proteção de Dados).

Para inserir seus opt-ins basta habilitá-los e fazer o upload dos seus termos de uso.




Considerações finais
Esperamos que esse manual tenha ajudado você a aprender como utilizar nossa ferramenta de design para landing pages e e-mails.

A ferramenta drag-and-drop da Hoop permite que você crie uma página ou e-mails de alta conversão e atraia cliques para o seu site, mesmo sem ter muita experiência em design.

Isso é importante porque o nosso objetivo é ajudar você a atingir o máximo da sua conversão!

Se você encontrar alguma dificuldade, estamos apenas a um clique de distância através do nosso canal de atendimento dentro do sistema.

Equipe HoopCRM


Crie um pop-up do tipo Landing Page
Veja nosso tutorial de como criar pop-ups do tipo landing page. Clique aqui

Crie domínios personalizados do seu site para sua landing pages
Obtenha domínios customizados para suas landing pages. Para saber mais sobre, clique aqui.

Atualizado em: 04/04/2023

Este artigo foi útil?

Compartilhe seu feedback

Cancelar

Obrigado!