Conmutador

El campo Switcher agrega un interruptor de encendido/apagado a un widget personalizado que crea con los complementos maestros Creador de widgets. Es la forma estándar de hacer opcional parte de un widget: una insignia, un icono, un diseño compacto. Los editores activan el interruptor en Elementor y su plantilla reacciona.

Switcher es uno de los campos que puedes usar en el Widget Builder de la versión gratuita. El complemento gratuito incluye un Widget Builder limitado y viene con el conjunto completo de campos Complementos maestros Pro.

Qué hace el campo Switcher #

• Agrega el interruptor de encendido/apagado de Elementor al panel de su widget.
• Guarda el Valor de devolución (yes de forma predeterminada) cuando está activado y un valor vacío cuando está desactivado.
• Trabaja con {% if %} en su plantilla, el marcado aparece solo cuando el interruptor está activado.
• Puede ocultar y mostrar otros campos en el panel a través de Condiciones, lo que mantiene el panel corto hasta que se utilice una opción.

¿Nuevo para el constructor? Leer el Descripción general del creador de widgets primero, luego regresa con un widget abierto.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Complementos maestros para Elementor instalados y 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 de “Tarjeta promocional” con dos conmutadores: show_badge, que revela una cinta y un campo de texto de insignia, y compact_mode, que aprieta la carta.

Cómo agregar un campo Switcher #

1. Ir a Complementos maestros > Creador de widgets y abre tu widget.
2. Agregue una sección en la pestaña a la que pertenece la opción. Una opción de contenido como Mostrar insignia se ajusta a Contenido pestaña.
3. Tipo switch en el cuadro de búsqueda de campo de la izquierda.
4. Arrastrar Conmutador en la sección. Haga clic en el lápiz en el campo para abrir su configuración.

Se explican las opciones de campo del conmutador #

• Etiqueta: el texto al lado del interruptor en Elementor, por ejemplo “Mostrar insignia”.
• Nombre: el ID único del campo y el nombre de su token. Utilice únicamente letras, números y guiones bajos, por ejemplo show_badge.
• Descripción: una pista que se muestra debajo del interruptor en Elementor.
• Etiqueta activada y Etiqueta desactivada: las palabras cortas dentro del interruptor. Elementor muestra Etiqueta activada mientras el interruptor está activado y Etiqueta desactivada mientras está desactivado, por lo que “Compacto” y “Normal” se leen mejor que Sí y No para una opción de diseño.
• Valor de devolución: el valor que tiene el campo mientras está encendido. Déjalo en yes a menos que algo en su código necesite una cadena diferente.
• Valoarea implicită: un menú desplegable con Sí y No. Sí significa que un widget recién agregado comienza con el interruptor activado.

Dos cosas que vale la pena saber sobre este panel. El texto de ayuda en Etiqueta activada y Etiqueta desactivada se intercambia, y la línea Etiqueta desactivada comienza con una T extra perdida. Ambas etiquetas aún funcionan como cabría esperar: Etiqueta activada es la palabra que se muestra mientras el interruptor está activado.

Mantenga el valor de retorno y el valor predeterminado en el paso #

El menú desplegable Valor predeterminado siempre se guarda yes por sí, cualquier cosa que haya escrito en Valor de retorno. Esa combinación falla. En nuestras pruebas, un campo con Valor de retorno enabled y el valor predeterminado Sí salió así:

• El interruptor en Elementor se mostró como desactivado.
• El valor guardado estaba quieto yes, entonces {% if %} trató el campo como encendido y el marcado renderizado.
• El panel y la página solo volvieron a estar de acuerdo después de que un editor hizo clic en el interruptor una vez, lo que estableció el valor en enabled.

Por lo tanto, cambie el valor de retorno solo cuando también planee iniciar el campo (valor predeterminado establecido en No). Para todo lo demás, deje el valor de retorno en yes.

Utilice el interruptor en su plantilla #

Un conmutador está vacío cuando está apagado y un valor vacío es falso en el motor de plantillas {% if %} es todo lo que necesitas. La tarjeta promocional HTML utiliza un conmutador para marcar y otro para una clase:

<div class="promo{% if compact_mode %} promo--compact{% endif %}">
  {% if show_badge %}
  <span class="promo-badge">{{ badge_text }}</span>
  {% endif %}
  <p class="promo-title">{{ promo_title }}</p>
  <p class="promo-text">{{ promo_text }}</p>
  <a class="promo-button" href="#">Claim the offer</a>
</div>

Sin la insignia, el conjunto span ha desaparecido de la página, no sólo está oculto. La clase compacta cambia algunas reglas en el panel CSS:

.promo--compact { padding: 18px 22px; }
.promo--compact .promo-title { font-size: 20px; }
.promo--compact .promo-text { display: none; }

También puedes comparar el valor, como en {% if show_badge == 'yes' %}, pero compárelo con el valor de retorno, no con el texto Etiqueta en el texto. {% if show_badge == 'Yes' %} nunca coincide. La llanura {% if show_badge %} la forma evita el problema.

Deja el Selector cuadro vacío para este campo. Un valor de alternancia no es un valor CSS, por lo que el estilo pertenece al panel CSS detrás de una clase como la anterior.

Oculte otros campos hasta que la palanca esté activada #

Esta es la segunda mitad de para qué sirve un Switcher. En el campo que deseas ocultar, abre su configuración, desplázate hasta Condiciones y haga clic Agregar condición. Para el campo Texto de insignia:

• Nombre de control: show_badge, el nombre del Switcher.
• Igualdad: Igual.
• Valoarea de control: yes, el valor de retorno del conmutador.

El texto de la insignia ahora aparece solo en Elementor mientras Mostrar insignia está activado. Ver Condiciones para los demás operadores.

Utilice el control Switcher en Elementor #

Agregue el widget a una página o recargue el editor si la página ya estaba abierta. El interruptor se encuentra debajo de su etiqueta con su palabra Etiqueta activada o Etiqueta desactivada dentro de ella. Haga clic en él y la vista previa se actualiza de inmediato, y cualquier campo con una condición aparece o desaparece al mismo tiempo.

Aquí está la tarjeta terminada en la parte frontal con la insignia encendida, con el modo compacto encendido también y con ambos interruptores apagados:

Casos de uso comunes #

• Insignias, cintas e iconos opcionales.
• Una variante de diseño compacto o denso.
• Mostrar u ocultar un botón secundario, una nota al pie de página o un divisor.
• Un interruptor maestro que revela un grupo de campos relacionados en el panel.

Consejos para trabajar con el campo Switcher #

• Deje el valor de retorno en yes. Mantiene el interruptor, el valor predeterminado y sus condiciones en sintonía.
• Nombra el campo según lo que muestra, como por ejemplo show_badge o compact_mode. El nombre se lee como una pregunta en {% if %}.
• Escriba Etiqueta activada y Etiqueta desactivada para la opción, no sólo Sí y No, cuando los dos estados tienen nombres.
• Combínalo con las condiciones entonces, los campos que necesita una opción solo aparecen cuando está activada.
• ¿Más de dos estados? Utilice el Seleccionar campo para un menú desplegable o el Elija campo para botones de iconos.

Preguntas frecuentes #

Envolviendo #

Agregue un conmutador, asígnele un nombre y etiquetas claros, deje el valor de retorno en yesy envuelva la parte opcional de su marcado {% if %}. Agregue una condición a los campos que necesita la opción y el panel se quedará corto hasta que un editor la encienda. Para tres o más estados, consulte el Seleccionar y Elegir campos y comprobar precios por lo que incluye cada plan.