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

¿Quiere aprender cómo agregar un video flotante fijo en el desplazamiento de la página en su sitio de WordPress?

Los videos fijos son una forma poderosa de atraer a su audiencia a su sitio web. Hoy en día, las personas consumen más contenido de video que contenido escrito. Por lo tanto, si encuentra 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 manera fácil de hacer que el video de su sitio web sea pegajoso, entonces ha llegado al artículo correcto. Porque en este blog, aprenderá cómo agregar videos fijos en un sitio de WordPress basado en Elementor en unos pocos pasos y unos minutos.

Así que sigue leyendo...

¿Qué es un video fijo?

Los videos fijos son videos que se fijan en una página web y permanecen flotando en el mismo lugar en la ventana de una página web incluso mientras el usuario se desplaza hacia arriba o hacia abajo.

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

El concepto de un video fijo en un sitio web no solo suena genial, sino que también tiene muchas ventajas. Estos son algunos de los beneficios que puede aprovechar al agregar un video fijo a su sitio web de WordPress.

• Aumenta la participación del usuario: con el video fijo, las personas pueden ver y leer el contenido de la página web al mismo tiempo. Como resultado, las personas tienden a interactuar más con los sitios web.
• Aumente la tasa de finalización del video: dado que los videos fijos 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 pegajoso puede aumentar el tiempo de finalización del video.
• Captar la atención del usuario: por lo general, las personas escatiman en un sitio. En este caso, si solo confía en el contenido de texto, existe la posibilidad de que sus clientes se pierdan cosas importantes que le gustaría que noten. Puede atraer la atención de su usuario de manera más efectiva a información específica con video.
• Mejor narración: los videos le brindan un lienzo más amplio para contar historias que el contenido de texto sin formato. Dado que puede usar texto, animación y voz al mismo tiempo en un video, está mejor equipado para contar una historia de manera más efectiva.

¿Convencido de que debe agregar un video adhesivo a su sitio de WordPress? Bueno, si es así, pase a la siguiente sección para descubrir cómo puede hacerlo.

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

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

Paso 1: Instala Elementor y ElementsKit

Primero, el paso es instalar todos los complementos necesarios. Para seguir este tutorial sobre cómo agregar videos fijos en Elementor, necesitará

• Elementor y
• ElementsKit (versiones gratuita y profesional).

Elementor es un generador 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.

Puede consultar la 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 hacer que el video sea pegajoso, usaré las características de contenido pegajoso de ElementsKit. Por lo tanto, debe habilitar el módulo de contenido fijo.

Ahora navegue a ElementsKit ⇒ Módulos ⇒ Sticky Content , active la opción y haga clic en Guardar cambios para actualizar los cambios que acaba de realizar.

Paso 3: Arrastra y suelta el widget de Video de Elementor

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

Elija el diseño que desee haciendo clic en el icono + . Después de eso, busque el widget de video , arrastre el widget y suéltelo donde desee agregarlo.

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

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

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

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

Nota : en el caso de alojamiento propio, puede cargar un video en su servidor o proporcionar una URL externa.

También puede personalizar el estilo del video. Para hacerlo, vaya a la pestaña de estilo. Aquí puedes elegir la relación de aspecto y el filtro CSS . Puede elegir entre seis tipos de relación, 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: Configuraciones para hacer que el video de Elementor sea pegajoso

Vaya a la pestaña Avanzado. Luego expanda la opción pegajosa ElementsKit . Aquí puede elegir el tipo adhesivo como parte superior, inferior, columna y mostrar al desplazarse hacia arriba.

Una vez que elija el tipo Adhesivo como cualquier otra cosa que no sea ninguno, obtendrá las siguientes opciones:

• Pegajoso hasta: aquí debe configurar la ID de CSS de la sección hasta la que desea que su video permanezca pegajoso. Puede establecer una ID de CSS personalizada en la columna y luego copiarla y pegarla en la opción Adhesivo hasta.

• Sticky Offset: en esta opción, establezca el valor de compensación. El valor de compensación indica la distancia entre el video y la posición superior de su página.

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

Puede cambiar el Color de fondo fijo y hacer que el video sea fijo en todos los dispositivos, solo en el escritorio o en ambos, en el escritorio y en las tabletas.

Paso 6: actualice para agregar un video adhesivo en Elementor y vea una vista previa

Después de elegir el tipo de video y configurar todos los ajustes fijos, haga clic en actualizar para guardar y haga clic en el botón de vista previa para ver los resultados finales.

Nota: si desea un botón de video fijo que aparece para mostrar un video al hacer clic , puede usar el widget de video ElementsKit en lugar del widget de video de Elementor. Puede seguir el mismo proceso descrito anteriormente para agregar video fijo en Elementor usando el widget de video ElementsKit.

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

Ultimas palabras

¡Felicidades! Ahora ya sabe 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 de ElementsKit y utilícelo en su sitio para obtener los mejores resultados. Si está impresionado con el módulo adhesivo ElementsKit y lo fácil que es agregar cómo agregar un video flotante adhesivo en el desplazamiento de la página.

Entonces, la saludable colección de widgets y módulos que ofrece ElementsKit lo sorprenderá aún más. Así que asegúrese de revisar todas las características que ofrece ElementsKit.