Condiciones

El Condiciones la opción decide cuándo aparece un control en el panel Elementor de su widget. En lugar de mostrar todos los campos todo el tiempo, puede vincular la visibilidad de un control al valor de otro control: mostrar la URL del botón solo cuando el botón está activado, o revelar un campo de imagen solo cuando el menú desplegable de diseño dice “Con imagen”.

Cada campo de los complementos maestros Creador de widgets lleva esta opción, desde un simple Campo de texto a un grupo de tipografía completo. Configure una vez por control y su panel se quedará corto de forma predeterminada, y aparecerán opciones adicionales solo cuando una elección las haga relevantes. Es el mismo comportamiento que ves en los propios widgets de Elementor.

Qué hace la opción Condiciones #

Una condición es una regla pequeña con tres partes: qué control observar, cómo compararla y con qué valor comparar. Cuando la regla pasa, su control aparece en el panel. Cuando falla, el control permanece oculto.

Cada tarjeta de condición tiene tres configuraciones:

• Nombre de control: el campo cuyo valor quieres ver. Este es un menú desplegable que enumera todos los controles de su widget, agrupados por sección, por lo que elige el destino en lugar de escribir su nombre.
• Igualdad: cómo comparar. Igual muestra el control cuando el campo visto coincide con tu valor. No igual lo muestra cuando el campo contiene algo más.
• Valoarea de control: el valor a comparar, ingresado como texto sin formato, por ejemplo yes, no, o un valor de opción seleccionado como layout-2.

Puede acumular tantas condiciones como necesite con el AGREGAR CONDICIÓN botón. Cuando un control tiene más de una condición, todas deben pasar antes de que aparezca el control. No hay límite en cuanto a cuántos controles pueden ver el mismo campo, por lo que un conmutador puede revelar cinco opciones relacionadas a la vez.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Complementos maestros Pro instalado y activo, ya que el Widget Builder completo es una función profesional. Ver el guía de instalación si estás configurando fresco.
• Un widget personalizado abierto en el editor Widget Builder con al menos dos controles, uno para ver y otro para mostrar u ocultar. ¿Nuevo para el constructor? Leer el Descripción general del creador de widgets primero.

Dónde encontrar la opción Condiciones #

Seleccione cualquier control en el panel de opciones de su widget, en la pestaña Contenido, Estilo o Avanzado. La configuración del campo se abre a la izquierda. Desplácese hacia abajo más allá de las opciones principales como Etiqueta, Nombre y Valor predeterminado, y encontrará Condiciones caja situada justo encima de las clases de control, con un AGREGAR CONDICIÓN botón y la nota “Establecer condiciones para cuando este control debe estar visible”.

El cuadro comienza vacío, lo que significa que el control siempre está visible. Ese es el valor predeterminado para cada campo.

Cómo agregar una condición #

La forma más clara de ver las condiciones en funcionamiento es el patrón de alternancia clásico: un conmutador que enciende y apaga un segundo botón. Nuestro widget de ejemplo tiene una sección de Botones con a Campo conmutador nombrado show_second_button, plus second_button_text y second_button_url campos que sólo deberían aparecer cuando el conmutador está activado.

Paso 1: seleccione el control que desea mostrar u ocultar #

Haga clic en el second_button_text campo en el panel de opciones de su widget. Su configuración se abre a la izquierda. La condición siempre vive en el control que se muestra u oculta, no en el campo que se observa.

Paso 2: haga clic en AGREGAR CONDICIÓN #

Desplácese hasta el cuadro Condiciones y haga clic AGREGAR CONDICIÓN. Aparece una tarjeta de condición con las tres configuraciones: Nombre de control, Igualdad y Valor de control. La X roja en la esquina elimina la tarjeta si cambias de opinión.

Paso 3: elige el control a seguir #

Abre el Nombre de control desplegable. Cada control del widget aparece allí, agrupado bajo el título de su sección, por lo que un widget más grande sigue siendo fácil de navegar. Elegir show_second_button. El menú desplegable se completa previamente con el nombre del campo actual cuando se crea la tarjeta, así que asegúrese de cambiarlo al campo que realmente desea ver.

Paso 4: Establezca el valor de igualdad y control #

Dejar Igualdad en Igual y tipo yes en Valor de control, porque un conmutador almacena yes cuando está encendido y un valor vacío cuando está apagado. La regla terminada dice: muestra este control cuando show_second_button iguales yes.

Paso 5: repite y guarda #

Agregue la misma condición a second_button_url, atunci clic Guardar configuración. Ambos campos ahora siguen juntos el conmutador.

Pruébalo en Elementor #

Agregue su widget a una página en Elementor o recargue el editor si la página ya estaba abierta. Con el conmutador apagado, los controles de texto del segundo botón y URL del segundo botón no están en ninguna parte del panel. La sección parece corta y limpia.

Encienda el conmutador y ambos controles aparecerán justo debajo. Sin recarga de página, sin ahorro en el medio. Elementor verifica las condiciones en vivo a medida que el usuario edita.

¿qué valor debería escribir en Valor de control? #

El campo Valor de control toma el valor almacenado del control observado, que no siempre es la etiqueta que ve en el panel. Casi todos los informes de “mi condición no funciona” se reducen a esta discrepancia, así que esto es lo que realmente almacena cada tipo de campo:

• Switcher: tiendas yes cuando está encendido. Utilice Igual + yes para mostrar un control mientras el interruptor está activado, o No igual + yes para mostrarlo mientras el interruptor está desactivado.
• Select și Select2: guarda la opción valor, no la etiqueta de opción. Si su menú desplegable tiene una opción denominada “Diseño dos” con el valor layout-2, la condición debe usarse layout-2.
• Elige: almacena la clave de la opción elegida, como por ejemplo left, center, sau right.
• Text și Textarea: almacene exactamente lo que escribió el usuario. Las condiciones en los campos de texto libre necesitan una coincidencia exacta, por lo que funcionan mejor para comprobar si un campo es igual a un valor esperado específico.
• Număr: almacena el número en sí, comparado como un valor, así 3 coincide con una entrada de 3.

Los controles de estilo desplegable crean las fuentes de condiciones más confiables porque sus valores provienen de una lista fija. Si está diseñando un widget desde cero, controle sus condiciones desde Switcher, Seleccionar, y elija campos y deje que los campos de texto sean los controles que se muestran u ocultan.

Usando múltiples condiciones #

Hacer clic AGREGAR CONDICIÓN nuevamente para apilar una segunda regla en el mismo control. Cada condición de la lista debe pasar al mismo tiempo para que se muestre el control. Piense en ello como una cadena AND: condición uno Y condición dos Y condición tres.

Un ejemplo práctico: un campo de color de insignia que debería aparecer solo cuando las insignias están habilitadas y el estilo de la insignia está configurado como personalizado. Dos tarjetas lo manejan:

• show_badge Igual yes
• badge_style Igual custom

No hay modo OR entre tarjetas. Si necesita “mostrar cuando A o B”, voltee la lógica con Not Equal siempre que sea posible o reestructure el control de origen para que un valor desplegable cubra el caso.

Las condiciones funcionan en todas las pestañas #

El control observado no tiene que vivir en la misma sección o incluso en la misma pestaña que el control que está ocultando. Un campo de color de pestaña Estilo puede depender de un conmutador de pestaña Contenido sin ninguna configuración adicional. El creador de widgets encuentra el control dondequiera que se encuentre, en Contenido, Estilo o Avanzado, y envía la condición al lugar correcto en el widget generado.

Este es el patrón detrás de paneles como el Campo fronterizo, donde los controles de ancho y color solo aparecen una vez que se elige un tipo de borde. Con Condiciones, sus propios widgets obtienen el mismo comportamiento: opciones de estilo que solo aparecen cuando la función de contenido coincidente está activada.

Casos de uso comunes #

• Elementos opcionales: un conmutador para un segundo botón, insignia o subtítulo que revela sus campos de texto, enlace y estilo solo cuando está habilitado.
• Variantes de diseño: un control Seleccionar para diseño que muestra un campo de imagen para diseños de imagen y lo oculta para los de solo texto.
• Ramificación de estilo: un interruptor de “colores personalizados” que desbloquea un conjunto de selectores de color, manteniendo la pestaña Estilo corta para todos los que usan los valores predeterminados.
• Comportamiento del enlace: Opciones de URL y destino que aparecen solo cuando “Hacer que se pueda hacer clic en esto” está activado.
• Configuraciones avanzadas ocultas: opciones adicionales ocultas detrás de un conmutador “Habilitar opciones avanzadas” para que los usuarios ocasionales nunca pasen por altolas.

Consejos para trabajar con Condiciones #

• Establezca deliberadamente el valor predeterminado del control de origen. Si el conmutador está desactivado de forma predeterminada, todos los controles dependientes comienzan ocultos cuando el widget se cae en una página. Decide qué primera impresión quieres.
• Verifique el valor almacenado, no la etiqueta. Cuando una condición nunca se activa, el culpable habitual es un Valor de control que coincide con la etiqueta de la opción en lugar del valor de la opción.
• Cambie el nombre del campo de origen antes de que le entreguen las condiciones de cableado. Las condiciones hacen referencia al control por su nombre, por lo que cambiar el nombre de un campo después de que varios controles dependen de él significa revisar esas tarjetas de condiciones.
• Imágenes fijas ocultas. Condiciones de visibilidad del panel de control. Si el token del control está impreso en su HTML, el valor guardado aún se representa en el front-end. Empareje la condición con la lógica coincidente en su marcado cuando el elemento en sí debería desaparecer.
• Agrupe campos dependientes en una sección. Cuando un conmutador revela tres campos, mantenerlos juntos justo debajo del conmutador hace que la causa y el efecto sean obvios para quien edite la página.

Preguntas frecuentes #

Envolviendo #

Las condiciones convierten una lista plana de controles en un panel que reacciona a su propia configuración. Elija el control para mirar, elija Igual o No igual, escriba el valor y apile reglas adicionales cuando no sea suficiente. Dado que cada campo del Creador de widgets admite la opción, el mismo patrón cubre botones alternados, imágenes dependientes del diseño y secciones de estilo desbloqueables. Combínalo con el Conmutador y Seleccionar campos para fuentes confiables, explore el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.