Barra fija de llamada a la acción

call to action | CSS | barra fija

En este artículo te vamos a explicar cómo crear una barra fija a pie de página que aparezca al hacer scroll y que desaparezca cuando se llegue al final de la página.

Esta es la página real donde vamos a realizar los cambios (es un embudo de captación de leads):

https://spa-mascotas.multibuilder.es/

Lo primero, será crear un bloque al final de la página con los siguientes ajustes:

• El acolchado o padding superior o inferior tendrá 20 px

• Crearemos 2 columnas

• Anchos de columnas: columna 1 al 60% y columna 2 al 40%

• En la columna 1 insertamos un widget de Texto o de Sección de icono, o cualquier otro.

• La columna 2, con márgenes del 2% a derecha e izquierda

• En ajustes del contenedor, añadir una clase personalizada (css) llamada sticky-cta

Código CSS y Script

Esta vez el CSS no lo introduciremos en la sección de CSS, sino en la de Scripts, porque si no el bloque quedaría oculto en el editor y no podríamos trabajar bien. El CSS queda entre <style> y </style>.

Por tanto, iremos a Ajustes del embudo>Código personalizado>Código solo en esta página>Código en Head de página, e insertaremos este código. Dentro del código tienes más instrucciones:

<style>
.sticky-cta {
  display: none; /* oculta el bloque hasta que necesitamos que aparezca */
  position: fixed; /* hace que el bloque sea "sticky" o sea "fijo" */
  bottom: 0;  /* establece dónde aparecerá el bloque */
  z-index: 10; /* permite que el bloque aparezca encima de otros contenidos*/
}
  
.sticky-cta .type1.icon-section i.icon-section-icon {
    font-size: 30px;
}

@media (max-width: 768px){
  /* oculta la primera columna en móviles */ 
  .sticky-cta .grid-column:first-child {
  display:none;
  }
  /* añade un acolchado extra al final del bloque*/
  .sticky-cta .grid-column:last-child {
    padding-bottom: 2%;
  }
}
</style>

A continuación, insertaremos un script para que la barra fija no aparezca de inmediato cuando se cargue la página. Cuando el usuario haya avanzado un poco, la barra aparecerá, y finalmente desparecerá cuando llegue al final.

Ten en cuenta que la primera columna del bloque no será visible en vista de móvil ni tablet.

¿Por qué hacemos esto?

En el embudo que hemos creado aparece en la cabecera un botón con una llamada a la acción: "Reserva cita hoy mismo". Según avanzamos en la página la llamada a la acción no vuelve a aparecer hasta el final: "Reserva tu cita".

No quedaría bien y podría confundir al usuario ver repetido el mismo botón, en la página y en la barra fija. Por eso, la barra fija solo aparece cuando no hay otros botones a la vista.

Ahora iremos a Ajustes del embudo>Código personalizado>Código solo en esta página>Código en Body de página, e insertaremos este código:

<script>
  $(window).scroll(function(){
    if ($(this).scrollTop() < 600 || $(this).scrollTop() + $(this).height() > $(document).height() - 300) {
      $('.sticky-cta').fadeOut();   
    } else {
      $('.sticky-cta').fadeIn();
    }
  });
</script>

Dependiendo de cómo hayas diseñado tu embudo, puedes modificar la distancia en píxeles para que aparezca y desaparezca la barra:

• El valor 600 que aparece aquí corresponde a la distancia en píxeles desde la parte superior. Un valor menor hará que la barra fija aparezca antes.

• El valor 300 corresponde a la distancia en píxeles desde la parte inferior. Un valor superior hará que la barra fija se oculte antes.

Puedes ver el resultado final aquí:

https://spa-mascotas.multibuilder.es/