¿Cómo crear una sección de fondo de video en WordPress?

Una forma efectiva de mejorar el atractivo visual de su sitio web es crear una sección de fondo de video. Intriga a sus visitantes y los alienta a permanecer más tiempo en su sitio.

WordPress proporciona varios enfoques mediante los cuales puede integrar el fondo de video.

Si no conoce ninguno de estos métodos, permítanos guiarlo a través del proceso.

Aprenderá tres técnicas sencillas para agregar videos como una sección de fondo en este blog.

#¿Por qué necesita un fondo de video en WordPress?

Todos sabemos la importancia de agregar imágenes de fondo atractivas a nuestro sitio web. Captan la atención de su audiencia y se comunican más rápido que una descripción escrita.

Sin embargo, otra forma de medios es 100 veces más poderosa que las imágenes, gráficos y otras ilustraciones. Si estás pensando en un video, ¡entonces puedes darte palmaditas en la espalda!

Dos bloggers invitados en el blog de YouTube proporcionaron estadísticas que demuestran que el video eclipsa la comunicación ineficaz con imágenes. Has oído que una imagen vale más que mil palabras, ¿verdad?

Bueno, según la percepción de estos blogueros invitados, un video vale más que un millón de palabras.

Por lo tanto, puede agregar videos como fondo en su sitio web para comunicar información esencial a su audiencia. Puede agregar un video corto para describir la historia de su marca, el mecanismo de funcionamiento de su producto, etc.

Una sección de video alienta a los visitantes de su sitio web a interactuar con él. Es posible que deseen activar el volumen multimedia, ampliar el reproductor o reproducir el video completo.

Además, sus audiencias querrán aprender más sobre su marca después de ver el video de presentación. Si sus visitantes pasan un período prolongado en su sitio web, su tasa de rebote disminuye, lo que también aumenta el rendimiento de SEO.

#Consejos para seleccionar un fondo de video perfecto

Ahora, conoce la importancia de la integración de video en los sitios web. Le presentamos algunos consejos sobre cómo seleccionar un gran video para agregar a su sitio de WordPress. Aquí hay cinco puntos cruciales que pueden resultarle útiles.

1. Video comprimido pero de alta calidad

Debe comprimir sus archivos de video antes de subirlos a la sección de fondo. Un sitio web con un video de gran tamaño se carga lentamente y brinda una experiencia de usuario terrible.

Además, Google no clasificará su sitio en los primeros resultados de búsqueda relevantes. Comprimir el video pondrá menos carga en el servidor y su sitio web se ejecutará más rápido.

Pero asegúrese de no arruinar la calidad de su video mientras lo comprime. Tu audiencia no quiere ver un video borroso. Tienes que encontrar un término medio donde el video esté comprimido pero aún tenga una resolución decente.

Puede usar una herramienta como VideoProc que le permite comprimir sus videos al mejor tamaño. La herramienta VideoProc Converter funciona con cualquier video que grabe con su GoPro, DJI, iPhone, Android, videocámara o cualquier otra cámara 4k.

2. Duración corta del videoclip

Otra cosa a considerar al agregar un video a su sitio web es que sea breve. En primer lugar, las audiencias en línea tienen poca capacidad de atención. No verán un video de media hora que brinde toda la historia de su empresa.

En su lugar, cargue un video corto de menos de un minuto con un tamaño de archivo más pequeño. La carga tardará poco tiempo y también captará la atención de los visitantes de su sitio web. Además, también puede poner material de archivo en un bucle.

3. Complementar el contenido de su sitio web

Sus visitantes disfrutarán el video solo si complementa el contenido de su sitio web. Por ejemplo, usted es dueño de un sitio de cafetería, entonces un video de motocicletas deportivas ciertamente no complementará su sitio.

Salir de contexto irrita a tu audiencia, aumentando la posibilidad de perder su atención. Por lo tanto, cree un video adecuado de su marca para agregarlo al fondo. También puede mostrar material de archivo relevante en su lugar.

4. Opción para habilitar/deshabilitar audio

Cuando alguien ingresa a su sitio, es posible que no esté esperando audio de reproducción automática. Su audiencia puede navegar por su sitio web en una biblioteca, oficina, salón de clases u otros lugares silenciosos. Un sonido repentino los sobresaltará y cerrarán la pestaña para deshacerse de él.

La reproducción automática de contenido multimedia se encuentra entre los principales atributos del sitio web que la gente odia. Puede evitar esta situación agregando una opción de alternar para habilitar/deshabilitar el audio. De esta manera, los visitantes solo pueden reproducir el audio cuando sientan la necesidad.

5. Sección de fondo de video receptivo

Los visitantes de su sitio web buscarán su contenido en varios dispositivos digitales. Por ejemplo, pueden ver su video en dispositivos móviles, computadoras portátiles o más. Un video que no responde no proporcionará la misma dimensión en todos estos tamaños de pantalla.

Por lo tanto, debe hacer que el fondo del video responda. Con esta función, su video se carga con las dimensiones correctas en todos los dispositivos de visualización.

#Tres métodos para crear una sección de fondo de video

Hay tres formas principales de agregar un video como una sección de fondo en su sitio web. En esta sección, obtienes una explicación detallada de cada una de las técnicas. Puede seleccionar cualquiera de estas opciones según su preferencia.

1. Cree una sección de fondo de video usando el Creador de sitios web

Los creadores de sitios web/páginas son perfectos para ayudarlo a diseñar páginas web sin trabajar con códigos (HTML, CSS, etc.). Estas herramientas también lo ayudan a agregar varios componentes multimedia, como control deslizante de carrusel, caja de luz de imagen, animación, etc.

1. Creador de sitios web de Elementor

Elementor es un complemento de creación de sitios web todo en uno. Le permite diseñar varios elementos, como encabezado, pie de página, página de producto, etc. Este creador de páginas es compatible con casi todos los temas y complementos de WordPress.

Primero, instale este generador de páginas desde la página Agregar nuevo complemento. Ve a la barra de búsqueda y busca “Elementor. Ahora, instala y activa la primera opción que tiene el nombre de los editores: Elementor.com .

Ahora regrese al tablero y coloque el cursor del mouse en la parte superior de la opción Elementor en la barra lateral. Haga clic en el botón Primeros pasos del menú desplegable.

Esta acción lo lleva a la página de Bienvenida de Elementor. Puede ver un botón "Crear su primera página". Haga clic en él para continuar.

Accederá a la interfaz de edición de arrastrar y soltar de Elementor Website Builder. Vamos a crear una nueva plantilla de página usando este complemento. Haga clic en el ícono de Carpeta que ve dentro del cuadro punteado como se muestra en la captura de pantalla.

Abre una ventana emergente con toneladas de plantillas de página prediseñadas. Pase el puntero del mouse sobre el diseño seleccionado. Esta acción le muestra un botón Insertar, en el que debe hacer clic para agregar la plantilla a su sitio web.

Obtiene otra ventana después de seleccionar uno de los diseños. Haga clic en el botón Comenzar, que lo lleva a la página de registro de Elementor. Cree una cuenta con este complemento de construcción para continuar.

Elementor le brinda la opción de conectar su sitio web con su biblioteca de plantillas. Haga clic en el botón Conectar. Después de eso, vuelves a su interfaz de edición.

Puede seleccionar cualquier sección en la que desee mostrar un video como fondo. Si va a ajustar su tamaño, haga clic en el botón Editar sección indicado por seis puntos en la parte superior.

Ahora puede cambiar su configuración, como la altura, el ancho y el espacio, desde la opción Diseño.

Vaya a la opción Estilo después de ajustar esta sección. Puede elegir cuatro tipos de fondo diferentes: imagen, video, degradado y presentación de diapositivas. Seleccione el ícono de Video y pegue la URL de un video de YouTube en el cuadro de texto.

Si no desea mostrar un video de YouTube, puede cargar un archivo de formato MP4 en su lugar. Para este método, debe copiar el enlace permanente de ese video de la biblioteca de medios. Después de eso, péguelo en el mismo cuadro de texto en la interfaz de Elementor.

Continuando, puede ajustar otras configuraciones para su video seleccionado. Por ejemplo, puede personalizar la superposición de color de fondo para su sección. Además, puedes elegir si reproducir el video en dispositivos móviles o no.

También puede cargar una imagen alternativa que se mostrará si su video no se carga. Finalmente, haga clic en el botón Publicar una vez que esté satisfecho con su video de fondo.

2. Creador de páginas de WordPress – Creador de castores

Beaver Builder le permite editar la página principal de su sitio web utilizando su interfaz flexible de arrastrar y soltar. Admite varios módulos de contenido, como la foto, el botón, el encabezado, el ícono, el audio, el video, etc.

Vaya a Agregar nuevo complemento para agregar esta extensión de constructor a su tablero de WordPress. Inserta su nombre en la barra de búsqueda y selecciona la primera opción, que tiene más de 300.000 instalaciones activas.

Debe instalar y activar esta extensión e ir a la página donde agrega un fondo multimedia. Si desea crear una nueva página, haga clic en el botón Agregar nuevo en el menú desplegable de la opción Páginas.

Entras en la interfaz de edición de una nueva página. Desde que instaló este complemento de construcción de arrastrar y soltar, puede personalizar la página desde el frente. Haga clic en el botón Iniciar Beaver Builder como se muestra en la captura de pantalla.

Esta acción lo lleva a la interfaz de edición frontal. Beaver Builder muestra varios módulos en la barra lateral derecha, como Audio, Título, Foto, etc. Haga clic en el icono de Video y arrástrelo al cuadro de puntos.

Crea un bloque de video y abre una ventana para ajustar la configuración de video. Primero debe configurar el tipo de video a partir de dos opciones: Biblioteca multimedia e Incrustar. Si eligió la primera alternativa, puede cargar un video desde formatos de archivo MP4 o WebM.

Haga clic en el botón "Seleccionar video" de cualquiera de estas opciones. Debe seleccionar un video de la biblioteca multimedia o cargarlo desde la unidad. Beaver Builder le permite realizar algunos ajustes, como cargar carteles, reproducir automáticamente y cambiar de bucle, etc.

Por el contrario, si selecciona la opción Video Embed, le permite pegar la URL de su video de YouTube. Una vez que inserta la URL, obtiene una vista previa del video en segundo plano. Haga clic en el botón Guardar después de realizar las ediciones finales.

Beaver Builder muestra una vista previa de su video incrustado en su interfaz. Haga clic en el botón Listo en la esquina superior derecha. Después de eso, verá cuatro botones nuevos: Descartar, Guardar borrador, Publicar y Cancelar.

Haga clic en Publicar después de eso para guardar sus actualizaciones. Le sugerimos que cargue su sitio web para verificar cómo funciona el fondo del video. Si desea una alternativa a los creadores de páginas web, consulte la siguiente sección: Complementos.

2. Cree una sección de fondo de video usando complementos de WordPress

Los complementos son una excelente manera de agregar funciones adicionales a su sitio web. Tiene la opción de elegir entre varias extensiones para agregar un fondo de video a su sitio. Hemos explicado el proceso de agregar esta característica usando dos complementos.

1. Fondos avanzados de WordPress

Con Fondos avanzados de WordPress, puede mostrar varios tipos de fondo. Por ejemplo, puede agregar una imagen, una imagen de patrón, un color, un video subido y videos de YouTube/Vimeo.

Explore la página Agregar nuevo complemento en su panel de control de WordPress. Ingrese Fondos avanzados de WordPress en la barra de búsqueda e instale la primera opción de los resultados.

Active el complemento después de instalarlo. Luego, vaya a la página donde desea agregar una sección de fondo de video. Para este tutorial, elegimos la página de inicio de nuestro sitio web. Haga clic en el botón Editar, que se encuentra en la parte inferior del título de la página.

Dentro del diseño de edición de tu página de inicio, haz clic en el signo más (+) para abrir una barra de búsqueda. Ingrese el término "AWB" y seleccione la opción de bloque Fondo (AWB). Obtienes un nuevo bloque agregado a tu página.

En este bloque, puede agregar un color, una imagen o un video. Haga clic en el botón Tipo en la barra de configuración del bloque. Seleccione la opción "Video" en el menú desplegable que ve en la captura de pantalla a continuación.

Este complemento proporciona una interfaz para agregar un video usando dos métodos. Primero, haga clic en el botón Bloquear en la barra lateral derecha. Justo debajo de la opción Video, puede elegir entre la opción YouTube/Vimeo o Self Hosted.

Cuando selecciona la opción para YouTube/Vimeo, obtiene un cuadro de texto para ingresar la URL de su video. También puede configurar la hora de inicio del video para que comience precisamente desde donde desea que se reproduzca.

Otra opción es el video autohospedado. Puede cargar un video seleccionando uno de estos tres formatos: MP4, OGV y WEBM. Haga clic en uno de estos botones y elija un video de su biblioteca multimedia.  

Si no tiene un video en la biblioteca, cargue uno desde su unidad. Una vez que inserta un video, puede ver su vista previa en la misma barra lateral. Después de eso, haga clic en el botón Publicar en la parte superior de la página.

2. mb.YTPlayer para videos de fondo

El complemento mb.YTPlayer para videos de fondo le permite integrar videos de YouTube en su sitio web. Con su versión pro, puede editar la opacidad del video, la calidad, la relación de aspecto y otras características.

Al igual que los complementos anteriores, puede instalar mb.YTPlayer desde la página Agregar nuevo complemento. Inserte su palabra clave como se muestra a continuación y actívela en su cuenta de WordPress.

Vaya a su panel de control de WordPress después de instalarlo. Después de eso, pase el cursor del mouse sobre la opción "mb.ideas" en la barra lateral izquierda. Haz clic en el botón YTPlayer que ves en su menú desplegable.

Entras en la interfaz de edición de la extensión YT.Player. Primero, haga clic en el botón de alternar para activar el video de fondo. Después de eso, inserte la URL de un video de YouTube en el cuadro de texto como se muestra en la captura de pantalla.

Desplácese hacia abajo en la página y verá una sección para elegir una página en la que desea integrar el video. Elegimos la página de inicio estática para la demostración. Puede hacer clic en Guardar cambios después de terminar las ediciones.

Después de guardar los cambios, podrá ver la miniatura del video seleccionado en esta página. También puede agregar varias URL de video separadas por una coma. Su audiencia puede ver aleatoriamente cualquiera de estos videos cada vez que visitan su sitio web.

3. Slider Hero con animación, fondo de video y creador de introducciones

El complemento Slider Hero lo ayuda a crear controles deslizantes receptivos para su sitio web. Puede agregar carrusel de texto, botones de llamada a la acción (CTA) y varios otros elementos en el control deslizante. Además, también te permite agregar un video como sección de fondo.

Como cualquier otra extensión gratuita, puede instalarla desde la página Agregar nuevo complemento de WordPress. Ingrese su palabra clave "Slider Hero" en la barra de búsqueda. Seleccione la primera opción que tenga Quantum Cloud como nombre del editor.

Ahora tienes que ir al tablero y buscar la opción Slider Hero en la barra lateral. Pase el cursor del mouse sobre él para abrir un menú desplegable. Haga clic en el botón Nuevo control deslizante del menú.

Ahora se encuentra en la interfaz de edición de este complemento. Proporciona siete efectos deslizantes distintos para que elijas. Haga clic en la opción del control deslizante que desea editar. Elegimos la primera opción: Sin efecto.

La siguiente página incluye dos secciones. El primero le permite agregar controles deslizantes, mientras que el siguiente le permite personalizar sus efectos.

Le sugerimos que haga clic en el símbolo Más (+) en la parte superior de la sección izquierda. Crea un borrador de diapositiva donde puedes escribir el título y la descripción. Además, puedes agregar dos botones CTA para cada uno de ellos.

Pasando a la sección derecha, debe seleccionar la opción Configuración de video de la barra de menú. Muestra un menú desplegable con tres alternativas de fondo de video. Elija la opción de fondo de video de YouTube.

Puede usar las otras dos opciones solo con su versión de complemento premium.

Slider Hero muestra varias configuraciones de control deslizante de video con esta acción. Obtiene un cuadro de texto para incluir la identificación de un video de YouTube. Para obtener este código, puede pegar la URL completa de su video en este espacio.

Haga clic en el botón Guardar después de finalizar los ajustes. Después de guardar los cambios, haga clic en la opción Shortcode en la esquina derecha de la barra de menú. Slider Hero proporciona un código abreviado que puede pegar en cualquier página de su sitio.

Copie el código resaltado arriba y péguelo en un bloc de notas. Ahora puedes buscar la opción Páginas en la barra lateral de WordPress. Pase el puntero del mouse sobre él para abrir un menú desplegable.

Después de eso, debe hacer clic en Agregar nuevo para crear una nueva página. Cuando ingrese a la nueva página, debe pegar el código abreviado en el área del cuerpo. Haga clic en el botón Guardar borrador después de terminar las ediciones.

También puede hacer clic en el botón Vista previa para comprobar cómo funciona el vídeo. Haga clic en el botón Publicar una vez que termine de agregar otros elementos de la página.

La siguiente captura de pantalla ilustra cómo se verá el video de fondo.

3. Cree una sección de fondo de video usando temas de WordPress

Una manera fácil de integrar un fondo de video es instalar un tema de WordPress que admita esta función. Con un tema compatible con multimedia, no necesita una extensión externa para agregar secciones de video a su sitio.

Aquí hay tres sitios web que tienen temas poderosos que admiten fondos de video.

1. WordPress.org – Repositorio de temas gratuitos

WordPress.org incluye varios temas y complementos gratuitos para potenciar su sitio web. Funciona con una configuración mínima. Además, esta herramienta de código abierto le permite compartir sus historias, productos y servicios con comodidad.

Puede buscar un tema relevante desde su barra de búsqueda. Ingrese el término "fondo de video" y seleccione cualquiera de los elementos de sus resultados. Además, puede descargar cualquier plantilla e instalarla en su panel de WordPress.

Lea su descripción antes de descargar para asegurarse de que sea compatible con la función que desea agregar. Tienes que subir el archivo ZIP del tema a tu cuenta de WordPress y activarlo después.

2. Bosque temático – Temas premium de WordPress

Theme Forest incluye miles de temas y plantillas para WordPress, comercio electrónico, marketing, CMS, etc. Son el mercado de temas más grande del mundo, con artículos únicos para diferentes proyectos.

Si desea una plantilla web premium, le recomendamos este sitio web. Similar a WordPress.org, debe ingresar la palabra clave para buscar un tema relevante. Le permite ordenar los resultados según el precio, la mejor coincidencia, etc.

Después de instalarlo en su tablero de WordPress, debe leer su documentación para agregar un fondo de video. Si no incluye las instrucciones pertinentes, debe ponerse en contacto con su equipo de soporte.

3. Rara Themes - Temas de WordPress gratuitos y premium

Rara Themes tiene una colección de algunas de las mejores plantillas de sitios web. Sus temas son ideales para crear sitios web de diferentes nichos, incluidos viajes, negocios, educación, moda, blogs personales y más. Cada una de sus plantillas de sitio web le permite integrar video en el fondo del encabezado.

Puede usar sus temas gratuitos y premium para este propósito. Explicaremos cómo configurar la sección de fondo de video usando uno de sus productos. Para esta demostración, elegimos Chic Lite.

Instale y active este tema y vaya al panel de control de WordPress. Pase el puntero del mouse sobre la opción Apariencia en la barra lateral. Luego, haga clic en el botón Encabezado del menú desplegable.

Con esta acción, ingresa a la configuración de personalización de la página principal para su sección de Banner. Puede ver el título para agregar el video de encabezado en la barra lateral izquierda. Haga clic en el botón Seleccionar video, como se muestra a continuación.

Accede a la página de la Biblioteca de medios, donde le permite elegir un video para mostrar. Seleccione el video que planea cargar, luego haga clic en el botón Elegir video. Le permite cambiar el título, el título y la descripción del archivo.

Si aún no ha subido un video, debe ir a la sección Subir archivos. Puede agregar un video en la biblioteca y elegir mostrarlo en el área del encabezado.

Regrese a la configuración de personalización y podrá ver la miniatura del video que eligió. Además, si desea integrar un video de YouTube, puede ingresar su URL en el espacio resaltado a continuación.

El video se reproduce automáticamente sin audio. Su audiencia tiene la opción de pausar y reproducir el video mientras navega por el sitio web.

¿Dónde encontrar fotos de stock para la sección de fondo de tu video?

Hasta ahora, debe tener una idea clara de cómo agregar un fondo de video a su sitio web. Pero, ¿tienes un video listo para insertar? Si no es así, permítanos ponérselo fácil.

Si eres un realizador de videos o has contratado uno para tu proyecto, no tienes que preocuparte por eso. Sin embargo, si desea un videoclip genérico para mejorar la estética de su sitio, puede utilizar material de archivo.

Los metrajes de archivo son contenido libre de regalías que puede usar sin problemas de derechos de autor. Veamos la lista de cuatro sitios web que ofrecen videos premium y gratuitos.

1. Shutterstock

Shutterstock le permite descargar varios elementos multimedia, como imágenes, gráficos, música, material de archivo, etc. Google, BuzzFeed, Marvel y varias otras marcas de renombre confían en su biblioteca de archivos para potenciar su creatividad.

Puede categorizar los videos según temas, como animales/vida salvaje, vacaciones, ciencia, educación, naturaleza y más. Shutterstock tiene más de un millón de videos de archivo de calidad 4K, HD y SD.

2. Elementos de Envato

Envato Elements tiene más de 50 millones de activos digitales, como plantillas gráficas, videos, audio, fotos, fuentes, etc. Obtuvieron todo tipo de material de archivo y clips de video para la naturaleza, los negocios y el contexto.

3. Pexels

Pexels es una biblioteca gratuita de imágenes y videos. Puede buscar cualquier categoría de material de archivo, como casas, cafés, naturaleza, niños, familia y más. También le permite donar a los creadores si tiene ganas de apoyarlos.

4. Pixabay

Pixabay tiene una comunidad de creadores talentosos con más de 1,8 millones de fotos y videos de archivo. Puede usar, modificar y también distribuir sus elementos sin dar crédito. Al igual que Pexels, puedes donar uno o más creadores si lo deseas.

Preguntas frecuentes (FAQ)

¡Terminando!

Puedes crear un gran video como fondo usando los consejos y técnicas de este blog. ¿Conoce algunos complementos/extensiones más para agregar esta característica a su sitio web? Comparta su respuesta en la sección de comentarios a continuación.

Además, ¿encontró nuestro blog informativo? Siéntase libre de proporcionar sus comentarios honestos para que podamos mejorar nuestro contenido futuro.