¿ 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 todos los escollos y, en su lugar, aprender cómo agregar un fondo de video de WordPress de la manera correcta.

👨‍🎓

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.
  • Hospedaje externo: es probable que el hospedaje 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 hospedaje 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 .

elija el bloque de portada para insertar el fondo de video de WordPress

Paso 2: Sube tu video

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

subir bloque de portada

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.

añadir subida de vídeo

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.

contenido en primer plano

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
opacidad de superposición

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.

Opción 2: un complemento de encabezado/fondo de video

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:


Fondos avanzados de WordPress

Autor(es): Equipo avanzado de fondos de WordPress


94%Calificaciones


30,000+Instalaciones


WP 5.8+Requiere

Más información

fondos-avanzados.1.9.4.zip

Versión actual: 1.9.4

Última actualización: 29 de agosto de 2022


94%Calificaciones


30,000+Instalaciones


WP 5.8+Requiere

Página del complemento de WordPress.org



Control deslizante inteligente 3

Autor(es): Nextend


98%Calificaciones


900,000+Instalaciones


WP 5.0+Requiere

Más información

deslizador inteligente-3.3.5.1.11.zip

Versión actual: 3.5.1.11

Última actualización: 5 de octubre de 2022


98%Calificaciones


900,000+Instalaciones


WP 5.0+Requiere

Página del complemento de WordPress.org



Control deslizante, galería y carrusel de MetaSlider: complemento de WordPress receptivo

Autor(es): MetaSlider


92%Calificaciones


700,000+Instalaciones


WP 3.5+Requiere

Más información

ml-slider.3.27.13.zip

Versión actual: 3.27.13

Última actualización: 1 de noviembre de 2022


92%Calificaciones


700,000+Instalaciones


WP 3.5+Requiere

Página del complemento de WordPress.org



mb.YTPlayer para videos de fondo

Autor(es): Pupunzi (Matteo Bicocchi)


84%Calificaciones


3,000+Instalaciones


WP 3.0+Requiere

Más información

wpmbytplayer.3.3.7.zip

Versión actual: 3.3.7

Última actualización: 21 de diciembre de 2021


84%Calificaciones


3,000+Instalaciones


WP 3.0+Requiere

Página del complemento de WordPress.org


➡️

Paso 1: Instale AWB y agregue su bloque de contenido

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


Fondos avanzados de WordPress

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

Bloque de complemento AWB

Paso 2: Agrega tu video

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

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

agregue un enlace de video a youtube o un fondo de video local de WordPress

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.

altura completa

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.

configuraciones adicionales para el fondo de video de WordPress

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.

Haga esto yendo a la pestaña Bloquear y cambiando 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.

ajustar la opacidad

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.

➡️ , 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 .

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 .

estilo para la sección

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 .

agregar fondo de video de WordPress

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 .

altura mínima para el fondo de video de WordPress

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
ajustes

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.

cambiar la superposición de color para el fondo de video de WordPress

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:

➡️

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.

agregar la función de creación de páginas

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.

sitios de demostración

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 .

ajustes para la imagen del héroe

Paso 4: agrega un fondo de video

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

haga clic en estilo y video para agregar el fondo de video de WordPress

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.

Ve arriba

Comience con el fondo de video perfecto

No siempre se recomienda agregar un fondo de video de WordPress, pero debe considerarlo si tiene contenido de video de alta calidad que refleje su marca y no obstaculice el rendimiento de su sitio.

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

ℹ️ .

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Nuestra web usa cookies para mejorar tu experiencia.