DiviFast: plantillas para Divi


Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Search in posts
Search in pages

7 efectos CSS para personalizar el botón «volver arriba» de Divi

7 efectos CSS para personalizar el botón «volver arriba» de Divi
27/06/2019

¡Hola DiviLover! En este post te vamos a enseñar cómo personalizar el botón «volver arriba» de Divi mediante código CSS, una tarea muy sencilla.

Lo primero que debes hacer es activar esta funcionalidad en las opciones del tema.

Para ello, vas a Divi > Opciones de tema > Botón de volver arriba > Activar.

7 efectos CSS para personalizar el botón "volver arriba" de Divi

Una vez lo has activado, ya puedes personalizar tu botón de «volver arriba» en Divi, para lo cual te proponemos varios diseños y formas.

#1 Botón «volver arriba» cuadrado

Empezamos por algo sencillo, un botón cuadrado y con fondo liso (negro).

7 efectos CSS para personalizar el botón "volver arriba" de Divi

Para conseguir este botón, solo tienes que pegar el siguiente código en tu plantilla (Divi > Opciones de tema > CSS personalizado).

/* personalizar botón volver arriba*/
.et_pb_scroll_top.et-visible {
    color: #fff;
	background: #000;
	border-radius: 0px;
	font-size: 25px;
	}

.et_pb_scroll_top.et-pb-icon {
	color: #fff;
	background: #000;
	border-radius: 0px;
	font-size: 25px;
	}

Si quieres este mismo botón, pero con fondo blanco y flecha negra, el código es:

7 efectos CSS para personalizar el botón "volver arriba" de Divi
/* personalizar botón volver arriba*/
.et_pb_scroll_top.et-visible {
    color: #000;
	background: #fff;
	border-radius: 0px;
	font-size: 25px;
	}

.et_pb_scroll_top.et-pb-icon {
	color: #000;
	background: #fff;
	border-radius: 0px;
	font-size: 25px;
	}

#2 Botón «volver arriba» redondo

Si prefieres un botón de «volver arriba» en Divi redondo en vez de cuadrado, te dejamos dos códigos diferentes:

  • Botón redondo con fondo negro y flecha blanca:
7 efectos CSS para personalizar el botón "volver arriba" de Divi
/* personalizar botón volver arriba*/
.et_pb_scroll_top.et-visible {
    color: #fff;
	background: #000;
	border-radius: 100px;
	font-size: 25px;
	}

.et_pb_scroll_top.et-pb-icon {
	color: #fff;
	background: #000;
	border-radius: 100px;
	font-size: 25px;
	}
  • Botón redondo con fondo blanco y flecha negra:
7 efectos CSS para personalizar el botón "volver arriba" de Divi
/* personalizar botón volver arriba*/
.et_pb_scroll_top.et-visible {
    color: #000;
	background: #fff;
	border-radius: 100px;
	font-size: 25px;
	}

.et_pb_scroll_top.et-pb-icon {
	color: #000;
	background: #fff;
	border-radius: 100px;
	font-size: 25px;
	}

#3 Botón «volver arriba» con borde

Pasamos ahora a los botones con borde, para los que también tenemos dos opciones diferentes:

  • Botón cuadrado con fondo negro, borde blanco y flecha blanca:
7 efectos CSS para personalizar el botón "volver arriba" de Divi
/* personalizar botón volver arriba*/
.et_pb_scroll_top.et-visible {
    color: #fff;
	background: #000;
	border-radius: 0px;
	font-size: 25px;
	border: 2px solid #fff;
	}

.et_pb_scroll_top.et-pb-icon {
	color: #fff;
	background: #000;
	border-radius: 0px;
	font-size: 25px;
	}
  • Botón redondo con fondo blanco, borde negro y flecha negra:
7 efectos CSS para personalizar el botón "volver arriba" de Divi
/* personalizar botón volver arriba*/
.et_pb_scroll_top.et-visible {
    color: #000;
	background: #fff;
	border-radius: 100px;
	font-size: 25px;
	border: 2px solid #000;
	}

.et_pb_scroll_top.et-pb-icon {
	color: #000;
	background: #fff;
	border-radius: 100px;
	font-size: 25px;
	}

#4 Botón «volver arriba» con efecto degradado

Por último, te dejamos un código CSS para conseguir un botón con efecto degradado como el de nuestra web.

Solo tienes que utilizar el siguiente código y cambiar los dos colores, en nuestro caso #ef3028 y #f89637:

/* personalizar botón volver arriba*/
.et_pb_scroll_top.et-visible {
    color: #fff;
	background: linear-gradient(250deg,#ef3028 0%,#f89637 100%);
	border-radius: 100px;
	font-size: 25px;
	}

.et_pb_scroll_top.et-pb-icon {
	color: #fff;
	background: linear-gradient(250deg,#ef3028 0%,#f89637 100%);
	border-radius: 100px;
	font-size: 25px;
	}

Si quieres conseguir otro efecto o diseño diferente, solo tienes que jugar con estos códigos.

Esperamos que con estos efectos CSS para el botón «volver arriba» de Divi puedas personalizar un poco más tu sitio web.

4 Comentarios

  1. Ricardo Rojas

    ¡gracias por el aporte! Me funciono de maravilla. Ojala puedas explicar como se modifican los email que envia woocommers despues de que el cliente compro.

    Responder
  2. mela

    Gracias! Me ayudo mucho! Saludos.

    Responder
  3. Windsor

    Gracias funciona muy bien.

    Responder
  4. Gabriel

    Muchas gracias! Genial

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada.

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Search in posts
Search in pages

Nuestras plantillas

Llévatelas todas

Plantillas Divi | Divi templates

te regalamos un diseño gratis para divi

Información Básica sobre Protección de Datos

Responsable: DiviFast. Finalidad: suscripción a nuestra newsletter. Legitimación: Consentimiento. Destinatarios: No se ceden a terceros. Se pueden producir transferencias. Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en hola@divifast.es así como el derecho a presentar una reclamación ante una autoridad de control. Información adicional: en nuestra política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal, incluida información sobre acceso, conservación, rectificación, eliminación, seguridad, y otros temas.