Alternar Popover

El Campo de alternancia Popover es un interruptor que abre una pequeña ventana emergente de controles secundarios cuando está activado. Elementor utiliza el mismo patrón para sus propios grupos de funciones opcionales y dentro de los complementos maestros Creador de widgets hace el mismo trabajo para sus widgets personalizados: un conjunto de configuraciones relacionadas permanece oculto detrás de un interruptor en lugar de llenar el panel con una sección adicional completa.

El interruptor Popover es compatible Condiciones como cada control, y cada campo dentro del popover tiene su propio token combinado {{ toggle_field }}, renderizado por el Motor de plantilla de sintaxis de ramita. Ambas guías cubren la configuración y las limitaciones.

A diferencia de un campo de valor simple, el interruptor Popover es estructural. Mantiene el estado de encendido/apagado en sí y transporta campos secundarios cuyos valores llegan a su plantilla con nombres compuestos. Ambas mitades de ese modelo se tratan a continuación con un ejemplo de superposición funcional.

Qué hace el campo Popover Toggle #

• Realiza un cambio en el panel del widget con tus etiquetas de encendido y apagado.
• Abre una ventana emergente de controles infantiles cuando está encendido, definido en la lista de campos emergentes del campo.
• Acepta la mayoría de los tipos de campos de valor cuando son niños, como campos de color, texto, selección y control deslizante.
• Expone el estado de alternancia a su plantilla como valor verdadero cuando está activado y una cadena vacía cuando está desactivado.
• Expone el valor de cada niño bajo un nombre compuesto que une los nombres de padres e hijos con un guión bajo.

Si la construcción de widgets es un territorio nuevo, lea el Descripción general del creador de widgets primero.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
• Un widget personalizado abierto en el editor Widget Builder. Nuestro ejemplo es un widget de banner de imagen con una superposición de colores opcional: un interruptor llamado overlay, un niño de color nombrado color.

Cómo agregar un campo de alternancia Popover #

En el editor Widget Builder, desplácese por el panel de campos de la izquierda hasta encontrar el archivo Alternar Popover campo, listado con los otros campos estructurales como Tabs y Repeater.

Arrástrelo a una sección debajo del Contenido o Estilo pestaña, dondequiera que pertenezcan las configuraciones opcionales. Una vez que aterriza, las opciones del campo se abren a la izquierda y el trabajo principal es definir los campos secundarios que mantendrá el popover.

Se explican las opciones de campo de alternancia de Popover #

• Etiqueta: el texto al lado del interruptor en Elementor, por ejemplo “Sobrecaída”.
• Nombre: el identificador único para alternar, letras, números y guiones bajos únicamente, por ejemplo overlay. Los nombres de los niños se basan en él, así que sea breve.
• Etiqueta activada / Etiqueta desactivada: los dos estados que se muestran en el interruptor, como “Sí” y “No”.
• Valor de devolución: el valor almacenado mientras el interruptor está activado, “sí” de forma predeterminada. Off almacena una cadena vacía.
• Campos emergentes: el niño controla dentro de la ventana emergente. Se permiten la mayoría de los tipos de campos de valor; nuestro ejemplo contiene un único campo de color llamado color.
• Descripción, Mostrar etiqueta, separador y condiciones cubren las opciones de visualización habituales.

Lea el interruptor y sus hijos en su plantilla #

Dos reglas de denominación cubren todo lo que produce este campo.

El interruptor en sí está disponible con su propio nombre. Imprime el valor de retorno cuando está activado y una cadena vacía cuando está desactivado, lo que lo convierte en una condición natural:

{% if overlay %} ... {% endif %}

Tenga en cuenta que el valor almacenado es la cadena Valor de retorno, “sí” de forma predeterminada, no booleana. Pruebe la veracidad como lo hace el ejemplo; comparar el campo con verdadero nunca coincide.

Cada niño está disponible como nombre de padre y nombre de hijo unidos con un guión bajo. El color hijo del overlay popover se convierte overlay_color. En conjunto, la capa superpuesta del banner se ve así en el panel HTML:

<div class="banner-media">
  <img src="{{ banner_image }}" alt="">
  {% if overlay %}
  <div class="banner-overlay" style="background: {{ overlay_color }}"></div>
  {% endif %}
</div>

Desactivar, no hay representaciones div superpuestas. Alternar, el div aparece con cualquier color que elija el editor. Agregue más hijos y cada uno siga el mismo patrón: un niño llamado opacity leería como {{ overlay_opacity }}.

Cuidado: aquí no hay notación de puntos. {{ overlay.color }} se resuelve en nada, porque los niños se aplanan para subrayar nombres unidos, no anidados debajo del padre. Si un valor secundario sale vacío, verifique primero el nombre compuesto.

Utilice el interruptor Popover en Elementor #

Agregue el widget a una página en Elementor o recargue el editor si la página ya estaba abierta. El control aparece como un interruptor etiquetado.

Enciéndalo y la ventana emergente se abre con los controles secundarios. En el ejemplo del banner, el editor elige un color de superposición, la capa se desvanece sobre la imagen en la vista previa y al desactivar el interruptor se elimina nuevamente sin perder el color elegido.

Casos de uso comunes #

• Superposiciones de imágenes y vídeos, con niños de color y opacidad detrás de un interruptor.
• Insignias opcionales en tarjetas, donde el interruptor muestra la insignia y los niños establecen su texto y estilo.
• Configuración del efecto flotante eso sólo importa cuando el efecto está habilitado.
• Opciones de cuenta regresiva o programación en pancartas que a veces tienen un tiempo limitado.
• Botones secundarios, manteniendo el texto, el enlace y el estilo del segundo botón fuera de la vista hasta que sea necesario.

Consejos para trabajar con el campo Popover Toggle #

• Envuelva el marcado dependiente en {% if parent %}. El punto principal del cambio es que los niños sólo importan cuando están encendidos; la plantilla debería reflejar eso.
• Redacte nombres de niños con un guión bajo. Padre overlay más niño color es {{ overlay_color }}, nunca {{ overlay.color }}.
• Mantenga los nombres de los padres cortos. Cada token secundario repite el nombre del padre y {{ overlay_color }} lee mejor que {{ banner_image_overlay_settings_color }}.
• Úselo para clústeres genuinamente opcionales. Las configuraciones que el widget siempre necesita pertenecen al panel abierto; la ventana emergente es para las funciones a veces.
• Dar a los niños incumplimientos sensatos. En el momento en que se activa el interruptor, la función debe parecer intencional en lugar de sin estilo.

Preguntas frecuentes #

Envolviendo #

El campo Widget Builder Popover Toggle mantiene honesto el panel de un widget: los controles diarios permanecen visibles y el clúster opcional espera detrás de un interruptor. Cámbielo con {% if parent %} alrededor de los tokens de marcado y subrayado unidos para los niños, la función se activa y desactiva limpiamente. Para conocer los otros patrones estructurales, consulte el Campo repetidor, que maneja listas de la misma manera que este campo maneja las opciones. Explora el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.