El día de hoy traigo un tutorial que seguro mas de uno verá muy útil para sus próximos diseños.

Debo admitir que yo mismo me he visto tentado a sobreutilizarlo porque realmente da un toque diferente y distintivo a cualquier sitio.

Estoy hablando del efecto de particulas, si, ese que hace ver como unas particulas flotantes que además interactúan cuando haces clic en ellas o pasas el ratón por encima (hover).

Aunque puede parecer complicado, nuestro compañeros de CakeWP han subido un tutorial que hace muy sencillo la utilización del efecto y hoy lo vamos a traducir.

1. Integrar la librería de Jquery a tu tema

Aquí hay dos opciones: puedes descargar la librería desde este link y seguir las instrucciones que allí aparecen (en inglés) para integrarlo correctamente en tu tema.

O puedes descargar el plugin creado por los amigos de CakeWP AQUÍ.

Tras instalar verás un nuevo elemento en la barra lateral del admin:

Al hacer clic veremos lo siguiente:

Ya utilizaremos esta sección mas adelante.

2. Escoge la forma, disposición y efecto de las particulas

Para escoger como se verá nuestro efecto de particulas debes entrar en ESTE LINK.

Aquí te recomiendo que juegues todo lo que te plazca, hay opciones predeterminadas pero puedes personalizar por completo el efecto: velocidad, forma, efecto de hover, etc.

Luego de que hayas configurado tu efecto de particulas, solo debes darle donde dice "Download current configuration" y te descargará un archivo json.

3. Insertar el efecto en la web

Abre el archivo JSON en cualquier editor de texto como el bloc de notas o Notepad++ y paralelamente, abre una nueva nota en cualquiera de los dos programas y añade el siguiente código:

particlesJS('ID_A',
{
Contenido archivo JSON particulas 
);

Copia y pega el contenido del archivo JSON en el espacio indicado y copia todo el contenido.

Pegalo en la sección Particle Background que configuramos anteriormente.Es importante que el ID_A puede ser reemplazado por caulquier palabra que desees.

Una vez hayas terminado, te debería quedar algo así:

Guarda los cambios y ahora dirigete a la sección, fila o módulo al que deseas agregar el fondo de particulas y en las opciones avanzadas ingresa el ID_A.

Guarda y listo! 😀 Has configurado con éxito un fondo de particulas en tu sitio con Divi.