Area Hero
La zona hero es lo primero que ve el visitante al llegar. Debe contener la máxima información para dar una idea clara del producto ofrecido, pero en un espacio mínimo y de forma muy directa. El usuario que llega a la páginaya sabe que necesita una solución: con el contenido de este apartado debes convencerle de que acepte tu oferta o al menos que se interesa en ella.
Para lograr este objetivo en se usan imágenes (o vídeos) y mensajes cortos, concisos y llenos de significado. Idealmente con este contenido el usuario debe percibir la información de manera directa, sin mucho esfuerzo por su parte y convencerse de que ese producto es la solución que busca.
A veces las páginas de destino solo necesitan esta zona para cumplilr con su objetivo, y en ella se incluye el formulario o la llamada a la acción (CTA).
En este ejemplo práctico se usa una imagen de fondo alusiva al trabajo de programación. El resto del contenido de este área lo podemos llamar como header landing page es:
- Titular: En grande con una frase que invita a hacer un curso.
- Subtítulo ofreciendo algunas ventajas de hacer un curso de los ofrecidos
- Resumen: otra ventaja y una lista con los cursos ofrecidos
La imagen se usa como imagen de fondo. El problema con esta forma de colocarla es lograr que el texto siga siendo visible, tener un buen contraste entre imagen y texto. Como conseguirlo dependerá de la imagen:
- Oscurecer algo la imagen para poner texto blanco o muy claro
- Aclarar la imagen y colocar texto en negro o un color oscuro.
- Usar imagenes con mucho espacio libre para colocar el texto.
Otra opción es usar una imagen y un texto pero que no vayan sobrepuestos, por ejemplo una imagen alineada a la izquierda y el texto a la derecha.
Si quieres puedes ver el area hero aislada en este enlace
Código HTML
Primero escribiríamos el código HTML, luego le añadimos los estilos para darle forma. En el ejemplo que estamos construyendo el área hero sería
<article id="hero" class="columna fg-white">
<section id="tit">
<h1>Iníciate en la creación de sitios web</h1>
<h4>Mejora tus expectativas de trabajo aprendiendo desde casa los lenguajes básicos usados en el desarrollo web</h4>
</section>
<section id="resumen">
<h5><b>Podrás crear tus propias páginas web como freelance</b></h5>
<ul>
<li>Lenguaje HTML<span class="sm-hide">: el lenguaje básico de las paginas web</span></li>
<li><span class="sm-hide">Diseña tus páginas con los</span>Estilos CSS</li>
<li><span class="sm-hide">Para darle dinamismo</span> Javascript</li>
<li>PHP<span class="sm-hide">, por si quieres ir un poco más allá</span></li>
</ul>
</section>
<section class="cta1">
<div>
<h2>¡Cada curso por tan solo 12 €!</h2>
<a href="#formul" class="boton">Quiero registrarme</a>
</div>
</section>
</article>
Este era el esquema que defníamos en la introducción a la construcción de esta Landing Page de ejemplo.
Por ejemplo en este caso nuestra landing page tiene un header con una section para colocar el título (h1) y subtítulo (h4), otra section para el resumen con la lista de cursos. Y una última section para una primera llamada al CTA, un enlace que dirige al formulario.
Las listas son formas de atraer la atención y comunicar de manera rápida. En este caso la lista de cursos lleva una pequeña explicación muy corta que se oculta en pantallas pequeñas, de ahí el span class="sm-hide".
La llamada a la acción presenta colores diferentes: azul para el texto y un color rojo, o sea, muy contrastado y que no se usa para nada más en toda la página. Se trata de lamar la atención, que el botón destaque.
El estilo CSS
Si miras la página en el navegador como es lógico solo verás el texto que quieres incluir. Luego puedes modficarlos si no te parece adecuado.
#hero
{
background: url("imgs/heroimg.jpg") left top / cover no-repeat;
height: auto;
min-height:calc(100vh - var(--altoMenu));
}
.columna{
display:flex;
flex-direction:column;
min-height:inherit;
}
.columna section{
flex-grow:1;
}
#tit{
text-align:center;
width:60%;
margin:0 auto;
}
#resumen{
margin-left:2rem;
}
ul{ list-style:''}
li{
height:3rem;
}
li::before{
font-family: 'iconos' !important;
content: "\f373";
color:orange;
font-size: 2rem;
display:inline-block;
vertical-align:middle;
margin-right:8px;
}
li a{ text-decoration:none}
li:hover::before{
color:white;
}
.cta1{
display: flex;
justify-content: center;
align-items: flex-end;
margin: 0 auto 24px auto;
width: 80%;
}
.cta1 div{
flex-grow:1;
height: auto;
color: blue;
background-color: white;
text-align: center;
border-radius: 25px;
padding: 25px;
}
.boton{
display:inline-block;
border-radius: 25px;
color:white;
background-color:red;
text-align:center;
text-decoration: none;
width: auto;
padding:8px 16px;
margin-top: 8px;
}
.boton:hover{
box-shadow: 2px 2px 2px 2px #00000061;
cursor:pointer;
}
Nos aseguramos que la altura de este elemento sea la pantalla completa con min-height, observa el uso de la variable definida para al alto de la barra de menú.
Colocamos la imagen de fondo a todo el apartado (article id="hero") . Utiliza una imagen grande para que al adaptar el tamaño al bloque no pierda calidad. He usado una imagen oscurecida para que el texto en blanco destaque.
Aqui se va a usar una columna flexbox para distribuir las secciones en vertical. Más adelante volveremos a usarla. Por eso se crea la clase columna.
Se define el estilo de listas que se va utilizar en el resto de la página (luego veremos que en el pie se cambia). He colocado un pequeño efecto sobre los elementos de la lista para hacerlo algo más destacado al pasar el ratón por encima.
Definimos una clase para el cuadro de llamada a la acción y el botón rojo, color que solo se usa en llamadas a la acción. También el color del texto destaca en azul sobre blanco. Lleva un efecto hover con sombras que le hace un cierto efecto de superposición sobre el fondo.
En pantalla pequeña ajustamos anchos y algunos elementos para lograr que esta zona quede bien visible. Se ocultan elementos con la clase sm-hide, como por ejemplo parte de la lista resumen o la barra de menú.
@media (max-width:600px){
body{width:100%}
#hero{
background-size:contain;
background-color:rgb(2 9 76);
}
article, aside{
width: 100%;
}
article:before{
content:"\00a0";
height:var(--altoMenu);
}
#tit{
width:100%
}
.sm-hide{
display:none;
}
.sm-show{
display:block;
}
}