Alternar Popover

El campo Alternar de Popover agrupa algunas configuraciones relacionadas detrás de un control de encendido/apagado en un widget personalizado creado con los complementos maestros Creador de widgets. En Elementor se muestra como una sola fila con un icono de lápiz. Al hacer clic en el lápiz se activa la opción y se abre una pequeña ventana emergente con la configuración en el interior. Evita que los extras opcionales, como una superposición o una insignia, llenen el panel.

Popover Toggle es un campo profesional. El complemento gratuito incluye un generador de widgets limitado y viene con el conjunto completo de campos Complementos maestros Pro.

Qué hace el campo Popover Toggle #

• Agrega una fila al panel de su widget: su etiqueta, un ícono de lápiz y, una vez encendido, una flecha de reinicio.
• El lápiz activa la opción y abre una ventana emergente con los campos que definiste.
• El interruptor se almacena solo yes cuando está encendido y nada cuando está apagado, para que tu plantilla pueda comprobarlo {% if %}.
• Cada campo dentro del popover obtiene su propio token, creado a partir del nombre del interruptor y el nombre del campo unido por un guión bajo.

Si aún no ha creado un widget, lea el Descripción general del creador de widgets primero.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Master Addons para Elementor y Master Addons Pro, ambos activos. El guía de instalación configuración de cubiertas.
• Un widget abierto en Widget Builder. El ejemplo de esta guía es un widget “Image Banner” con una superposición opcional: un Popover Toggle llamado overlay con dos campos adentro, color y strength.

Cómo agregar un campo de alternancia Popover #

1. Ir a Complementos maestros > Creador de widgets y abre tu widget.
2. Haga clic en el Estilo tabule y agregue una sección, por ejemplo “Sobrecaída”.
3. Tipo popover en el cuadro de búsqueda de campo de la izquierda.
4. Arrastrar Alternar Popover en la sección. Su configuración se abre en la barra lateral izquierda.

Se explican las opciones de campo de alternancia de Popover #

• Etiqueta es el texto al lado del lápiz en Elementor, por ejemplo “Overlay”.
• Nombre es el ID único del campo y el inicio de cada token que crea, así que manténgase breve, por ejemplo overlay. Sólo letras, números y guiones bajos.
• Descripción es una nota para ti dentro del constructor.
• Etiqueta activada y Etiqueta desactivada se guardan con el campo, pero Elementor muestra este control como un ícono de lápiz, por lo que estas palabras no aparecen en el panel.
• Campos emergentes enumera los campos dentro de la ventana emergente. Cada fila tiene un Nombre, a Etiqueta y a Tipo. Clic Agregar campo para otra fila, el ícono de copia para duplicar una o la cruz roja para eliminarla.
• Valor predeterminado establece si una nueva copia del widget comienza con la opción activada (Sí) o desactivada (No).

El menú Tipo ofrece Texto, Número, Área de texto, WYSIWYG, Código, Oculto, Conmutador, Color, Fuente, Tipografía, Fecha y hora, URL, Medios, Galería, Iconos, Control deslizante, Dimensiones y Fondo. Las filas solo tienen un nombre, etiqueta y tipo, por lo que no hay ningún lugar donde establecer un valor predeterminado o un rango para un campo dentro de la ventana emergente. Un campo deslizante aquí utiliza el rango estándar de Elementor, de 0 a 1000 para px.

Los entornos comunes funcionan más abajo que en otros campos.

Lea el interruptor y sus campos en su plantilla #

Dos reglas cubren todo lo que te brinda este campo:

• El propio nombre del interruptor imprime yes cuando está encendido y nada cuando está apagado. Úselo adentro {% if overlay %}.
• Un campo dentro de la ventana emergente se lee como el nombre del interruptor, un guión bajo y luego el nombre del campo. El color el campo se convierte {{ overlay_color }}, y el strength el control deslizante se convierte {{ overlay_strength.size }}.

<div class="img-banner">
  {% if overlay %}
    <div class="img-banner__overlay" style="background: {{ overlay_color }}; opacity: {{ overlay_strength.size }}%;"></div>
  {% endif %}
  ...
</div>

Los puntos no funcionan para los campos dentro de la ventana emergente. En nuestras pruebas {{ overlay.color }} no imprimió nada, mientras {{ overlay_color }} imprime el color. Los campos también mantienen sus valores cuando la palanca está apagada, así que envuélvalos siempre {% if overlay %}.

Hacer clic Guardar configuración cuando hayas terminado.

Utilice el interruptor Popover en Elementor #

Agregue el widget a una página o recargue el editor si la página ya estaba abierta. Seleccione el widget y abra la pestaña donde colocó el campo. Se muestra como su etiqueta con un ícono de lápiz.

Haga clic en el lápiz. La opción se activa y la ventana emergente se abre con sus campos. Configure ellos y el widget se actualizará de inmediato. Haga clic fuera de la ventana emergente para cerrarla. Para desactivar la opción nuevamente, haga clic en la flecha de reinicio circular al lado del lápiz.

Casos de uso comunes #

• Una superposición de color opcional en banners de imágenes y vídeos.
• Una insignia o cinta opcional con texto y color propios.
• Efectos adicionales que la mayoría de los editores nunca necesitan ver.
• Opciones avanzadas de espaciado o borde mantenidas fuera del panel principal.

Consejos para trabajar con el campo Popover Toggle #

• Mantenga el nombre del interruptor breve. Cada campo dentro comienza con ese nombre.
• Siempre verifique el interruptor con {% if %} antes de usar sus campos, porque los valores permanecen guardados cuando está apagado.
• Utilice dos o tres campos relacionados por ventana emergente. Más que eso es más fácil de encontrar en una sección normal.
• Establezca estilos predeterminados en la pestaña CSS. Los campos dentro de la ventana emergente no tienen valores predeterminados propios.
• Para un encendido/apagado simple sin configuración interna, use Campo conmutador.

Preguntas frecuentes #

Envolviendo #

Agregue el interruptor Popover, enumere sus campos, verifique {% if toggle_name %} en su plantilla y lea cada campo como {{ toggle_name_field_name }}. Los editores obtienen un panel ordenado y las configuraciones adicionales solo aparecen cuando activan la opción. Para agrupar configuraciones en pestañas, consulte Campo de pestañasși verifică precios por lo que incluye cada plan.