Introducción
En éste artículo te vamos a explicar cómo crear una cuenta atrás y dejarla fija en la parte superior de la pagina para que no deje de verse en ningún momento.
Una cuenta atrás es un elemento muy importante para generar una mayor conversión ya que añade una sensación de que se acaba el tiempo para poder acceder a la oferta irresistible que presentas en la landing page.
¿Prefieres verlo en Vídeo?
Aquí lo tienes 🙃
Y aquí tienes el código del que se habla en el vídeo por si quieres probarlo
<script>
jQuery( document ).ready
( function ( $ )
{ $(document).on( 'countdown_expire', function() {
$( '#registro' ).hide();
$( '#boton' ).hide();
$( '#oferta-caducada' ).show();
}
);
}
);
</script>Paso 1: Cuenta Atrás
- Dirígete a la landing o el paso del funnel donde que quieras introducir tu cuenta atrás
- Pulsa en Editar con Elementor
- Crea una nueva sección (abajo del todo de la landing pulsando en el botón '+' de color rosa y escogiendo una sección)
- Busca el elemento Countdown y arrástralo hacia la sección creada
Paso 2: Configuración de la Cuenta Atrás para que se quede fija en el encabezado
- Edita la sección que has creado en el paso 1 pulsando sobre los 6 puntitos de la sección
- Pulsa en la pestaña Avanzado
- Escribe un ID de CSS cualquiera, sin el símbolo almohadilla delante (#). En caso de que quieras poner más de una palabra sepáralas por guiones (-). Por ejemplo: mi-seccion
- Dale clic a Custom CSS y dentro pega el siguiente código:
#ID-CSS{
position:fixed;
width: 100%;
top:0;
right:0;
padding-top:20px;
z-index:999;
}
Importante: En la primera línea del código, después del símbolo almohadilla (#), escribe el ID de CSS que hayas puesto en el apartado anterior. En nuestro caso: mi-seccion.
- Pulsa en Actualizar y podrás ver cómo la cuenta atrás se queda fijo arriba de la página
