Hay elementos del tema Divi, como el botón de volver arriba, que admiten un montón de posibles personalizaciones, para que no tengas que conformarte con su (triste) aspecto predeterminado.

Aquí tienes algunas de los cambios de aspecto más interesantes y curiosos que puedes aplicar a este útil botón, con solo un poco de CSS que copiar y pegar.

Índice de contenidos

¡No veo el botón de volver arriba de Divi!

¡Uy, perdón! Para empezar deberías activar el botón de volver arriba del tema Divi, pues no viene habilitado por defecto.

Pásate por las página de «Opciones del tema» del menú de administración de Divi en el escritorio de WordPress y activa la funcionalidad antes de seguir con este tutorial.

Si visitas la web deberías ver el botón de volver arriba del tema Divi haciendo scroll hacia abajo en cualquier página (que sea un poco larga, sino ni aparece)

Personalizaciones sencillas con CSS que puedes aplicar al botón de volver arriba de Divi

Vamos a ver algunas personalizaciones rápidas y fáciles que puedes aplicar al botón de volver arriba del tema Divi.

En las capturas verás que el CSS está aplicado en el personalizador de WordPress, pero también puedes añadir los códigos en la caja que hay al fondo de la página de opciones del tema de Divi en el escritorio de administración de WordPress, o usando un plugin de fragmentos de código, como gustes.

Botón de volver arriba de Divi redondo

El primer código simplemente cambia el botón de volver arriba para que sea redondo en vez de cuadrado.

/* Boton Divi volver arriba redondo */
.et_pb_scroll_top.et-pb-icon {
border-radius:50%;
right:1rem;
}

Y el resultado aquí:

Botón de volver arriba de Divi con texto

Hay gente para la que no está muy clara la utilidad del botón de volver arriba, así que vamos a añadirle un texto que lo deje claro. Por ejemplo:

/* Boton Divi volver arriba con texto */
body .et_pb_scroll_top:after {
content: "Subir" !important;
font-family: Open Sans, sans-serif !important;
line-height: 30px !important;
font-size: 22px !important;
position: relative;
top: -2px;
margin-left: 10px !important;
}

Y el resultado será así:

Botón de volver arriba de Divi con texto vertical

Una variable del efecto anterior sería poner el texto en vertical, para que no ocupe tanto la cosa esta. Un código para conseguirlo sería este:

/* Boton Divi volver arriba texto vertical */
.et_pb_scroll_top:before {
content: "VOLVER ARRIBA";
font-family: "Open Sans",Arial,sans-serif;
padding:10px;
}

.et_pb_scroll_top, .et_pb_scroll_top.et-hidden {
transform: rotate(-90deg);
animation: none!important;
}

.et_pb_scroll_top.et-pb-icon {
right: -60px;
}

En algunas webs quedará genial…

Botón de volver arriba de Divi con distinto icono

¿No te gusta el icono que sale por defecto con el botón de volver arriba de Divi?, pues ningún problema, puedes usar cualquiera de entre los 300 que incorpora Divi, solo tienes que poner el número del que quieras en el siguiente fragmento de código CSS:

/* Boton Divi volver arriba distinto icono */
body .et_pb_scroll_top:before {
content: "\3a" !important;
color: white;
position: relative;
top: 3px;
}

Quedará así, con el ejemplo de arriba:

Botón Divi de volver arriba flotante

Una de las cosas que menos me gusta del botón de subir arriba de Divi es que esté pegado al lateral, así que algo que me pide el cuerpo siempre sería hacer que sea flotante, con un código como este:

/* Boton Divi volver arriba flotante */
body .et_pb_scroll_top {
right: 20px !important;
bottom: 125px !important;
border-radius: 5px !important;
}

Lo hacemos flotante con los elementos right y bottom, el resto son opcionales (bueno, todos).

Se ve mejor, claramente…

Botón Divi de volver arriba con distintos colores

Si te sigue pareciendo algo aburrido (que lo es) el botón de volver arriba de Divi puedes cambiarle los colores esos tan aburridos por algo que se parezca a los colores personalizados de tu web (ver ejemplo).

El código que te propongo:

/* Boton Divi volver arriba distintos colores */
body .et_pb_scroll_top {
background-color: #FF646D !important;
color: white !important;
padding: 10px 12px 10px 10px !important;
}

Los colores se los cambiamos con los elementos color y background-color, el padding es opcional pero queda mejor, como puedes ver…

Botón Divi de volver arriba distinto al pasar el cursor

Si te apetece dar un toque de estilazo y distinción puedes hacer que cambien los colores del botón de volver arriba de Divi simplemente añadiendo un código como este, compatible con el resto de trucos:

/* Boton Divi volver arriba cambiar colores al pasar el cursor */
body .et_pb_scroll_top:hover {
background-color: #ff646d !important;
color: white !important;
}

No te lo cuento, te lo muestro…

Botón de volver arriba de Divi con sombra

Un efecto que puedes aplicar a cualquiera de las demás personalizaciones que hemos visto es añadirle algo de sombra, una mijita de alegría, para que no sea tan soso el botón de volver arriba. Por ejemplo:

/* Boton Divi volver arriba con sombra */
.et_pb_scroll_top.et-pb-icon {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
}

Queda bastante mejor, incluso el predeterminado:

¿Se pueden usar conjuntamente varios de estos códigos de personalización?

Pues claro, aquí te dejo un ejemplo que personalmente me gusta bastante:

/* Boton Divi Volver arriba MUY personalizado */
/* REDONDO Y SOMBREADO */
.et_pb_scroll_top.et-pb-icon {
border-radius:50%;
right:1rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
}
/* FLOTANTE */
body .et_pb_scroll_top {
right: 20px !important;
bottom: 125px !important;
}
/* DISTINTOS COLORES */
body .et_pb_scroll_top {
background-color: #FF646D !important;
color: white !important;
padding: 10px 12px 10px 10px !important;
}
/* DISTINTOS COLORES AL PASAR EL CURSOR */
body .et_pb_scroll_top:hover {
background-color: #000 !important;
color: white !important;
}

¿Te gusta como queda?