Como insertar un fondo de particulas en Divi

por | Desarrollo Web | 0 Comentarios

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:

Como insertar un fondo de particulas en Divi 1

Al hacer clic veremos lo siguiente:

Como insertar un fondo de particulas en Divi 2

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.

Como insertar un fondo de particulas en Divi 3

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í:

Como insertar un fondo de particulas en Divi 4

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.

Como insertar un fondo de particulas en Divi 5

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

 

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *