En este videotutorial verás como hacer una página web con un video de fondo que ocupe el 100% de la pantalla y además que no se pueda hacer scroll.
En este nuevo episodio del blog, exploro un recurso de diseño vistoso y muy llamativo, añadir un video de fondo a una página web hecha en WordPress. Verás las particularidades que tiene, que precauciones debes tomar y como puedes hacerlo tú mismo en web.
Antes recuerda que puedes suscribirte gratis al blog.
Si te suscribes puedes proponer temas para el blog y también te envío un email semanal con todas las novedades.
Añadir un video de fondo en una página web llama mucho la atención de toda aquella persona que aterriza en una web, ese es un buen momento para comunicar el mensaje que quieres transmitir en tu página, ya que has conseguido un punto vital para comunicar, captar la atención del receptor del mensaje.
Una imagen en movimiento, un video reproduciéndose, tiene mucho peso visual, lo ideal es que seas prudente añadiendo tus textos y llamadas a la acción. Piensa que si saturas mucho la página con textos, botones y otros recursos de diseño, lo que vas a conseguir es el efecto contrario, costará ver y entender qué quieres comunicar.
En el diseño que trabajamos en el ejemplo, el encabezado es corto y claro, acompañado de un párrafo que, de manera indirecta, invita a clicar en el CTA principal. El diseño de la página termina con tres botones secundarios pero muy útiles, acompañado cada botón de un icono, para datarlos de más de peso visual y equilibrar el diseño.
CTA viene de las siglas en ingles Call To Action, en castellano llamada a la acción.
Este ejemplo de diseño puede serte de gran utilidad depende del contexto de tu página web. Te recomiendo añadir un único botón principal y destacado, bien definido y con un contraste evidente. Siempre puedes finalizar el diseño como en la práctica, con objetivos secundarios bien pensados y definidos.
Para seguir el tutorial exactamente como en el diseño de ejemplo, solo necesitas una instalación de WordPress, el tema gratuito ASTRA y el plugin SPECTRA, también gratuito, instalado y activado, nada más. Verás que desde el mismo editor nativo de WordPress consigues un diseño muy vistoso, elegante y efectivo.
Si quieres descargarte el video que he utilizado para la práctica, puedes hacerlo desde el enlace que te dejo aquí abajo:
Video de Big Bab Films disponible en pexels.com.
Te dejo también enlace al artículo donde tienes disponible una alternativa a Linktree mucho más potente que puedes combinar con este videotutorial para conseguir destacar cuando llegue tu audiencia a la página.
Mejor opción que Linnktree para compartir todos tus enlaces con tu audiencia.
Explora el diseño que te presento porque en muchas ocasiones puede ser un recurso muy potente para captar la atención de toda aquella persona que aterriza en tu página web.
Albert Gimeno, diseñador y consultor web.
Y recibe un email semanal con todas las actualizaciones que publico en el blog, además, si te suscribes, puedes proponer temas para futuros artículos o vídeos.