Elección visual

El campo Elección visual agrega una fila de tarjetas de imagen en las que se puede hacer clic a un widget personalizado creado con los complementos maestros Creador de widgets. Cada tarjeta es una pequeña imagen de una opción, por lo que los editores eligen un diseño o estilo mirándola. Su plantilla obtiene la clave de la tarjeta en la que hicieron clic.

Visual Choice 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 Elección visual #

• Muestra tus opciones como tarjetas de imagen en el panel Elementor. La tarjeta seleccionada se resalta.
• Cada opción tiene una clave, un título y una imagen. El título se utiliza como información sobre herramientas y texto alternativo de la tarjeta.
• Su plantilla recibe la clave seleccionada, como por ejemplo grid o list, que puedes usar en un nombre de clase o en un {% if %} comprobar.
• La configuración de Columnas controla cuántas cartas hay en una fila del panel.

Si aún no ha creado un widget, lea el Descripción general del creador de widgets primero. Para opciones que se leen bien como texto o íconos, el Seleccionar y Elegir los campos se configuran más rápido.

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.
• Una pequeña imagen para cada opción. Dibujos lineales simples de aproximadamente 240 por 160 píxeles, guardados como PNG con un fondo transparente, lucen limpios en el panel oscuro de Elementor.
• Un widget abierto en Widget Builder. El ejemplo de esta guía es un widget “Team Showcase” con tres diseños: Grid, List y Spotlight.

Cómo agregar un campo de Elección visual #

1. Ir a Complementos maestros > Creador de widgets y abre tu widget.
2. En el Contenido pestaña, agrega una sección. Un selector de diseño generalmente va primero, por lo que los editores eligen la estructura antes que cualquier otra cosa.
3. Tipo visual en el cuadro de búsqueda de campo de la izquierda.
4. Arrastrar Elección visual en la sección. Su configuración se abre en la barra lateral izquierda.

Se explican las opciones de campo de elección visual #

• Etiqueta es el texto encima de las tarjetas en Elementor, por ejemplo “Diseño”.
• Nombre ¿es el ID único del campo y su token de plantilla, entonces team_layout se convierte {{team_layout}}. Sólo letras, números y guiones bajos.
• Descripción aparece debajo de las cartas en Elementor.
• Opciones tiene una fila por tarjeta. Clave ¿es el valor que obtiene su plantilla (manténgala en minúsculas y en minúsculas, por ejemplo grid). Título nombra la tarjeta. Haga clic en el Imagen cuadro para abrir la ventana Seleccionar imagen, cargar un archivo o elegir uno de la biblioteca multimedia, luego haga clic Utilice esta imagen. El icono más agrega una fila y la cruz roja elimina una.
• Columnas establece cuántas cartas caben en una fila, del 1 al 6. Escriba el número incluso si el cuadro ya muestra 2. El número mostrado no se guarda hasta que lo cambie, y sin un valor guardado Elementor coloca una carta en cada fila.
• Alternar aparece en el panel, pero en nuestras pruebas no hizo ninguna diferencia. Los editores siempre podían hacer clic nuevamente en la tarjeta seleccionada para borrarla.

Las configuraciones comunes a continuación funcionan como lo hacen en otros campos, incluidos Condiciones. El panel no tiene valor predeterminado para este campo, por lo que se inicia una nueva copia del widget sin ninguna tarjeta seleccionada.

Hacer clic Guardar configuración después de agregar las opciones.

Utilice la clave seleccionada en su plantilla #

{{team_layout}} imprime la clave de la tarjeta seleccionada. La forma más sencilla de utilizarlo es una clase modificadora:

<div class="ts-team ts-team--{{team_layout}}">
  ...
</div>

Con Grid seleccionado, eso representa ts-team--grid. Cuando un diseño necesite un marcado diferente, verifique la clave con {% if %}. El ejemplo muestra una breve biografía solo en el diseño de la Lista:

{% if team_layout == 'list' %}
  <p class="ts-bio">Leads brand and product design across every client project.</p>
{% endif %}

Luego escriba un conjunto de reglas CSS por clave:

.ts-team--grid { grid-template-columns: repeat(3, 1fr); }
.ts-team--list { grid-template-columns: 1fr; }
.ts-team--spotlight { grid-template-columns: 1.4fr 1fr; }

Hasta que un editor haga clic en una tarjeta, el token no imprime nada y la clase anterior se convierte en ts-team--. Da la base .ts-team clasifique un diseño que se vea bien por sí solo, por lo que el widget nunca aparece roto antes de tomar una decisión.

Utilice el control de elección visual en Elementor #

Agregue el widget a una página o recargue el editor si la página ya estaba abierta. Las tarjetas aparecen en la pestaña Contenido. Haga clic en uno y el lienzo se actualizará de inmediato.

Al hacer clic en Lista, el equipo cambia a filas y {% if %} block agrega la biografía:

Spotlight agranda al primer miembro:

Haga clic en la tarjeta seleccionada nuevamente para borrar la elección. Luego, la plantilla obtiene una clave vacía, como se describe anteriormente.

Casos de uso comunes #

• Selectores de diseño para widgets de equipo, blog, portafolio y testimonios.
• Estilos de tarjetas o encabezados que son más fáciles de reconocer a partir de una imagen que de un nombre.
• Opciones de posición de la imagen, como imagen izquierda, imagen derecha o imagen superior.
• Diseños preestablecidos que cambian varias reglas CSS a la vez con una clase.

Consejos para trabajar con el campo Visual Choice #

• Utilice el mismo estilo de dibujo para cada imagen opcional, para que las tarjetas parezcan un solo juego.
• Mantenga las teclas cortas, minúsculas y libres de espacios. Terminan en nombres de clases.
• No cambie el nombre de una clave una vez que el widget esté en uso. Las páginas que guardaron la clave anterior no coincidirán con su nuevo CSS.
• Establece columnas en la cantidad de opciones cuando tengas tres o menos, para que todas las cartas queden en una fila.
• Estila el estado vacío. Hasta que alguien elija una carta, la clave está en blanco.

Preguntas frecuentes #

Envolviendo #

Dale a cada opción una clave, un título y una imagen, escribe un valor de Columnas y úsalo {{field_name}} en un nombre de clase o un {% if %} verificar. Planifique el estado vacío, ya que no se selecciona nada hasta que un editor haga clic en una tarjeta. Para elegir de una lista de texto, consulte el Seleccione2 camposși verifică precios por lo que incluye cada plan.