¿Cómo poner una barra flotante en la parte inferior de tu funnel?

¡Hola Tooler!

Una Barra Flotante es un elemento que puedes tener en la parte superior o inferior de tu landing page; esta barra permanece fija mientras que los visitantes se desplazan dentro del funnel y en ella puedes poner un llamado a la acción por ejemplo; dejar su correo electrónico, tocar un botón de compra, aprovechar ofertas limitadas, solicitar una llamada para asesoría personalizada…entre otras.

En el Constructor de Funnels de MasterTools puedes hacer esta configuración a través de unos simples pasos…¡Empecemos ahora!

Poner el cursor sobre el contenedor inferior que has diseñado previamente el cual quedará como flotante y das clic en la opción “Bloque”.




En la parte de abajo del Editor del Contenedor tocas la opción “Añadir nombre de clase personalizado a este bloque”. Para el ejemplo le pondremos como nombre container-oferta.



Debes ponerle un Nombre Personalizado al bloque que se encuentra arriba del contenedor que quedará flotante, para ello debemos hacer el mismo procedimiento que realizamos anteriormente con ese bloque; en este caso le pondremos como nombre my-container2.



Ahora que los bloques ya tienen el nombre de la clase personalizada, dirígete a la opción de “Configuración del Embudo” y seleccionas la sesión de “Código Personalizado”





Ahora en la sesión “Página CSS” debes ingresar el siguiente código:

.container-oferta {
position: fixed;
z-index: 100;
bottom: 0;
}
.container2 {
margin-bottom: 75px;
}

A continuación te explicaré el significado de cada palabra de ese código:

.container-oferta: Nombre del Bloque inferior que dejaremos flotante.
position: fixed : Significa que la posición del contenedor estará fija en la landing page.
z-index: 100: Hace que el elemento quede al frente de los demás.
bottom: 0: Esta propiedad determina la ubicación del elemento, en este caso le ponemos cero (0) para indicarle que la barra quede en la parte inferior.

.container2: Nombre de la clase personalizada del bloque superior al flotante.
margin-bottom: 75px: Es el espacio de la margen entre los dos bloques, esto se usa con el fin de que no quede un espacio en blanco entre los dos, en caso de que te aparezca puedes modificarle el número de píxeles hasta que esté bien adaptado, es decir que el 75px es modificable.

Los { } se usan para poner los atributos que mencionamos anteriormente dentro de cada Clase Personalizada.




¡Eso es todo Tooler! con los pasos que realizamos anteriormente la barra flotante quedará fija y tendrás una opción más de poner un CTA para tus leds en tu funnel.

Actualizado el: 16/06/2022