Como criar uma Landing Page e deixá-la com a cara da sua empresa sem ajuda de designers

O criador de Landing Pages do RD Station é uma das funcionalidades que mais facilitam a vida de nossos clientes.

ATENÇÃO: Os códigos deste post são para um modelo de Landing Page que já está ultrapassado. Para ver os códigos para os modelos atuais, veja este post.

Ao invés de contratar um designer, um desenvolvedor, ter que investir tempo e dinheiro para ter tudo no ar, a própria equipe de marketing consegue criar instantaneamente uma Landing Page eficiente, mesmo sem qualquer conhecimento em programação.

O editor pode parecer bem simples à primeira vista e a intenção é facilitar o uso, mas ele oferece possibilidades um pouco mais poderosas quando entramos mais fundo.

Nesse post vamos mostrar o template padrão, que oferece opções de customização simples de cores e imagens. Essas opções básicas já nos dão a possibilidade de aproximar bastante a aparência das Landing Pages à identidade visual do site. Contudo, vez ou outra ainda falta alguma coisinha para ajustar. São detalhes como arrendondar os cantos do formulário, remover os bullet points ou mudar as fontes.Para isso mostraremos também o editor flexível em HTML e as opções avançadas de customização.

O Modelo Padrão

Nosso modelo padrão de Landing Page (oferta com formulário) tem um formato e estrutura que já foram exaustivamente  testados para garantir os melhores resultados. Cada elemento, tamanho e posição está de acordo com as boas práticas e as opções de customização de cores já podem ser suficientes para que a Landing Page tenha a cara do resto do site. Confira como ele é com as opções padrões na screenshot abaixo.

Na primeira tela de edição de uma Landing Page deste tipo você pode trocar os textos do cabeçalho e do corpo. A medida que vai passando o mouse por cima dos campos, o editor mostra na figura lado o que de fato está sendo editado. Você pode a qualquer momento apertar no botão de pré visualização para ver suas alterações mesmo sem salvá-las. Nessa tela é possível também escolher quais os campos que você deseja inserir no formulário.

Em seguida passamos para a aba Aparência, onde podemos customizar as cores e imagens da Landing Page.  Assim como no passo anterior o editor sempre mostra na direita da tela qual parte da Landing Page está sendo modificada.

O Modelo Flexível

Para quem quer mais espaço para modificação, dispomos o modelo flexível. Neste modelo permitimos a total customização do cabeçalho e do corpo de maneira muito parecida com a edição de um documento em um programa como o Word.  Você tem controle sobre as fontes, diagramação, inserção de imagens, inserção de links, etc. Tudo sem precisar saber nada de HTML.

E caso você domine HTML e queira fugir um pouco do padrão, há a possibilidade de editar o próprio código utilizando esse modelo.

Editor de aparência avançada

Se você ainda precisar de opções, quiser ir mais além e acertar tudo de maneira mais detalhista, existem as opções de customização avançada, que funcionam tanto para o modelo padrão quanto para o template HTML. Ele fica no final da aba Aparência.

Aqui você tem flexibilidade total para customizar a aparência através do código CSS que será aplicado a Landing Page.

Para ilustrar e principalmente facilitar para aqueles que não conhecem CSS fizemos uma coletânea de snippets (fragmentos de código) que são muito úteis e criam efeitos muito legais. Dessa maneira, basta copiar o código como está e colar na caixa de customização avançada para aplicar o efeito desejado em Landing Pages.

Ao lado de cada fragmento está o resultado de se aplicar o próprio em uma landing page padrão do modelo “oferta com formulário” (clique na imagem para visualizar em tamanho maior).

Colocar seta no formulário

Este código adiciona uma imagem de uma seta no formulário, chamando mais a atenção do usuário. Criamos três versões com cores diferentes. A primeira é com uma seta na cor verde.

#conversion section {
background-image: url(“http://rdstation-static.s3.amazonaws.com/images/seta1.png”);
background-repeat: no-repeat;
background-position: 260px 0px;
}
#conversion header {
background-image: url(“http://rdstation-static.s3.amazonaws.com/images/seta2.png”);
background-repeat: no-repeat;
background-position: 260px bottom;
}

Para usar setas de outras cores troque o valor da url ( o texto entre os parênteses) dos códigos acima por:

Vermelha:
http://rdstation-static.s3.amazonaws.com/images/seta1-vermelha.png
http://rdstation-static.s3.amazonaws.com/images/seta2-vermelha.png

Azul:
http://rdstation-static.s3.amazonaws.com/images/seta1-azul.png
http://rdstation-static.s3.amazonaws.com/images/seta2-azul.png

Mudar fonte do título

Com esse código você pode mudar a fonte do título em destaque. Neste exemplo trocamos a fonte para Times.

#container > header h1 {font-family: Times;}

Para alterar a fonte troque onde diz Times para a fonte escolhida, como por exemplo Arial, Helvetica ou Courier

Mudar fonte do subtítulo

Agora a mesma coisa para o subtítulo.

#container > header h2 {font-family: Times;}

Mudar fonte e cor dos tópicos

Você pode mudar a cor dos tópicos com as opções padrões de customização. Use este quando você precisar trocar as cores dos tópicos sem alterar a cor das descrições.

#container div.left li h3 {color: #114C8E; }

Para alterar a cor troque o texto #114C8E do código acima, pela cor que quiser em formato RGB.

Para mudar a fonte use:

#container div.left li h3 {font-family: Times;}

Substituindo Times pela fonte que preferir.

Os dois códigos podem ser usados ao mesmo tempo sem problemas, como mostra a captura de tela.

Mudar fonte e cor das descrições dos tópicos

Da mesma forma que os itens de cima, podemos mudar a cor do texto dos tópicos

#container div.left li p {color: #010C8E; }

E a fonte

#container div.left li p {font-family: Times; }

Remover bolinha dos tópicos

Podemos remover as bolinhas (bullets) dos tópicos com esse código

#container div.left li {list-style: none;}

Trocar cor de fundo do cabeçalho

Trocar a cor de fundo do cabeçalho é fácil, simplesmente substitua o texto #FF00FF pela cor em formato RGB.

#container > header { background-color: #FF00FF }

Trocar cor de fundo do corpo

Substitua o texto #FFFF00 pela cor que quiser em formato RGB e altere a cor do fundo do corpo.

#container > section { background-color: #FFFF00 }

Cantos arredondados no formulário:

Este código torna os cantos do formulário arredondados, o que é bom quando o site da empresa segue o mesmo estilo.

#conversion header { -moz-border-radius: 7px 7px 0 0; border-radius: 7px 7px 0 0;}
#conversion section { -moz-border-radius: 0 0 7px 7px; border-radius: 0 0 7px 7px;}

Trocar o logo e o título/subtítulo de posições:

Podemos também inverter a posição dos elementos do cabeçalho com esse código:

#container > header figure {float: right;}
#container > header hgroup {float: left;}

Colocar uma borda abaixo do cabeçalho

header {border-bottom: 2px dotted #007b77}

Você pode alterar o tamanho, estilo e cor da borda no código acima. Por exemplo,

Trocar 2px para 30px, dotted (pontilhada) para solid (contínua) e #007b77 por #e2ab3c

header {border-bottom: 30px solid #e2ab3c}

deixaria a borda mais larga, contínua e laranja.

Exemplos dos nossos clientes

Separamos também aqui alguns exemplos muito bons feitos por nossos clientes que usam muitas das técnicas apresentadas e com isso conseguiram resultados muito bons com suas Landing Pages.

Ficou alguma dúvida? Quer fazer algo que não mostramos aqui? Deixe seu comentário e terei prazer em responde-lo.

Não perca nenhuma novidade!

Assine nossa newsletter para ficar por dentro dos lançamentos do RD Station.

Cadastro realizado com sucesso!

Você começará a receber as newsletters mensais do RD Station em sua caixa de entrada.