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:

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!

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.