Elementos Básicos de Páginas de Captura (Squeeze Pages)

Crie as suas próprias páginas de captura

O objetivo deste artigo é de divulgar o e-book “Como Criar Páginas de Captura (Squeeze Pages) Com o GIMP” e lhe mostrar os elementos básicos de uma página de captura.

As páginas de captura são muito usadas para a coleta de nomes e endereços de e-mails para comporem uma lista de e-mails, onde você poderá manter um contato frequente com os inscritos. Este contato é necessário pois é através dele que poderá promover os seus produtos ou serviços, assim como é possível também promover programas PTCs, MMNs, programas de afiliados, seus sítios, seus blogs… Se você ainda não leu, veja o artigo Lista de E-mails e também visite o e-curso Embasex Minha Lista de E-mails para um visão mais generalizada do que é e como poderá utilizar uma lista de e-mails para o fim de divulgação e promoção.

Seria interessante que fizesse uma leitura prévia online no e-book “Como Criar Páginas de Captura (Squeeze Pages) Com o Gimp” antes de prosseguir com a leitura deste artigo. Mas este e-book apenas lhe mostrará como construir o design de sua página de captura, ou seja, apenas a página em si mas não os elementos que a comporão. Sendo assim, este artigo vai ser uma extensão do mesmo, lhe dando dicas de como irá compor os vários elementos como títulos, subtítulos e caixas de destaque.

Também é interessante lembrar que você precisará de um programa (online ou em sua hospedagem) de auto resposta – mas conhecido como autoresponder para que possa construir a sua lista de e-mails através destas páginas de captura.

Elementos de uma Página de Captura

O Título de uma página de captura é o primeiro elemento que será visto e lido, se ele não for direto e convincente há uma grande chance de que quem vê sua página de captura não tenha interesse pelo resto do conteúdo.

Como esta é uma página exclusiva para coletar inscrições para uma lista de e-mails e a sua apresentação é feita de forma direta (em programas de geração de tráfego por exemplo), o tempo que uma pessoa tem para ler o título é muito curto, e é justamente neste breve intervalo de tempo que você precisa capturar a atenção do mesmo.

Evite utilizar verbos como “Quer…”, o motivo disto é que este verbo “querer” incita uma condição, induz que uma pessoa pense que você vai querer algo em troca, e a primeira coisa que vem à mente é dinheiro! Prefira usar os verbos aprender, saber, ir, ganhar… e também use estes verbos na forma imperativa (traz mais resultados positivos).

O Subtítulo não fica atrás em importância, pois é ele que vai ser decisivo para convencer o leitor a continuar a leitura do resto de sua página. Normalmente o subtítulo é uma síntese superficial do conteúdo que será exposto mas que seja tão convincente quanto o título e que incite o leitor a continuar a leitura.

O conteúdo do Corpo de sua página de captura vai ser crucial para convencer o leitor a deixar o seu nome e o seu endereço de e-mail. Uma das técnicas usadas para convencer um leitor é expor os pontos principais dos benefícios que terá em forma de lista – listas em geral como são resumos de fatos, passam a sensação de leitura rápida não causando rejeição à primeira vista.

É importante que deixe bem claro no corpo de sua página o que um recém inscrito irá receber. Se o leitor não tiver sido esclarecido sobre o que irá receber ou o que poderá esperar de sua assinatura em sua lista de e-mails, dificilmente deixará os seus dados de contato.

Um Brinde é a melhor forma incentivar uma inscrição. Mas não cometa o erro de exaltar o brinde em demasia e entregar um que não represente o que você prometeu. Mesmo sendo gratuito, qualquer pessoa exige que seja uma coisa que tenha valor efetivo. Se um recém inscrito receber “inutilidades”, abandonará rapidamente sua lista de e-mails e não voltará mais.

O Formulário de inscrição é que vai ser responsável por coletar os dados dos inscritos e enviá-los para um banco de dados através de um programa autoresponder.

Composição de sua Página de Captura

Após seguir as instruções do e-book mencionado no início deste artigo, sua página vai estar pronta para começar a ser editada, mas se você utilizar apenas códigos em HTML raramente verá a sua página de captura formatada da mesma maneira, tendo a mesma aparência principalmente nas fontes, nos vários navegadores de Internet (Web browsers) que existem à disposição. Isto se deve ao fato de que cada navegador de Internet vê as várias tags de acordo com o que é programado em seu engine (o núcleo, como se fosse o cérebro do navegador).

Aqui eu vou utilizar códigos CSS para garantir que em qualquer navegador que a sua página seja vista, apresente sempre a mesma formatação (mas em um ou outro sempre ocorrem pequenas alterações). Com estes códigos, vou lhe mostrar alguns elementos que poderá usar em suas páginas de captura criadas.

Para que este código mostrado aqui seja obedecido por todas as suas páginas, você deve de início criar um arquivo de texto simples com o nome styles.css e salvá-la no mesmo diretório em que estará a sua página de captura.

Para inserir este arquivo CSS em sua página de captura, você deve colocar entre as tags <head> e </head> o código abaixo (supondo que você tenha criado uma página HTML):

<html>
<head><title>Algum título</title>
…

<style type=”text/css” src=”styles.css”>

…
</head>

Nota: Os códigos descritos abaixo devem ser colocados dentro de seu arquivo styles.css.

Títulos

Se você observar os títulos nas várias páginas de captura que existem, ele é sempre composto com letras grandes (normalmente H1) e têm as cores vermelha e azul, às vezes têm partes sublinhadas ou em caixa alta…

Saiba Agora Mesmo Como Eu Consegui Ganhar MAIS de R$ 1.000,00 em um ÚNICO Mês… Vou Lhe Revelar este Segredo no eBook “Ganhe R$ 1.000,00 em um Mês” – Se Eu Consegui,Você Também CONSEGUIRÁ.

Sendo este título em tag H1 os vários navegadores irão escolher suas fontes “padrão” assim como o tamanho das fontes diferentemente. Para garantir que esta diferença será mínima, basta ter o código abaixo dentro de seu arquivo styles.css…

h1 {
font-family: Arial, Serif, Times;
font-size: 36px;
line-height: 38px;
font-weight: bold;
margin: 10;
padding: 10;
color: #DD0000;
}

…assim, toda vez que você usar as tags H1, elas terão sempre o mesmo formato. Da mesma maneira você poderá fazer com os cabeçalhos H2, H3, H4… Se dois ou mais tipos de cabeçalhos vão ter a mesma formatação, basta separá-los com vírgula (H1, H2, H3…).

Nota: para colorir o texto basta usar os meios habituais ou criar classes ou ids como o próximo exemplo, sendo que deve-se utilizar tags <span>…</span> para que as palavras fiquem na mesma linha.

Subtítulos

“Quero Compartilhar com VOCÊ estes Segredos para que Desfrute dos Mesmos BENEFÍCIOS que EU Estou Agora Desfrutando. E o Melhor, vou entregar este eBook Imediatamente para Você Através de seu E-mail GRATUITAMENTE!!!

É comum se colocar um, dois (ou até mais) subtítulos numa página de captura. Para garantir que terão a mesma formatação, basta criar uma classe ou uma identificação (ID) para esta formatação e escolher se quer ela em uma tag div ou p. Veja o exemplo abaixo.

Classes em parágrafos:

p.subtitulo {
font-family: Sans-serif;
font-weight: bold;
font-size: 18px;
line-height: 24px;
font-style: italic;
}

div.subtitulo {
font-family: Sans-serif;
font-weight: bold;
font-size: 18px;
line-height: 24px;
font-style: italic;
}

… para utilizar estas classes acima, ao se criar um parágrafo por exemplo, basta incluir class=”subtitulo” no mesmo, resultando em: <p class=”subtitulo” … >…</p>. Da mesma forma ocorre com a tag div: <div class=”subtitulo” …>…</div>.

Para generalizar as classes basta fazer como abaixo (observe o ponto inicial)…

.subtitulo {
font-family: Sans-serif;
font-weight: bold;
font-size: 18px;
line-height: 24px;
font-style: italic;
}

… assim poderá chamar a classe “subtitulo” igualmente em tags como p e div.

Também é perfeitamente possível utilizar identificações (IDs) para esta finalidade. Observe a tralha no início da função.

#subtitulo {
font-family: Sans-serif;
font-weight: bold;
font-size: 18px;
line-height: 24px;
font-style: italic;
}

… para utilizá-la em qualquer tag para construir subtítulos, basta inserí-la com o parâmetro ID: <p id=”subtitulo”… >…</p>; <div id=”subtitulo” …>…</div>;

Ainda no campo dos títulos e subtítulos, devido às várias maneiras como os vários navegadores formatam fontes, cores… uma técnica atual é usar os mesmos como imagens. Desta forma se criam títulos e subtítulos como imagens e as inserem na página de captura. Assim garante-se que estes elementos sejam vistos sempre da mesma forma.

Título em forma de imagem

Subtítulo em forma de imagem

Corpo da Página

No corpo da página além do texto comum, é empregado listas (ordenadas ou não), imagens, tabelas, caixas de destaque…

Você poderá utilizar a formatação comum de HTML ou CSS para construir o corpo do documento, seguindo às idéias anteriores relativas à parágrafos.

Como elementos adicionais, você poderá incluir caixas de destaque. O que são elas? Veja na figura abaixo ao que estou me referindo.

Como pode observar nas figuras acima, há linhas com traços ( pode ser também pontilhadas) ao redor das áreas. Para fazer esta formatação basta inserir diretamente onde a quer (supondo que está fazendo isto na célula de uma tabela) o parâmetro style=”border Xpx dashed”, como abaixo:

<table border=”0”>
<tr>…
<td style=”border: 3px dashed;”>… </td>
</tr>
</table>

Há outras definições para este parâmetro como: solid, dotted, groove, double, ridge, inset e outset. Se desejar, poderá testar estes valores substituindo a palavra dashed no exemplo acima. Também é mais comum utilizar blocos (div) ao invés de colunas (table), mas há alguns problemas em alinhamentos centralizados.

Para concluir, veja abaixo uma página montada com os elementos ressaltados aqui neste artigo.

Página de captura com seus elementos básicos

Conclusão

Vale lembrar que páginas de captura não são vistas com bons olhos por mecanismos de busca – daí ser quase que exclusivamente usada para apresentação direta em programas de geração de tráfego. Mas isto não quer dizer que você sofrerá “sanções”, apenas não espere ter uma página de captura sendo mostrada nas primeiras posições em mecanismos de busca!

Na imagem final da página de captura apresentada, no campo do formulário não está o que é de costume, algum parágrafo que garante para o inscrito que os seus dados pessoais não serão compartilhados ou vendidos com terceiros (… eu esqueci de colocar, então, não cometa o mesmo erro que eu…), isto é importante pois gera mais confiança em quem estiver vendo a sua página.

Leitura Recomendada
CSS Guia de Consulta Rápida

Outro fator importante (…que também esqueci), é pedir para a pessoa que coloque nos contatos de sua conta de e-mail (a que usará ao preencher o formulário) o seu endereço de e-mail : o mesmo endereço que usará em seu autoresponder. Isto é crucial para garantir que as sua primeiras mensagens cheguem na caixa de entrada do recém inscrito, principalmente em servidores como o Yahoo, Hotmail, BOL, e tantos outros que possuem filtros anti spam bem rígidos. O Gmail não é tão rígido assim nas primeiras mensagens.

Também, crê-se que o formulário de inscrição deva permanecer visível e que seja colocado no campo de visão do visitante (em inglês é usado o termo above the fold que se refere à parte da página que fica visível quando alguém acessa o seu sítio e não movimenta a página para baixo).

Então, faça agora mesmo a sua página de captura, divulgue-a, construa a sua lista de e-mails e promova os seus produtos!

Bônus Surpresa [+/-]

Júlio Araújo desenvolve atividades relacionados à Marketing Virtual e Negócios Online visando o desenvolvimento de técnicas de aplicação prática em vários mercados para a divulgação de produtos e/ou serviços. Também tem o objetivo de desenvolver programas para auxiliar a todos nestas atividades citadas.

Júlio Araújo

Veja os artigos de Júlio Araújo
Confira o sítio de Júlio Araújo