Cómo agregar un fondo de video a un sitio de WordPress

¿Busca la forma más fácil de agregar un fondo de video de WordPress?

Los fondos de video bien hechos llaman la atención y hacen que las marcas se vean geniales desde el principio. Pero cuando se hace mal, un fondo de video ralentiza su sitio, ocupa espacio y confunde a los nuevos visitantes. Es por eso que hicimos esta guía para que pueda evitar todas las trampas y, en su lugar, aprender cómo agregar un fondo de video de WordPress de la manera correcta.

Siga leyendo para conocer las mejores prácticas y los pasos para agregar un fondo de video a su sitio web de WordPress, todo sin ningún conocimiento técnico especial.

Las mejores prácticas para agregar un fondo de video de WordPress

• Mantenga el tamaño de los archivos bajo pero la resolución alta: nada reduce más el rendimiento de su sitio que los videos e imágenes grandes; sin embargo, es preferible mantener la resolución durante la compresión.
• No se exceda: Demasiados videos saturan su interfaz; Úsalos solo para resaltar un punto o mostrar algo relevante.
• Incluya una llamada a la acción con información adicional: no deje a los espectadores con ganas de más, luego olvide un enlace que conduzca a más detalles.
• Evite el audio a toda costa: es molesto cuando todas las personas solo quieren ver su sitio web.
• Si se requiere audio, no lo tenga en reproducción automática: proporcione una opción para que los usuarios reproduzcan audio.
• Considere los subtítulos para videos con audio: no todos pueden escuchar su audio, ya sea por su ubicación o por problemas de audición.
• Aloje externamente: es probable que el host de su sitio no esté diseñado para servir videos, así que elija sitios como Vimeo y YouTube para mantener el rendimiento, o considere un sitio de alojamiento de videos especializado.
• Cíñete a los mejores formatos/resoluciones: estamos hablando solo de MP4; un mínimo de 720p; códec h264.

Y recuerda, no todos los sitios web necesitan video; a veces solo hace que la interfaz sea desordenada, lenta y desenfocada. Un abogado, por ejemplo, debe ceñirse a las fotos profesionales en lugar de los videos cursis de apretones de manos que seguramente ralentizarán su sitio web.

Cómo agregar un fondo de video de WordPress

Hay varios métodos que activan las funciones de fondo de video dentro de WordPress.

Nos vamos a centrar en cuatro soluciones diferentes sin código:

1. El bloque de cubierta incorporado
2. Un complemento de fondo/encabezado
3. Su complemento de creación de páginas favorito
4. Usar un tema que admita fondos de video o encabezados

Siga los pasos para cada método a continuación.

Opción 1: bloque de cubierta incorporado

El editor nativo de WordPress ofrece lo que se llama un bloque de portada para insertar imágenes de fondo detrás de otro contenido, como texto y botones.

Lo que muchos usuarios de WordPress no se dan cuenta es que el bloque Cover también admite fondos de video.

Paso 1: agregue el bloque de portada

Para comenzar, vaya a la página en la que desee agregar el fondo y agregue el bloque Portada .

Paso 2: Sube tu video

Para la portada , elija el botón Cargar o Biblioteca de medios , cualquiera que desee usar para agregar video.

El bloque Portada no dice nada sobre videos compatibles, por lo que solo debe asegurarse de elegir un video (como un MP4) de la Biblioteca de medios . Haga clic en el botón Seleccionar una vez que haya marcado un video.

Paso 3: inserte contenido de primer plano superpuesto

Ahora debería ver una vista previa del video de fondo. Le invitamos a agregar bloques de primer plano a la Portada , como texto o botones.

Paso 4: edite la configuración de la portada según sea necesario

Los ajustes de la portada incluyen:

• Superposiciones de color: ideales para facilitar la lectura del texto
• Opacidad: también útil para revelar contenido en primer plano
• Altura mínima de la cubierta: a veces es necesario para que el fondo del video de WordPress cubra más espacio

Paso 5: vea su fondo de video de WordPress en acción

Una vez que haya terminado, guarde la página y vaya a la interfaz para ver el fondo de video de WordPress.

Existen bastantes complementos para agregar fondos de video de WordPress, algunos de los cuales ofrecen fondos completos del sitio, mientras que otros están diseñados para brindarle un encabezado de video.

Estos son los mejores complementos de fondo de video:

️ Nuestro favorito es el complemento Fondos avanzados de WordPress; le mostraremos cómo agregar un fondo de video de WordPress con ese complemento en solo unos pocos pasos.

Paso 1: Instale AWB y agregue su bloque de contenido

Para comenzar, instale Fondos avanzados de WordPress (AWB).

Vaya a la página donde desea agregar el video de fondo.

Usando el editor de WordPress, haga clic para agregar un bloque de contenido. Busque y seleccione el bloque Fondo (AWB) .

Paso 2: Agrega tu video

Esto le brinda opciones para agregar fondos de color, imagen o video al elemento.

Seleccione Video y luego pegue una URL de video de YouTube o Vimeo. Como alternativa, el complemento tiene una pestaña Self Hosted para cargar videos locales.

Paso 3: Expande la altura y el ancho del fondo del video

De forma predeterminada, el bloque de contenido no se extiende para cubrir gran parte del área de la página. Debe hacer clic en el botón Altura completa en el editor. También hay un botón para extender el fondo del video a ancho completo.

También puede arrastrar o insertar contenido, como texto, botones o imágenes, sobre el video de fondo.

Paso 4: Modifique la configuración de fondo de video de WordPress

Ajuste la configuración que desee en la pestaña Bloquear : hora de inicio, hora de finalización, bucle, reproducción constante, opacidad del video.

Es aconsejable agregar una superposición de color de fondo con una opacidad reducida; esto hace que el texto superpuesto sea más fácil de leer.

Para ello, vaya a la pestaña Bloquear y cambie el color a blanco o negro en Color de fondo . Mueva el control deslizante de Opacidad hacia abajo un poco para asegurarse de que el fondo aún se muestre.

Paso 5: Ver los resultados

El resultado es un video que se reproduce frente a otro contenido, idealmente uno que se reproduce en bucle, no tiene sonido y aún mantiene la mayor parte del enfoque en el contenido de primer plano.

Opción 3: su complemento de creación de páginas favorito

La mayoría de los creadores de páginas, como Elementor, WPBakery y Divi, ofrecen funciones de fondo para agregar una imagen o un fondo de video a casi cualquier módulo de contenido.

️ Siéntase libre de elegir el creador de páginas de su agrado, pero recomendamos Elementor debido a su facilidad de uso.

Asegúrese de instalar Elementor o cualquier constructor que pretenda usar antes de comenzar.

Paso 1: abre una página con el editor de Elementor

Vaya a Páginas en WordPress y seleccione la página designada como su página de inicio . Haga clic en el botón Editar con Elementor .

Paso 2: agregue un bloque de contenido de sección

La mayoría de los módulos de contenido en Elementor ofrecen configuraciones de fondo, pero recomendamos insertar una Sección. De esa manera, puede agregar varios elementos a la sección, como texto, imágenes y botones. Luego, agrega un fondo de video a la sección para que esté detrás de todo lo que está en primer plano.

Agregamos algo de texto y un botón a una sección en nuestro tutorial. Continúe y seleccione el ícono Editar sección , luego seleccione la pestaña Estilo .

Paso 3: inserta el fondo de tu video

Aquí, verá un área desplegable de Fondo . Elija la opción Video junto a Tipo de fondo . Luego pegue una URL de YouTube, Vimeo o un archivo local en el campo Enlace de video .

Paso 4: edite la configuración de fondo del video

Es posible que deba expandir el fondo del video para ocupar más espacio en la pantalla. Para hacerlo, cambie a la pestaña Diseño y ajuste Altura y Altura mínima .

De vuelta en la pestaña Estilo , considere cambiar la configuración del video de fondo:

• Hora de inicio
• Hora de finalización
• jugar una vez
• Juega en el móvil
• Modo privado

Además, piense en agregar una superposición de fondo , generalmente un color neutro como el blanco o el negro, y algunos cambios de opacidad, para que el texto, los botones y las imágenes en primer plano sean más visibles.

Paso 5: vea el fondo de video de WordPress en la interfaz

Cuando termine, el video se reproducirá detrás de todo el contenido de la sección.

Opción 4: use un tema de WordPress que admita fondos/encabezados de video

Varios temas de WordPress ofrecen encabezados incorporados, controles deslizantes y configuraciones de medios de página completa; estos le permiten cargar una imagen, GIF o video para ocupar toda la pantalla, que se usa con mayor frecuencia como encabezado de su página de inicio.

Para encontrar temas con funciones de fondo de video, busque "fondo de video" en los mercados populares:

️ Asegúrese de escanear las listas de funciones, o incluso pregunte al desarrollador antes de descargar/comprar, para asegurarse de que un tema tenga la funcionalidad de fondo de video.

Como ejemplo, el tema Colibri WP ofrece fondos de video.

Paso 1: Instala y activa el tema

Para activar un fondo de video, instale el tema Colibri WP, luego vaya a Apariencia > Configuración de Colibri > Comenzar . Aquí puede activar la función Colibri Page Builder.

Paso 2: Agregar un sitio de demostración

Haga clic en la pestaña Sitios de demostración e importe la plantilla de demostración que elija.

Paso 3: personaliza la imagen del héroe

Vaya a Apariencia > Personalizar y seleccione el icono de engranaje de Configuración junto al módulo Hero .

Paso 4: agrega un fondo de video

Seleccione la pestaña Estilo y cambie el Fondo a Video .

Finalmente, elija YouTube para pegar en una URL de video externa o Self Hosted para cargar un video local.

Como resultado, verá el fondo del video en movimiento en la vista previa del Personalizador.

Comience con el fondo de video perfecto

En esta publicación, aprendió cuatro métodos diferentes, al menos uno de los cuales debería funcionar para su situación.

️ Para conocer otras formas de mejorar su sitio, consulte nuestra publicación con 10 elementos de un diseño de página de inicio exitoso.

Si tiene alguna pregunta sobre los fondos de video de WordPress, comparta sus pensamientos en los comentarios a continuación.