Video de fondo de WordPress: agréguelo en 2 métodos diferentes

Publicado: 2023-07-25

¿Está buscando hacer que su sitio web de WordPress sea más emocionante y cautivador? Una excelente manera de hacerlo es agregando un video de fondo. Es una característica interesante que capta instantáneamente la atención de las personas y hace que su sitio sea más atractivo. Pero, ¿cómo agregar un fondo de video en WordPress?

Si solicita los pasos sencillos para agregar un video de fondo de WordPress, entonces-

  • Crear una publicación/editar cualquier publicación existente
  • Añadir bloque de portada
  • Ahora agregue el video cargándolo o desde la biblioteca de medios
  • Por último, personalízalo.

Parece sencillo, pero hay algo de trabajo extra. No te preocupes; en este artículo, hemos explicado todo correctamente. Bueno, no es solo el camino; hemos agregado otra forma de agregar video como fondo del sitio web usando PostX.

Entonces, exploremos cómo agregar un fondo de video en WordPress.

Video de fondo de WordPress: cómo agregar con el editor de bloques predeterminado

Entonces, aquí estamos en el segmento principal. Es posible que no le gusten las molestias adicionales, como agregar un complemento para insertar videos como fondo de WordPress. Entonces, comencemos con el editor Gutenberg o Block predeterminado. A continuación, agregamos una guía paso a paso sobre cómo hacerlo.

Paso 1: inicie sesión y cree una publicación/página

Aquí el primer paso es tan básico. Inicie sesión en su panel de WordPress y luego coloque el cursor sobre el botón "+ Nuevo". Luego, según su preferencia, agregue una publicación o una página.

add new page
añadir nueva página

Paso 2: agregue el bloque de portada

Ahora haga clic en el botón "+" para agregar un nuevo bloque. Luego, en el cuadro de búsqueda, escriba "portada" y verá el icono del bloque de portada. Se verá como la siguiente imagen.

add cover block
añadir bloque de portada

Paso 3: Agrega el video

Después de hacer clic en el botón de portada, aparecerá el bloque con algunas opciones. Allí tendrás dos opciones para agregar un video de fondo. Puede cargar un video desde su computadora haciendo clic en el botón "Cargar" o seleccionar un video de su "Biblioteca de medios".

upload video
subir video

Así que ahora haga clic en cualquiera de ellos y elija el video que desea usar como video de fondo de WordPress.

select video to upload
seleccionar video para subir

Paso 4: personaliza todo

La tarea que está buscando: agregar un fondo de video de WordPress ahora está lista. Pero ahora es el momento de personalizar todo. Hay muchas opciones para personalizar. A continuación, analizaremos algunas personalizaciones comunes.

Agregar título para el bloque

Lo que la mayoría de la gente hace es agregar un título sobre el video. Aquí no tendrás que hacer nada especial. Es porque, de manera predeterminada, notará "Escribir título..." Simplemente haga clic aquí y verá el cursor de escritura.

add text
Añadir un subtitulo

Ahora puede agregar fácilmente cualquier título/cita o lo que quiera mostrar sobre el video de fondo. Incluso encontrarás algunas opciones de personalización más, como:

  • Párrafo/Encabezado
  • Color de texto
  • Tamano del texto
  • Selector de puntos focales

Eso es todo. Has terminado de integrar un video de fondo en WordPress.

Agregar estilo al video

Bueno, solo un pie de foto no lo es todo. También puede cambiar el estilo del video de fondo. Para eso, haga clic en el botón de estilo (el botón parece un círculo medio blanco y negro) y encontrará más opciones para personalizar el video. Las opciones incluyen

style the video
dale estilo al video
  • Color (Sólido y Degradado)
  • Opacidad superpuesta
  • Tipografía
  • Altura mínima de la cubierta

Ahora incorpore el estilo de acuerdo a sus preferencias personales. Acabamos de agregar textos con diferentes tamaños y colores y los alineamos en consecuencia. Aquí está el resultado final del video de fondo de WordPress de Gutenberg.

final output of video background

Video de fondo de WordPress: Cómo agregar con PostX

El anterior era el método predeterminado. Sin embargo, si le encanta personalizarlo más y desea una apariencia más profesional, le sugerimos que use nuestro complemento PostX. PostX ofrece más control sobre sus videos de fondo de WordPress y le permite agregarlos fácilmente con varias opciones de personalización. Con PostX también puede mostrar videos como imágenes destacadas. Así es como puede usar PostX para agregar un video de fondo a su sitio web de WordPress:

Paso 1: instalar y activar la publicación

Primero, debe instalar y activar el complemento PostX en su sitio web de WordPress. Para hacerlo, haga clic con el cursor en la sección "Complementos" en su panel de WordPress y luego haga clic en "Agregar nuevo".

Installing PostX
Instalar PostX

Después de eso, busque "PostX". Una vez que encuentre el complemento, haga clic en "Instalar ahora" y luego en "Activar".

Obtenga PostX Pro para desbloquear todas las funciones interesantes y crear sitios web increíbles

Paso 2: crea una publicación nueva o edita una existente

Después de activar PostX, puede crear una nueva publicación o editar una existente en la que desee agregar el video de fondo. También puede usar el complemento en páginas o cualquier otro tipo de publicación personalizada. Entonces, ahora cree una nueva publicación como lo expliqué antes.

add new page
añadir nueva página

Paso 3: agregue el bloque de fila/columna

Ahora al igual que el anterior, haga clic en el botón "+" para agregar un nuevo bloque. Luego, en el cuadro de búsqueda, escriba "Fila" y encontrará el icono de bloque PostX Fila/Columna.

add row column block
agregar bloque de columna de fila

NB: Es posible que vea 2 bloques diferentes llamados Fila. No se confunda; uno es del editor predeterminado y otro es de PostX. Simplemente siga la imagen de arriba y seleccione el bloque Fila/Columna sugerido.

Paso 4: elige el diseño

Después de hacer clic en el bloque de filas, verá diez diseños diferentes, como "100", "50:50", "50:25:25", etc. Elija cualquiera de ellos según sus necesidades.

choose layout
elegir diseño

Vamos con el diseño 100:00: haz clic en él.

Paso 5: Haga clic en Fondo y envoltorio

Después de optar por el diseño, notará que el bloque de filas se crea con un solo bloque dentro.

No tienes ningún trabajo ahora con el bloque incluido. En cambio, su tarea principal ahora es con el bloque Fila. Ahora haz clic en el botón "Bloquear" (lo encontrarás justo debajo del botón de publicar).

background and wrapper setting
configuración de fondo y envoltorio

Luego verá muchas opciones para personalizar la Fila. Sin embargo, nuestra tarea principal es agregar un video de fondo de WordPress. Así que busque la opción "Fondo y envoltura" dentro del "Botón de bloqueo" y luego haga clic en él. Si no lo encuentras, solo revisa la imagen de abajo.

Paso 6: Cargue la URL del video

Ahora haga clic en el botón y encontrará 4 opciones debajo de la opción de fondo: sólido, degradado, imagen y video. Allí, seleccione "Video".

click on video option
haga clic en la opción de vídeo

Nota: cuando usa PostX, no puede cargar un video directamente. Tendrás que compartir la URL del video. En la mayoría de los casos, es más ventajoso.

Por ejemplo, si desea agregar cualquier video de YouTube, simplemente copie la URL del video y péguela en el cuadro "URL DEL VIDEO".

Pero en el caso de cualquier video guardado, lleva un poco de tiempo. Como no existe la opción de cargar videos directos, deberá compartir una URL autohospedada. Puede cargar videos en su sitio de WordPress y agregarlos utilizando el enlace de video cargado.

Ahora, al igual que insertó el enlace del video de YouTube, inserte el enlace del video alojado en el cuadro de URL del video predeterminado.

add video url
añadir URL de vídeo

[Nota: asegúrese de que la URL del video alojado esté disponible para el público; de lo contrario, nadie podría ver el video].

Paso 7: personaliza la configuración de video

Después de agregar el video, PostX ofrece algunos beneficios adicionales. Por ejemplo, puede ajustar el tiempo del video. Simplemente complete el cuadro de hora de inicio y hora de finalización de acuerdo con la hora y la posición en la que desea ejecutar el video.

adjust start and end time
ajustar la hora de inicio y finalización

También tiene la opción de habilitar o deshabilitar "Video Loop" y configurar la "Imagen de respaldo de video".

enable video loop
habilitar bucle de video

Paso 8: agregue elementos al bloque interior

Ya has terminado de agregar el video de fondo. Es hora de diseñarlo. Como hemos seleccionado un diseño de 100:00, puede agregar un solo elemento al diseño. Sin embargo, podemos agregar múltiples bloques debajo de esto.

También puede configurar el píxel del video de fondo. Para hacerlo, simplemente desplace el cursor sobre la esquina superior o inferior central del bloque "Fila". Tan pronto como llegue a la posición, verá un píxel dentro de la Fila. Luego puede hacer clic y arrastrarlo hacia arriba o hacia abajo para ajustar el tamaño del video de fondo.

customize the row
personalizar la fila

Ahora finalmente, personalízalo según tus preferencias. Vamos a preparar un video de fondo personalizado rápido ahora. Vamos a comprobarlo paso a paso.

Guía práctica sobre la personalización del fondo de video de WordPress

Ahora crearemos un video de fondo simple que muestre un servicio turístico.

Paso 1: siga los pasos anteriores y agregue el video

Ya hemos aprendido lo básico. Simplemente siga los pasos a continuación y agregue un video de fondo de WordPress usando el bloque Fila/Columna de PostX.

Paso 2: Agregar encabezado al bloque existente

Ahora seleccionamos un diseño de 100:00. Allí puede agregar un solo elemento. Estamos agregando el bloque "Título".

add heading block
añadir bloque de título

Después de agregar el bloque de encabezado, agregue el eslogan/servicio que desea mostrar en el encabezado.

Paso 3: agregue un bloque de párrafo debajo del encabezado

Ahora simplemente haga clic en Intro o haga clic en el botón "+" y verá otro bloque debajo del encabezado. Es, por defecto, un bloque de párrafo. Ahora escribe lo que quieres ofrecer en el bloque de párrafos. Para una mejor visibilidad, mantenemos el color del texto "Blanco".

add custom text
añadir texto personalizado

Paso 4: Agregar botones CTA

Ahora siguiendo de la misma manera, después de completar el bloque de párrafo, presione el botón enter y aparecerá un nuevo bloque. Ahora agregue el "Grupo de botones" de PostX.

add cta button
añadir botón cta

Estamos agregando 2 botones CTA (Llamada a la acción) para atraer clientes con diferentes propósitos. Para personalizar los botones de una mejor manera, mira este video.

La creación del video de fondo ahora está completa. Veamos el resultado final.

final output of background video

Pautas para agregar un fondo de video en WordPress

Aquí hay algunas pautas recomendadas para agregar un fondo de video a su sitio web de WordPress:

Optimice el tamaño de los archivos sin sacrificar la resolución

Los videos e imágenes grandes pueden ralentizar el rendimiento de su sitio, por lo que es importante encontrar un

equilibrio entre el tamaño del archivo y la resolución al comprimir sus videos.

Usa videos con moderación

Evite saturar su sitio web con demasiados videos. En su lugar, úselos estratégicamente para resaltar puntos importantes o mostrar contenido relevante.

Incluir una llamada a la acción

Cuando utilice un fondo de video, asegúrese de proporcionar información adicional o un botón claro de llamada a la acción. No deje a los espectadores con ganas de más sin ofrecer un vínculo o una dirección para obtener más información.

Evite la reproducción automática con audio

Hacer que el audio se reproduzca automáticamente cuando alguien visita su sitio web puede ser molesto y perturbador. Es mejor evitar por completo la reproducción automática de audio.

Proporcionar una opción para la reproducción de audio

Si su video requiere audio, brinde a los usuarios la capacidad de controlar la reproducción de audio. Esto les permite elegir si quieren o no escuchar el audio.

Considera los subtítulos

Incluya subtítulos para videos que tienen audio. Esto ayuda a que su contenido sea accesible para todos los usuarios, incluidos aquellos que se encuentran en un lugar donde no pueden reproducir audio o tienen problemas de audición.

Aloja videos externamente

Para garantizar un rendimiento óptimo, considere usar plataformas de alojamiento de videos externas como Vimeo o YouTube. Estas plataformas están diseñadas específicamente para alojamiento y transmisión de videos.

Cumplir con los formatos y resoluciones recomendados

Al cargar videos, use el formato MP4 con una resolución mínima de 720p. Además, asegúrese de que los videos estén codificados con el códec h264, ya que brinda buena calidad y compatibilidad.

Ultimas palabras

Con suerte, ahora ha entendido correctamente cómo agregar videos de fondo de WordPress. Hemos agregado 2 métodos, y ambos métodos tienen ventajas y desventajas.

En resumen, diría que si desea agregar un video como fondo o un enlace de video, PostX es la mejor opción. Pero si desea cargar un video, entonces el bloque predeterminado es la opción más fácil para usted.

Obtenga PostX Pro para desbloquear todas las funciones interesantes y crear sitios web increíbles

¿Te gusta este artículo? Difundir la palabra
  • Use Gutenberg Blocks in Beaver Builder

    Integración de PostX Beaver Builder: use bloques de Gutenberg en Beaver Builder

  • WooCommerce Product Variations

    Cómo crear variaciones de productos de WooCommerce

  • PostX 2.4.9 update

    PostX 2.4.9: ¡Novedades!

  • WordPress Menu Customization in 2022 WordPress Theme

    Personalización del menú de WordPress en el tema Twenty Twenty-two