Algunos fondos se quedan quietos y otros flotan. Puntos flotantes conectados por líneas finas o nieve que cae detrás de un titular: los efectos de partículas dan a una sección un movimiento silencioso sin un archivo de video a la vista. El libre Extensión de partículas en Complementos maestros para Elementor representa exactamente lo que hay detrás de su contenido, impulsado por la conocida biblioteca particles.js y configurado con un único campo JSON.
Aquí está la sección de demostración que ejecuta el ajuste preestablecido de Snow en la página publicada:
Qué hace la extensión Partículas #
Una vez habilitados, las secciones, columnas y contenedores obtienen un Partículas panel en su Estilo pestaña. Voltear Habilitar fondo de partícula al Sí y el fondo de la sección se convierte en un lienzo de partículas vivas. El panel lo mantiene mínimo:
- Habilitar fondo de partícula: el interruptor de encendido/apagado para el efecto.
- Index Z: donde la capa de partículas se encuentra en la pila, por lo que permanece detrás del contenido.
- Particle JSON: aquí vive un campo de código que contiene la configuración de partículas.js: recuento de partículas, color, forma, tamaño, líneas de enlace, velocidad de movimiento e interactividad flotante.
Una configuración predeterminada se envía en la caja, puntos blancos unidos por una red de líneas sutiles y el panel se vincula directamente al generador Partículas.js para construir el suyo propio.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Sigue el guía de instalación primero.
- Particles es una extensión gratuita, por lo que no se requiere licencia Pro.
- No se necesita codificación: el JSON proviene de un generador de apuntar y hacer clic.
Cómo habilitar la extensión Partículas #
Desde su panel de WordPress, vaya a Complementos maestros y abre el Extensiones pestaña. Las partículas se encuentran en el Widgets de animación grupo con insignia Popular, junto a Efectos Flotantes y Gradiente animado BG. Haga clic en su palanca para que se vuelva violeta y luego presione Guardar cambios y espere el aviso verde “Configuración guardada correctamente”.
Encuentre el panel Partículas en una sección #
Seleccione el contenedor o sección en el editor Elementor y abra Estilo pestaña. El Partículas la sección con la insignia MA violeta se encuentra con las otras herramientas de fondo de Master Addons: Fondo de gradiente animado, Control deslizante de fondoy Patrones.
Enciéndelo y cumple con el efecto predeterminado #
Expanda las partículas y cambie Habilitar fondo de partícula a Sí. El lienzo ejecuta inmediatamente la configuración predeterminada: puntos blancos que se desplazan a lo largo de la sección, conectados por líneas delgadas a una red en movimiento. El Partícula JSON el campo a continuación contiene la configuración que lo controla y Índice Z mantiene la capa detrás de tu texto.
Obtenga un ajuste preestablecido del generador particles.js #
El Haga clic aquí el enlace sobre el campo JSON abre el sitio de demostración de Particles.js, un generador en vivo con configuraciones preestablecidas: Predeterminado, NASA, Bubble, Snow y Nyan Cat. Elige uno, ajusta los controles deslizantes si quieres y presiona Descargue la configuración actual (json).
Abra el archivo descargado, copie el JSON y péguelo en el campo Particle JSON. La demostración va con el ajuste preestablecido Snow y el lienzo cambia de la red de líneas a copos blancos suaves que caen sobre la sección en el momento en que aterriza la configuración.
El resultado en la página #
Publica y la sección nieva por sí sola, como en el GIF en la parte superior de esta página. Las partículas se representan en un lienzo detrás del contenido, por lo que todo lo que está arriba permanece nítido mientras el fondo sigue moviéndose. Las configuraciones predeterminadas también reaccionan al cursor; el efecto de red estándar rechaza las partículas al flotar.
Una nota práctica: el recuento de partículas impulsa el rendimiento. El ajuste preestablecido Snow ejecuta 400 partículas y se mantiene fluido, pero si una página acumula varias secciones de partículas, mantenga los recuentos modestos y compruébelos en un teléfono de gama media.
Donde encajan los fondos de partículas #
- Secciones de héroes. La red de puntos conectados lee tecnología y modernidad detrás de un titular en negrita.
- Campañas estacionales. El ajuste preestablecido Snow convierte cualquier sección promocional invernal en una sola pasta.
- SaaS y páginas de inicio. Las partículas de deriva lenta añaden profundidad sin distraer la atención del tono.
- Secciones oscuras. Las configuraciones de campo estelar como la NASA hacen que los fondos oscuros parezcan deliberados.
- Páginas de eventos y lanzamientos. El movimiento detrás de una cuenta regresiva mantiene viva una página escasa.
Vídeotutorial #
Mire toda la configuración, desde habilitar la extensión hasta la nieve que cae en la página publicada.
Preguntas frecuentes #
¿cómo agrego un fondo de partículas en Elementor?
Habilite la extensión Partículas en la pestaña Extensiones de complementos maestros, seleccione una sección y abra Partículas en la pestaña Estilo. Cambie Habilitar fondo de partícula a Sí y la red animada predeterminada aparecerá inmediatamente, no se requiere configuración.
¿dónde obtengo diferentes efectos de partículas?
El enlace Haga clic aquí en el panel abre el generador Partículas.js con ajustes preestablecidos como NASA, Bubble, Snow y Nyan Cat. Ajuste la configuración en vivo, descargue la configuración como JSON y péguela en el campo Particle JSON.
¿Las partículas ralentizan la página?
El efecto se ejecuta sobre un lienzo liviano y se mantiene suave en los recuentos típicos; La demostración de Snow ejecuta 400 partículas sin tartamudear. Mantenga los recuentos razonables y evite apilar muchas secciones de partículas en una sola página, especialmente para visitantes móviles.
¿Pueden las partículas reaccionar ante el ratón?
Sí. La configuración de partículas.js incluye ajustes de interactividad y la configuración predeterminada rechaza las partículas cuando el cursor se mueve sobre la sección. Los comportamientos de flotar y hacer clic se pueden configurar en JSON.
¿la extensión Particles está libre?
Sí. Particles se envía con la versión gratuita de Master Addons para Elementor, en el grupo Animation Widgets de la pestaña Extensiones. La página de precios cubre lo que agregan los planes Pro.
Envolviendo #
La extensión Particles coloca un lienzo de partículas vivas detrás de cualquier sección Elementor: un interruptor para la red predeterminada, un JSON pegado para cualquier cosa que el generador particles.js pueda idear. Mantenga los recuentos cuerdos, deje que el índice Z mantenga la capa detrás del contenido y la sección se mueva sin una sola carga de activos. Se encuentra naturalmente al lado del Fondo de gradiente animado y Control deslizante de fondo extensiones en la misma pestaña Estilo y el conjunto completo de Widgets y extensiones de complementos maestros está a una página de distancia. Para compararlo con agregar partículas.js a mano, consulte el Página de extensión de partículas.
