Criando duas landing pages com HTML e CSS
As landing pages são excelentes ferramentas para quem deseja investir em ações de Marketing. Elas são páginas com conteúdo estático que possuem o objetivo de converter visitantes em leads e clientes. Os leads são potenciais compradores do seu produto ou serviço, pessoas interessadas, de alguma forma, no seu conteúdo ou diretamente no seu negócio. As landing pages possuem layouts simples, diretos, intuitivos e facilmente acessíveis por quaisquer dispositivos. O ideal é que elas não exijam muitos cliques do usuário e que ele consiga navegar sem entraves.
Para te ajudar a começar a criar landing pages e potencializar suas ações, desenvolvemos dois modelos usando apenas HTML5 e CSS3. Neste artigo, ensinaremos o passo a passo para a criação do arquivo inicial, a estilização e as configurações de responsividade para que as telas fiquem bem dimensionadas em diferentes tamanhos de aparelhos.
Há um detalhe importante antes de continuarmos para o código: é preciso lembrar que algumas funcionalidades não operam adequadamente apenas com a linguagem de marcação, o HTML, e a folha de estilo, o CSS. O formulário, por exemplo, precisa de um backend para funcionar. Mas, fica tranquilo que vamos te passar algumas dicas de como fazer isso também.
O layout
A primeira etapa antes de pensar em criar uma landing page é desenhar o seu layout. No geral, as páginas deste modelo possuem apenas uma ou mais imagens, textos e um formulário para a captação dos contatos. Para facilitar, dividimos os modelos em Landing A e Landing B e seguiremos este tutorial identificando desta maneira.
Landing A
Na Landing A, note que a barra de rolamento lateral está ativada. Portanto, há conteúdo a ser explorado na parte inferior. Embora este possa ser um recurso a ser utilizado para inserir mais informações, é preciso cuidado para que a página não se torne um site, com diversos links internos e cliques.
Perceba que, neste modelo, o “contato” é uma âncora para o formulário que está na parte inferior da tela. Ou seja, não redirecionamos o usuário para outro lugar que não a nossa própria landing page.
Landing B
Na Landing B, optamos por uma página um pouco mais simples, apenas com as informações necessárias para a coleta dos leads: uma chamada e um botão para a descarga do arquivo.
A primeira etapa é estruturar o seu arquivo. Você pode utilizar algum editor de código, como o VSCode ou o Sublime, por exemplo. Na criação destas duas páginas, utilizamos o VSCode. Crie uma pasta no seu Explorador de Arquivos com o nome do seu projeto e uma subpasta para os elementos. Neste caso, para as imagens.
Para estes dois projetos, estruturamos da seguinte forma:
A pasta img comporta as imagens do projeto. O arquivo index é o HTML, o style é o CSS e o responsividade é outra folha de estilo CSS que faz justamente o que nome diz: possui elementos para tornar a página responsiva. Aliás, estamos vivendo a era do mobile first, portanto, pensar no desempenho em dispositivos móveis é essencial.
index.html
O próximo passo é compor o arquivo index.html. Para começar, precisamos inserir as configurações básicas do arquivo, como metadados, título e links relacionados. Aqui, já começamos a estruturar o arquivo com algumas tags importantes.
Este primeiro código pode ser utilizado para as duas landing pages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing A</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="responsividade.css">
</head>
Note que inserimos os links para dois arquivos externos: o style.css e o responsividade.css. Eles são nossos dados de estilização. Você pode estilizar sua página dentro do próprio HTML, mas separar os arquivos ajuda na organização. O mesmo vale para a aplicação das linguagens de programação. Você pode criar o <script> dentro do seu código HTML, mas adicionar um link, da mesma forma que fizemos com o CSS, pode te ajudar a se localizar melhor, especialmente se você está começando a desenvolver.
O próximo passo, é estruturar o arquivo de modo que fique facilmente compreensível e, para isso, utilizamos as tags. A primeira delas, após o <body> , é o <header> . Ele é o cabeçalho da página e é nele que inserimos o logotipo e o menu de navegação.
A tag <nav> identifica o menu e, nela, inserimos nela um link, que está na tag <a>. Repare que dentro da tag img está o alt . Ele é a descrição da sua imagem, caso não seja possível o carregamento.
Landing A
<body>
<header class="cabecalho">
<img class="cabecalho-imagem" src="img\logotipo.png" alt="logotipo">
<nav class="cabecalho-menu">
<a class="menu-item" href="#formulario">Contato</a>
</nav>
</header>
Landing B
<body>
<header class="cabecalho">
<img class="logotipo" src="img\logotipo.png" alt="logotipo">
<nav class="menu">
<a class="menu-item" id="site-oficial">Acesse o site oficial</a>
<a class="menu-item" id="inscricao">Inscreva-se</a>
</nav>
</header>
Neste momento, já começamos a inserir as classes e ids que serão utilizados para estilizar o documento com CSS. A nomenclatura que utilizamos é apenas de exemplo, você pode definir os nomes de classes e ids como desejar.
A próxima etapa é montar o conteúdo em si. Utilizamos a tag <main> e inserimos nela as tags <section> , <div> e as relacionadas ao texto, como <p> , <h1> e <h3>. A tag <section> ajuda a segmentar seu conteúdo, deixando-o mais organizado.
Landing A
<main class="conteudo">
<section class="principal-box">
<div id="imagem-capa">
<p class="principal-texto">Seu projeto nas mãos dos melhores arquitetos do país.</p>
</div>
</section>
<section class="secundario-box">
<div class="conteudo-box">
<div class="box" id="agilidade">
<h3>Agilidade</h3>
<p>Entregamos seu projeto pronto em menos de seis meses com todos os detalhes do jeito que você espera.</p> </div>
<div class="box" id="conhecimento">
<h3>Conhecimento</h3>
<p>Nossos profissionais são formados pelas melhores escolas de arquitetura e design de interiores do mundo.</p> </div>
<div class="box" id="entrega">
<h3>Entrega</h3>
<p>Cumprimos o que prometemos. Entregas perfeitas dentro do prazo com máxima qualidade.</p>
</div>
</div>
O conteúdo da primeira <section>, na Landing A, está abaixo. As imagens utilizadas para os exemplos é do site Pexels, um banco de imagens gratuito que você pode utilizar nos seus projetos.
Este é o conteúdo da segunda <section>:
Landing B
<main class="conteudo">
<section class="conteudo-principal">
<h1 class="primeiro-texto">Baixe agora um e-book exclusivo!</h1>
<h2 class="segundo-texto"> Todas as tendências de 2023 detalhadas por especialistas.</h2>
<button class="botao">Clique aqui para acessar</button>
</section>
</main>
</body>
</html>
Como falamos anteriormente, uma landing page é uma ferramenta muito poderosa na captação de leads. Para fazer isto, você precisa inserir um formulário. Na Landing B, você pode adicionar um pop up com formulário que, ao ser preenchido, libera a descarga do arquivo. Você pode criar o layout deste pop up também com HTML, mas para que ele funcione ao clicar, você precisará aplicar alguma linguagem de programação, como JavaScript, por exemplo. Na Landing A, inserimos o formulário na própria página.
Landing A
<form class="form" id="formulario">
<h1 id="entreEmContato">Entre em contato agora mesmo e conheça nossa equipe.</h1>
<div>
<label for="name">Nome:</label>
<input type="text" id="name" />
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" />
</div>
<div>
<label for="msg">Mensagem:</label>
<input type="text" id="msg" />
</div>
<div class="button-submit">
<button type="submit" id="button-submit">Solicite o orçamento</button>
</div>
</form>
</section>
</main>
O conteúdo nesta landing, ficou dentro da segunda <section> (repare que a tag <main> também teve seu fechamento neste momento) e o formulário ficou assim:
No <footer> — o rodapé —. você pode ficar à vontade para inserir mais informações sobre o seu negócio ou projeto. Neste caso, inserimos apenas uma breve frase:
Landing A
<footer class="rodape">
<p>Desenvolvido por @Insira seu nome</p>
</footer>
Style.css
Se você montou sua página até aqui, deve ter percebido que ela ficou um pouco esquisita, nada parecida com os modelos apresentados. Mas, não se preocupe. É neste momento que você vai aplicar os estilos com CSS. A partir de agora, dividiremos o artigo pelas páginas para melhor entendimento.
Landing A
Para começar, utilizamos uma fonte do Google, que não é nativa dos editores de código. Para isto, foi necessário utilizar o @import com a URL da fonte. Com o seletor * “resetamos o CSS”, pois algumas configurações já são pré-definidas e é necessário as remover para maior liberdade na criação da sua página.
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100&display=swap');
*{
margin:0;
padding:0;
box-sizing: border-box;
text-decoration: none;
}
Após, passamos para o body. Aqui, optamos por definir apenas a fonte que será utilizada em todo o projeto. Ela também pode ser adicionada na tag html.
body{
font-family: 'Josefin Sans', sans-serif;
}
Agora, estilizamos o cabeçalho da página.
.cabecalho{
display: flex;
align-items: center;
justify-content: space-around;
padding: 24px;
}
.cabecalho-imagem{
width: 200px;
}
.cabecalho-menu{
font-weight: bold;
display: flex;
gap: 60px;
}
.menu-item{
color: #000000;
font-size: 20px;
}
Aqui, começamos a utilizar o Flexible Box Module, mais conhecido como Flexbox, que é um método capaz de organizar os elementos na página.
Após o cabeçalho, entramos no conteúdo da página de fato. Note que você pode utilizar diversas unidades de medida. É importante se atentar à unidade escolhida para não prejudicar a exibição do layout.
.principal-box{
height: 500px;
display: flex;
}
#imagem-capa{
background-image: url("/img/pexels-jean-van-der-meulen-1457842.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 60%;
}
.principal-texto{
background-color: rgb(9, 82, 100, 0.9);
color: #fff;
font-size: 37px;
margin-top: 24%;
width: 55%;
padding: 30px;
height: 130px;
margin-left: 90%;
}
.conteudo-box{
display: flex;
gap: 30px;
justify-content: center;
}
.secundario-box{
margin-top: 5%;
text-align: -webkit-center;
}
#agilidade, #conhecimento, #entrega{
align-items: center;
display: flex;
flex-direction: column;
width: 300px;
font-weight: bold;
color: rgb(9, 82, 100);
border: 1px solid ;
padding: 30px;
border-radius: 10px;
}
p{
word-wrap: break-word;
margin-top: 12px;
color: #000;
}
#entreEmContato{
margin-top: 40px;
font-weight: bold;
margin-bottom: 30px;
color: rgb(9, 82, 100);
}
O próximo elemento é o rodapé, que, neste caso, optamos por inserir poucos elementos:
footer{
padding: 50px 0 20px 0;
font-weight: bold;
bottom: 0;
text-align: center;
}
Landing B
Algumas características da Landing A se aplicam na Landing B, como a utilização de uma fonte externa e as configurações iniciais da página.
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;300;400;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
html{
min-height: 100%;
background-image: url("img/pexels-dada-design-12291716.jpg");
background-size: cover;
background-position: center;
font-family: 'Josefin Sans', sans-serif;
}
.cabecalho{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
padding: 20px;
background-color: rgba(255, 254, 254, 0.452);
height: 140px;
}
.logotipo{
width: 160px;
padding: 10px;
}
.menu{
display: flex;
gap: 80px;
}
.menu-item{
font-size: 18px;
font-weight: 300;
padding: 10px;
}
.menu-item:hover, .botao{
cursor: pointer;
}
#inscricao{
border-radius: 10px;
background-color: rgba(14, 80, 14, 0.36);
padding: 10px;
border: none;
}
#inscricao:hover{
background-color: rgba(164, 161, 161, 0.5);
}
.conteudo{
margin-bottom: 150px;
display: flex;
margin-top: 10%;
margin-left: 10%;
}
.conteudo-principal{
display: flex;
flex-direction: column;
justify-content: space-around;
}
.primeiro-texto{
font-size: 40px;
font-weight:bold;
}
.segundo-texto{
font-size: 30px;
font-weight:300;
margin-top: 10px;
font-weight: 300;
}
.botao{
font-family:'Josefin Sans', sans-serif;
font-weight: 400;
font-size: 18px;
width: 220px;
height: 50px;
margin-top: 7%;
border-radius: 10px;
background-color: rgba(14, 80, 14, 0.36);
border: none;
}
.botao:hover{
background-color: rgba(164, 161, 161, 0.5);
}
Responsividade.css
Esta é uma etapa importante do projeto: a configuração dos elementos para que seu layout fique responsivo, ou seja, adequado para diversos tamanhos de dispositivos. Para fazer essas configurações, utilizamos o media query (@media), que permite adicionar estilizações específicas para condições pré-determinadas.
Para dispositivos com tamanho de tela máximo de 600px, as estilizações serão as seguintes:
Landing A
@media (max-width: 600px) {
.cabecalho-imagem{
width: 250px;
}
.cabecalho-menu{
display: none;
}
.cabecalho{
padding: 24px;
margin: 0;
}
.menu-item{
display: none;
}
.principal-box{
width: 100%;
height: 300px;
}
#imagem-capa{
width: 100%;
}
.principal-texto{
display: flex;
flex-direction: column;
background-color: rgb(9, 82, 100, 0.9); color: #fff;
font-size: 20px;
width: 60%;
padding: 30px;
height: 130px;
margin-left: 0;
}
.conteudo-box{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 60px;
}
#agilidade, #conhecimento, #entrega{
display: flex;
flex-direction: column;
width: 300px;
font-weight: bold;
color: rgb(9, 82, 100);
border: 1px solid ;
padding: 10px;
border-radius: 10px;
}
.form{
width: 400px;
height: 500px;
}
label{
width: 30%;
}
#mail, #name, #msg {
width: 140px;
border: 1px solid rgba(9, 82, 100, 0.479); border-radius: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
}
}
Landing B
@media (max-width: 600px) {
html{
background-position: 80%; }
.logotipo{
width: 40%;
}
#site-oficial{
display: none;
}
.primeiro-texto{
margin-top: 30px;
width: 80%;
margin-bottom: 20px;
}
.segundo-texto{
margin-bottom: 20px;
}
}
Para dispositivos maiores, até 1.400 px, as estilizações ficaram as seguintes:
Landing A
@media (min-width: 500px) and (max-width: 1451px){
.principal-texto{
display: flex;
flex-direction: column;
background-color: rgb(9, 82, 100, 0.9);
color: #fff;
font-size: 30px;
width: 300px;
padding: 30px;
height: 150px;
}
#agilidade, #conhecimento, #entrega{
display: flex;
flex-direction: column;
width: 200px;
font-weight: bold;
color: rgb(9, 82, 100);
border: 1px solid ;
padding: 10px;
border-radius: 10px;
}
}
Landing B
@media (min-width: 500px) and (max-width: 1451px){
html{
background-position: 100%;
}
.primeiro-texto{
margin-top: 30px;
margin-bottom: 30px;
}
}
Formulários
Uma pergunta que você pode ter feito quando estávamos falando sobre formulários: é possível fazer o envio de informações por e-mail apenas com HTML? A resposta é: mais ou menos. Ao adicionar a tag <a> com atributo mailto é possível determinar um e-mail para receber as mensagens. Ao clicar no botão de submit, o software padrão para envios de e-mail instalado na máquina do usuário será aberto e será possível fazer o envio da mensagem. O problema é: e se o usuário não possuir um software, como Outlook, por exemplo, instalado?
Este é um dos principais motivos de não ser possível enviar e-mails de forma adequada utilizando HTML. É necessária a utilização de um servidor SMTP (Simple Mail Transfer Protocol), que tem como função o envio de e-mails. Uma opção com um número limitado de envios gratuitos e com integração relativamente simples é o Mailchimp.
Se você desejar salvar as respostas de um formulário em um banco de dados, por exemplo, você pode utilizar a tag <script> dentro do seu código e, com uma linguagem de programação, fazer a integração entre o seu formulário e o local de destino das respostas. A nossa dica é criar um arquivo separado e conectá-lo ao seu HTML com a tag <link> para seu código ficar mais organizado.
Neste artigo, você conferiu dois exemplos de landing pages com HTML5 e CSS3 e algumas dicas sobre estilização e criação de formulários. Aproveite para conferir o nosso dicionário de tags HTML e aumentar o seu vocabulário no desenvolvimento web!
Sucesso!
A Revelo Content Network acolhe todas as raças, etnias, nacionalidades, credos, gêneros, orientações, pontos de vista e ideologias, desde que promovam diversidade, equidade, inclusão e crescimento na carreira dos profissionais de tecnologia.