1 Ingresa a tu cuenta de 99Builder aqui 99builder.com/login
2 Una vez adentro, lo primero que vamos a hacer es ponerle un nombre personalizado al bloque superior que creaste con el objetivo de que sea flotante, para ello debes seguir estos pasos:
*Pon el cursor sobre el bloque que dejarás flotante y da clic sobre la opción “Bloque”
*Te abrirá una ventana “Editar ajustes del Contenedor” en la parte de abajo toca en la opción “Añadir nombre de clase personalizado a este bloque”. En este ejemplo lo nombraremos my-container.
*Al bloque que se encuentra debajo del contenido, también se le debe colocar un nombre personalizado y para poder hacerlo el procedimiento es igual al que realizamos anteriormente, pero en este caso le pondrás otro nombre diferente, en este ejemplo le colocaremos my-container2
3 Una vez los bloques correspondientes tengan el nombre asignado, dirígete a la barra de herramientas en el lateral izquierdo y selecciona “Configuración del Embudo”
4 Cuando se abra la ventana “Ajustes del embudo”, haz clic en “Código personalizado”
5 Verás diferentes opciones de código, en este caso necesitaremos el código “CSS en página” haz clic sobre él para poder ingresar el siguiente código:
.my-container {
position: fixed;
z-index: 100;
}
.my-container2 {
margin-top: 116px;
}
El código se verá así cuando lo ingreses en el campo. Una vez hayas configurado cada uno de ellos con los nombres que tú le asignaste, en la parte de abajo haz clic en el botón “Guardar”
Cada una de las palabras del código anterior tiene una explicación y finalidad:
.my-container: Nombre del Bloque superior que dejaremos flotante (En tu caso el nombre sería el que le ingresaste en el campo de “Añadir nombre de clase personalizado a este bloque”)
position: fixed : Significa que la posición del contenedor estará fija.
z-index: 100: Hace que el elemento quede al frente de los demás.
.my-container2: Nombre de la clase personalizada del bloque inferior al flotante (En tu caso el nombre sería el que le ingresaste en el campo de “Añadir nombre de clase personalizado a este bloque”)
margin-top: 116px: 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 116px es modificable.
Los { } se usan para poner los atributos que mencionamos anteriormente dentro de cada Clase Personalizada.
Por último, para que todos los cambios que realizaste queden aplicados en tu Funnel, toca sobre el botón “Guardar” que está en la parte superior del constructor.
De esta manera, ya tendrás el contenedor superior fijo y flotante en tu Funnel, para que puedas aprovechar para generar escasez y urgencia de tus productos o servicios de tu negocio. Si quieres ver si quedo bien configurado, haz clic sobre “vista previa del sitio” en la barra de herramientas.
