Video Tutorial

Como hacer un botón estático (Sticky button)

Vistazo rápido del resultado

(Desplazate hacia abajo con la barra de desplazamiento de tu ordenador y visualiza como el botón de abajo se vuelve estático en la esquina superior derecha)

Paso a Paso Como crear un Botón estático en Divi

Paso 1 – Crea una fila de una columna

Abre la configuración de la fila en general y en Avanzado > Puesto, actualiza el índice Z:

  • Índice Z: 14

Esto asegurará que el botón que agregamos en la fila permanecerá fijo por encima de todo el contenido en la página cuando se bloquee durante el desplazamiento de la página.

Paso 2 – Agrega tu botón

Agrega un nuevo módulo Botón y personalizado con el diseño que más se adapte a tu página

Paso 3 – Vuelvelo estático

Para volver estático tu botón regresa a la configuración DE LA COLUMNA (no de la fila) en la que está agregado tu botón. Dirigete a Avanzado > Scroll Effects y configura lo siguiente:

  • Posición adhesiva: Stick to Top
  • Transición de estilos predeterminados y pegajosos: NO

Paso 4 – Agrega una imagen para el fondo

Agrega un módulo de imagen que se desplazará en el fondo para terminar de completar el efecto y la configuraremos de la siguiente forma:

  • Tamaño: 85%
  • Avanzado > Posición: Absoluto
  • Índice Z: -1 

Paso 5 – Agrega código CSS personalizado al elemento principal

Por último, sube a CSS personalizado, selecciona la opción «Sticky» a lado de flotar y agrega el siguiente CSS personalizado al elemento principal para el estado fijo:

width: 300px !important;
right: 0px !important;
left: auto !important;
top: 0px;

Si sientes que está muy junto de tu barra de menú dale un pequeño espaciado como el de este ejemplo:

width: 300px !important;
right: 0px !important;
left: auto !important;
top: 100px !important;

Te puede Interesar

podemos ayudarte

Llevamos tu marca al mundo digital

contáctanos

Llámanos

(55) 5517-0068

Llámanos

(55) 5966-7769

Llámanos

(55) 5517-1532

Envíanos

Un Whatsapp

v

inbox por

Messenger

iniciemos

Un chat online

}

Horarios de atención

L-V de 9 a 5 pm

Necaxa #59, Col. Industrial, 07800

GAM, CDMX

Call Now Button