Pestañas

El campo Tabs agrupa los controles en una tira de pestañas en el panel Elementor, como las pestañas Normal y Hover en los propios estilos de botones de Elementor. Lo construyes en los complementos maestros Creador de widgets: agregue las pestañas, coloque campos dentro de cada una y lea cada valor en su HTML o CSS con un token de tres partes como {{ button_states.hover.bg }}.

Tabs 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 Tabs #

• Agrega una fila de pestañas en las que se puede hacer clic a una sección del panel de su widget. Al hacer clic en una pestaña se muestran los campos que contiene.
• Cada pestaña tiene un nombre, una etiqueta y su propia lista de campos.
• El campo Tabs no almacena ningún valor en sí. Los valores pertenecen a los campos dentro de las pestañas.
• Las plantillas leen esos valores con {{ tabs_name.tab_name.field_name }}. Dos pestañas pueden usar los mismos nombres de campo, lo que mantiene las reglas Normal y Hover fáciles de comparar.

Si aún no ha creado un widget, lea el Descripción general del creador de widgets primero.

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.
• Un widget abierto en Widget Builder. El ejemplo de esta guía es un widget “Hover Button”: un campo de texto para la etiqueta del botón, además de un campo de pestañas llamado button_states con una pestaña Normal y flotante. Cada pestaña contiene dos campos de color, bg y text.

Cómo agregar un campo de pestañas #

1. Ir a Complementos maestros > Creador de widgets y abre tu widget.
2. Haga clic en el Estilo tabule y agregue una sección, por ejemplo “Estilo de botón”.
3. Tipo tabs en el cuadro de búsqueda de campo de la izquierda.
4. Arrastrar Pestañas en la sección. Su configuración se abre en la barra lateral izquierda y la vista previa de la sección muestra la tira de pestañas.

Se nombra un nuevo campo Tabs tabs y viene con dos pestañas vacías, tab_1 y tab_2. Cambie su nombre antes de escribir tokens, porque los nombres pasan a formar parte de cada camino.

Se explican las opciones de campo de pestañas #

• Etiqueta nombra el campo dentro del constructor. En Elementor, los editores ven el título de la sección y las etiquetas de las pestañas, no esta etiqueta.
• Nombre es la primera parte de cada token, entonces button_states da {{ button_states.normal.bg }}. Sólo letras, números y guiones bajos.
• Descripción es una nota para ti dentro del constructor.
• Pestañas es la lista de pestañas. Cada fila tiene un Nombre (usado en tokens, como hover) și a Etiqueta (se muestra en la pestaña, como Flotar). Haga clic Agregar pestaña para otra fila, o la cruz roja para quitar una.

Debajo de la lista de pestañas, la barra lateral muestra una Campo de pestañas tabla por pestaña, titulada con la etiqueta de la pestaña. Aquí es donde van los campos.

• Nombre es la última parte del token. Puedes reutilizar el mismo nombre en cada pestaña, como bg y text están aquí.
• Etiqueta es el texto al lado del control en Elementor.
• Tipo establece el control: Texto, Número, Área de texto, WYSIWYG, Código, Oculto, Conmutador, Elegir, Color, Fuente, Tipografía, Fecha y hora, URL, Medios, Galería, Iconos, Control deslizante, Dimensiones o Fondo.
• Hacer clic Agregar campo para agregar una fila a esa pestaña.

Las configuraciones comunes más abajo (Mostrar etiqueta, separador, condiciones y el resto) no cambian la forma en que aparece un campo de pestañas en Elementor, por lo que puedes dejarlas en paz.

Lea los valores de las pestañas en su plantilla #

Cada valor dentro de una pestaña se lee con tres nombres unidos por puntos: el campo Tabs, la pestaña y luego el campo.

{{ tabs_name.tab_name.field_name }}

No es necesario que los escribas. Después de guardar, el panel Documentación al lado del editor HTML enumera cada ruta debajo de la etiqueta del campo Tabs y el ícono de copia copia una.

Los tokens funcionan tanto en la pestaña CSS como en la pestaña HTML. El botón de ejemplo mantiene su aspecto básico en una regla y lee los colores de las pestañas en las dos siguientes:

.ma-btn {
  background: #652dd9;
  color: #ffffff;
}

.ma-btn {
  background: {{ button_states.normal.bg }};
  color: {{ button_states.normal.text }};
}

.ma-btn:hover {
  background: {{ button_states.hover.bg }};
  color: {{ button_states.hover.text }};
}

La primera regla es una alternativa. Hasta que un editor elige un color, un token no imprime nada y la línea se convierte en background: ;. Los navegadores omiten esa línea no válida, por lo que los colores de la primera regla permanecen en su lugar.

Sólo funciona la ruta completa. En pruebas, {{ bg }}, {{ hover.bg }} y {{ button_states.hover }} todo no imprimió nada, mientras {{ button_states.hover.bg }} imprime el color. Si un valor sale vacío, primero verifique tres partes y la ortografía exacta.

Hacer clic Guardar configuración cuando hayas terminado.

Utilice el control de pestañas en Elementor #

Agregue el widget a una página o recargue el editor si la página ya estaba abierta. Seleccione el widget y abra el Estilo pestaña. Su sección muestra la tira de pestañas con la pestaña Normal abierta.

Establezca los colores en la pestaña Normal y luego haga clic Flotar y establece el segundo par. Mueva el mouse sobre el botón en la vista previa para verificar los colores flotantes.

Casos de uso comunes #

• Colores normales y flotantes para botones, tarjetas y enlaces.
• Estilos activos e inactivos para filtros, alternancias y elementos de menú.
• Versiones claras y oscuras de un componente, editadas desde una sección.
• Contenido dividido en grupos, como una pestaña Anverso y Atrás en una tarjeta invertida, con campos de texto y medios en cada uno.

Consejos para trabajar con el campo Tabs #

• Elija primero el nombre del campo de pestañas y los nombres de las pestañas. Cambiar el nombre más adelante significa actualizar cada token que los utilice.
• Reutilice los nombres de los campos en las pestañas. normal.bg y hover.bg son más fáciles de leer que dos nombres no relacionados.
• Evite cambiar la etiqueta de un campo una vez que el widget esté en páginas en vivo. Elementor almacena los valores guardados en una clave creada a partir de la etiqueta, de modo que una nueva etiqueta pueda hacer que los valores existentes desaparezcan de esas páginas.
• Coloque los estilos predeterminados en una regla antes de la regla del token, para que un valor vacío nunca rompa el diseño.
• Dale un prefijo a tus clases (como ma-btn). CSS de la pestaña CSS del widget se aplica a toda la página, por lo que se incluyen nombres genéricos .button puede chocar con otros estilos.
• Para obtener un único grupo de configuración de encendido/apagado en lugar de pestañas, consulte Campo de alternancia Popover. Para obtener una lista a la que el editor puede agregar filas, utilice Campo repetidor.

Preguntas frecuentes #

Envolviendo #

Nombra el campo Tabs y sus pestañas, agrega campos a cada pestaña y léalos con {{ tabs_name.tab_name.field_name }} en su HTML o CSS. Mantenga una regla alternativa para valores vacíos y establezca nombres antes de que el widget entre en funcionamiento. El Campo de color doc cubre el control de color utilizado en este ejemplo y precios muestra lo que incluye cada plan.