6 de septiembre de 2023
Bloque Cero En Pop-Up: Nuevo Bloque En La Biblioteca T1093
Este bloque convierte cualquier Bloque Cero en una ventana emergente. Busca el modificador como el bloque Т1093 "Pop-up: Bloque cero en ventana emergente" en la categoría "Otros" de la Biblioteca de bloques.
Por qué utilizar el bloque modificador
Quiere diseñar una ventana emergente personalizada y las soluciones estándar de la Biblioteca no le sirven. Por ejemplo, desea crear un menú dinámico, un tooltip personalizado que aparezca al hacer clic, una ventana emergente de promoción y muchas otras cosas.
¿Cómo utilizar el bloque modificador T1093?
1
Añade un Bloque Cero a la página y diseña el diseño emergente.
2
Añade el bloque modificador T1093 de la categoría "Otros" a la página.
3
En la pestaña Contenido del bloque T1093, especifique el ID del Bloque Cero del primer paso. Especifique un enlace emergente en la misma pestaña.
4
Piense qué elemento de la página puede utilizarse como disparador para abrir la ventana emergente. Puede ser un botón o texto en cualquier bloque. Para este elemento, especifique el enlace emergente del paso 3.
Si desea que la ventana emergente se abra automáticamente nada más cargar la página, marque la casilla correspondiente en la pestaña Configuración del bloque. En la misma pestaña, puede personalizar el aspecto de la ventana emergente: Alineación, desenfoque del fondo, funciones de animación , , etc.
La configuración del bloque Т1093 "Ventana emergente: Bloqueo cero en pop-up" de la categoría "Otros".
Consejos para aprovechar al máximo el bloque
Al diseñar un menú personalizadoConsidere la siguiente configuración del bloque T1093:
Al diseñar un emergentepuede que quieras comprobar estos ajustes:
- Seleccione el posicionamiento (la opción más habitual es la alineación superior);
- Ocultar o cambiar el color del icono que cierra el menú.
- Si no necesita el color de fondo o el efecto de desenfoque, puede eliminar los valores de estos campos.
Al diseñar un emergentepuede que quieras comprobar estos ajustes:
- Seleccione un color de fondo oscuro en la configuración del bloque T1093;
- Especifique un color claro para el icono de cierre para que no se mezcle con el fondo;
- Ajuste la anchura y la altura de la ventana emergente en los ajustes del Bloque Cero.
Ejemplos de uso del bloque
Consulta algunas guías paso a paso para añadir un menú en la página web utilizando el bloque T1093. También puedes incluir estas plantillas en tu proyecto: Simplemente crea una nueva página y añádela utilizando su ID de plantilla.
Menú a pantalla completa
Cómo recrear la animación
Abra los Ajustes del bloque T1093 y configure los siguientes parámetros:- Aparecer animación - Aparecer por la derecha
- Aparecer animación en móvil - Aparecer desde arriba
- Facilitación de la animación - Quart: Ease In Out
- Aparecer velocidad de animación, segundos - 0.6
Menú a media pantalla con efecto difuminado
Cómo recrear la animación
Abra los Ajustes del bloque T1093 y configure los siguientes parámetros:- Desenfoque de fondo - 10px
- Aparecer animación - Aparecer desde arriba
- Animación easing - Quart: Ease In Out
- Aparecer velocidad de animación, segundos - 0.5
Menú de segundo nivel
Cómo recrear la animación
Abra los Ajustes del bloque T1093 y configure los siguientes parámetros:
Puede importar la plantilla de página con esta animación a su proyecto utilizando el ID de plantilla 39206715. Más información en el Centro de ayuda.
Abra los Ajustes del bloque T1093 y configure los siguientes parámetros:
- Ventana emergente: Color de fondo - #000000
- Ventana emergente: Opacidad de fondo - 40%
- Aparecer animación - Aparecer desde arriba
- Facilitación de la animación - Quart: Ease In Out
- Aparecer velocidad de animación, segundos - 0.6
- Z-index - 9998 (el valor aquí debe ser menor que el del menú principal)
Puede importar la plantilla de página con esta animación a su proyecto utilizando el ID de plantilla 39206715. Más información en el Centro de ayuda.
Ver también
Ya puedes crear y editar elementos vectoriales en el editor Zero Block de Tilda.
Ahora es más fácil utilizar la paleta de colores y elegir el color adecuado para su sitio web más rápido
