En este tutorial continuaremos con nuestro recorrido por Bootstrap 4. De manera más específica, aprenderemos a utilizarlo para crear una página de aterrizaje responsiva.
En lo que vamos a trabajar
Antes de iniciar, como siempre, veamos rápidamente nuestro proyecto de demostración:
Asegúrate de revisar la versión a pantalla completa y cambiar el tamaño de la ventana de tu navegador para que veas cómo varía su diseño según el tamaño de la ventana gráfica.
Nota: Este tutorial asume que tienes cierta familiaridad con Bootstrap 4. Por ejemplo, debes comprender cómo funciona su sistema de rejillas y sus componentes flexibles. Asimismo, te será muy útil tener un buen entendimiento de sus puntos de ruptura responsivos.
Para ponerte al día, aquí en Tuts+ tenemos varios cursos dedicados a Bootstrap 4.
¡Empecemos! Lo primero que haremos es el típico marcado de página; una cabecera (header), un pie de página (footer) y cinco secciones:
1
<header>...</header>
2
<main>
3
<!-- Banner Section -->
4
<section>...</section>
5
<!-- Process Section -->
6
<section>...</section>
7
<!-- Featured Destinations Section -->
8
<section>...</section>
9
<!-- Popular Destinations Section -->
10
<section>...</section>
11
<!-- Request a Quote Section -->
12
<section>...</section>
13
</main>
14
<footer>...</footer>
2. Define algunos estilos básicos
Antes de ver de cerca las partes individuales de nuestra página, primero definamos algunos estilos de CSS. Estos son principalmente reglas de restablecimiento junto con algunas clases auxiliares que añadiremos a los elementos de destino más adelante:
1
:root{
2
--lightblue:#F6F9FC;
3
--red:#d64041;
4
}
5
6
a,
7
a:hover{
8
color:inherit;
9
}
10
11
a:hover{
12
text-decoration:none;
13
}
14
15
.bg-lightblue{
16
background:var(--lightblue);
17
}
18
19
.bg-red{
20
background:var(--red);
21
}
22
23
.text-red{
24
color:var(--red);
25
}
26
27
.container-fluid-max{
28
max-width:1440px;
29
}
30
31
.cover{
32
background:no-repeatcenter/cover;
33
}
34
35
.p-15{
36
padding:15px;
37
}
Nota: intentaremos mantener nuestro CSS lo más ligero posible y aprovecharemos las clases incorporadas de Bootstrap 4.
3. Crea la cabecera (header)
La cabecera de la página incluye:
El logotipo
La navegación
La información de contacto
Utilizando los puntos de ruptura definidos por Bootstrap, en pantallas extra grandes debería verse así:
En pantallas grandes, así:
En pantallas más pequeñas tendrá un aspecto ligeramente diferente:
HTML de la cabecera
Para crear el marcado de la cabecera, aprovecharemos el componente de la barra de navegación que proporciona Bootstrap.
De forma predeterminada, solo la cabecera móvil (menú fuera del lienzo) tendrá un color de fondo.
No obstante, en una próxima sección, discutiremos cómo añadir un color de fondo a la cabecera en pantallas de escritorio cada vez que se desplace la página.
1
.scroll.page-header{
2
background:var(--red);
3
}
4
5
.page-header{
6
transition:background0.5sease-in-out;
7
}
8
9
.page-header.navbar{
10
padding:1rem0;
11
}
12
13
.page-header.navbar-toggler{
14
border-color:var(--white);
15
}
16
17
@mediascreenand(max-width:991px){
18
.page-header{
19
background:var(--red);
20
}
21
}
4. Crea la sección hero (portada)
La primera sección de nuestra página incluye:
Una imagen de fondo a pantalla completa
Un título o encabezado y dos botones de llamada a la acción que estarán centrados verticalmente sobre esa imagen.
Por razones de legibilidad, crearemos una superposición sobre el fondo. Después nos aseguraremos de que el texto se coloque sobre esa superposición.
De forma similar a la cabecera, más adelante discutiremos cómo escalar esta sección, cada vez que la página se desplace.
1
.scroll.hero{
2
transform:scale(0.98);
3
}
4
5
.hero{
6
background-attachment:fixed;
7
transition:transform0.5sease-in-out;
8
}
9
10
.hero::after{
11
content:’’;
12
position:absolute;
13
top:0;
14
right:0;
15
bottom:0;
16
left:0;
17
background:linear-gradient(
18
rgba(0,0,0,0.5)0,
19
rgba(0,0,0,0.3)50%,
20
rgba(0,0,0,0.1)100%
21
);
22
}
23
24
.hero.container-fluid{
25
z-index:10;
26
}
5. Crea la sección de la información general
La segunda sección de nuestra página incluye algunos detalles que ofrecen una rápida información general una vez que nuestros visitantes han asimilado la portada:
Un encabezado
Cuatro bloques de texto con sus íconos
Un botón de llamada a la acción
En pantallas grandes y superiores, debería verse así:
En pantallas pequeñas y medianas, así:
Finalmente en pantallas extra pequeñas, todas las columnas se apilan:
Para apilar varios íconos en nuestras columnas, aprovecharemos los estilos incluidos con Font Awesome. Esto nos permitirá apilar un ícono blanco sobre un ícono con un círculo de color.
Por ejemplo, a continuación puedes ver el marcado que se usó para la primera columna. Los dos elementos <i> están en línea, uno al lado del otro, pero con las clases fa-stack se apilan.
La tercera sección de nuestra página incluye dos filas a pantalla completa. Cada fila está dividida, conteniendo una columna de imágenes y una columna de texto. El contenido dentro de las columnas de texto tiene que ser centrado de forma vertical.
En las pantallas medianas y superiores, la distribución de la sección se verá así:
En las pantallas estrechas, deberían ser así:
Sección 3 HTML
Notarás el orden de los bloques anteriores. En pantallas
angostas, los bloques de texto e imagen deben alternarse; imagen, texto, imagen, texto. Esto no ocurriría sin las clases order- de flexbox que verás a continuación:
Al principio, todas las imágenes son borrosas y en escala de grises. Cada vez que pasamos el cursor sobre una imagen, la imagen se escala y sus filtros predeterminados se eliminan.
Estos son los estilos para lograr eso:
1
.popular-destinationsfigure{
2
margin-bottom:30px;
3
}
4
5
.popular-destinationsfigcaption{
6
top:0;
7
right:0;
8
bottom:0;
9
left:0;
10
background:rgba(0,0,0,0.3);
11
}
12
13
.popular-destinationsimg{
14
filter:grayscale(100%)blur(3px);
15
transition:transform0.5s,filter0.75s;
16
}
17
18
.popular-destinationsa:hoverimg{
19
transform:scale(1.25);
20
filter:none;
21
}
8. Crea la sección de llamada a la acción
La quinta sección de nuestra página incluye:
Un bloque de texto
Un botón de llamada a la acción
Los llamados (o llamadas) a la acción son vitales en las páginas de aterrizaje ya que alientan a los visitantes a hacer algo en lugar de irse. El ícono de señalamiento que hemos utilizado hace que el CTA (llamado a la acción) sea particularmente convincente. En pantallas medianas y superiores, su apariencia es la siguiente:
En pantallas más pequeñas, sin embargo, todos los elementos están apilados:
La alineación de los enlaces del pie de página cambiará dependiendo del tamaño de la ventana gráfica. Aquí están las reglas que determinan ese comportamiento:
Es hora de escribir algo de JavaScript que mejorará la experiencia de nuestra página.
Animaciones al desplazarnos
Cuando se desplaza la página, el elemento body debe recibir la clase scroll. Esta clase será responsable de lo siguiente:
Añadir un color de fondo a la cabecera. Ten en cuenta que el comportamiento solo debe ocurrir en pantallas medianas y superiores. Recuerda que ya hemos establecido un color de fondo para el menú móvil.
Escalar la primera sección.
De manera rápida, revisemos los estilos correspondientes:
1
.scroll.page-header{
2
background:var(--red);
3
}
4
5
.scroll.hero{
6
transform:scale(0.98);
7
}
8
9
.page-header{
10
transition:background0.5sease-in-out;
11
}
12
13
.hero{
14
transition:transform0.5sease-in-out;
15
}
16
17
@mediascreenand(max-width:991px){
18
.page-header{
19
background:var(--red);
20
}
21
}
Y aquí está el código JavaScript que se requiere:
Como siguiente paso, queremos que el enlace del menú activo se actualice de manera automática, dependiendo de la posición de desplazamiento.
Para hacer esto, aprovecharemos el plugin (o complemento) Scrollspy de Bootstrap.
Siguiendo la documentación, para activar el comportamiento scrollspy en los elementos de navegación, tendremos que ajustar el elemento body. De manera más específica:
Dale position:relative
Añade data-spy="scroll"
Agrega data-target="#navbar" donde #navbar es la ID de nuestro elemento navbar. Dentro de ese elemento están los enlaces del menú que deben recibir la clase active de Scrollspy.
Agrega data-offset="72" donde 72 es la altura de la cabecera en pantallas de escritorio así como la altura de la cabecera móvil cuando se cierra el menú. Esta opción determina el enlace del menú que se activará en cuanto su sección correspondiente esté a 72 píxeles de la parte superior de la ventana gráfica.
Aquí están los cambios que se requieren en la estructura de la página:
Algo que hay que tener en cuenta es que las cosas se complican cuando se requieren compensaciones responsivas. Es decir, cuando la cabecera tiene una altura diferente dependiendo de la pantalla (debido al tamaño de la fuente). En este caso, dar un valor estático al atributo data-offset no funcionará e inicializar el complemento a través de JavaScript (junto con algún código personalizado) es la única opción. Aclarado el punto, esto está más allá del alcance de nuestro tutorial en este momento.
Añade el desplazamiento suave al logotipo y a los enlaces del menú
Por último, cada vez que hagamos clic en el logotipo o en un enlace del menú, el navegador debe desplazarse suavemente a la sección correspondiente.
Gracias al método animate de jQuery, podemos lograr fácilmente esta funcionalidad. Aquí está el código JavaScript que se requiere:
Observa el número 71 dentro del código. Este número se obtiene restándole 1 a 72 (recuerda que esa es la altura de la cabecera).
Mi intento inicial fue poner el número 72 dentro del código anterior. No obstante, encontré un problema en algunos navegadores (por ejemplo, en Firefox y Chrome sí funcionó). De manera específica, cada vez que se hacía clic en un enlace del menú del encabezado, ese enlace no recibía inmediatamente la clase active esperada (que proviene del componente Scrollspy). Eso funcionó tan pronto como me desplacé hacia abajo aproximadamente un píxel. Frente a esa situación, una solución simple fue restarle uno al número inicial.
Conclusión
¡Eso es todo, amigos! Este ha sido un largo viaje, esperemos que haya valido la pena el esfuerzo. Realmente espero que este ejercicio te haya dado suficiente conocimiento e inspiración para crear impresionantes páginas de aterrizaje con Bootstrap 4. No olvides revisar la versión a pantalla completa y asegurarte de que concuerde con tu trabajo.
Con respecto a esta demostración, un siguiente paso podría ser volverla dinámica conectándola a un lenguaje del lado del servidor. Por ejemplo, sería genial crear un tema de WordPress basado en este diseño.
Bootstrap 4Este es Bootstrap 4
BootstrapUna guía para principiantes sobre el nuevo sistema de rejillas de Bootstrap 4
BootstrapTrabajando con Bootstrap 4 y Sass
Páginas de aterrizajePrincipios de diseño para páginas de aterrizaje
HTMLCómo diseñar rápidamente una gran página de aterrizaje usando plantillas
Páginas de aterrizajeCrear una página de aterrizaje que convierta
Páginas de aterrizajeMás de 20 excelentes plantillas para páginas de aterrizaje de productos (ejemplos de diseño 2018)
By
