Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Bootstrap 4
Webdesign

Cómo crear una plantilla para página de aterrizaje con Bootstrap 4

by
Difficulty:IntermediateLength:LongLanguages:

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 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.

Los recursos

Utilizaremos algunos recursos en este proyecto, aquí los puedes encontrar:

  • Para los íconos de esta demostración, incluí la biblioteca Font Awesome en nuestro «pen».
  • Todas las imágenes son de Unsplash.

1. Establece el marcado

¡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:

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:

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í:

The header layout on extra large screens

En pantallas grandes, así:

The header layout on large screens

En pantallas más pequeñas tendrá un aspecto ligeramente diferente:

The header layout on small screens

HTML de la cabecera

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

Así es como se ve:

CSS de la cabecera

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.

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.

Así se ve:

The section layout

Sección 1 HTML

Sección 1 CSS

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.

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í:

The section layout on large screens

En pantallas pequeñas y medianas, así:

The section layout on small and medium screens

Finalmente en pantallas extra pequeñas, todas las columnas se apilan:

The section layout on extra small screens

Sección 2 HTML

Apilando los íconos

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.

Stacking multiple icons using Font Awesome library

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.

6. Crea la sección de bloques divididos

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í:

The section layout on medium screens and above

En las pantallas estrechas, deberían ser así:

The section layout on small screens

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:

7. Crea la sección de la galería de imágenes

La cuarta sección de nuestra página incluye:

  • Un encabezado
  • Cinco columnas de imágenes junto con su descripción.
  • Un botón de llamada a la acción

En pantallas medianas y superiores, se verá de esta forma:

The section layout on medium screens and above

En pantallas pequeñas, el diseño cambia de la siguiente forma:

The section layout on small screens

En pantallas extra pequeñas, todas las columnas de imágenes se apilan:

The section layout on extra small screens

Sección 4 HTML

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

Sección 4 CSS

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:

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:

The section layout on medium screens and above

En pantallas más pequeñas, sin embargo, todos los elementos están apilados:

The section layout on small screens

Sección 5 HTML

9. Crea el pie de página (footer)

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

  • Un elemento con información sobre los derechos de autor (copyright)
  • Un elemento con enlaces a diferentes páginas.

En pantallas medianas y superiores, se debería ver así:

The footer layout on medium screens and above

En pantallas más pequeñas, el diseño cambia de la siguiente forma:

The footer layout on small screens

HTML del pie de página

CSS del pie de página

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:

En este punto, veamos nuestra página:

10. Añade algunas acciones de JavaScript

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:

Y aquí está el código JavaScript que se requiere:

Activando Scrollspy de Bootstrap

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.

¡Muchas gracias por leer!

Más recursos para páginas de aterrizaje en HTML

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.