Seleccionar

El campo Seleccionar agrega un menú desplegable a un widget personalizado que cree con los complementos maestros Creador de widgets. Estableces una lista fija de opciones, el editor elige una en Elementor y tu plantilla cambia para que coincida: una clase de diseño diferente, una insignia adicional, un bloque de marcado diferente. Es el campo que se puede utilizar para variantes con nombre, como estilos de tarjetas, tipos de insignias u órdenes de clasificación.

Seleccionar es uno de los campos que puede 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 Seleccionar #

• Agrega un menú desplegable estándar al panel de su widget en Elementor.
• Permite al editor elegir una opción de la lista que usted define.
• Guarda las opciones clave (de exemplu outlined), no la etiqueta que ve el editor.
• Imprime esa clave dondequiera que coloques su token, como {{ layout_style }}, para que puedas usarlo como clase o consultarlo {% if %}.

¿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 de plan” con dos campos de selección: layout_style (En caja, Mínimo, Delineado) en la pestaña Estilo y badge (Sin insignia, Más popular, Nuevo) en la pestaña Contenido.

Cómo agregar un campo Seleccionar #

1. Ir a Complementos maestros > Creador de widgets y abre tu widget.
2. Elija la pestaña a la que pertenece la configuración y agregue una sección. Una opción de apariencia como Estilo de diseño se ajusta a Estilo tab, por ejemplo en una sección “Estilo de tarjeta”.
3. Tipo select en el cuadro de búsqueda de campo de la izquierda. Surgen dos campos: Seleccionar y Seleccionar2.
4. Arrastrar Seleccionar en la sección. Haga clic en el lápiz en el campo para abrir su configuración.

Seleccionar tiene una opción de una lista corta. Si los editores necesitan buscar en una lista larga o elegir más de una opción, utilícela Seleccione2 en cambio, que es un campo profesional.

Seleccione las opciones de campo explicadas #

• Etiqueta: el texto al lado del menú desplegable en Elementor, por ejemplo “Estilo de diseño”.
• Nombre: el ID único del campo y el nombre de su token. Utilice únicamente letras, números y guiones bajos, por ejemplo layout_style.
• Descripción: una pista que se muestra en el menú desplegable en Elementor.
• Opciones: una fila por elección. El cuadro de la izquierda es el clave su plantilla recibe y el cuadro correcto es etiqueta los editores ven. Utilice la cruz roja para eliminar una fila y el botón más para agregar una.
• Valoarea implicită: la opción comienza con una nueva copia del widget. El menú desplegable muestra etiquetas, pero el campo guarda la clave.

Un nuevo campo Seleccionar viene con tres filas de muestra value-1 a value-3 con las etiquetas Opción 1 a Opción 3. Reemplácelas con sus propias claves y etiquetas antes de usar el widget.

Mantenga las teclas cortas, minúsculas y sin espacios, como por ejemplo boxed o most_popular. Terminan en nombres de clases y comparaciones. Si deja vacío el valor predeterminado, el widget comienza en la primera opción de la lista.

En Configuración común lo encontrarás Mostrar etiqueta, Bloque de etiquetas, Separador y Condiciones, que funcionan igual que en otros campos.

Utilice la elección en su plantilla #

El HTML de la Tarjeta de Plan utiliza ambos campos Seleccionar de las dos formas más comunes:

<div class="plan plan--{{ layout_style }}">
  {% if badge == 'popular' %}
  <span class="plan-badge">Most Popular</span>
  {% elseif badge == 'new' %}
  <span class="plan-badge plan-badge--new">New</span>
  {% endif %}
  <p class="plan-name">{{ plan_name }}</p>
  <p class="plan-price">{{ plan_price }}<span>/month</span></p>
  <a class="plan-button" href="#">Get started</a>
</div>

Clases modificadoras #

plan--{{ layout_style }} se convierte plan--boxed, plan--minimal o plan--outlined. Cada variante es entonces una regla breve en el panel CSS y el HTML sigue siendo el mismo:

.plan--boxed { background: #fff; box-shadow: 0 12px 32px rgba(29, 27, 76, .14); }
.plan--minimal { background: transparent; }
.plan--outlined { background: #fff; border: 2px solid #7c3aed; }

Marcado diferente por opción #

Cuando una opción necesite HTML diferente, compare la clave con {% if %}. {% elseif %} y {% else %} trabajar también. En el ejemplo, none no coincide con ninguno de los cheques, por lo que no se imprime ninguna insignia.

Compare siempre con la clave. {% if badge == 'popular' %} partidos, mientras {% if badge == 'Most Popular' %} nunca lo hace ni da ningún error. Si una verificación nunca se activa, primero mire la ortografía de la clave.

Selector y Control Responsivo #

• Selector siempre escribe color: {{VALUE}}; para este campo, no hay ningún cuadro para cambiar la propiedad. Con claves como boxed la regla no hace nada. Sólo ayuda cuando tus claves son colores: en nuestras pruebas, claves como #7c3aed y #0ea5e9 con un Selector de .plan-price coloreó el precio. Para cualquier otra cosa, deje el Selector vacío y use clases.
• Control responsivo permite a los editores elegir una opción diferente por dispositivo. Esas selecciones por dispositivo solo llegan a la página a través de la regla del Selector anterior. El token imprime la opción de escritorio, así que deje Responsive Control desactivado cuando use el valor en su plantilla.

Utilice el control Seleccionar 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. El menú desplegable muestra sus etiquetas, con la opción predeterminada ya seleccionada. Elija otra opción y las actualizaciones de vista previa.

Aquí está la misma tarjeta de plan con tres combinaciones de estilo de diseño e insignia:

Casos de uso comunes #

• Variantes de estilo de tarjeta, botón o sección.
• Insignias o cintas como Venta, Nuevas o Más Populares.
• Opciones de etiqueta de encabezado, relación de imagen o recuento de columnas.
• Orden de clasificación o fuente de datos para un widget de lista.

Consejos para trabajar con el campo Seleccionar #

• Decida las claves antes de que los editores utilicen el widget. Puede cambiar el nombre de las etiquetas más tarde, pero al cambiar una clave se rompen páginas que ya guardaban la anterior.
• Agregue una opción “ninguna” cuando el elemento es opcional, como la insignia del ejemplo.
• Establezca un valor predeterminado se ve bien por sí solo, por lo que un widget recién agregado está listo para usar.
• ¿Solo dos o tres opciones con íconos claros? El Elija campo los muestra como botones en lugar de un menú desplegable.
• ¿Solo encendido o apagado? Utilice el Campo conmutador.

Preguntas frecuentes #

Envolviendo #

Agregue un campo Seleccionar, reemplace las filas de muestra con teclas cortas y etiquetas claras y establezca un valor predeterminado. Luego imprima la clave como clase para variantes de estilo o compruébela con {% if %} cuando cambia el marcado. Para opciones múltiples o con capacidad de búsqueda, consulte Seleccione2și verifică precios por lo que incluye cada plan.