🔔

Conte um pouco como nosso site te ajudou em algum momento.



Como Criar Uma Landing Page Moderna em 2020 - Passo a Passo


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!



Postado em: 25/11/2020 15:17:26
Publicidade

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%;
	}
}

 

copyright ©2012 - 2021 JM Jonathan Moreira - Todos os direitos reservados