Product Friday

Edição avançada de Landing

Page na prática e técnicas de
conversão
Experiência do usuário
para Landing Pages
Experiências positivas geram conversão!
PROPOSTA DE VALOR
criar conexão

ter uma narrativa

ser objetivo
PROPOSTA DE VALOR
criar conexão
experiência é sobre pessoas

entenda a necessidade do seu usuário

ter uma narrativa imagens e ilustrações

prova social traz confiança

ser objetivo
criar conexão

necessidade do usuário
criar conexão
uso de ilustração
criar conexão

prova social
PROPOSTA DE VALOR
criar conexão
que história você está tentando
contar para o usuário?

ter uma narrativa

atenção à ordem de leitura e
hierarquia da informação
ser objetivo
ter uma narrativa
contar uma história
ter uma narrativa
contar uma história
ter uma narrativa
ordem de leitura
ter uma narrativa
ordem de leitura
ter uma narrativa
ordem de leitura
ter uma narrativa
ordem de leitura

hierarquia da
informação
PROPOSTA DE VALOR
criar conexão
qual a minha prioridade?

manter o foco e simplificar

ter uma narrativa

ser objetivo
ser objetivo
prioridade
ser objetivo

focado e simples
PROPOSTA DE VALOR
criar conexão

ter uma narrativa

ser objetivo
Montando uma Landing Page
Os principais elementos para gerar conversão
ELEMENTOS
CTA

formulário

título
ELEMENTOS
CTA copy + aparência

formulário

título
CTA
copy + aparência

demonstrar valor

atender a expectativa do usuário

no máximo 4 palavras
CTA
copy + aparência

demonstrar valor

atender a expectativa do usuário

no máximo 4 palavras
CTA
copy + aparência

demonstrar valor

atender a expectativa do usuário

no máximo 4 palavras
CTA
copy + aparência

demonstrar valor

atender a expectativa do usuário

no máximo 4 palavras
CTA
copy + aparência

atenção ao contraste dentro do CTA

destaque da cor do botão

padronizar todos os CTAs

não exagere no número de CTAs

CTA
copy + aparência
CTA
copy + aparência

contraste alto copy x fundo

CTA
copy + aparência

destaque da cor
CTA
copy + aparência

padronizar
CTA
copy + aparência

atenção à quantidade
DICA DE EDIÇÃO AVANÇADA 🤫

Zoom no CTA

1. abrir a edição avançada

2. na aba CSS, colar o código body .bricks--component-button {

transition: all .2s;
3. clicar em "aplicar" transform: scale(1)
}
4. salvar a landing page
body .bricks--component-button:hover {
transform: scale(1.028);
}
ELEMENTOS
CTA

formulário onde posicionar?

título
formulário

primeira dobra x demais posições

formulário

primeira dobra x demais posições

Menos informações

Maior objetividade

Ideal para conteúdos curtos

formulário

primeira dobra x demais posições

formulário

primeira dobra x demais posições

Continuidade

Mais informações

Ideal para conteúdos longos

formulário

primeira dobra x demais posições

DICA DE EDIÇÃO AVANÇADA 🤫

Smooth scroll para o formulário

DICA DE EDIÇÃO AVANÇADA 🤫

Smooth scroll para o formulário

1. adicionar o ID da seção como endereço do link do CTA
DICA DE EDIÇÃO AVANÇADA 🤫

Smooth scroll para o formulário

1. adicionar o ID da seção como endereço do link do CTA
DICA DE EDIÇÃO AVANÇADA 🤫

Smooth scroll para o formulário

2. inserir o código abaixo no CSS da edição avançada

html {
scroll-behavior: smooth;
}

3. clicar em aplicar e salvar a landing page!

ELEMENTOS
CTA

formulário

título como construir hierarquia?

título

X
título

Tamanho

Peso

Cor
título

Tamanho

Peso

Cor
título

Tamanho

Peso

Cor
título

Tamanho

Peso

Cor

não é uma LP mas exemplifica o uso da cor

DICA DE EDIÇÃO AVANÇADA 🤫

Adicionar um novo estilo de fonte

1. em fonts.google.com pesquisar e escolher uma fonte
DICA DE EDIÇÃO AVANÇADA 🤫

Adicionar um novo estilo de fonte

2. na página da fonte, clicar no sinal de + do peso escolhido
DICA DE EDIÇÃO AVANÇADA 🤫

Adicionar um novo estilo de fonte

3. clicar no ícone do canto superior direito para abrir as famílias selecionadas.
DICA DE EDIÇÃO AVANÇADA 🤫

Adicionar um novo estilo de fonte

4. selecionar a opção @import
DICA DE EDIÇÃO AVANÇADA 🤫

Adicionar um novo estilo de fonte

5. copiar a parte do código selecionada abaixo e colar na aba CSS do RDSM
DICA DE EDIÇÃO AVANÇADA 🤫

Adicionar um novo estilo de fonte

5. adicionar o código de configuração da fonte no CSS

body .bricks--component-text h1 {

font-family:'Nome da Fonte' !important;

font-weight: Peso da Fonte;

o peso da fonte pode ser

encontrado na página da
fonte, no Google Fonts.
DICA DE EDIÇÃO AVANÇADA 🤫

Adicionar um novo estilo de fonte

6. aplicar as configurações e salvar a página
Conteúdos extras

5 Crucial Things Every Landing Page Should Have (With Examples)

The Perfect Landing Page Structure (With Examples)

A Anatomia de uma Landing Page de Alta Conversão

Using F and Z patterns to create visual hierarchy in landing page designs

Obrigado!
Q&A