Cree una ventana emergente que evite que los visitantes vean el contenido de la página a menos que hagan clic en un botón específico dentro de la ventana emergente.
Aprenderá a crear una ventana emergente que:
- Haga al visitante una pregunta de Sí o No, y permita que el visitante haga clic en el botón Sí o No
- Muestre el contenido de la página si el visitante hace clic en el botón Sí, y redirija al visitante a otra URL si hace clic en el botón No o en cualquier otro lugar que no sea el botón Sí.
Diseñe la ventana emergente y su contenido
- Ir Plantillas> Ventanas emergentes> Agregar nuevo y dale un nombre a tu nueva ventana emergente. (Un método alternativo es presionar CMD + E o CTRL + E abrir Descubridor, busque Popup, elija Agregar nueva ventana emergentey darle un nombre.)
- Elija una plantilla emergente prediseñada o cierre la superposición de la biblioteca y diseñe su ventana emergente desde cero. Para este ejemplo, diseñaremos el nuestro.
Ventana emergente> Ficha Diseño
- Anchura: Establecer en 600px
- Altura: Seleccione Personalizado
- Altura personalizada: Establecer en 800px
- Posición vertical: Centro
- Botón Cerrar: Establecer en Ocultar
- Animación de entrada: Elija Fade In
Contenido
- Agregue un encabezado que haga una pregunta de sí o no, y modifíquelo según sea necesario.
- Agregue dos botones, uno para Sí y otro para No, y modifique el estilo de cada uno según sea necesario.
- Haga clic en el icono de engranaje / engranaje
ubicado en la parte inferior izquierda del panel para volver a la Configuración emergente
Ventana emergente> pestaña Estilo
- Tipo de fondo: Transparente
- Imagen: Agregue una imagen de fondo y ajuste su configuración según sea necesario
Ventana emergente> Pestaña avanzada
- Relleno: Establecido en 80 px para derecha e izquierda, dejando
parte superior
- Evitar el cierre en superposición: Establecer en Sí
- Prevenir al cerrar con la tecla ESC: Establecer en Sí
Editar la sección
Sección> Estilo> Borde
- Tipo de borde: Sólido
- Ancho del borde: 15px
- Color: Elija un color para su borde
- Radio de borde: 40 solo para la parte inferior
Sección> Avanzado
Relleno: 30px solo para la parte inferior.
Editar la columna
Columna> Estilo
- Tipo de fondo: Degradado
- Color: Elige el primer color degradado
- Segundo color: Elige el segundo color de degradado
- Tipo: Radial
Frontera
- Radio de borde: 20px solo para la parte inferior
- Sombra de la caja: Establecer según sea necesario
Columna> Avanzado
- Margen: Establezca -30 (menos 30) para Superior e Izquierda
- Relleno: Establezca 100 px para la parte superior e inferior
Editar el contenido
Título> Estilo
Título: Establece el color en blanco.
Botón> Estilo
Color de texto: Establece el color en blanco para cada botón.
Edite el botón Sí
Contenido:
- Enlace: Haga clic en el icono Dinámico
y elige Acciones> Ventana emergente
- Haga clic en Surgir de nuevo
- Escoger Cerrar elemento emergente y deslizarse No volver a aparecer a sí
Editar el botón No
Contenido:
Enlace: Ingrese cualquier vínculo de sitio apropiado para la edad
Establecer las opciones de publicación
Hacer clic Publicar botón. No hay condiciones, activadores o reglas avanzadas para esta ventana emergente, así que haga clic en el Guardar y cerrar botón.
Editar la página que contiene el botón Comprar (o cualquier botón que cree para abrir la ventana emergente).
Editar el botón Comprar
- Si aún no ha creado un botón para iniciar la ventana emergente, puede hacerlo ahora. Edite su texto y tipografía según sea necesario
- Enlace: Haga clic en el icono Dinámico
- Haga clic en Ventana emergente nuevamente y, en Acción, elija Abrir ventana emergente.
- En el campo Popup, ingrese algunas letras para buscar / encontrar el Popup que acaba de crear.
- Haga clic en el Actualizar botón para actualizar la página.
Todo listo. Ahora vaya a la página con el botón Comprar, haga clic en él y vea la ventana emergente en acción.
