Seleccione2

El campo Select2 agrega un menú desplegable con capacidad de búsqueda a un widget personalizado creado con los complementos maestros Creador de widgets. Los editores escriben para filtrar la lista y, con Show Multiple activado, pueden elegir varias opciones a la vez. Úselo para listas de opciones largas o para opciones de estilo etiqueta donde una respuesta no es suficiente.

Select2 es un campo profesional. El complemento gratuito incluye un Widget Builder limitado y viene con el conjunto completo de campos Complementos maestros Pro.

Qué hace el campo Select2 #

• Agrega un menú desplegable con un cuadro de búsqueda al panel de su widget en Elementor.
• Con Show Multiple desactivado, el editor elige una opción y su plantilla obtiene la clave de esa opción.
• Con Show Multiple activado, el editor elige cualquier cantidad de opciones, que se muestran como etiquetas extraíbles, y su plantilla obtiene una lista de claves que imprime con a {% for %} bucle.
• Cada opción tiene una clave y una etiqueta. Los editores ven las etiquetas y su HTML siempre recibe las claves.

Si aún no ha creado un widget, lea el Descripción general del creador de widgets primero. Para una lista corta de opción única sin búsqueda, la simple Seleccionar campo es más sencillo.

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 de “Tarjeta de cartera” con un campo Texto para el título del proyecto y dos campos Select2: Tipo de proyecto (una opción) y Etiquetas de proyecto (varias opciones).

Cómo agregar un campo Select2 #

1. Ir a Complementos maestros > Creador de widgets y abre tu widget.
2. En el Contenido tab, agrega una sección si aún no la hay.
3. Tipo select en el cuadro de búsqueda de campo de la izquierda. Aparecen Select y Select2.
4. Arrastrar Seleccione2 en la sección. Su configuración se abre en la barra lateral izquierda.

Un nuevo campo Select2 comienza con Mostrar múltiple activado y tres opciones de muestra (value-1 a value-3). Reemplácelos con los suyos antes de escribir la plantilla.

Se explican las opciones de campo Select2 #

Aquí está el campo Tipo de proyecto, configurado para una única opción:

• Etiqueta es el texto al lado del control en Elementor, por ejemplo “Tipo de proyecto”.
• Nombre es el ID único del campo (solo letras, números y guiones bajos). También es el token que usas en la plantilla project_type se convierte {{project_type}}.
• Descripción aparece bajo el control en Elementor. Úselo para obtener una breve pista como “Elija una categoría”
• ¿mostrar múltiples? cambia entre una selección (No) y muchas selecciones (Sí). Esto cambia lo que recibe su plantilla, así que decida antes de escribir el HTML.
• Opciones es la lista de opciones. El cuadro de la izquierda es la clave que obtiene su plantilla (branding, web). El cuadro correcto son los editores de etiquetas que ven (Marca, Diseño web). Utilice el icono más para agregar una fila y la cruz roja para eliminar una.
• Valor predeterminado es lo que se selecciona cuando el widget se agrega por primera vez a una página. En modo único es un menú desplegable normal. Si lo dejas vacío, se selecciona la primera opción.

Project Tags utiliza las mismas opciones con Mostrar múltiples activado. El cuadro Valor predeterminado se convierte en un selector de etiquetas, por lo que puede preseleccionar más de una opción. Déjalo vacío y la primera opción estará preseleccionada.

Si la lista de valores predeterminados aún muestra las opciones de muestra anteriores después de editar las Opciones, haga clic Guardar configuración y abre el campo nuevamente.

Debajo del valor predeterminado encontrará las configuraciones comunes compartidas por la mayoría de los campos: Mostrar etiqueta, Bloque de etiquetas, Control responsivo, Soporte dinámico, Frontend disponible, Separador, Condiciones y clases de control. Vale la pena activar el bloque de etiquetas para un campo múltiple, ya que el control obtiene el ancho completo del panel para sus etiquetas.

Utilice valores Select2 en su plantilla #

La forma de imprimir el valor depende de Mostrar múltiple.

Modo único: imprime la clave #

Un solo Select2 funciona como cualquier otro token. {{project_type}} imprime la clave seleccionada, para que puedas usarla como texto o crear una clase CSS a partir de ella:

<article class="portfolio-card type-{{project_type}}">
  <span class="card-type">{{project_type}}</span>

Con Branding seleccionado, eso representa type-branding y branding. También puedes compararlo: {% if project_type == 'web' %}...{% endif %}.

Modo múltiple: recorre las teclas #

Un Select2 múltiple contiene una lista y {{project_tags}} por sí solo no imprime nada. En su lugar, colóquelo:

<ul class="card-tags">
  {% for tag in project_tags %}
    <li class="card-tag">{{ tag }}</li>
  {% endfor %}
</ul>

El bucle se ejecuta una vez para cada opción elegida, en el orden en que el editor las eligió. Dentro de él, {{ tag }} es una clave y filtros como {{ tag|upper }} trabajar también. El Guía de sintaxis de ramita enumera todo lo que admite el motor de plantillas.

El panel Documentación al lado del editor de código enumera un token para cada campo. Copiando {{project_tags}} a partir de ahí está bien para campos individuales, pero un campo múltiple aún necesita el bucle.

Hacer clic Guardar configuración cuando la plantilla esté terminada.

Utilice el control Select2 en Elementor #

Agregue el widget a una página o recargue el editor si la página ya estaba abierta. Ambos controles Select2 aparecen en la pestaña Contenido con sus valores predeterminados ya seleccionados.

En el control múltiple, haga clic en el botón más o en el espacio vacío después de las etiquetas y comience a escribir. La lista se reduce a medida que escribe y Enter agrega la opción resaltada. Cada etiqueta tiene una pequeña cruz que la elimina.

El control único abre un menú desplegable con su propio cuadro de búsqueda. Elija una opción o use la cruz junto al valor actual para borrarla.

El lienzo se actualiza de inmediato. Observe que el panel muestra etiquetas (Diseño web, Redes sociales) mientras la tarjeta imprime las claves (web, social):

Si necesita el texto de la etiqueta en la página, haga que la clave sea lo suficientemente legible para mostrarla o asignela en la plantilla:

{% for tag in project_tags %}
  <li class="card-tag">{% if tag == 'social' %}Social Media{% else %}{{ tag }}{% endif %}</li>
{% endfor %}

Casos de uso comunes #

• Etiquetas o servicios en carteras, estudios de casos y tarjetas de equipo.
• Un selector de categoría o estilo que agrega una clase CSS, como type-web.
• Listas largas como países, industrias o conjuntos de iconos, donde la búsqueda guarda el desplazamiento.
• Listas de funciones en tarjetas de precios o productos, incluidas en la lista de elementos.

Consejos para trabajar con el campo Select2 #

• Decida mostrar múltiples primero. Cambiarlo más tarde significa cambiar {{field}} a un bucle, o al revés.
• Escribe claves en minúsculas sin espacios (social, web). Terminan en nombres de clases y comparaciones.
• No cambie el nombre de las claves después de que el widget esté en uso. Las páginas que ya guardaron la clave anterior no coincidirán con la nueva.
• Estilee la salida con la tecla, por ejemplo .type-web .card-type { ... }.
• Para un puñado de botones de iconos en lugar de un menú desplegable, utilice Elija campo.

Preguntas frecuentes #

Envolviendo #

Agregue el campo Select2, configure sus claves y etiquetas y elija entre una selección y muchas antes de escribir el HTML. Imprima un solo valor con {{field_name}} y recorra uno múltiple con {% for %}. Para grupos repetidos de campos en lugar de una lista de opciones, consulte el Campo repetidorși verifică precios por lo que incluye cada plan.