Conclusiones clave
- Elementor tiene widgets de dos pestañas. El original lleva un aviso de desaprobación desde la versión 3.8 y el widget Nested Tabs lo reemplazó.
- Nested Tabs coloca un contenedor en cada panel, de modo que un formulario, una galería o una tabla de precios puedan estar dentro de una pestaña.
- Nested Tabs también cambia a un diseño de acordeón vertical debajo del punto de interrupción que elijas, que es el comportamiento que la mayoría de la gente desea en los teléfonos.
- Un widget complementario como Widget de pestañas de complementos maestros es la ruta cuando la tira de pestañas en sí es el problema de diseño: títulos de imágenes, ajustes preestablecidos de estilo o activación del desplazamiento.
- Elija por lo que hay dentro del panel. Los widgets internos significan núcleo. Una tira de pestañas con estilo sobre texto significa un complemento.
Las pestañas hacen un trabajo: mantener una página larga corta. No es necesario que todas las especificaciones, entregas y garantías estén en la pantalla a la vez, y un visitante que quiera una de ellas no debe pasar por las otras dos.
Elementor le ofrece dos widgets para esto y los complementos le brindan más, por lo que la búsqueda en el panel de “pestañas” es confusa. Esta guía cubre las tres rutas, lo que cada una puede contener y cómo se comportan en un teléfono.
Tabla de contenidos
Qué widget de pestañas tienes realmente
Abra el panel de widgets y busque pestañas. En una instalación actual de Elementor, obtiene el widget Tabs y lo que arrastra es la versión anidada. El widget anterior todavía está en el código de las páginas que ya lo usan y muestra un aviso en el panel cuando edita uno: cualquier widget de pestañas nuevo que arrastre será el nuevo con capacidades anidadas. Ese aviso ha estado ahí desde Elementor 3.8.
Entonces, en la práctica hay tres cosas que podrías estar usando y no son iguales.
| cuerda | Qué hay en un panel | De donde viene |
|---|---|---|
| Pestañas (anidadas) | Un contenedor, es decir, cualquier widget | Elementor, gratis |
| Pestañas (antiguas) | Sólo contenido del editor | Elementor, obsoleto desde 3.8 |
| Widget de pestañas de complemento | Contenido del editor o una plantilla guardada con Pro | Complementos maestros y otros |
Ruta 1: el widget Nested Tabs
Este es el punto de partida predeterminado y correcto. Arrastre pestañas a la página y obtendrá tres pestañas, cada una con un contenedor vacío.
- Arrastre el widget Tabs a la página.
- Cambie el nombre de cada elemento del repetidor de pestañas. El título es todo lo que contiene el repetidor, porque el contenido vive en el contenedor.
- Haga clic en una pestaña en el lienzo y luego construya dentro de su contenedor como lo haría en cualquier otro lugar.
- En Diseño, use Dirección para mover la tira: Arriba, Abajo, Inicio o Fin, donde Inicio y Fin colocan los títulos en una columna lateral.
- En configuraciones adicionales, establezca Desplazamiento horizontal si los títulos no encajan y establezca el punto de interrupción donde la tira debería convertirse en acordeón.
El contenedor es el punto completo. Un formulario de contacto, una galería, una tabla de precios o una cuadrícula de bucles funcionan dentro de una pestaña, y nada más en esta lista puede hacer eso. La cuestión es que la tira de pestañas en sí es bastante sencilla: títulos con un icono opcional y sin ningún ajuste preestablecido para comenzar.
Ruta 2: un widget de pestañas complementarias
Existen widgets de complementos para la otra mitad del problema, donde la tira es el diseño. El widget Master Addons crea cada pestaña a partir de una fila repetidora que tiene sus propios campos.
La construcción es:
- Arrastre el widget y elija un estilo preestablecido.
- Agregue un elemento repetidor por pestaña, con un título de pestaña.
- Establezca el tipo de icono en Ninguno, Icono o Imagen, luego elija el icono o cargue la imagen.
- Escriba el contenido del panel en el editor o en el punto Pro Tipo de contenido en una sección, widget o plantilla de página guardada.
- Configure Tab Effect para hacer clic o pasar el cursor y cambie Set como predeterminado en la pestaña que debería abrirse primero.
Lo que renuncias es el contenedor. Los paneles toman contenido del editor, por lo que un formulario dentro de una pestaña significa la ruta Pro con una plantilla guardada o el widget principal.
Ruta 3: el antiguo widget de Tabs
Si está editando una página creada hace unos años, es posible que esté mirando el widget original: un repetidor de elementos de pestañas con un título y un campo de contenido, además de un control de posición horizontal o vertical. Todavía funciona y Elementor todavía lo envía para que las páginas antiguas no se rompan.
No hay ninguna razón para iniciar una nueva página con él. Si ya estás allí, la pregunta es si reconstruir el bloque como Nested Tabs vale la pena unos minutos, y normalmente lo es, porque obtienes el punto de interrupción del acordeón y el contenedor.
Qué ruta se adapta al trabajo
| Lo que necesitas | Usar |
|---|---|
| Un formulario, galería o tabla de precios dentro de una pestaña | Pestañas anidadas |
| Pestañas que se convierten en acordeón en los teléfonos | Pestañas anidadas |
| Una imagen en el título de cada pestaña | Widget de complemento |
| Una tira diseñada sin estilo desde cero | Widget de complemento, a través de los ajustes preestablecidos |
| Encendido de paneles en vuelo estacionario | Widget de complemento |
| La misma plantilla guardada se reutilizó en varios bloques de pestañas | Widget de complemento en Pro |
| Editar una página creada antes de Elementor 3.8 | El widget antiguo o reconstrúyelo |
Cinco cosas que vale la pena hacer bien
- Mantenga los títulos en una o dos palabras. Los títulos largos se envuelven y una tira envuelta deja de leerse como una tira.
- Cuatro pestañas es un máximo cómodo en el escritorio y tres son mejores cuando los títulos llevan íconos.
- Decide qué se abre primero. El widget principal siempre abre la pestaña uno, así que coloque el panel que la mayoría de la gente quiere allí.
- Todo lo que un visitante debe leer pertenece a la página y no a un clic en la pestaña cuatro.
- Verifique la vista del teléfono antes de publicar, porque las dos rutas se comportan de manera diferente allí.
Preguntas frecuentes
¿elementor tiene un widget de pestañas en la versión gratuita?
Sí. El widget Tabs está en el complemento gratuito y la versión actual es la anidada, que coloca un contenedor dentro de cada panel.
¿qué pasó con el antiguo widget Tabs?
Está en desuso. Dado que Elementor 3.8, el panel muestra un aviso cuando editas uno, y cualquier widget de pestañas nuevo que arrastres es la versión anidada.
¿Puedo poner un formulario o una galería dentro de una pestaña?
Con Nested Tabs, sí, porque cada panel es un contenedor. Con un widget de complemento, el panel toma contenido del editor, por lo que el equivalente es una plantilla guardada en Pro.
¿Puede el título de una pestaña utilizar una imagen en lugar de texto?
No en el widget principal. Los widgets complementarios con un control de tipo de icono pueden usar un icono o una imagen en el título.
¿Cuántas pestañas son demasiadas?
Pasados los cuatro o cinco, la tira se envuelve en las computadoras portátiles y se vuelve ilegible en los teléfonos. En ese momento, un acordeón suele tener el mejor diseño.
Pensamientos finales
Lo que hay dentro del panel decide esto. Los widgets en un panel significan pestañas anidadas, cada vez. Una tira que tiene que parecerse a algo específico, con títulos de imágenes o conmutación flotante, significa un complemento. Ambos son una compilación de diez minutos una vez que sabes en cuál estás.
Lectura relacionada
