Un fondo de video puede agregar un toque de profesionalismo a su sitio web. Los fondos de vídeo son comunes en sitios web corporativos, portafolios y galerías en línea.

Si ha estado buscando un nuevo diseño para su sitio web, sin duda habrá visto que se utilizan fondos de vídeo. Los desarrolladores de temas de WordPress siempre buscan formas de mostrar sus diseños y con frecuencia utilizan un fondo de vídeo para mostrar lo que su diseño puede hacer.

Afortunadamente, no necesitas gastar dinero en un nuevo tema de WordPress para agregar un fondo de video a tu sitio web. Al activar Beaver Builder podrás tener un vídeo de fondo profesional en cualquier página de tu sitio web en cuestión de minutos. Si lo prefieres, solo puedes mostrar un fondo de vídeo en partes de tu página.

En este tutorial, me gustaría mostrarle cómo puede agregar un fondo de video usando el complemento de WordPress para crear páginas visuales Beaver Builder en tres sencillos pasos.

Paso 1: busque un vídeo de fondo adecuado

Agregar un video de fondo usando Beaver Builder es increíblemente sencillo.

Descubrirás que la parte más difícil de este tutorial es elegir qué vídeo usar en tu sitio web, ya que hay miles para elegir.

Elija un vídeo que le ayude a establecer el tono que desea transmitir. Por ejemplo, un vídeo de una oficina ocupada con gente trabajando fuera queda genial en un sitio web corporativo, mientras que un vídeo de naturaleza tranquila funcionaría bien en un sitio web de salud.

Hay varios lugares en línea donde puedes encontrar videos premium y gratuitos como fondo.

Mi lugar favorito para encontrar vídeos es Coverr. Todos los videos parecen profesionales y se pueden descargar y usar de forma gratuita. Se agregan siete videos nuevos cada semana en varias categorías, por lo que seguramente encontrará un video que le guste. Se puede obtener una vista previa de cada video antes de descargar el archivo zip.

Coverr tiene una gran selección de fondos de vídeo y todos se pueden descargar gratis.

Otros buenos sitios web para buscar fondos de vídeo gratuitos incluyen (sin ningún orden en particular):

• Mazwai
• videezy
• videoplay
• Cliplienzo
• XStockvideo
• Vídeos de Pexels
• Encender movimiento
• El experimento Tanuri
• B-Roll frente a la playa
• Material de archivo gratis
• Material de archivo HD gratuito
• Destilar
• Club de imágenes de lujo
• base de salpicaduras
• Material de vídeo gratuito

También encontrará vídeos en servicios de vídeo. En YouTube encontrarás canales como OrangeHD que proporcionan fondos de vídeo. También se pueden encontrar excelentes videos en Vimeo a través de recursos como FreeHD y Life of Vids.

También encontrará imágenes de algunos servicios sociales. Consulte subreddits como Footage y Stockfootage en Reddit. También vale la pena echarle un vistazo a Flickr, pero asegúrese de seleccionar Creative Commons como licencia.

En VideoHive se pueden encontrar decenas de miles de fondos de vídeo.

Los fondos de vídeo premium no te harán perder el dinero. Los precios en VideoHive comienzan desde solo $8 por video. Hay más de un cuarto de millón de archivos de material de archivo disponibles en VideHive y más de treinta y seis mil de ellos son adecuados para fondos de vídeo.

Los servicios de imágenes y vídeos de archivo, como Shutterstock y VideoBlocks, tienden a ser un poco más caros a menos que se suscriba mensualmente, pero si su presupuesto puede estirarse un poco más, encontrará muchos videos excelentes allí.

Paso 2: prepare su archivo de video

Una vez que haya seleccionado un fondo de video, debe preparar su archivo.

Su archivo de video principal debe guardarse en formato MP4. Esto no debería ser un problema ya que ese es el formato de archivo que utilizan la gran mayoría de los sitios web de vídeos, es decir, el archivo que descargaste ya estará guardado con la extensión .mp4.

También tendrás que subir tu vídeo en formato de vídeo WebM, ya que los navegadores Opera y Firefox lo utilizan.

WebM es un formato de vídeo libre de derechos desarrollado por Google (inicialmente fue desarrollado por On2 Technologies). Opera y Firefox lo utilizan en lugar de la etiqueta de vídeo HTML5 <video>.

Encontrará muchos complementos y herramientas comerciales y gratuitas que le ayudarán a convertir su archivo de vídeo al formato de vídeo WebM en la página de herramientas del sitio web oficial del Proyecto WebM.

Convertir un archivo de vídeo pequeño no debería llevar mucho tiempo.

También hay una excelente herramienta de conversión WebM en línea disponible en Online-Convert.

Puede cargar su archivo a la herramienta directamente o vincularlo a una URL del archivo de video si ya ha subido el video a su sitio web. La configuración de video, como resolución, tasa de bits y velocidad de cuadros, se puede ajustar usando la herramienta. También puedes rotar y voltear el video.

La herramienta de conversión de archivos de Online-Convert es un gran recurso.

Lo último que debes hacer es preparar una "Foto alternativa". Esta foto de fondo se mostrará si por algún motivo no se puede mostrar el fondo del video. Por ejemplo, si el visitante utiliza un navegador desactualizado que no tiene el códec de vídeo correcto.

Si desea que la foto alternativa coincida con el fondo de su video, abra el video en su computadora y tome una captura de pantalla usando la tecla "Imprimir pantalla" en su teclado. Luego pegue la imagen en un editor de fotos y guarde el archivo. Alternativamente, use una foto única que tenga una apariencia similar al fondo de su video.

En la última sección señalé que mi recurso favorito para fondos de vídeo es Coverr.

Una de las razones por las que me gusta Coverr es porque el archivo zip descargado te proporciona todo lo que necesitas.

Cada zip contiene el video en formatos de video MP4, OGV y WebM. También se proporciona una instantánea completa del vídeo con resolución Full HD (1920×1080).

Por lo tanto, cuando descargas un fondo de video de Coverr, no necesitarás usar una herramienta de conversión de video o un editor de fotos para preparar tu archivo de video.

Paso 3: Asigne su video a una página con Beaver Builder

Ahora que tiene dos archivos de video y una foto alternativa, puede asignar los archivos a una página usando Beaver Builder.

Hay dos formas de iniciar Beaver Builder para una página de su sitio web (ya sea una publicación de blog, una página u otro tipo de publicación).

La primera opción es acceder al editor de la página en cuestión. Una vez que esté en el editor de WordPress, simplemente haga clic en la pestaña "Creador de páginas" para iniciar Beaver Builder para esa página.

Un ejemplo del editor de páginas de WordPress.

Alternativamente, puede iniciar Beaver Builder desde la interfaz de su sitio web.

Para hacer esto, debe iniciar sesión en su sitio web para que la barra de administración se muestre en la parte superior de cada página. Luego, simplemente busque la página a la que desea agregar un fondo de video y haga clic en el enlace "Creador de páginas" en la parte superior de la página.

Puede cargar Beaver Builder mientras navega por su sitio web.

Ambos ejemplos anteriores suponen que está modificando una publicación o página existente en su sitio web. Si desea crear una página desde cero, cree una nueva página en su sitio web y luego cargue la plantilla en blanco desde el cuadro de plantillas de Beaver Builder. Esto le permite comenzar a crear su página con un lienzo en blanco.

Haga clic en el enlace "Plantillas" en la barra de herramientas de Beaver Builder para cargar el cuadro de selección de plantillas de diseño.

En el siguiente ejemplo, agrego un video de fondo a una página de contenido existente.

Con Beaver Builder ahora activado, coloque el cursor sobre el área a la que desea agregar un fondo de video y verá una lista de íconos en la parte superior de la fila.

Haga clic en el icono de llave inglesa para cargar la configuración de la fila.

Seleccione el icono de configuración de fila.

Cuando se carga el cuadro de configuración de fila, se mostrará de forma predeterminada la pestaña de estilo.

Desplácese hacia abajo hasta la sección titulada Antecedentes. Verá seis opciones disponibles en el cuadro desplegable: Ninguno, Color, Foto, Vídeo, Presentación de diapositivas y Paralaje.

Seleccione Vídeo.

Seleccione el video como fondo a través del cuadro de configuración de la fila.

Esto muestra opciones para cargar su video en formato MP4 y WebM y cargar su foto alternativa.

Se muestran tres campos diferentes.

Al hacer clic en "Seleccionar video" o "Seleccionar foto" se carga la biblioteca multimedia de WordPress. Puede cargar cada archivo o seleccionarlos de su biblioteca multimedia si los archivos ya se han cargado.

Cargue ambos archivos de video y la foto alternativa.

Una vez que haya cargado todos los archivos, el cuadro de configuración de la fila debería verse así.

Todos los archivos ya se han subido.

En este punto puede guardar el cuadro de configuración de fila. Si lo desea, también puede guardar el cuadro de configuración de la fila como plantilla y hacerlo global en su sitio web.

Como puede ver a continuación, el video ahora se muestra en el fondo de mi texto.

Cómo se veía mi página una vez que configuré el fondo de mi video.

Si su video de fondo no abarca todo el ancho del área de contenido (por ejemplo, debido al tema que está utilizando), cambie el ancho del contenido a ancho completo en el cuadro de configuración. También puede ajustar el ancho de la página y el alto de la fila desde esta área.

Si necesita cambiar más el diseño, consulte la pestaña avanzada, ya que le permite cambiar el relleno y los márgenes de su fila. También puedes definir cómo se ve el diseño en dispositivos móviles y aplicar selectores CSS desde esta área.

Ajuste el ancho de su página al ancho completo si es necesario.

En el ejemplo del fondo de mi vídeo que mostré anteriormente, es posible que hayas notado que el texto de la página no destaca sobre el fondo del vídeo.

Puede resolver esto ajustando los colores que se utilizan en la fila. Se pueden cambiar el color del texto, el color del enlace, el color al pasar el cursor sobre el enlace y el color del encabezado.

Ajuste sus colores para ayudar a que su contenido se destaque.

Una superposición de fondo ayudará a que su video se destaque o se desvanezca en el fondo. Esto es increíblemente útil ya que te ayudará a mostrar tu vídeo exactamente como lo deseas.

Una superposición de fondo es una forma eficaz de modificar el aspecto de su vídeo.

Te animo a que juegues con el color y la opacidad de la superposición hasta que consigas el aspecto que deseas. En la siguiente captura de pantalla puedes ver cómo se veía el fondo de mi video cuando apliqué un color de superposición rojo con una opacidad del 50%.

Asegúrese de aprovechar la función de opacidad de Beaver Builder.

También se puede aplicar un borde a su fila. Puede seleccionar un borde sólido, discontinuo, punteado o doble. También se puede definir el color, la opacidad y el ancho del borde.

Se pueden colocar bordes alrededor de su área de contenido.

Beaver Builder es una solución responsiva que funciona en todos los navegadores modernos; sin embargo, aún es aconsejable revisar su página en diferentes navegadores para asegurarse de que se vea exactamente como la desea.

Los fondos de vídeo pueden ayudar a que tus páginas cobren vida.

Una vez que comprenda cómo se pueden agregar fondos de video usando Beaver Builder, podrá aplicar fondos de video a las páginas en cuestión de minutos. Recomiendo descargar una docena de videos inicialmente para que puedas probar una variedad de videos en tu sitio web y ver qué funciona y qué no.

Pensamientos finales

Sólo he arañado la superficie sobre cómo se pueden utilizar los fondos de vídeo en su sitio web.

Beaver Builder le permite crear un diseño único en sus páginas y completarlas con docenas de módulos de contenido y widgets de WordPress. En el ejemplo anterior, mostré cómo se puede aplicar un video como fondo detrás de un texto; sin embargo, los fondos de video se pueden aplicar a cualquier cosa.

Por ejemplo, puede mostrar un vídeo como fondo de un control deslizante de contenido, una galería, una tabla de precios, un carrusel de publicaciones o como parte de su página de destino. Realmente no hay límite para lo que puedes hacer.

Espero que hayas disfrutado este tutorial y lo hayas encontrado útil. Si es así, te animo a que nos sigas en Facebook, Slack y Twitter.

Asegúrese de consultar el blog de Beaver Builder durante los próximos meses, ya que tenemos contenido y tutoriales fantásticos programados.

Buena suerte.
kevin

Acerca de Kevin Muldoon

Kevin Muldoon es un bloguero profesional al que le encantan los viajes. Escribe regularmente sobre marketing en Internet en su blog personal y en el foro de discusión sobre marketing en Internet Rise Forums.