Pestañas

El Campo de pestañas organiza los controles de un widget en pestañas de panel, la misma estructura que utilizan los propios widgets de Elementor para el estilo de estado Normal y Hover. Dentro de los complementos maestros Creador de widgets, usted define las pestañas, coloca controles secundarios en cada una y el panel Elementor las representa como una tira de pestañas compacta en lugar de un largo desplazamiento de campos.

El control de pestañas admite Condiciones como todo campo, y sus hijos son leídos a través del Motor de plantilla de sintaxis de ramita con un token de tres partes, {{ tabs.tab_1.field }}, no se requiere bucle. Ambas guías cubren los detalles y limitaciones.

Tabs es un campo estructural. No tiene valor propio; los valores pertenecen a los hijos y su plantilla lee cada uno a través de una ruta anidada que nombra el campo de pestañas, la pestaña y el campo dentro de ella. Sin bucles, sin trucos, solo direcciones.

Qué hace el campo Tabs #

• Representa una tira de pestañas en el panel del widget, construido sobre el mecanismo de pestañas de control de Elementor.
• Sostiene un conjunto de pestañas, cada uno con su propio nombre, etiqueta y lista de controles secundarios.
• Mantiene unidos a los estados relacionados, la combinación clásica son las versiones Normal y Hover de la misma configuración.
• Expone los valores infantiles a través de caminos anidados en su plantilla: el nombre del campo de pestañas, luego la pestaña y luego el campo.
• Permite los mismos nombres de hijos en todas las pestañas, para que Normal y Hover puedan reflejarse limpiamente.

Si recién estás comenzando con el constructor, lee el Descripción general del creador de widgets antes de este.

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 Widget Builder. Nuestro ejemplo es un widget de botón con un campo de pestañas llamado states manteniendo presionada una pestaña Normal y una pestaña Flotar, cada una con un campo de color llamado bg.

Cómo agregar un campo de pestañas #

En el editor Widget Builder, desplácese por el panel de campos de la izquierda hasta encontrar el archivo Pestañas campo, listado con los otros campos estructurales como Popover Toggle y Repeater.

Arrástrelo a una sección debajo del Estilo tab, donde vive el estilo del estado, luego define las pestañas y coloca los controles secundarios en cada una. Las opciones del campo se abren a la izquierda tan pronto como aterriza.

Se explican las opciones de campo de pestañas #

• Etiqueta: el encabezado que se muestra encima de la tira de pestañas en Elementor.
• Nombre: el identificador único para todo el grupo de pestañas, letras, números y guiones bajos únicamente, por ejemplo states. Es el primer segmento de la ruta de plantilla de cada niño.
• Pestañas: la lista de pestañas. Cada pestaña lleva un nombre (usado en las rutas de plantilla, por ejemplo normal), una etiqueta (que se muestra en la tira, por ejemplo “Normal”) y su propio conjunto de controles secundarios.
• Controluri pentru copii: los campos dentro de cada pestaña. Los tipos de campos de valor funcionan aquí y cada uno mantiene sus propias opciones y forma de valor.
• Descripción, etiqueta de visualización, separador y condiciones son las mismas opciones de visualización que en cualquier otro lugar.

Lea los valores de las pestañas a través de rutas anidadas #

Los hijos de un campo de pestañas se abordan con una ruta de puntos de tres partes: el nombre del campo de pestañas, el nombre de la pestaña y luego el nombre del campo secundario.

{{ tabsname.tabname.fieldname }}

No hay pestañas en bucle. Cada valor se lee exactamente donde lo necesita. Para el ejemplo del botón, a states campo de pestañas con pestañas Normal y Hover, cada una con un bg campo de color, cables en el panel CSS como este:

.ma-btn {
  background: {{ states.normal.bg }};
}
.ma-btn:hover {
  background: {{ states.hover.bg }};
}

Nombrar al niño igual en ambas pestañas es deliberado y compatible. Internamente, el constructor dedupone claves duplicadas con un contador, pero la ruta de la plantilla permanece por pestaña, por lo que bg en Normal y bg en Hover siguen existiendo dos valores distintos y claramente abordados. Los nombres reflejados son el patrón al que aspirar: quien lee la plantilla ve que las reglas Normal y Hover difieren solo en un segmento de ruta.

Cuidado: la ficha plana {{ bg }} se resuelve en nada, al igual que las dos partes {{ normal.bg }}. La ruta siempre comienza con el propio nombre del campo Tabs. Cuando el valor de una pestaña se imprime vacío, cuente primero los segmentos. Cambiar el nombre de una pestaña rompe las rutas de la misma manera silenciosa; el CSS sigue compilándose, el valor simplemente deja de llegar, así que decida los nombres de las pestañas antes de escribir las reglas.

Utilice el control de pestañas en Elementor #

Agregue su widget personalizado a una página en Elementor (o recargue el editor si la página ya estaba abierta). La tira de pestañas se representa en el panel con las etiquetas de las pestañas y al hacer clic en una pestaña se revelan sus controles secundarios.

Un editor establece el fondo Normal en la primera pestaña, cambia a Hover y establece el segundo color. Al pasar el cursor sobre el botón en la vista previa se muestra la transición inmediatamente, ya que ambos valores ya se encuentran en las reglas CSS del widget.

Casos de uso comunes #

• Estilo normal y flotante para botones, tarjetas y enlaces, el emparejamiento clásico.
• Estados activos e inactivos para alternos, filtros y elementos de navegación.
• Configuración de antes y después en comparación o revelar widgets.
• Variantes claras y oscuras, permitiendo a los editores sintonizar ambos esquemas desde una sección.
• Estilo de fila par e impar en widgets de lista y tabla.

Consejos para trabajar con el campo Tabs #

• Dirija los valores con la ruta completa de tres partes. {{ states.hover.bg }} funcționează; {{ bg }} y {{ hover.bg }} no.
• Refleje los nombres de los niños en las pestañas. Mismos campos, mismos nombres, un segmento de ruta diferente; la plantilla sigue siendo legible y las pestañas siguen siendo comparables.
• Mantenga los nombres de las pestañas en minúsculas y en minúsculas. Son identificadores de plantilla, entonces normal y hover supera a “Tab 1” y “Tab 2”.
• Utilice pestañas para estados, secciones para temas. Dos variantes de la misma configuración pertenecen a pestañas; Las configuraciones no relacionadas pertenecen a secciones separadas.
• Recuerde que cada niño mantiene la forma de valor de su tipo. Un control deslizante dentro de una pestaña todavía dice como {{ states.normal.gap.size }}{{ states.normal.gap.unit }}.

Preguntas frecuentes #

Envolviendo #

El campo Tabs del creador de widgets convierte el estilo del estado en un patrón de panel ordenado: definir normal y hover una vez, refleje los nombres de los niños y su CSS leerá {{ states.normal.bg }} contra {{ states.hover.bg }} sin que nada más cambie. Para contenido repetido en lugar de estados emparejados, el Campo repetidor es el hermano estructural al que hay que recurrir. Explora el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.