Los fondos de partículas agregan formas animadas y flotantes a las secciones de Elementor que se mueven, conectan y reaccionan al movimiento del mouse. Convierten secciones estáticas en áreas llamativas e interactivas que llaman la atención al instante.
En esta guía, aprenderá cómo agregar un fondo de partículas Elementor a cualquier sección de su sitio web usando Complementos maestros para Elementor. Cubriremos la configuración básica, los ajustes preestablecidos integrados (NASA, Bubble, Snow) y cómo crear sus propios efectos de partículas personalizados usando la configuración JSON de Partículas.js.
No se requiere codificación. Todo el proceso dura unos 5 minutos.
¿cuál es el fondo de las partículas?
Un fondo de partículas es un efecto animado que muestra pequeñas formas (puntos, círculos, estrellas o formas personalizadas) flotando en una sección. Estas partículas se mueven a diferentes velocidades, se conectan con líneas delgadas cuando están cerca unas de otras y pueden reaccionar al cursor al flotar.
El efecto está impulsado por partículas.js, una popular biblioteca de JavaScript. Master Addons integra partículas.js directamente en Elementor, para que puedas habilitar y personalizar el efecto sin tocar ningún código.
Master Addons incluye cuatro ajustes preestablecidos de partículas incorporados:
| Preestablecido | Efecto | Mejor para |
|---|---|---|
| Predeterminado | Puntos conectados flotando en direcciones aleatorias | Sitios web tecnológicos, páginas de destino de SaaS |
| NASA | Partículas flotantes espaciales con efecto de profundidad | Secciones de héroes oscuros, páginas con temas espaciales |
| Burbuja | Burbujas circulares más grandes que se elevan hacia arriba | Portafolios creativos, diseños divertidos |
| Nieve | Pequeñas partículas blancas que caen como copos de nieve | Páginas de temporada, secciones con temas invernales |
También puede crear efectos totalmente personalizados generando su propia configuración JSON de partículas.js.
Lo que necesitarás
- WordPress con Elementor (gratis o Pro) instalado
- Complementos maestros para Elementor instalado y activado
- El Partículas extensión habilitada en la configuración de Master Addons
Asegúrese de que la extensión Partículas esté activada: vaya a Complementos maestros → Extensiones en su panel de WordPress y alterne Partículas para ON.
Cómo agregar antecedentes de partículas en Elementor: paso a paso
Siga estos pasos para agregar un fondo de partículas a cualquier sección o contenedor de Elementor en su página.
Paso 1: crea o selecciona una sección
Abra su página en el editor Elementor. Cree una nueva sección o seleccione una existente donde desee agregar el efecto de partícula.
Elija su estructura de columna preferida. El efecto de partículas funciona con cualquier diseño, ya sea una sola columna, dos columnas o más.
Paso 2: agregue contenido a la sección
Tu sección necesita al menos un widget dentro para ser visible en la vista previa. Si estás creando una sección de partículas independiente (como un área de héroe animada), suelta una Espaciador ingrese el widget en la sección y establezca la altura en 400-600px.
También puedes agregar encabezados, botones, imágenes o cualquier otro widget. Las partículas aparecerán detrás de todo tu contenido.
Paso 3: establezca la sección en ancho completo (opcional)
Para obtener el mejor impacto visual, establezca el diseño de la sección en Ancho completo. Esto hace que las partículas abarquen todo el ancho del navegador.
Haga clic en el icono de edición de la sección y vaya a Diseño pestaña y conjunto Ancho del contenido a Ancho completo.
Este paso es opcional. Las partículas también funcionan en secciones de ancho en caja.
Paso 4: agregue un color de fondo
Este paso es importante. Las partículas son blancas de forma predeterminada, por lo que necesitas un fondo oscuro o de color para hacerlas visibles.
Haga clic en el icono de edición de la sección y vaya a Estilo pestaña y debajo Antecedentes, establece un color o degradado sólido. Los azules oscuros, los negros y los morados profundos funcionan mejor con las partículas blancas predeterminadas.
Consejo: Para una apariencia más dinámica, intente usar Extensión animada de fondo degradado de complementos maestros en lugar de un color sólido. Los fondos degradados combinados con partículas crean un efecto visual impresionante.
Paso 5: habilite el efecto de partículas
Ahora para la parte principal. Con la sección seleccionada, quédate en el Estilo pestaña y desplácese hacia abajo para encontrar el partículas MA sección. Alternarlo ENCENDIDO.
El efecto de partícula elemental predeterminado aparecerá inmediatamente en su sección. Verás pequeños puntos blancos flotando y conectándose con líneas finas.
Si el efecto predeterminado se ve bien para su diseño, ya está. Golpear Actualizar para ahorrar. Pero si quieres personalizar el estilo de las partículas, sigue leyendo.
Cómo personalizar el efecto de sus partículas Elementor
Master Addons le permite personalizar completamente las partículas mediante un configurador visual. Puedes cambiar la cantidad de partículas, su forma, tamaño, velocidad, color y comportamiento de movimiento, todo sin escribir código.
Paso 1: abra el configurador de partículas
Debajo del interruptor de partículas, verás un mensaje: “Haga clic aquí para generar JSON para el siguiente campo” Haga clic en el enlace para abrir el configurador visual particles.js.
En la parte superior del configurador, haga clic “Predeterminado” para ver los cuatro ajustes preestablecidos integrados: Predeterminado, NASA, Bubble y Snow. Seleccione cualquier ajuste preestablecido como punto de partida o comience desde la configuración predeterminada.
Paso 2: ajuste las propiedades de las partículas
El configurador tiene tres secciones principales. Centrarse en el Partículas sección para personalización visual:
- Número « Controla cuántas partículas aparecen. Los valores más altos crean un efecto más denso, pero utilizan más recursos del navegador.
- Color « Establece el color de las partículas. Utilice el blanco para fondos oscuros o combine con los colores de su marca.
- Forma « Elija entre formas de círculo, borde (cuadrado), triángulo, polígono o estrella.
- Tamaño « Establece el tamaño de partícula. Habilite el tamaño aleatorio para una apariencia más natural.
- Opacidad « Controlar la transparencia de las partículas. La opacidad parcial crea un efecto sutil y elegante.
- Línea vinculada « Habilite o deshabilite las líneas de conexión entre partículas cercanas.
- Movimiento « Establece la velocidad y dirección del movimiento de las partículas.
Paso 3: descargue su configuración
Una vez que esté satisfecho con el aspecto de las partículas en la vista previa en vivo, desplácese hasta la parte inferior del configurador y haga clic “Descargar configuración actual (JSON)”.
Un archivo nombrado particlesjs-config.json se descargará en su computadora.
Paso 4: Copie el código JSON
Abre lo descargado particlesjs-config.json archivo en cualquier editor de texto (Notepad, VS Code o TextEdit). Seleccione todo el código y cópielo.
No edites el JSON manualmente a menos que sepas lo que estás haciendo. El configurador visual ya generó la configuración exacta que necesita.
Paso 5: Pegue en Elementor
Vuelve a tu editor Elementor. En la sección Estilo → MA Partículas configuración, verás un área de texto etiquetada para el código JSON de partículas. Pegue el código que copió y haga clic Actualizar.
Su efecto de partículas personalizadas ahora está disponible en la página. Vígalo con una vista previa para confirmar que todo se ve bien.
Formas creativas de utilizar fondos de partículas
A continuación se muestran algunos casos de uso prácticos para el fondo animado elemental o con partículas:
- Secciones de héroes « Agregue partículas al héroe de su página de inicio para una apariencia moderna y tecnológica. Combínalo con un titular, un subtexto y un botón CTA.
- Secciones de precios « Utilice un efecto de partícula sutil y de baja densidad detrás de su tabla de precios para que se destaque del resto de la página.
- Áreas testimoniales « Un suave efecto de nieve o burbuja detrás de los testimonios añade interés visual sin distraer la atención del contenido.
- Secciones de pie de página « Agregue partículas a su pie de página para una mirada pulida y terminada en la parte inferior de la página.
- Próximamente páginas « Las partículas crean movimiento en lo que de otro modo sería un diseño estático de una sola página. Consulte nuestra guía sobre cómo crear un Elementor próximamente página.
- Secciones de llamada a la acción «Llama la atención sobre tu CTA colocándolo en una sección con partículas animadas.
Consejos de rendimiento para partículas
Los efectos de partículas se ejecutan en el navegador del visitante usando JavaScript. Para mantener su sitio rápido:
- Limitar el recuento de partículas. 40-80 partículas suelen ser suficientes para lograr un buen efecto visual. Superar los 150 puede ralentizar los dispositivos más antiguos.
- Utilice partículas en 1-2 secciones por página. No agregues partículas a cada sección. El efecto pierde su impacto cuando se usa en exceso y agrega sobrecarga de procesamiento.
- Prueba en móvil. Los efectos de las partículas pueden agotar la batería de los teléfonos. Considere reducir el recuento de partículas o desactivar el efecto en dispositivos móviles utilizando la configuración de visibilidad receptiva de Elementor.
- Evite partículas en páginas con mucho contenido. Las publicaciones largas del blog y las páginas de documentación no necesitan fondos animados. Guarde partículas para páginas de destino y secciones clave.
Para obtener más consejos sobre rendimiento, lea nuestra guía en cómo acelerar los sitios web de Elementor.
Otros efectos de fondo de Elementor
Las partículas son sólo uno de varios efectos de fondo de Elementor disponibles en Master Addons. Consulte estas extensiones relacionadas:
- Fondo de gradiente animado « Gradientes de color suaves y cambiantes que se animan continuamente
- Control deslizante de fondo « Recorre múltiples imágenes de fondo con efectos de transición
- Rellax (Parallax) « Crea profundidad con efectos de desplazamiento de paralaje
- Revelar « Efectos de revelación animados cuando las secciones se desplazan hacia la vista
Todos estos están incluidos en Más de 80 widgets y extensiones de complementos maestros.
Preguntas frecuentes
¿el efecto de fondo de partículas está libre en Master Addons?
La extensión Particles está disponible en la versión gratuita de Master Addons con ajustes preestablecidos básicos. La versión Pro le ofrece opciones de personalización adicionales y la posibilidad de utilizar configuraciones JSON personalizadas. Verifique el página de precios para detalles del plan.
¿las partículas funcionan con contenedores Elementor?
Sí. La extensión Particles de Master Addons funciona tanto con las secciones Elementor más antiguas como con los contenedores Flexbox más nuevos. Habilite de la misma manera desde la pestaña Estilo de cualquier contenedor.
¿las partículas ralentizarán mi sitio web?
Las partículas se ejecutan en el navegador usando JavaScript, por lo que agregan cierta sobrecarga de procesamiento en el lado del cliente. Con 40-80 partículas, el impacto es mínimo en los dispositivos modernos. Evite usar más de 150 partículas o agregar el efecto a varias secciones en la misma página. La biblioteca particles.js es liviana (alrededor de 25 KB), por lo que el impacto del tamaño del archivo en la carga de la página es insignificante.
¿Puedo cambiar el color de las partículas para que coincida con mi marca?
Sí. Utilice el configurador visual particles.js (vinculado desde la configuración de extensión) para cambiar el color, la forma, el tamaño, la velocidad, la opacidad y más de las partículas. Puede establecer cualquier valor de color hexadecimal para las partículas y las líneas de conexión de forma independiente.
¿Cómo desactivo las partículas en el móvil?
Puede utilizar la configuración de visibilidad responsiva incorporada de Elementor para ocultar la sección de partículas en dispositivos móviles. Alternativamente, cree una sección separada optimizada para dispositivos móviles sin partículas. Esto ahorra batería y energía de procesamiento en teléfonos y tabletas.
Comience a agregar partículas a su sitio Elementor
Agregar un fondo de partículas elementales requiere solo unos pocos clics con complementos maestros. Elija entre ajustes preestablecidos integrados como NASA, Bubble o Snow para una configuración rápida, o cree su propio efecto personalizado con el configurador particles.js para un control total.
La clave es utilizar las partículas estratégicamente. Elija una o dos secciones de alto impacto, elija un fondo oscuro y mantenga razonable el recuento de partículas. Eso es todo lo que se necesita para convertir una página estática en algo que se sienta vivo.
¿Listo para probarlo? Descargue complementos maestros para Elementor y agrega tu fondo de primeras partículas en menos de 5 minutos.
