Cómo agregar un video flotante adhesivo en el desplazamiento de página en WordPress

Querer aprender ¿Cómo agregar un video flotante adhesivo al desplazarse por la página en su sitio de WordPress?

Los videos adhesivos son una forma poderosa de atraer a su audiencia a su sitio web. Hoy en día, la gente consume más contenido de vídeo que contenido escrito. Por lo tanto, si descubre que los visitantes de su sitio web no interactúan lo suficiente con su sitio, agregar un video puede resolver ese problema.

Si está buscando una forma sencilla de hacer que el vídeo de su sitio web sea atractivo, entonces ha llegado al artículo correcto. Porque en este blog aprenderás cómo agregar videos adhesivos en un sitio de WordPress basado en Elementor en unos pocos pasos y unos minutos.

Así que sigue leyendo…

¿Qué es un vídeo adhesivo?

Los videos pegajosos son vídeos que son fijado en una página web y permanece flotando en el mismo lugar en la ventana de una página web incluso mientras un usuario se desplaza hacia arriba o hacia abajo. 

¿Por qué agregar Sticky Video en el sitio web de Elementor WordPress?

El concepto de un vídeo adhesivo en un sitio web no sólo suena genial sino que también tiene muchas ventajas. Estos son algunos de los beneficios que puede aprovechar agregando un video adhesivo a su sitio web de WordPress.

• Aumenta la participación del usuario: Con el vídeo adhesivo, las personas pueden ver y leer el contenido de la página web al mismo tiempo. Como resultado, la gente tiende a interactuar más con los sitios web.
• Aumentar la tasa de finalización de videos: Dado que los videos adhesivos no bloquean toda la página, es probable que los clientes los vean hasta el final en lugar de cerrarlos a la mitad. Por lo tanto, hacer que su video sea fijo puede aumentar el tiempo de finalización del mismo.
• Capte la atención del usuario: Por lo general, la gente pasa por alto un sitio. En este caso, si confía únicamente en el contenido de texto, existe la posibilidad de que sus clientes se pierdan cosas importantes que le gustaría que notaran. Puede atraer la atención de su usuario de manera más efectiva a información específica con video.
• Mejor narración: Los vídeos te ofrecen un lienzo más amplio para contar historias que el contenido de texto sin formato. Dado que puedes utilizar texto, animación y voz al mismo tiempo en un vídeo, estarás mejor equipado para contar una historia de forma más eficaz.

¿Estás convencido de que deberías agregar un video adhesivo a tu sitio de WordPress? Bueno, si es así, pasa a la siguiente sección para descubrir cómo puedes hacerlo.

Cómo agregar un video fijo al sitio web de Elementor en 6 pasos

Este es el proceso más sencillo para hacer que un vídeo sea fijo y flotante en su sitio de WordPress. Siga todos los pasos para agregar un video fijo a Elementor en unos momentos.

Paso 1: instale Elementor y ElementsKit

El primer paso es instalar todos los complementos necesarios. Para seguir este tutorial sobre cómo agregar videos adhesivos en Elementor, necesitará

• Elementor y
• Kit de elementos (tanto la versión gratuita como la pro). 

Elementor es un creador de páginas de arrastrar y soltar, y ElementsKit es un complemento para Elementor. Por lo tanto, primero debe instalar Elementor, luego descargar ElementsKit y luego actualizar su complemento a la versión Pro.

Puedes consultar el documentación si necesita ayuda con respecto a la instalación de ElementsKit pro y el proceso de activación de la licencia.

Paso 2: habilite el módulo de contenido fijo de ElementsKit

Para que el video sea pegajoso, usaré las funciones de contenido fijo de ElementsKit. Por lo tanto, debe habilitar el módulo de contenido fijo.

Ahora navega hasta ElementsKit ⇒ Módulos ⇒ Contenido fijo, encender la opción, y haga clic en Guardar cambios para actualizar los cambios que acaba de realizar.

Paso 3: arrastre y suelte el widget de video de Elementor

Navegue a la página donde desea agregar el video adhesivo, haga clic en la opción Editar con Elementor.

Elija el diseño que desee haciendo clic en el icono +. Después, buscar el video widget, arrastre el widget y gota donde quieras agregarlo.

Nota: Para este tutorial, tengo ya importé la página prefabricada Estoy editando para mostrar todo el proceso. Puede crear sitios web de WordPress fácilmente con la sección prediseñadas de ElementsKit.

Paso 4: elija la fuente del video y agregue la URL

Con el widget de video de Elementor, puede mostrar videos de fuentes como Youtube, Vimeo, DailyMotion y autohospedado.

Primero, elija su tipo de fuente preferido y luego proporcione la URL del video.  Voy a utilizar youtube para este artículo.

Nota: En el caso de alojamiento propio, puedes subir un vídeo a tu servidor o proporcionar un URL externa.

También puedes personalizar el estilo del vídeo. Para hacerlo, navegue hasta la pestaña de estilo. Aquí puedes elija la relación de aspecto y el filtro CSS. Puede elegir entre seis tipos de proporciones, como 1:1, 3:2, 4:3, 16:9, etc. Haga clic en el icono de edición del filtro CSS para personalizar el desenfoque, el brillo, el contraste, la saturación y el tono.

Paso 5: Configuración para hacer que el video de Elementor sea fijo

Ve a la Lengüeta avanzada. Luego expanda el adhesivo ElementsKit opción. Aquí puedes elegir el tipo fijo como columna superior, inferior y mostrar al desplazarse hacia arriba.

Una vez que elija el tipo Sticky como cualquier otro que no sea ninguno, obtendrá las siguientes opciones:

• Pegajoso hasta: Aquí debes configurar el ID CSS de la sección hasta la cual deseas que tu video permanezca fijo. Puedes establecer un ID CSS personalizado en la columna y luego cópielo y péguelo en la opción Sticky Until.

• Desplazamiento adhesivo: En esta opción, establezca el valor de compensación. El valor de desplazamiento indica la distancia entre el vídeo y la posición superior de su página.

Nota: Fija hasta que la opción no esté disponible con la columna de opción fija, ya que solo será visible hasta que la columna principal esté visible en la pantalla.

Puedes cambiar el Color de fondo adhesivo y hacer El video se mantiene fijo en todos los dispositivos, solo en computadoras de escritorio o tanto en computadoras de escritorio como en tabletas.

Paso 6: actualice para agregar video fijo en Elementor y ver la vista previa

Después de elegir el tipo de video y configurar todas las configuraciones fijas, haga clic en actualizar para guardar y haga clic en el botón de vista previa para ver los resultados finales.

Nota: Si quieres un botón de video adhesivo que aparece para mostrar un video al hacer clic entonces tú puedes utilizar el vídeo de ElementsKit widget en lugar del widget de video Elementor. Puedes seguir el mismo proceso descrito anteriormente para agregar video fijo en Elementor usando el widget de video ElementsKit.

Aquí hay un vista previa de Sticky Video usando el widget de video ElementsKit.

Ultimas palabras

¡Felicidades! Ahora ya sabes cómo agregar videos fijos en el sitio de Elementor. Es mucho más fácil de hacer de lo que parece inicialmente, ¿verdad?

Pruebe todas las opciones y configuraciones del módulo adhesivo ElementsKit y utilícelo en su sitio para obtener los máximos resultados. Si está impresionado con el módulo adhesivo de ElementsKit y lo fácil que es agregarlo, cómo agregar un video flotante adhesivo al desplazarse por la página.

Entonces el colección saludable de widgets y los módulos que ElementsKit tiene para ofrecer te sorprenderán aún más. Así que asegúrese de consultar todas las funciones que ElementsKit tiene para ofrecer.