Elección visual

El Campo de elección visual representa un conjunto de tarjetas de imagen en el panel de su widget, una por opción, y el usuario elige haciendo clic en una miniatura. Es el control del selector de diseño. Cuando Seleccionar ofrece palabras y Elegir ofrece íconos, la Elección Visual muestra una pequeña imagen de cómo se ve realmente cada variante. Dentro de los complementos maestros Creador de widgets, eso lo convierte en la opción natural para decisiones de cuadrícula versus lista y cualquier variante que una captura de pantalla explique más rápido que un nombre.

Los valores de la opción Visual Choice se conectan directamente Condiciones, permitiendo que otros controles sigan el diseño elegido y entren en el Motor de plantilla de sintaxis de ramita, donde {% if style == "grid" %} cambia el marcado para que coincida. Ambas guías cubren los detalles.

El contrato de plantilla coincide con los otros campos de elección: el valor es la clave de la opción seleccionada. Lo que distingue a Visual Choice es un segundo estilo de cableado, la clase de prefijo, que cambia una clase en el contenedor del widget para que su CSS pueda cambiar de diseño sin que la plantilla mencione el campo.

Qué hace el campo Elección visual #

• Representa tarjetas de imágenes en las que se puede hacer clic en el panel Elementor, cada opción está definida por una clave, un título y una imagen.
• Sostiene una llave del conjunto definido, la tarjeta actualmente seleccionada.
• Coloca cartas en columnas, tres por fila de forma predeterminada, ajustable a través de la opción Columnas.
• Feeds plantilla la clave seleccionada para clases modificadoras y {% if %} bloques.
• Opcionalmente establece una clase envolvente a través de la opción de clase de prefijo, CSS por sí solo puede cambiar el diseño.

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 para miembros del equipo con dos variantes de diseño, una cuadrícula de 3 columnas y una lista apilada, seleccionada mediante tarjetas en miniatura.

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

Encontrar Elección visual en el panel de campos a la izquierda del editor Widget Builder, agrupado con los otros campos de elección.

Arrástrelo a una sección debajo del Contenido o Estilo pestaña. Los seleccionadores de diseño generalmente se ubican primero en el panel, en la parte superior de la pestaña Contenido, por lo que los editores eligen una estructura antes de completar el contenido. Una vez que el campo aterriza, sus opciones se abren a la izquierda.

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

• Etiqueta: el texto que se muestra encima de las tarjetas en Elementor, por ejemplo “Diseño”.
• Nombre: el identificador único para el campo, letras, números y guiones bajos únicamente, por ejemplo team_layout.
• Opciones: cada opción es una clave más un título y una imagen. La imagen se convierte en la tarjeta en la que se puede hacer clic; el título lo etiqueta. Las claves permanecen cortas y seguras para CSS: grid, list.
• Columnas: cuántas cartas hay por fila en el panel, 3 de forma predeterminada. Dos cartas grandes se leen mejor como 2 columnas.
• Clasa de prefix: un Elementor de raíz de clase agrega la clave seleccionada y la coloca en el contenedor del widget. Con team-layout- y la clave grid, lleva el envoltorio team-layout-grid.
• Predeterminado: la clave seleccionada cuando el widget aparece por primera vez en una página.
• 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 Visual Choice a su widget #

Dos estilos de cableado. Elija uno por campo.

Estilo A: patrones de plantilla. El token imprime la clave seleccionada, por lo que todo, desde Seleccionar campo aplica. Una clase modificadora:

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

o una rama estructural cuando las variantes necesitan un marcado diferente:

{% if team_layout == 'list' %}
  <ul class="team-list"> ... </ul>
{% else %}
  <div class="team-grid"> ... </div>
{% endif %}

Estilo B: la clase de prefijo. Complete la opción Clase de prefijo, digamos team-layout-, y Elementor escribe team-layout-grid o team-layout-list en el contenedor del widget mientras el usuario hace clic en las tarjetas. Su CSS luego apunta a la clase combinada:

.team-layout-grid .member { /* grid card rules */ }
.team-layout-list .member { /* stacked row rules */ }

La plantilla nunca hace referencia al campo en absoluto; la clase envolvente realiza el cambio. Esto mantiene el HTML en un único bloque de marcado y empuja cada variante a la hoja de estilo. Cuando solo cambia la presentación, suele ser el corte más limpio.

Tenga cuidado con mezclar los dos estilos en un campo. Una plantilla condicional que asume grid mientras que la clase de prefijo se establece simultáneamente team-layout-list son dos fuentes de verdad, y se desviarán, generalmente meses después, cuando alguien edita un lado y olvida que el otro existe. Decida si este campo habla a través de la plantilla o de la clase envolvente y luego quédese con él.

Utilice el control de elección visual en Elementor #

Agregue su widget personalizado a una página en Elementor, recargando el editor si la página ya estaba abierta. El control muestra sus tarjetas de opciones en el panel, resaltada la seleccionada.

Haga clic en una tarjeta y el diseño cambiará en la vista previa, ya sea a través de su clase modificadora o mediante la clase de prefijo en el contenedor, cualquiera que sea el cableado que elija. Debido a que cada tarjeta muestra la variante en sí, los editores eligen el diseño correcto sin leer nada.

Casos de uso comunes #

• Diseños de cuadrícula versus lista para widgets de equipo, portafolio y publicaciones.
• Variantes de estilo de tarjeta donde las miniaturas muestran los diseños reales en caja, superpuestos y divididos.
• Arreglos de encabezado como variantes de héroe de imagen superior, imagen izquierda y solo texto.
• Presentaciones deslizantes versus estáticas del mismo conjunto de contenidos.
• Paquetes de plantillas dentro de un widget, tres looks prediseñados que un cliente elige por imagen.

Consejos para trabajar con el campo Visual Choice #

• Utilice capturas de pantalla reales como imágenes opcionales. Una pequeña representación de cada variante supera a un icono abstracto; la tarjeta es la documentación.
• Elija un estilo de cableado por campo. Los patrones de plantilla o la clase de prefijo, no ambos, o los dos eventualmente no estarán de acuerdo.
• Las claves van a los nombres de las clases, así que manténgalas como babosas. grid y list, no “Diseño de cuadrícula”.
• Finalice el prefijo con un separador. team-layout- plus grid lee como team-layout-grid; sin el guión que obtienes team-layoutgrid.
• Haga coincidir columnas con el recuento de tarjetas. Dos opciones en 3 columnas dejan un espacio; establezca columnas en 2 y la fila se llene.
• Resérvalo para diferencias visuales. Si las opciones difieren en comportamiento más que en apariencia, una selección con etiquetas claras sirve mejor a los editores.

Preguntas frecuentes #

Envolviendo #

El campo Elección visual del creador de widgets permite a los editores elegir un diseño mirándolo: tarjetas de imagen en el panel, una clave en la plantilla y la opción de clase de prefijo cuando prefieres cambiar de diseño solo desde CSS. Se empareja naturalmente con el Elija campo. Las miniaturas manejan las grandes selecciones estructurales, los botones de íconos los pequeños ajustes. Explora el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.