Elegir

El campo Elegir agrega una fila de botones de ícono a un widget personalizado que cree con los complementos maestros Creador de widgets. Es el mismo tipo de control que utiliza Elementor para la alineación de texto: unos pocos botones, uno activo a la vez. Úselo cuando solo haya de dos a cuatro opciones y un ícono explique cada una más rápido que una palabra.

Elija 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 Elegir #

• Agrega una fila de botones de ícono al panel de su widget en Elementor, un botón por opción.
• Muestra el título de cada opción como información sobre herramientas cuando un editor pasa el cursor sobre un botón.
• Guarda el clave de la opción elegida, como por ejemplo center, no su título.
• Imprime esa clave dondequiera que coloques su token, como {{ align }}. El enfoque habitual es convertirlo en una clase CSS.

¿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 “Callout Box” con dos campos Elegir: align (izquierda, centro, derecha) y icon_position (arriba o izquierda).

Cómo agregar un campo Elegir #

1. Ir a Complementos maestros > Creador de widgets y abre tu widget.
2. Agregue una sección sobre el Contenido pestaña, por ejemplo “Callout”. Las opciones de diseño también encajan bien en la pestaña Estilo.
3. Tipo choose en el cuadro de búsqueda de campo de la izquierda.
4. Arrastrar Elegir en la sección. Haga clic en el lápiz en el campo para abrir su configuración.

Un nuevo campo Elegir no está vacío. Viene con tres opciones de alineación (izquierda, centro y derecha) y Centro como predeterminado, por lo que para un control de alineación simple solo necesita cambiar la etiqueta y el nombre.

Elija las opciones de campo explicadas #

• Etiqueta: el texto al lado de los botones en Elementor, por ejemplo “Icon Position”.
• Nombre: el ID único del campo y el nombre de su token. Utilice únicamente letras, números y guiones bajos, por ejemplo icon_position.
• Descripción: una pista que se muestra debajo de los botones de Elementor.
• Desestablecer: permite a los editores hacer clic en el botón activo nuevamente para borrar la elección. Consulte la nota a continuación antes de confiar en ella.
• Opciones: una fila por botón. Clave ¿es el valor que obtiene su plantilla? Título es la información sobre herramientas, y Icono abre el selector de iconos. 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 títulos, pero el campo almacena la clave.

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

Elija íconos que aparezcan en Elementor #

Al hacer clic en el icono de una opción se abre el selector de iconos de complementos maestros. Abrir el Iconos elementales tabulación y búsqueda, por ejemplo align, para encontrar iconos de alineación y posición.

Cíñete a esa pestaña. El selector también enumera los íconos de Línea simple, Fuente icónica, Lineal y Material, pero en nuestras pruebas esos botones aparecieron en blanco en el panel Elementor. Sólo se muestran los iconos de Elementor.

Claves, títulos y Unset #

• Mantenga las teclas cortas, minúsculas y sin espacios, como por ejemplo left o top. Terminan en nombres de clases.
• Puedes cambiar el nombre de un título en cualquier momento. Cambiar una clave rompe páginas que ya guardaron la anterior.
• En nuestras pruebas, al hacer clic en el botón activo se borra el valor incluso con Desarmar establezca en No. Plan para un valor vacío de cualquier manera, como se muestra en la plantilla a continuación.

Utilice la elección en su plantilla #

El token imprime la clave, por lo que la configuración más limpia es una clase modificadora. Este es el HTML de Callout Box:

<div class="callout{% if align %} callout--{{ align }}{% endif %}{% if icon_position %} callout--icon-{{ icon_position }}{% endif %}">
  {% if icon_position %}<span class="callout-icon">!</span>{% endif %}
  <div class="callout-body">
    <p class="callout-title">{{ callout_title }}</p>
    <p class="callout-text">{{ callout_text }}</p>
  </div>
</div>

Cada {% if %} omite la clase cuando el valor está vacío. Para la posición del icono, un valor vacío también oculta el icono, razón por la cual ese campo se ha activado. Luego, el panel CSS diseña cada clase:

.callout--left { text-align: left; }
.callout--center { text-align: center; }
.callout--right { text-align: right; }
.callout--icon-top .callout-icon { margin-bottom: 14px; }
.callout--icon-left { display: flex; gap: 18px; align-items: flex-start; }

También puedes comparar el valor directamente, por ejemplo {% if icon_position == 'left' %}. Compárese con la clave, nunca con el título.

Deje desactivado el selector y el control responsivo #

• Selector: para este campo escribe color: {{VALUE}};. En nuestras pruebas, un Selector de .callout-title producido color:center;, que los navegadores ignoran. A diferencia de otros campos, Choose no tiene filas de Selectores CSS donde pueda escribir su propia propiedad. Utilice clases como se muestra arriba.
• Control responsivo: agrega íconos de dispositivo para que los editores puedan elegir una opción diferente en tabletas y dispositivos móviles, pero el token solo imprime la opción de escritorio. Las selecciones por dispositivo nunca llegan a su plantilla.

Utilice el control Elegir en Elementor #

Agregue el widget a una página o recargue el editor si la página ya estaba abierta. Los botones se encuentran debajo de su etiqueta con la opción predeterminada resaltada. Pase el cursor sobre un botón para ver su título y haga clic para cambiar. La vista previa se actualiza de inmediato.

Aquí está el mismo llamado con diferentes opciones:

Casos de uso comunes #

• Alineación de texto para encabezados, comillas y tarjetas.
• Posición de la imagen o icono: arriba, izquierda o derecha.
• Dirección de diseño, como una fila o una columna.
• Pequeñas variantes visuales, como un estilo claro u oscuro, cuando cada una tiene un icono claro.

Consejos para trabajar con el campo Elegir #

• Mantenlo en cuatro opciones o menos. Para listas más largas, utilice el Seleccionar campo.
• Maneje siempre un valor vacío. Clases envolventes y marcado {% if %}y proporcione a la clase base estilos predeterminados sensibles.
• Escribe títulos claros. La información sobre herramientas es el único texto que los editores ven para cada botón.
• Utilice únicamente iconos Elementor, entonces cada botón tiene un ícono visible.
• Decida las claves antes de que los editores utilicen el widget. Los títulos y los íconos pueden cambiar más tarde, las claves no.

Preguntas frecuentes #

Envolviendo #

Agregue un campo Elegir, establezca teclas cortas con íconos de Elementor y borre títulos, luego imprima la clave como una clase en su HTML y diseñe cada clase en el panel CSS. Maneje el valor vacío y el widget permanecerá ordenado cuando un editor borre una opción. Para obtener listas más largas de opciones, consulte Seleccionar campoși verifică precios por lo que incluye cada plan.