Seleccionar

El Seleccionar campo coloca un menú desplegable nativo en el panel de opciones de su widget. Usted define un conjunto fijo de opciones, el usuario elige una y su plantilla reacciona a la elección: una clase de diseño diferente, un bloque de marcado diferente, un valor CSS diferente. Dentro de los complementos maestros Creador de widgets, Select es el caballo de batalla para cualquier cosa con un puñado de variantes con nombre. Estilos de diseño, efectos flotantes, órdenes de clasificación, ese tipo de decisión.

Los valores de las opciones seleccionadas son el combustible natural para Condiciones: otros controles sólo pueden aparecer cuando se elige una opción específica. Los mismos valores funcionan en el Motor de plantilla de sintaxis de ramita con cheques como {% if layout == "card" %}, por lo que un menú desplegable puede cambiar tanto el panel como el marcado.

Un detalle da forma a cada patrón en este documento. El valor que recibe su plantilla es la clave de la opción, un breve fragmento que usted elija, no la etiqueta legible por humanos que ve el usuario. Las claves entran en nombres de clases y comparaciones; las etiquetas permanecen en el panel.

Qué hace el campo Seleccionar #

• Representa un menú desplegable estándar en el panel Elementor, se utilizan los mismos widgets centrales de control de selección nativos.
• Tiene un valor de un conjunto fijo usted define como pares de claves y etiquetas.
• Alimenta su plantilla con la clave seleccionada, listo para clases modificadoras o {% if %} bloques.
• Condiciones de conducción en otros controles, por lo que elegir “Boxed” puede revelar un campo de color de borde que “Minimal” oculta.
• Admite una bandera sensible, permitiendo al usuario elegir una opción diferente por dispositivo.

Si es nuevo en la creación de widgets, comience con 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 de Widget Builder. Nuestro ejemplo es un widget de tabla de precios con un menú desplegable “Estilo de diseño” que ofrece variantes en caja, mínima y delineada.

Cómo agregar un campo Seleccionar #

Abra su widget en el editor Widget Builder y mire el panel de campos a la izquierda. Seleccionar se sienta con los otros campos de elección.

Arrástrelo a una sección debajo del Contenido o Estilo pestaña. Un conmutador de diseño como el nuestro pertenece a Estilo; una opción relacionada con el contenido, como un orden de clasificación, se ajusta al Contenido. Una vez que aterriza, las opciones del campo se abren a la izquierda.

Seleccione las opciones de campo explicadas #

• Etiqueta: el texto que se muestra junto al menú desplegable en Elementor, por ejemplo, “Estilo de diseño”.
• Nombre: el identificador único únicamente para el campo, letras, números y guiones bajos. Su plantilla se refiere a este nombre, por ejemplo layout_style.
• Opciones: las elecciones en sí, cada una una clave más una etiqueta. La clave es lo que recibe tu plantilla; la etiqueta es lo que lee el usuario. Mantenga las claves breves y seguras para CSS: boxed, minimal, outlined.
• Predeterminado: la clave seleccionada cuando el widget aparece por primera vez en una página. Configure su variante más atractiva.
• Responsivo: agrega el ícono del dispositivo para que la selección pueda diferir según el punto de interrupción.
• Descripción, Mostrar etiqueta, Separador: la configuración de visualización estándar, además de las condiciones más abajo para mostrar el campo solo cuando otro control tiene un valor determinado.

Conecte Seleccionar a su plantilla #

El Select imprime su valor con un token simple. Ese valor es siempre el clave, nunca la etiqueta. Dos patrones cubren casi todos los usos.

Clase modificadora. Imprima la clave directamente en un atributo de clase y deje que su pestaña CSS haga el resto:

<div class="pricing layout--{{ layout_style }}">
  ...
</div>

Elegir renderizados “en caja” layout--boxed, y una regla como .layout--boxed { border: 1px solid #e2e2e2; } toma el control. Tres variantes se convierten en tres bloques CSS cortos. El HTML nunca se ramifica.

Marcado condicional. Cuando las variantes necesiten HTML diferente, no solo estilos diferentes, compárelo con la clave:

{% if layout_style == 'boxed' %}
  <div class="pricing-frame"> ... </div>
{% elseif layout_style == 'outlined' %}
  <div class="pricing-outline"> ... </div>
{% else %}
  <div class="pricing-plain"> ... </div>
{% endif %}

Cuidado con una cosa: la comparación debe usar la clave. {% if layout_style == 'boxed' %} funciona, mientras {% if layout_style == 'Boxed Layout' %} silenciosamente nunca coincide y no recibes ninguna advertencia al respecto. Si un condicional se niega a disparar, verifique la ortografía de la clave antes de sospechar algo más.

Utilice el control Seleccionar en Elementor #

Coloque su widget personalizado en una página de Elementor. Si la página ya estaba abierta antes de guardar el widget, vuelva a cargar el editor primero, ya que Elementor mantiene la configuración de control anterior hasta que lo haga. Seleccione el widget y el menú desplegable aparecerá en su panel debajo de la etiqueta que configuró, con la opción predeterminada preseleccionada.

Elija una opción diferente y la vista previa se actualizará inmediatamente. La clase del modificador cambia, su variante CSS se activa y cualquier control condicionado en este campo aparece o desaparece para coincidir.

Casos de uso comunes #

• Variantes de diseño como estilos de tarjetas en caja, minimalistas y delineados desde un widget.
• Pase el cursor y ajustes preestablecidos de animación donde cada clave se asigna a una clase CSS con su propia transición.
• Opciones de ordenación y orden para widgets de estilo lista, los más nuevos primero o alfabéticamente.
• Selectores de etiquetas de rumbo que intercambian un h2 por un h3 mediante un bloque condicional.
• Conductores de condición que muestran u ocultan grupos completos de otros campos según la clave seleccionada.

Consejos para trabajar con el campo Seleccionar #

• Las claves son para código, las etiquetas son para personas. Usa babosas como boxed como claves y guarde la redacción amigable de la etiqueta.
• Mantenga las claves seguras para CSS. Las letras minúsculas, los dígitos y los guiones o guiones bajos se imprimen limpiamente en los nombres de las clases.
• Compárese con la clave, nunca con la etiqueta. Esta es la razón más común por la que un condicional Select nunca coincide.
• Prefiere clases de modificadores a condicionales cuando sólo cambia el estilo. La plantilla permanece en un bloque y las variantes viven en CSS.
• Utilice Seleccionar para conducir Condiciones. Junto con el Switcher, es el control habitual para revelar u ocultar otros campos.
• Establezca un valor predeterminado sensato entonces el widget parece intencional en el momento en que se suelta.

Preguntas frecuentes #

Envolviendo #

El campo Seleccionar creador de widgets convierte las variantes nombradas en una opción con un solo clic. Defina claves y etiquetas, imprima la clave en una clase modificadora o en una {% if %} bloque, y cada decisión de diseño pasa al panel Elementor. Cuando la lista crezca o una selección no sea suficiente, dé un paso al frente Seleccione2 campos. Explora el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.