Conclusiones clave
- Las pestañas anidadas reemplazaron el widget de pestañas original. El anterior ha mostrado un aviso de desaprobación en el panel desde Elementor 3.8, y las nuevas pestañas que arrastras son la versión anidada.
- Cada panel es un contenedor, por lo que los formularios, galerías, cuadrículas de bucles y tablas de precios funcionan dentro de una pestaña.
- El control Breakpoint convierte la tira en un acordeón vertical por debajo del ancho que elijas, con el móvil como predeterminado.
- Horizontal Scroll mantiene una larga fila de títulos en una línea y permite a los visitantes deslizarlos.
- El repetidor solo contiene el título de la pestaña, lo que capta a las personas: el contenido del panel se basa en el lienzo, no en el panel.
Las pestañas de Elementor solían ser un cuadro de texto dentro de un cuadro de texto. Escribías el título en un campo y el contenido en otro, y si querías un formulario de contacto allí, mala suerte.
Las pestañas anidadas cambiaron el modelo. Cada panel ahora es un contenedor, lo que significa que toda la biblioteca de widgets está disponible dentro de una pestaña. Esta publicación cubre cómo funciona, dónde viven los controles y los tres lugares donde todavía frustra a las personas.
Tabla de contenidos
Qué cambió
El antiguo widget Tabs almacenaba todo en un repetidor: un campo de título y un campo de contenido por fila. Eso lo hizo simple y también limitó lo que podía contener, porque un campo de contenido toma texto e imágenes y nada más.
Nested Tabs los divide. El repetidor mantiene los títulos y cada panel se convierte en un contenedor real en el lienzo que construyes en su interior. Elementor llama a este anidamiento y las pestañas fueron el primer widget en obtenerlo.
El widget antiguo todavía se envía para que las páginas existentes sigan funcionando, y la edición muestra un aviso que dice que cualquier widget de pestañas nuevas será la versión anidada. Ese aviso aterrizó en la versión 3.8.
Una cosa que vale la pena aclarar, porque muchas guías y respuestas de IA todavía lo dicen: no es necesario activar los elementos anidados. Llegó como un experimento y en el Elementor actual está marcado como estable, activo de forma predeterminada y no conmutable, por lo que no aparece en la pantalla Experimentos en absoluto. Si fuiste a buscar la configuración y no pudiste encontrarla, por eso.
Edificio uno
- Arrastre pestañas a la página. Obtienes tres pestañas, cada una con un contenedor vacío en su interior.
- Cambie el nombre de las filas en el repetidor de pestañas. El título es el único campo, que es la parte que sorprende a las personas que vienen del widget anterior.
- Haga clic en una pestaña en el lienzo para abrir su panel y luego arrastre los widgets al contenedor.
- Repita para cada pestaña. Agregue o elimine filas con el repetidor, como en cualquier otro lugar.
Los controles que importan
La dirección mueve la tira del título. Arriba y abajo lo mantienen horizontal, mientras que Inicio y Fin lo convierten en una columna lateral, que es el diseño de pestañas verticales. Inicio y fin siguen la dirección del texto, por lo que giran en idiomas de derecha a izquierda.
Justifique y alinee el espacio entre identificadores de títulos: si los títulos se estiran para llenar la tira o se sientan juntos, y cómo se alinea el texto dentro de cada uno.
El desplazamiento horizontal, en configuraciones adicionales, evita que se envuelva una larga fila de títulos. En cambio, la tira se desplaza hacia los lados y los visitantes la deslizan o arrastran.
Breakpoint se encuentra en la misma sección y es el control que vale la pena conocer. Por debajo del ancho que elijas, la tira cambia a un diseño de acordeón vertical, con cada título encima de su propio panel. Móvil es el predeterminado, que suele ser el correcto.
Lo que puedes poner en un panel
Cualquier cosa. El panel es un contenedor normal, por lo que se aplica la lista completa de widgets:
- Un formulario de contacto en la pestaña “Consultar”
- Una galería de imágenes sobre “Fotos”
- Una cuadrícula de bucle que extrae productos relacionados en “También te puede gustar”
- Una tabla de precios de “Planes”
- Un conjunto anidado de pestañas dentro de una pestaña, de donde provienen las búsquedas de “pestañas dentro de pestañas”
Las pestañas interiores son posibles y, en la práctica, rara vez es una buena idea. Dos niveles de tira de pestañas significan que el visitante debe recordar qué combinación eligió. Si el contenido es realmente bidimensional, las pestañas del exterior y un acordeón del interior se leen mucho mejor.
Tres límites
El título de una pestaña toma texto y un ícono opcional, por lo que no hay títulos de imágenes. Si un título tiene que ser un logotipo o una foto de producto, el widget principal no puede hacerlo y un complemento con un control de tipo de icono sí puede hacerlo.
Los paneles cambian al hacer clic, que es el valor predeterminado correcto para las pantallas táctiles, y no hay configuración para el comportamiento de desplazamiento que utilizan algunos diseños.
El estilo comienza desde cero. No hay ajustes preestablecidos, por lo que el widget aparece en formato simple y cada borde, color y relleno es una decisión que tomas. Eso es flexibilidad, y en una fecha límite también son veinte minutos.
Cuando un widget complementario es el que mejor se adapta
Esos tres límites son aproximadamente la lista de funciones de un widget de pestañas complementarias. El Widget de pestañas de complementos maestros comienza desde un estilo preestablecido, toma un ícono o una imagen en cada título e cambia de panel al pasar el cursor si configura Tab Effect de esa manera. No se necesita Elementor Pro para nada de eso.
La operación se ejecuta en sentido contrario: sus paneles toman contenido del editor, por lo que colocar un formulario dentro significa apuntar el tipo de contenido a una plantilla guardada, que es una opción profesional. Los contenedores en los paneles son lo único que hace el widget principal.
La línea divisoria atraviesa el panel. El contenido interactivo en su interior significa pestañas anidadas. Una tira de pestañas que tiene que parecerse a algo específico significa un complemento.
Preguntas frecuentes
¿cuál es la diferencia entre pestañas y pestañas anidadas en Elementor?
Nested Tabs coloca un contenedor en cada panel para que puedas colocar widgets en su interior. El antiguo widget Tabs tenía un campo de contenido simple y está en desuso.
¿necesito habilitar los elementos anidados primero?
No. Está activo de forma predeterminada en Elementor actual y no se puede desactivar, por lo que ya no aparece en Experimentos. Los tutoriales más antiguos que le indican que lo habilite están desactualizados.
¿nested Tabs está disponible en Elementor gratuito?
Sí, es parte del complemento gratuito y es lo que obtienes cuando arrastras el widget Tabs a una página.
¿puedo anidar pestañas dentro de pestañas?
Sí, porque un panel es un contenedor que acepta cualquier widget, incluido otro widget de pestañas. Se vuelve confuso rápidamente, por lo que un acordeón en el nivel interior suele ser más claro.
¿cómo hago que las pestañas anidadas colapsen en un acordeón?
Abra Configuraciones adicionales y establezca Breakpoint. Por debajo de ese ancho, la tira cambia a un diseño de acordeón vertical. Móvil es el predeterminado.
¿Puede el título de una pestaña utilizar una imagen?
No en el widget principal. Los títulos toman texto y un ícono opcional. Un widget complementario con un control de tipo de icono puede usar una imagen.
Pensamientos finales
Nested Tabs es a quien hay que acceder cuando algo tiene que suceder dentro del panel, y el punto de interrupción del acordeón por sí solo hace que valga la pena reconstruir bloques de pestañas viejos. No te da ventaja en el estilo ni en la imagen de un título, que es el complemento de espacio que llenan los widgets.
Lectura relacionada
