Kadence Tutorial: Modal Popup Block Guía del usuario

Kadence Bloques Pro El plug-in proporciona Modal Bloques emergentes que pueden utilizarse para añadir a una página áreas de contenido emergente activadas por clic. Ya se trate de mostrar una notificación, rellenar rápidamenteformulario (documento)Tanto si se trata de dirigir a los usuarios a contenidos específicos, este módulo tiene una gran utilidad.

En este artículo, presentaremos la configuración básica del bloque Modal, incluidos los enlaces emergentes, la edición del contenido, la personalización del estilo y los métodos de activación personalizados y otros procedimientos operativos.

Añadir bloques modales

Abra el editor, haga clic en Añadir bloque y, en la lista de bloques, seleccione el bloque Modaly lo inserta en la página. Tras la inserción, aparecerá automáticamente un texto de enlace y un área de contenido emergente.

Establecer el texto del enlace

Seleccione el bloque e introduzca el texto del enlace que activa la ventana emergente en el campo de configuración de la derecha, por ejemplo "Ver más" o "Abrir".ventana emergente". Este texto aparecerá en la página como punto de entrada para que el usuario haga clic en él.

Editar contenido emergente

Se puede insertar cualquier bloque dentro de la ventana emergente, como texto, imágenes, botones, formularios, etc., con total compatibilidad con las funciones flexibles deapertura (jerga ajedrecística). Igual que la edición de un bloque de contenido normal, con ajustes de estilo, tipografía y estructura.

Estilos de enlace personalizados

Los parámetros de apariencia como fuentes, colores, bordes, fondos, etc. de los enlaces activados pueden ajustarse para que sean coherentes con el estilo general de la página.

Configuración de la máscara de fondo

Cuando se abre la ventana emergente, aparece en la página una máscara de fondo semitransparente. Puedes elegir el color y la transparencia de la máscara para resaltar el contenido de la ventana emergente mientras mantienes la página con un fondo claro.

Ajustar la animación y la posición

Puedes elegir la animación de apertura y cierre de la ventana emergente en la barra de ajustes, como fundido de entrada, deslizamiento, zoom, etc. También puedes especificar dónde debe aparecer la ventana emergente en la página, como arriba, en medio, abajo, a la izquierda o a la derecha.

Definir el tamaño de la ventana emergente

La anchura y la altura de la ventana emergente pueden ajustarse a voluntad para adaptarse a distintos tipos de visualización de contenidos. Puede establecerse como un porcentaje o como un valor específico de píxel.

Ajustar el estilo del botón de cierre

El botón de cierre de la esquina superior derecha admite ajustes de estilo, como el tamaño del icono, el color, la posición, etc. Un botón de cierre bien diseñado ayuda a mantener la página simple y fácil de usar.

Configurar el aspecto de la ventana emergente

Puede añadir colores de fondo, bordes, esquinas redondeadas y sombras a las ventanas emergentes para realzar la jerarquía del contenido. Un diseño adecuado puede hacer que el contenido emergente destaque más y mantener la página coordinada.

Ajuste el estilo y guárdelo en la vista frontal

Uso de enlaces de activación personalizados

Los bloques modales admiten botones creados manualmente para activar ventanas emergentes, además de enlaces incorporados, adecuados para personalizar la estructura del diseño en lugares específicos.

El procedimiento es el siguiente:

• Desactivar el interruptor de enlace por defecto en Configuración modal

• Establezca un identificador de apertura para la ventana emergente, por ejemplo customid
• Insertar un botón avanzado en cualquier lugar de la página
• Establezca el enlace del botón en #customid
• Añadir un nombre de clase a un botón modal-trigger

Una vez configurado, al hacer clic en el botón se abrirá una ventana emergente que facilitará la combinación libre de contenidos y la optimización de la estructura de la página.

resúmenes

Los bloques emergentes modales son Kadence Bloques Pro Es una herramienta muy útil para mostrar contenidos. La ventana emergente está claramente estructurada y admite una gran variedad detipográficoAjuste de forma y estilo, con un mecanismo de activación flexible, adecuado para una gran variedad de escenarios de páginas web.