Fondo de partículas elementales libres (particles.js)

Particles es una extensión gratuita de Master Addons que ejecuta una animación particles.js detrás de cualquier sección, columna o contenedor de Elementor. Enciéndalo y obtendrá el efecto predeterminado de inmediato: puntos blancos que se desplazan a lo largo de la sección, unidos por líneas delgadas y alejados por el cursor. Para cualquier otra cosa, como nieve que cae, burbujas ascendentes o un campo estelar, cree una configuración en el generador Particles.js y pegue su JSON en el panel.

Partículas de nieve en una sección de tarjetas navideñas con el panel Partículas y el generador Partículas.js

Un fondo en movimiento sin un archivo de vídeo

Las partículas son dibujadas en un lienzo mediante el script particles.js, por lo que no hay video ni imagen para descargar. La configuración del índice Z decide dónde se encuentra la capa de partículas, para que pueda mantenerla detrás de sus encabezados y botones. Si usa partículas en más de una sección, mantenga modestos los recuentos de partículas y consulte la página en un teléfono.

  • Sin archivos de vídeo ni de imagen: la animación se dibuja en el navegador.
  • Una configuración de índice Z para mantener la capa de partículas detrás de su contenido.
  • Funciona en secciones, columnas y contenedores, cada uno con su propia configuración.

Cualquier efecto de partículas.js de un campo JSON

El campo Particle JSON controla todo lo que Particles.js puede hacer: recuento de partículas, color, forma, tamaño, opacidad, líneas de enlace, velocidad y dirección, además de interacciones flotantes y de clic. El enlace sobre el campo abre el generador Particles.js. Elija un ajuste preestablecido como NASA, Bubble o Snow, ajústelo con controles deslizantes y descargue la configuración. Péguelo y las actualizaciones de la sección en el editor.

  • Ajustes preestablecidos en el generador: Predeterminado, NASA, Bubble, Snow y Nyan Cat.
  • Formas: círculo, arista, triángulo, polígono, estrella o tu propia imagen.
  • Modos de flotar y hacer clic, como rechazar, agarrar, burbujear y empujar.
Fondo de partículas estelares en una sección de héroe oscuro con configuraciones de generador de partículas.js

Cómo agregar un fondo de partículas en Elementor

Las partículas blancas predeterminadas necesitan un fondo oscuro o colorido para aparecer, así que configúrelo primero.

  1. Active Partículas en la pestaña Extensiones del panel de complementos maestros.
  2. Seleccione una sección, columna o contenedor y dale un color de fondo oscuro.
  3. Abra la pestaña Estilo, expanda Partículas y active Habilitar fondo de partículas.
  4. Para obtener un efecto diferente, haga clic en el enlace encima de Particle JSON, elija un ajuste preestablecido en el generador, descargue el JSON y péguelo en el campo.
  5. Establezca el índice Z para que la capa de partículas permanezca detrás de su contenido y luego publíquelo.

Nuestro tutorial de fondo de partículas recorre cada paso con capturas de pantalla.

Particles.js en WordPress: a mano o con la extensión

particles.js es una biblioteca JavaScript gratuita y usted mismo puede agregarla a WordPress. Esto es lo que se necesita en comparación con la extensión.

Añadiendo partículas.js a manoExtensión de partículas
Cargando el guiónPonga en cola la biblioteca en su temaCargado sólo en páginas con una sección de partículas
Capa de partículasAgregue un div y colóquelo detrás del contenido con CSSAgregado a la sección para usted
ConfiguraciónLlame a ParticlesJS() con su JSON en un scriptPegue el JSON en el panel
Vista previaEn la parte delanteraJusto en el editor Elementor
CapasEscribe tus propias reglas de índice zCampo de índice Z

Las partículas combinan bien con Vidriomorfismo tarjetas encima. Para otros fondos en movimiento, inténtelo Control deslizante de fondo o Fondo de gradiente animado (Pro).

Visor de plantillas
Facebook
Gorjeo
WhatsApp
Copiar enlace
Compra ahora
Año nuevo
Año nuevo
Partículas con sección Hero
Partículas con sección Hero
Héroe SaaS, red de nodos vinculados
Héroe SaaS, red de nodos vinculados
Venta de invierno, nieve que cae
Venta de invierno, nieve que cae
Inversión en oro, puntos a la deriva
Inversión en oro, puntos a la deriva
Lugar de la boda, bokeh suave
Lugar de la boda, bokeh suave
Ciberseguridad, malla rápida
Ciberseguridad, malla rápida
Programación del festival, formas de estrellas
Programación del festival, formas de estrellas
Informe de impacto, polígonos en ascenso
Informe de impacto, polígonos en ascenso
Agencia CTA, triángulos mínimos
Agencia CTA, triángulos mínimos

Preguntas frecuentes sobre partículas

Conozca las consultas más frecuentes que tienen los usuarios sobre Partículas y encuentre respuestas en un solo lugar.
No soy desarrollador. ¿Las cosas de JSON son demasiado difíciles para mí?

No. Activar el efecto le brinda la apariencia predeterminada sin JSON alguno. Para otras miradas, el generador Particles.js funciona con controles deslizantes y selectores de color. Descargue la configuración que crea y péguela en el campo Particle JSON.

Sí. En el generador de partículas.js, configure el tipo de forma en la imagen e ingrese la URL de su imagen, como un pequeño logotipo. Descargue la configuración y péguela en el campo Particle JSON.

¿Funcionará esto en teléfonos móviles?

Sí, la animación se ejecuta en teléfonos y tabletas. Un recuento alto de partículas puede ralentizar los teléfonos más antiguos, así que mantenga el número modesto para las secciones que verán los visitantes móviles.

Sí. Cada sección, columna y contenedor tiene su propio campo Particle JSON, por lo que tu héroe puede mostrar un campo estelar mientras otra sección usa nieve.

Widgets y extensiones de Elementor de tendencia

Cree sitios web sofisticados en menos tiempo.

Master Addons Extensión Glassmorphism para Elementor: tarjetas de vidrio esmerilado con el control Blur Value configurado en 20px

Vidriomorfismo

Inicio Extensión de Glassmorphism Elementor gratuita: Efecto del vidrio esmerilado en un solo cambio El Glassmorphism es el esmerilado...
Ver detalles
Extensión Master Addons Container Extras para Elementor: contenedor con un límite de ancho máximo de 1400px, con controles de ancho máximo, alto máximo, ancho mínimo y alto mínimo

Extras de contenedores

Inicio Elementor Container Controles de ancho y alto máximo Container Extras es un maestro gratuito...
Ver detalles
Extensión de patrones de complementos maestros para Elementor: héroe con el estilo Purple Gradient Grid Left, tres estilos de patrones más y el panel Habilitar patrón

Patrones

Inicio 70+ Patrones de fondo de Elementor gratuitos Patrones es una extensión de complementos maestros gratuita que agrega...
Ver detalles
Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]

Duplicador de publicaciones/páginas

Inicio Duplicar páginas y publicaciones de Elementor en un clic Publicación/Duplicador de páginas es un maestro gratuito...
Ver detalles
Extensión de la barra de progreso de lectura de complementos maestros para Elementor: barra azul llena al 42% en la parte superior de una página de política de privacidad, con configuraciones de habilitar, colocar, altura y llenar color

Barra de progreso de lectura

Inicio Agregue una barra de progreso de lectura en WordPress (Elementor) La barra de progreso de lectura es gratuita...
Ver detalles