Nuestras promociones de aniversario se acaban en:  

Día(s)

:

Hora(s)

:

Minuto(s)

:

Segundo(s)

Seleccionar página
4
Volver al contenido del HUB: Hub | Snippets Divi

Personalizar la barra de desplazamiento de Divi

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

Personalizar la barra de desplazamiento de Divi

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 */
}

Personalizar la barra de desplazamiento de Divi opciones de Divi

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:

Personalizar la barra de desplazamiento de Divi resultado

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.

Contenido de este HUB

0 comentarios

Enviar un comentario

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

¡Valóranos!

¿Te han gustado nuestros tutoriales y cursos? por favor, déjanos una valoración de 5 estrellas en truspilot, nos ayudará mucho su calificación ¡Gracias!

🖐 ¡RECIBE LAYOUTS Y CHILDTHEME GRATIS! 😎

Suscribiendote a esta lista de correo, recibirás algunos de nuestros layouts premium y un childtheme para eCommerce totalmente gratis. Además te enviaremos nuestro resumen de contenidos para que siempre estés enterado/a de nuestras últimas novedades.

¡Perfecto! ¡Gracias! Pronto comenzarás a recibir nuestros recursos gratuitos