Crea dos landing pages con HTML y CSS
Las landing pages son excelentes herramientas para quien quiere invertir en acciones de Marketing. Son páginas con contenido estático que tienen como objetivo convertir a los visitantes en leads y clientes. Los leads son compradores potenciales de tu producto o servicio; personas interesadas, de alguna manera, en tu contenido o directamente en tu negocio. Las landing pages tienen diseños simples, directos e intuitivos a los que se puede acceder fácilmente desde cualquier dispositivo. Lo ideal es que no requieran muchos clics por parte del usuario y que éste pueda navegar sin obstáculos.
Para ayudarte a crear landing pages e impulsar tus acciones, he desarrollado dos plantillas que usan solo HTML5 y CSS3. En este artículo, te enseñaré el paso a paso para crear el archivo inicial, el estilo y la configuración de capacidad de respuesta para que las pantallas se adapten bien a diferentes tamaños de dispositivos.
Hay un detalle importante antes de continuar con el código: es necesario recordar que algunas funcionalidades no funcionan correctamente con solo el lenguaje de marcado, HTML, y la hoja de estilo, CSS. El formulario, por ejemplo, necesita un backend para funcionar. Pero ten la seguridad de que te daré algunos consejos sobre cómo hacer esto también.
El layout
La primera etapa antes de crear una landing page es diseñar tu layout. En general, las páginas de este modelo poseen apenas una o más imágenes, textos y un formulario para recopilar contactos. Para facilitar todo, dividimos los modelos en Landing A y Landing B e identificaremos cada parte así en este tutorial.
Landing A
En la Landing A, nota que la barra de desplazamiento lateral está habilitada. Así que hay contenido para explorar en la parte inferior. Si bien este puede ser un recurso para insertar más información, se debe tener cuidado con que la página no se convierta en un sitio web con varios enlaces internos y clics.
Consider además que, en esta plantilla, el "contacto" es un ancla para el formulario en la parte inferior de la pantalla. Es decir, no redireccionamos al usuario a ningún otro lugar que no sea el nuestra propia landing page.
Landing B
En la Landing B, optamos por una página un pouco más simple, apenas con la información necesaria para recolectar leads: una llamada y un botón para descargar el archivo.
La primeira etapa es estructurar tu archivo. Puedes utilizar algún editor de código como VSCode oSublime, por ejemplo. Para crear estas dos páginas, utilizamos VSCode. Crea una carpeta en tu Explorador de Archivos con el nombre de tu proyecto y una subcarpeta para los elementos. En este caso, para las imagens.
Para estos dos proyectos, estructuramos todo de la siguiente forma:
La carpeta img contiene las imágenes del proyecto. El archivo index es el HTML, el style es el CSS y el responsividade (responsividad en español) es otra hoja de estilo CSS que hace justamente lo que dice su nombr: posee elementos para que la página sea responsiva. Por cierto, estamos viviendo en la era de mobile first, por lo que es esencial pensar en el rendimiento de los dispositivos móviles.
index.html
El siguiente paso es redactar el archivo index.html. Para comenzar, debemos ingresar la configuración básica del archivo, como los metadatos, el título y los enlaces relacionados. Aquí, ya hemos comenzado a estructurar el archivo con algunas etiquetas o tags importantes.
Este primer código se puede utilizar para ambas páginas de destino.
<!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>
Nota que insertamos los links para dos archivos externos: style.css y responsividade.css. Ellos son nuestros datos de estilización. Puedes estilizar tu página dentro del propio HTML, pero separar los arquivos ayuda con la organización. Lo mismo aplica para ejecutar los lenguajes de programación. Puedes crear el <script> dentro de tu código HTML, pero añadir un link de la misma forma que hicimos con el CSS puede ayudarte a localizarlos mejor, especialmente si apenas comienzas a programar.
El próximo passo es estructurar el archivo de modo que sea fácilmente comprensible. Para eso, utilizamos las etiquetas. La primera de ellas, después de <body> y <header>, este último el encabezado de la página y donde insertamos el logotipo y el menú de la navegación.
La etiqueta <nav> identifica el menú y, en él, insertamos un link que está en la etiqueta <a>. Considera que dentro de la etiqueta img está alt, es decir, la descripción de tu imagen, en caso de que no sea posible cargarla.
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>
En este momento, ya comenzamos a insertar las clases e ids que serán utilizadas para estilizar el documento con CSS. La nomenclatura que utilizamos es solo un ejemplo: puedes definir los nombres de clases e ids como desees.
El siguiente paso es montar el contenido en sí. Utilizamos la tag <main> e insertamos en ella las tags <section> , <div> y las relacionadas con el texto, como <p> , <h1> e <h3>. La tag <section> ayuda a segmentar tu contenido, dejándolo más 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>
El contenido de la primera <section>, en la Landing A, está abajo. Las imágenes utilizadas para los ejemplos son del sitio de Pexels, un banco de imágenes gratuito que puedes utilizar en tus proyectos.
Este es el contenido de la 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 dije anteriormente, una landing page es una herramienta muy poderosa para captar leads. A fin de lograr eso, necesitas insertar un formulario. En la Landing B, puedes agregar un pop up con formulario que, al ser llenado, libera la descarga del archivo. Asimismo, también puedes crear el layout de este pop up con HTML, pero para que funcione al hacer clic, deberás aplicar algún lenguaje de programación como JavaScript, por ejemplo. En la Landing A, insertamos el formulario en la propia 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>
El contenido en esta landing quedó dentro de la segunda <section> (recuerda que la tag <main> también tuvo su cierre en este momento) y el formulario quedó así:
El <footer> puede quedar a tu gusto para insertar más información sobre tu negocio o proyecto. En este caso, insertamos apenas una frase breve:
Landing A
<footer class="rodape">
<p>Desenvolvido por @Insira seu nome</p>
</footer>
Style.css
Si configuraste tu página hasta aquí, debes haber notado que se ve un poco rara, diferente a los modelos presentados. ¡No te preocupes! Es en este punto donde aplicarás los estilos con CSS. A partir de ahora, dividiremos el artículo por páginas para una mejor comprensión.
Landing A
Para empezar, usamos una fuente de Google que no es nativa de los editores de código. Para esto, fue necesario usar @import con la URL de origen. Con el selector * “restablecemos el CSS”, porque algunas configuraciones ya vienen predefinidas y es necesario eliminarlas para mayor libertad en la creación de tu 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;
}
Después, fuimos al body. Aquí optamos por definir apenas la fuente que será utilizada en todo el proyecto y que podrá añadirse en la 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;
}
Aquí comenzamos a utilizar Flexible Box Module, mejor conocido como Flexbox, un método capaz de organizar los elementos de la página.
Después del encabezado, ingresamos el contenido real de la página. Ten en cuenta que puedes utilizar varias unidades de medida. Es importante prestar atención a la unidad elegida para no afectar la visualización del 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);
}
El siguiente elemento es el footer, que, en este caso, elegimos para insertar pocos elementos:
footer{
padding: 50px 0 20px 0;
font-weight: bold;
bottom: 0;
text-align: center;
}
Landing B
Algunas características de la Landing A se aplican en la Landing B, como el uso de una fuente externa y las configuraciones iniciales de la 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 es una etapa importante del proyecto: la configuración de los elementos para que tu layout sea responsivo, es decir, adecuado para diversos tamaños de dispositivos. Para esas configuraciones, utilizamos media query (@media), que permite añadir estilizaciones específicas para condiciones predeterminadas.
Para dispositivos con tamaño de pantalla máximo de 600 px, las estilizaciones serán las siguientes:
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 más grandes, hasta 1.400 px, las estilizaciones serían así:
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;
}
}
Formularios
Una pergunta que pudiste haber hecho cuando estábamos hablando sobre formularios puede ser ésta: ¿es posible enviar información por e-mail con HTML? La respuesta es: más o menos. Al agregar la tag <a> con atributo mailto es viable determinar un e-mail para recibir los mensajes. Al hacer clic en el botón de submit, el software patrón para envíos de e-mail instalado en la computadora del usuario se abrirá y será posible enviar mensajes. El problema es: ¿y si el usuario no tiene instalado un software como Outlook, por ejemplo?
Este es uno de los principales motivos que imposibilitan enviar e-mails de forma adecuada utilizando HTML. Sería necesario utilizar un servidor SMTP (Simple Mail Transfer Protocol), cuya función es el envío de e-mails. Una opción con un número limitado de envíos gratuitos y con integración relativamente simple sería Mailchimp.
Si deseas guardar las respuestas de un formulario en una base de datos, por ejemplo, puedes utilizar la tag <script> dentro de tu código y, con un lenguaje de programación, integrar tu formulario con el lugar de destino de las respuestas. Mi consejo es crear un archivo separado y conectarlo a tu HTML con la tag <link> para que así tu código quede más organizado.
En este artículo, pudimos ver dos ejemplos de landing pages con HTML5 y CSS3, así como algunas recomendaciones sobre estilización y creación de formularios.
Espero que esta guía haya sido de ayuda.
¡Éxito!
Listopro Community da la bienvenida a todas las razas, etnias, nacionalidades, credos, géneros, orientaciones, puntos de vista e ideologías, siempre y cuando promuevan la diversidad, la equidad, la inclusión y el crecimiento profesional de los profesionales en tecnología.