Cómo crear una plantilla para página de aterrizaje con Bootstrap 4

Spanish (Español) translation by Carlos (you can also view the original English article)

En este tutorial continuaremos con nuestro recorrido por Bootstrap 4. De manera más específica, aprenderemos a utilizarlo para crear una página de aterrizaje responsiva.

En lo que vamos a trabajar

Antes de iniciar, como siempre, veamos rápidamente nuestro proyecto de demostración:

Asegúrate de revisar la versión a pantalla completa y cambiar el tamaño de la ventana de tu navegador para que veas cómo varía su diseño según el tamaño de la ventana gráfica.

Nota: Este tutorial asume que tienes cierta familiaridad con Bootstrap 4. Por ejemplo, debes comprender cómo funciona su sistema de rejillas y sus componentes flexibles. Asimismo, te será muy útil tener un buen entendimiento de sus puntos de ruptura responsivos.

Para ponerte al día, aquí en Tuts+ tenemos varios cursos dedicados a Bootstrap 4.

Los recursos

Utilizaremos algunos recursos en este proyecto, aquí los puedes encontrar:

Para los íconos de esta demostración, incluí la biblioteca Font Awesome en nuestro «pen».
Todas las imágenes son de Unsplash.

1. Establece el marcado

¡Empecemos! Lo primero que haremos es el típico marcado de página; una cabecera (header), un pie de página (footer) y cinco secciones:

<header>...</header>
<main>
  <!-- Banner Section -->
  <section>...</section>
  <!-- Process Section -->
  <section>...</section>
  <!-- Featured Destinations Section -->
  <section>...</section>
  <!-- Popular Destinations Section -->
  <section>...</section>
  <!-- Request a Quote Section -->
  <section>...</section>
</main>
<footer>...</footer>

2. Define algunos estilos básicos

Antes de ver de cerca las partes individuales de nuestra página, primero definamos algunos estilos de CSS. Estos son principalmente reglas de restablecimiento junto con algunas clases auxiliares que añadiremos a los elementos de destino más adelante:

:root {
  --lightblue: #F6F9FC;
  --red: #d64041;
}

a,
a:hover {
  color: inherit;
}

a:hover {
  text-decoration: none;
}

.bg-lightblue {
  background: var(--lightblue);
}

.bg-red {
  background: var(--red);
}

.text-red {
  color: var(--red);
}

.container-fluid-max {
  max-width: 1440px;
}

.cover {
  background: no-repeat center/cover;
}

.p-15 {
  padding: 15px;
}

Nota: intentaremos mantener nuestro CSS lo más ligero posible y aprovecharemos las clases incorporadas de Bootstrap 4.

3. Crea la cabecera (header)

La cabecera de la página incluye:

El logotipo
La navegación
La información de contacto

Utilizando los puntos de ruptura definidos por Bootstrap, en pantallas extra grandes debería verse así:

The header layout on extra large screens

En pantallas grandes, así:

En pantallas más pequeñas tendrá un aspecto ligeramente diferente:

HTML de la cabecera

Para crear el marcado de la cabecera, aprovecharemos el componente de la barra de navegación que proporciona Bootstrap.

Así es como se ve:

<header class="fixed-top page-header">
  <div class="container-fluid container-fluid-max">
    <nav id="navbar" class="navbar navbar-expand-lg navbar-dark">
      <a class="navbar-brand" href="#home">...</a> 
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-lg-between" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="">...</a>
          </li> 
          <!-- more list items here -->
        </ul>
        <div class="text-white">
          <a href="" class="mr-2">
            <i class="fas fa-phone"></i>
            <div class="d-none d-xl-inline">...</div>
          </a>
          <a href="">
            <i class="fas fa-envelope"></i>
            <div class="d-none d-xl-inline">...</div>
          </a>
        </div>
      </div>
    </nav>
  </div>
</header>

CSS de la cabecera

De forma predeterminada, solo la cabecera móvil (menú fuera del lienzo) tendrá un color de fondo.

No obstante, en una próxima sección, discutiremos cómo añadir un color de fondo a la cabecera en pantallas de escritorio cada vez que se desplace la página.

.scroll .page-header {
  background: var(--red);
}

.page-header {
  transition: background 0.5s ease-in-out;
}

.page-header .navbar {
  padding: 1rem 0;
}

.page-header .navbar-toggler {
  border-color: var(--white); 
}

@media screen and (max-width: 991px) {
  .page-header {
    background: var(--red);
  }
}

4. Crea la sección hero (portada)

La primera sección de nuestra página incluye:

Una imagen de fondo a pantalla completa
Un título o encabezado y dos botones de llamada a la acción que estarán centrados verticalmente sobre esa imagen.

Así se ve:

Sección 1 HTML

<section id="home" class="d-flex align-items-center position-relative vh-100 cover hero" style="background-image:url(IMG_SRC);">
  <div class="container-fluid container-fluid-max">
    <div class="row">
      <div class="col-12 col-md-8 col-lg-6 col-xl-5">
        <h1 class="text-white">...</h1>
        <div class="mt-3">
          <a class="btn bg-red text-white mr-2" href="" role="button">...</a>
          <a class="btn bg-red text-white" href="" role="button">...</a>
        </div> 
      </div>
    </div>
  </div>
</section>

Sección 1 CSS

Por razones de legibilidad, crearemos una superposición sobre el fondo. Después nos aseguraremos de que el texto se coloque sobre esa superposición.

De forma similar a la cabecera, más adelante discutiremos cómo escalar esta sección, cada vez que la página se desplace.

.scroll .hero {
  transform: scale(0.98);
}

.hero {
  background-attachment: fixed;
  transition: transform 0.5s ease-in-out;
}

.hero::after {
  content: ’’;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    rgba(0, 0, 0, 0.5) 0,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
}

.hero .container-fluid {
  z-index: 10;
}

5. Crea la sección de la información general

La segunda sección de nuestra página incluye algunos detalles que ofrecen una rápida información general una vez que nuestros visitantes han asimilado la portada:

Un encabezado
Cuatro bloques de texto con sus íconos
Un botón de llamada a la acción

En pantallas grandes y superiores, debería verse así:

En pantallas pequeñas y medianas, así:

The section layout on small and medium screens

Finalmente en pantallas extra pequeñas, todas las columnas se apilan:

The section layout on extra small screens

Sección 2 HTML

<section id="process" class="process">
  <div class="container-fluid container-fluid-max">
    <div class="row text-center py-5">
      <div class="col-12 pb-4">
        <h2 class="text-red">...</h2>
      </div>
      <div class="col-12 col-sm-6 col-lg-3">...</div>
      <div class="col-12 col-sm-6 col-lg-3">...</div>
      <div class="col-12 col-sm-6 col-lg-3">...</div>
      <div class="col-12 col-sm-6 col-lg-3">...</div>
      <div class="col-12 pt-3">
        <a class="btn bg-red text-white" target="_blank" href="" role="button">...</a>
      </div>
    </div>
  </div>
</section>

Apilando los íconos

Para apilar varios íconos en nuestras columnas, aprovecharemos los estilos incluidos con Font Awesome. Esto nos permitirá apilar un ícono blanco sobre un ícono con un círculo de color.

Stacking multiple icons using Font Awesome library

Por ejemplo, a continuación puedes ver el marcado que se usó para la primera columna. Los dos elementos <i> están en línea, uno al lado del otro, pero con las clases fa-stack se apilan.

<div class="col-12 col-sm-6 col-lg-3">
  <span class="fa-stack fa-2x">
    <i class="fas fa-circle fa-stack-2x text-red"></i>
    <i class="fas fa-map-marked fa-stack-1x text-white"></i>
  </span>
  <h3 class="mt-3 text-red h4">...</h3>
  <p>...</p>
</div>

6. Crea la sección de bloques divididos

La tercera sección de nuestra página incluye dos filas a pantalla completa. Cada fila está dividida, conteniendo una columna de imá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 distribución de la sección se verá así:

The section layout on medium screens and above

En las pantallas estrechas, deberían ser así:

Sección 3 HTML

Notarás el orden de los bloques anteriores. En pantallas angostas, los bloques de texto e imagen deben alternarse; imagen, texto, imagen, texto. Esto no ocurriría sin las clases order- de flexbox que verás a continuación:

<section id="featured-destinations" class="featured-destinations bg-lightblue">
  <div class="row no-gutters">
    <div class="col-12 col-md-6 d-flex align-items-center order-1 order-md-0">
      <div class="p-15">...</div>
    </div>
    <div class="col-12 col-md-6 order-0 order-md-1">
      <div class="vh-100 cover" style="bakground-image:url(IMG_SRC);">...</div>
    </div>
    <div class="col-12 col-md-6 order-2">
      <div class="vh-100 cover" style="bakground-image:url(IMG_SRC);">...</div>
    </div>
    <div class="col-12 col-md-6 d-flex align-items-center order-3">
      <div class="p-15">...</div>
    </div>
  </div>
</section>

7. Crea la sección de la galería de imágenes

La cuarta sección de nuestra página incluye:

Un encabezado
Cinco columnas de imágenes junto con su descripción.
Un botón de llamada a la acción

En pantallas medianas y superiores, se verá de esta forma:

En pantallas pequeñas, el diseño cambia de la siguiente forma:

En pantallas extra pequeñas, todas las columnas de imágenes se apilan:

Sección 4 HTML

<section id="popular-destinations" class="popular-destinations py-5">
  <div class="container-fluid container-fluid-max">
    <div class="row">
      <div class="col-12">
        <h2 class="pb-3 text-red">...</h2>
      </div>
      <div class="col-12 col-sm-6 col-md-4">...</div>
      <div class="col-12 col-sm-6 col-md-4">...</div>
      <div class="col-12 col-sm-6 col-md-4">...</div>
      <div class="col-12 col-sm-6">...</div>
      <div class="col-12 col-md-6">...</div>
    </div>
    <div class="row">
      <div class="col text-center">
        <a class="btn bg-red text-white" href="" role="button">...</a>
      </div>    
    </div>
  </div>
</section>

El marcado responsable de ajustar el contenido de las columnas es el siguiente:

<div class="col-12 col-sm-6 col-md-4">
  <a href="" class="text-white">
    <figure class="position-relative overflow-hidden">
      <img class="img-fluid" src="IMG_SRC" alt="">
      <figcaption class="d-flex align-items-center justify-content-center position-absolute">
        <h3>...</h3>
      </figcaption>
    </figure>
  </a>
</div>

Sección 4 CSS

Al principio, todas las imá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:

.popular-destinations figure {
  margin-bottom: 30px;
}

.popular-destinations figcaption {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
}

.popular-destinations img {
  filter: grayscale(100%) blur(3px);
  transition: transform 0.5s, filter 0.75s;
}

.popular-destinations a:hover img {
  transform: scale(1.25);
  filter: none;
}

8. Crea la sección de llamada a la acción

La quinta sección de nuestra página incluye:

Un bloque de texto
Un botón de llamada a la acción

Los llamados (o llamadas) a la acción son vitales en las páginas de aterrizaje ya que alientan a los visitantes a hacer algo en lugar de irse. El ícono de señalamiento que hemos utilizado hace que el CTA (llamado a la acción) sea particularmente convincente. En pantallas medianas y superiores, su apariencia es la siguiente:

En pantallas más pequeñas, sin embargo, todos los elementos están apilados:

Sección 5 HTML

<section id="request-quote" class="py-5 request-quote bg-lightblue">
  <div class="container-fluid container-fluid-max">
    <div class="row justify-content-center">
      <div class="col-12 col-md-auto py-3 text-center">
        <h2 class="mb-0 text-red">...</h2>
        <p class="mb-0 h4 text-red font-weight-normal">...</p>
      <div>
      <div class="col-12 col-md-auto d-flex justify-content-center align-items-center">
        <a class="btn bg-red text-white font-weight-bold" href="" role="button">
          ... 
          <i class="ml-1 fas fa-hand-point-right"></i>
        </a>
      </div>
    </div>
  </div>
</section>

9. Crea el pie de página (footer)

¡Hemos llegado al final de nuestra plantilla para página de aterrizaje! El pie de página incluye:

Un elemento con información sobre los derechos de autor (copyright)
Un elemento con enlaces a diferentes páginas.

En pantallas medianas y superiores, se debería ver así:

The footer layout on medium screens and above

En pantallas más pequeñas, el diseño cambia de la siguiente forma:

HTML del pie de página

<footer class="py-5 page-footer">
  <div class="container-fluid container-fluid-max">
    <div class="row">
      <div class="col-12 col-md-6 footer-child copyright">...</div>
      <div class="col-12 col-md-6 footer-child footer-links">
        <a href="" class="mr-3">...</a>
        <a href="">...</a>
        <div>
          <small>...</small>
        </div>
      </div>
    </div>
  </div>
</footer>

CSS del pie de página

La alineación de los enlaces del pie de página cambiará dependiendo del tamaño de la ventana gráfica. Aquí están las reglas que determinan ese comportamiento:

.page-footer .footer-links {
  text-align: right;
}

@media screen and (max-width: 767px) {
  .page-footer .footer-child {
    text-align: center;
  }
}

En este punto, veamos nuestra página:

10. Añade algunas acciones de JavaScript

Es hora de escribir algo de JavaScript que mejorará la experiencia de nuestra página.

Animaciones al desplazarnos

Cuando se desplaza la página, el elemento body debe recibir la clase scroll. Esta clase será responsable de lo siguiente:

Añ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 menú móvil.
Escalar la primera sección.

De manera rápida, revisemos los estilos correspondientes:

.scroll .page-header {
  background: var(--red);
}

.scroll .hero {
  transform: scale(0.98);
}

.page-header {
  transition: background 0.5s ease-in-out;
}

.hero {
  transition: transform 0.5s ease-in-out;
}

@media screen and (max-width: 991px) {
  .page-header {
    background: var(--red);
  }
}

Y aquí está el código JavaScript que se requiere:

const $body = $("body");
const $header = $(".page-header");
const scrollClass = "scroll";

$(window).on("scroll", () => {
  if (this.matchMedia("(min-width: 992px)").matches) {
    const scrollY = $(this).scrollTop();
    scrollY > 0
      ? $body.addClass(scrollClass)
      : $body.removeClass(scrollClass);
  } else {
    $body.removeClass(scrollClass);
  }
});

Activando Scrollspy de Bootstrap

Como siguiente paso, queremos que el enlace del menú activo se actualice de manera automática, dependiendo de la posición de desplazamiento.

Para hacer esto, aprovecharemos el plugin (o complemento) Scrollspy de Bootstrap.

Siguiendo la documentación, para activar el comportamiento scrollspy en los elementos de navegación, tendremos que ajustar el elemento body. De manera más específica:

Dale position:relative
Añade data-spy="scroll"
Agrega data-target="#navbar" donde #navbar es la ID de nuestro elemento navbar. Dentro de ese elemento están los enlaces del menú que deben recibir la clase active de Scrollspy.
Agrega data-offset="72" donde 72 es la altura de la cabecera en pantallas de escritorio así como la altura de la cabecera móvil cuando se cierra el menú. Esta opción determina el enlace del menú que se activará en cuanto su sección correspondiente esté a 72 píxeles de la parte superior de la ventana gráfica.

Aquí están los cambios que se requieren en la estructura de la página:

<body data-spy="scroll" data-target="#navbar" data-offset="72" position-relative>
  ...
  <nav id="navbar" class="navbar navbar-expand-lg navbar-dark">
    ...
  </nav>
  ...
</body>

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 tamaño de la fuente). En este caso, dar un valor estático al atributo data-offset no funcionará e inicializar el complemento a través de JavaScript (junto con algún código personalizado) es la única opción. Aclarado el punto, esto está más allá del alcance de nuestro tutorial en este momento.

Añade el desplazamiento suave al logotipo y a los enlaces del menú

Por último, cada vez que hagamos clic en el logotipo o en un enlace del menú, el navegador debe desplazarse suavemente a la sección correspondiente.

Gracias al método animate de jQuery, podemos lograr fácilmente esta funcionalidad. Aquí está el código JavaScript que se requiere:

$(".page-header .nav-link, .navbar-brand").on("click", function(e) {
  e.preventDefault();
  const href = $(this).attr("href");
  $("html, body").animate({
    scrollTop: $(href).offset().top - 71
  }, 600);
});

Observa el número 71 dentro del código. Este número se obtiene restándole 1 a 72 (recuerda que esa es la altura de la cabecera).

Mi intento inicial fue poner el número 72 dentro del código anterior. No obstante, encontré un problema en algunos navegadores (por ejemplo, en Firefox y Chrome sí funcionó). De manera específica, cada vez que se hacía clic en un enlace del menú del encabezado, ese enlace no recibía inmediatamente la clase active esperada (que proviene del componente Scrollspy). Eso funcionó tan pronto como me desplacé hacia abajo aproximadamente un píxel. Frente a esa situación, una solución simple fue restarle uno al número inicial.

Conclusió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 inspiración para crear impresionantes páginas de aterrizaje con Bootstrap 4. No olvides revisar la versión a pantalla completa y asegurarte de que concuerde con tu trabajo.

Con respecto a esta demostración, un siguiente paso podría ser volverla dinámica conectándola a un lenguaje del lado del servidor. Por ejemplo, sería genial crear un tema de WordPress basado en este diseño.

¡Muchas gracias por leer!