Como Criar Uma Landing Page Moderna em 2020 - Passo a Passo
Compartilhar
Se você gosta de nossos conteúdos então não deixe de compartilhar com seus contatos, assim você nos ajuda a alcançar mais pessoas, você também pode realizar uma pesquena doação, assim você ajudará a desenvolver mais conteúdos e tutoriais de qualidade!
Confira nossas super ofertas:
► Computadores e Informática
► Eletrônicos
► Computadores, Componentes e Acessórios
► Smartfones
Se você proprietário de um negócio online então você precisa criar uma Landing Page esse uma forma de marketing muito utilizada para conseguir mais clientes e trafego para seu site, com esse tutorial você irá aprender a criar uma criar Landing Page moderna e responsiva (adaptável para dispositivos moveis) para ter o máximo de conversões possíveis.
O que é Landing Page?
Landing Page é uma página estática que foca em conquistar Leads (Pessoas interessadas no seu produto). Pode ser uma página única, mas deve ter um design moderno e que faça um link direto para o seu site.
O foco de uma Landing Page pode variar do tipo de negócios que você está oferecendo, o que é mais comum é para incentivar as pessoas a se registrarem para conseguir alguma coisa como por exemplo: um e-book, ofertas de promoção exclusivas, newsletter, teste de produtos e outros produtos.
Por que preciso de uma Landing Page?
Em sites comuns podemos ver que são cheios de banners, links, imagens e muita informação, com isso o usuário ele tem sua atenção desviada para todas essas opções e as vezes não conseguimos fazer com que ele se inscreva em nossa newsletter, por isso você precisa de uma Landing Page pois é uma pagina com foco em capturar dados de contato com o usuário para futuramente oferecermos nossos serviços ou produtos.
Uma Landing Page consegue aumentar a interação dos visitantes enquanto você os incentiva a tomar alguma decisão, isso através de vídeos ou em informações curtas e objetivas. Em média, a taxa de conversão é de 2.35%, sendo que 10% das empresas que estão no topo dessa métrica têm de 3 a 5 vezes mais conversões que isso.
Como criar uma Landing Page?
Abaixo você poderá conferir um super tutorial para você criar sua própria Landing Page moderna e atraente.
Haa já ia me esquecendo, se você gostou dessa dica então se inscreva no canal e na nossa newsletter para não perder as próximas dicas e tutoriais, também não deixe de compartilhar com seus contatos, um forte abraço.
HTML
<pre><code class="html"><!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<section id="sec1">
<div class="conteudo-texto">
<h2>Home</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, consequatur.</p>
<a> href="#sec2" class="next">Quem Somos</a>
</div>
<img src="undraw_informed_decision_p2lh.svg" alt="" srcset="">
</section>
<section id="sec2">
<div class="conteudo-texto">
<h2>Quem Somos</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, consequatur.</p>
<a> href="#sec3" class="next">Contato</a>
</div>
<img src="undraw_Questions_re_1fy7.svg" alt="" srcset="">
</section>
<section id="sec3">
<div class="conteudo-texto">
<h2>Contato</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, consequatur.</p>
<form action="" method="post">
<div class="formGrupo">
<label> for="nome">Nome</label>
<input type="text" name="nome" id="nome">
</div>
<div class="formGrupo">
<label> for="email">E-mail</label>
<input type="email" name="email" id="email">
</div>
<div class="formGrupo">
<label> for="mensagem">Mensagem</label>
<textarea> name="mensagem" id="mensagem" cols="30" rows="5"></textarea>
</div>
<button> type="submit" class="btn">Enviar</button>
</form>
</div>
<img src="undraw_Short_bio_re_fmx0.svg" alt="" srcset="">
</section>
</body>
</html></code></pre>
CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;700&display=swap');
* {
font-family: 'Roboto', sans-serif;
}
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
scroll-behavior: smooth;
}
body {
font-size: 60%;
}
section {
width: 100%;
min-height: 110%;
display: flex;
justify-content: space-evenly;
align-items: center;
padding-bottom: 20px;
}
a.next,
.btn {
border: 0;
background: #ffffff;
padding: 15px;
border-radius: 50px;
font-weight: 700;
display: inline-block;
cursor: pointer;
text-decoration: none;
color: #000000;
font-size: 1rem;
width: 100px;
text-align: center;
outline: none;
}
section h2 {
font-size: 3rem;
margin: 0;
}
section p {
font-weight: 300;
font-size: 1.2rem;
}
section img {
width: 40%;
}
section:nth-child(1) {
background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}
section:nth-child(2) {
background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}
section:nth-child(3) {
background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}
form {
display: inline-block;
width: 80%;
}
.formGrupo {
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
.formGrupo label {
margin-bottom: 3px;
font-size: 1.2rem;
}
.formGrupo input,
.formGrupo textarea {
border: 0;
padding: 7px;
color: #545455;
font-size: 1rem;
border-radius: 5px;
outline: none;
}
@media only screen and (max-width: 1200px) {
section {
flex-direction: column-reverse;
text-align: center;
}
section img {
width: 35%;
}
}
@media only screen and (max-width: 700px) {
section img {
width: 60%;
}
}
@media only screen and (max-width: 300px) {
section img {
width: 80%;
}
}