Ahorra hasta 20% OFF en nuestro Planes y Cursos

Día(s)

:

Hora(s)

:

Minuto(s)

:

Segundo(s)

Solo durante:

Ahorra hasta 20% OFF en nuestro Planes y Cursos

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 Relacionado

2 Comentarios

Enviar un comentario

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

¡40% + 10% OFF en nuestro lanzamiento!

Apúntate y te avisaremos cuando esté publicada nuestra nueva plataforma uxdivitemplates.com. Te regalaremos un cupón ÚNICO de descuento del 10% adicional a los descuentos de lanzamiento.

¡Gracias! Te avisaremos cuando publiquemos nuestra plataforma y te enviaremos el cupón de descuento único por estar en esta lista.