Elegir

El Elija campo representa una fila de botones de iconos en el panel de su widget, el mismo control que utiliza Elementor para la alineación de texto: tres o cuatro botones, uno activo a la vez. Dentro de los complementos maestros Creador de widgets, es la elección correcta siempre que las opciones sean pocas y un ícono diga más de una palabra. La alineación es el ejemplo obvio, pero los interruptores de posición y dirección encajan en el mismo molde.

Las teclas de opción de Choose control funcionan directamente con Condiciones, por lo que pueden aparecer otros campos según la opción elegida y con Motor de plantilla de sintaxis de ramita, donde como un cheque {% if align == "center" %} cambia tu marcado. Ambas guías cubren los detalles.

Al igual que Seleccionar, el valor entregado a su plantilla es la clave de la opción, no su título. Lo que Choose agrega en la parte superior: un ícono por opción, un comportamiento de desconexión opcional y una ruta sencilla al mecanismo de selectores de Elementor para opciones CSS puras como la alineación.

Qué hace el campo Elegir #

• Representa una fila de botones de iconos en el panel Elementor, uno por opción que definas.
• Sostiene una llave del conjunto definido, exactamente un botón activo a la vez.
• Combina cada opción con un eicon, como por ejemplo eicon-text-align-left, entonces la elección se lee de un vistazo.
• Opcionalmente se desactiva: con la opción Alternar activada, al hacer clic nuevamente en el botón activo se anula la selección y el valor se vacía.
• Admite una bandera sensible y puede escribir CSS directamente a través de un selector, que se trata a continuación.

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 testimonial con un selector de “Alineación de citas”: izquierda, centro, derecha.

Cómo agregar un campo Elegir #

En el editor Widget Builder, busque Elegir campo en el panel de la izquierda, agrupado con los otros campos de elección.

Arrástrelo a una sección debajo del Estilo pestaña; Los ajustes de tipo de alineación viven naturalmente allí. Una vez que aterriza, las opciones del campo se abren a la izquierda.

Elija las opciones de campo explicadas #

• Etiqueta: el texto que se muestra junto a los botones de Elementor, por ejemplo “Alineación de citas”.
• Nombre: el identificador único para el campo, letras, números y guiones bajos únicamente, por ejemplo quote_align.
• Opciones: cada opción es una clave más un título y un icono. El título se convierte en la información sobre herramientas del botón y el icono es una clase eicon, por ejemplo eicon-text-align-left para la llave left.
• Alternar: cuando está activado, al hacer clic nuevamente en el botón activo se anula la selección y el valor del campo queda vacío. Déjelo desactivado si el widget siempre necesita un valor.
• Predeterminado: la clave se activa cuando el widget aparece por primera vez en una página.
• Responsivo: agrega el ícono del dispositivo para que la alineación pueda diferir según el punto de interrupción.
• Descripción, Mostrar etiqueta, Separador: la configuración de visualización estándar, más las condiciones para mostrar el campo solo cuando otro control tiene un valor determinado.

Conecte el Elija a su plantilla o selector #

Hay dos estilos de cableado. El ejemplo de alineación funciona con cualquiera de los dos.

Patrones de plantilla. El token imprime la clave seleccionada, por lo que los patrones de selección se mantienen sin cambios. Una clase modificadora mantiene las variantes en su pestaña CSS:

<blockquote class="quote align--{{ quote_align }}">
  {{ quote_text }}
</blockquote>

con .align--center { text-align: center; } y amigos en la pestaña CSS. Los condicionales también funcionan: {% if quote_align == 'center' %}. Al igual que con Select, compárelo con la clave, nunca con el título.

La opción Selector. Choose también puede escribir CSS a través del mecanismo de selectores de Elementor, omitiendo la plantilla por completo. Una cosa que debe saber antes de confiar en él: la propiedad predeterminada que Elementor inyecta para un selector de elección es color: {{VALUE}}, lo cual es inútil para la alineación. Una entrada de selectores personalizados tiene que detallar la propiedad real:

text-align: {{VALUE}};

Entonces las claves deben ser valores CSS válidos (left, center, right ya lo son), y {{WRAPPER}} se antepone automáticamente para este tipo de control de valor, por lo que los estilos permanecen en el alcance de su widget sin que usted lo escriba.

Cuidado con la versión silenciosa de este error. A Elija conectado a un selector que mantenga la propiedad predeterminada escribirá felizmente color: center, una declaración no válida que el navegador deja caer sin una palabra. Sin advertencia de la consola, sin pista visual. Si los botones parecen no hacer nada, inspeccione el CSS generado antes de tocar la configuración del campo.

Utilice el control Elegir en Elementor #

Agregue su widget personalizado a una página en Elementor, recargando el editor si la página ya estaba abierta. El control aparece como una fila de botones de iconos debajo de su etiqueta, con el botón de la tecla predeterminada activo.

Haga clic en un botón y la vista previa se actualiza de inmediato. Con Alternar activado, al hacer clic en el botón activo se borra la elección y el widget vuelve a ser lo que define su pestaña CSS. Con Responsive activado, el ícono del dispositivo permite que cada punto de interrupción mantenga su propia selección.

Casos de uso comunes #

• Alineación de texto para títulos, citas y subtítulos, el territorio del control.
• Posición del elemento como la imagen izquierda o la imagen derecha en una tarjeta multimedia y de texto.
• Interruptores de dirección para listas y líneas de tiempo horizontales versus verticales.
• Ajustes preestablecidos de tamaño como clases pequeñas, medianas y grandes asignadas a modificadores.
• Opciones del lado del espectáculo para insignias y cintas, desde la esquina superior izquierda hasta la inferior derecha.

Consejos para trabajar con el campo Elegir #

• Mantenlo en dos, tres o cuatro opciones. Una fila de siete botones de iconos es un menú desplegable con un disfraz; utilice un Select en su lugar.
• Haga coincidir las claves con los valores CSS cuando utilice un selector. Claves como left y center caer directamente hacia text-align: {{VALUE}} sin capa de traducción.
• Defina los bienes inmuebles en selectores personalizados. La propiedad inyectada predeterminada es color: {{VALUE}}, que sólo se adapta a las elecciones de color reales.
• Planifique el valor vacío si Alternar está activado. Un campo deseleccionado imprime una clave vacía, por lo tanto align-- las clases y los condicionales deben tolerarlo o mantener desactivado Toggle.
• Comparar con claves en condicionales. El título de la opción es texto solo para panel y nunca coincide {% if %}.
• Utilice Responsive para la alineación. Centro en el móvil, el escritorio izquierdo es un control en lugar de dos.

Preguntas frecuentes #

Envolviendo #

El campo Elegir del creador de widgets brinda pequeñas decisiones visuales del control que merecen. Las teclas se encuentran detrás de los botones de los íconos, un token alimenta clases de modificadores y condicionales, y la ruta del selector maneja opciones de una propiedad, como la alineación, una vez que define la propiedad CSS real. Para selecciones de diseño que necesitan una miniatura completa en lugar de un ícono, diríjase al Campo de elección visual. Explora el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.