Cómo añadir un bloque fijo dentro de una landing

En este tutorial te enseñaremos cómo crear un bloque en tu página que se mantenga fijo mientras navegas por ella.

Este tipo de efectos es muy útil para mantener la atención del usuario en un elemento importante de la página.

En nuestro ejemplo, hemos creado un bloque con un contador regresivo en la parte inferior de la página y un botón que siempre acompaña al usuario mientras navega.

Estos son los pasos a seguir:

1. Crea un bloque en blanco al final de la página.
2. El bloque debe tener 2 columnas, una ocupando el 70% del espacio y la otra el 30% restante.
3. Alinea verticalmente el contenido en ambas columnas.
4. Agrega un contador regresivo en la primera columna (puedes usar el widget que desees) y un botón en la segunda.
5. Asegúrate de dejar los siguientes espacios de relleno: 25px en la parte superior e inferior del bloque, sin añadir ningún margen al widget del contador, y el botón debe tener un ancho completo con un margen del 2% en cada lado.
6. Agrega una clase personalizada al bloque. Para hacerlo, haz clic en los ajustes del bloque y luego en "Agregar nombre de clase personalizado".
7. Agrega la siguiente clase: sticky-cta.

Perfecto, ahora vamos a continuar agregando código CSS para mejorar el bloque y mantenerlo fijo en la parte inferior de la pantalla.

Para hacerlo, ve al apartado de ajustes de la página o funnel (rueda dentada del menú lateral) y luego a la opción de "Código personalizado"

Pegaremos el siguiente código íntegro en el apartado de Código en Head de página.

Este es e código:

Si te atreves con el código, puedes variar algunos parámetros (espacios, etc).

Para ello incluiremos el siguiente código pero, esta vez, en el espacio de Código personalizado en Body.

Y el código será el siguiente:

Este código modificado agrega la propiedad CSS position: fixed al bloque con clase sticky-cta, lo que lo mantendrá fijo en la parte inferior de la pantalla cuando se desplaza hacia abajo. 

También ajusta la propiedad bottom a 0 para que el bloque quede pegado al borde inferior de la pantalla y ajusta la propiedad z-index a 999 para asegurarse de que el bloque esté en la capa superior. 

Finalmente, establece el ancho del bloque al 100% para asegurarse de que ocupe todo el ancho de la pantalla.