Personalizar el botón "Ir Arriba" y barra de desplazamiento en Divi

Personalizar el botón “Ir Arriba” y barra de desplazamiento en Divi

En este tutorial te mostraremos como personalizar el Botón “ir arriba” y la barra de desplazamiento en Divi. Puedes aplicarlo en cualquier sitio web y personalizar el código CSS tanto como quieras. Esta solución funcionará para darle un toque mucho más personalizado y conectado con tu branding a tu sitio web. Mira el ejemplo:

Personalizar el botón "Ir Arriba" y barra de desplazamiento en Divi

Si quieres personalizar Divi en toneladas industriales tenemos el curso de Divi Pixel, un plugin que te ayuda a sacarle todo el provecho a Divi con sus múltiples configuraciones ¡No te lo pierdas!

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI

Este es un snippet de Divi supersencillo con el que podrás cambiar no solo el color, sino los estilos en general del botón “ir arriba” que viene por defecto con Divi. Sobre todo te sirve para poder darle un estilo muy particular al que viene por defecto con Divi, por ello comenzaremos con la personalización de este elemento.

Snippet para personalizar el botón “ir arriba” en Divi

Copia el código CSS de acá abajo y luego de eso, ve a las opciones del tema Divi > Generales > insertar código CSS personalizado y pega el código CSS.

/*color boton ir arriba*/
.et_pb_scroll_top.et-pb-icon {
	color: #ffffff; /*color de la flecha*/
	background: #F87223; /*color del fondo*/
	border-radius: 100px; /*radio del icono*/
	font-size: 32px; /*tamaño del icono*/
	margin-right: 10px !important;
}
.et_pb_scroll_top.et-pb-icon:hover {
	background:  #E0AF4A; /*color del fondo*/
}

A partir de aquí, puedes cambiar los valores de color, fondo, radio del borde y tamaño de la fuente del ícono.

De esa manera podrás darles unos estilos personalizados al botón “Ir arriba” en Divi. Hazle juego con tus colores corporativos y dale un aspecto interesante.

Ahora personalizaremos la barra de desplazamiento, en conjunto con el botón de ir arriba, hará una excelente combinación para que nuestro sitio consiga un aspecto relacionado con nuestra marca corporatiba.

Snippet para personalizar la barra de desplazamiento de Divi

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.

Para personalizar la barra de desplazamiento en Divi 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: #16222a; /* color de fondo de la barra */
}
::-webkit-scrollbar-thumb {
  background: #F87223; /* color barra - aquí el color de tu marca */
  border-radius: 10px; /* borde barra */
}

Recuerda cambiar los valores tales como los colores, el radio de los elementos o los background con tus colores corporativos, de esa forma conseguirás una personalización genial.

No olvides revisar nuestro curso de Divi Pixel, un plugin add-ons para Divi con el que podrás hacer esta y miles de personalizaciones adicionales sin apenas tirar una línea de código. Además, que tiene más de 30 módulos geniales, y constantemente están publicando nuevos módulos.

¿Te ha gustado la personalización del botón “ir arriba” y barra de desplazamiento de Divi? No olvides compartirlo y comentar nuestro contenido. Nos vemos en un próximo tutorial gratuito.

Artículos relacionados

Comentarios

¡Registrate en nuestro próximo Live!
12 de ENERO de 2024 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas sobre ecommerce en Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
0
días
0
horas
0
minutos
0
segundos
¡Registrate en nuestro próximo Live!
12 DE ENERO DE 2024 9:30 HRS (CDMX)
0
días
0
hrs
0
min
0
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¿Aún no eres miembro Premium ⭐ de UXDivi? ¡Esta es tu oportunidad de oro! Únete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
0
días
0
horas
0
minutos
0
segundos
25% OFF BLACK FRIDAY SALE!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →