En este content HUB te daremos el snippet para que logres personalizar la barra de desplazamiento de tu tema Divi sin plugins

La barra de desplazamiento que viene por defecto con Divi es bastante sencilla, y de seguro en más de una ocasión has querido personalizarla. Pues bien, en este post te daremos los snippets que necesitas para lograrlo, y además te explicaremos como aplicar los cambios.

Aprende a personalizar al máximo tu tema Divi con nuestro curso de Divi Toolbox, en el que podrás descargar el plugin de manera completamente gratuita.

Lo primero es ver como tienes tu barra de desplazamiento por defecto, en mi caso se ve así:

Ahora, ve a opciones del tema de Divi > Generales > CSS personalizado e inserta estas líneas de CSS:

/* snippets barra de desplazamiento */
::-webkit-scrollbar {
  width: 8px; /* ancho de la barra */
}
::-webkit-scrollbar-track {
  background: #f6f6f6; /* color de fondo de la barra */
}
::-webkit-scrollbar-thumb {
  background: #4966F6; /* color barra - aquí el color de tu marca */
  border-radius: 10px; /* borde barra */
}

::-webkit-scrollbar-thumb:hover {
  background: #4E29E5; /* color barra hover - opcional */
}

Con la primera línea personalizarás el ancho de la barra, a más pixeles más ancho será la barra. Con la segunda línea cambiarás el fondo a la barra, esta línea la puedes dejar de un color diferente al del fondo de tu sitio web para que se distinga.

En la tercera línea de nuestro snippet para personalizar la barra de desplazamiento de Divi tendrás el código del color de la barra, así como el radio del borde de la misma. Esto valores los puedes modificar a tu gusto, según los colores de tu branding.

Y la última línea es meramente opcional y es para cambiar el color de la barra cuando un usuario se pose sobre ella (on hover). Aquí puedes colocar un color diferente o simplemente ignorar este cacho de CSS. Y el resultado será el siguiente:

Aprende a personalizar Divi con todos nuestros tutoriales premium.

¡Y listo! Super fácil, ¿verdad? ¡Ahora tu barra de desplazamiento de Divi está completamente personalizada!

Entra aquí para ver en acción la DEMO →

¿Te ha gustado? No olvides compartirlo y comentar nuestro contenido. Nos vemos en un próximo Snippet.