Conclusiones clave
- Las pestañas verticales colocan los títulos en una columna a la izquierda o a la derecha, con el panel al lado. Se adaptan a títulos largos y seis o más secciones, donde se envolvería una franja horizontal.
- El propio widget Tabs de Elementor hace esto con el control de dirección configurado en Inicio o Fin. No se necesita CSS.
- El Widget de pestañas de complementos maestros tiene un preajuste de estilo Vertical Tabs, que llega con un estilo más que simple.
- Por debajo de aproximadamente 768 px no hay suficiente ancho para una columna lateral, por lo que ambas rutas se apilan. Sólo el widget principal se convierte en un acordeón.
- Elija el núcleo si los widgets van dentro de los paneles y el complemento si la columna de pestañas necesita íconos o una apariencia terminada.
Las pestañas horizontales se rompen una vez que los títulos se vuelven largos o numerosos. Seis títulos en una columna de 1200 px se envuelven en dos líneas o reducen el texto hasta que nadie los lee.
Las pestañas verticales giran la tira de lado: una estrecha columna de títulos con el panel activo al lado. Cada título recibe una línea completa, por lo que “Envío y devoluciones” cabe sin envolver. A continuación se muestran ambas formas de construirlo.
Tabla de contenidos
Cuando la vertical vence a la horizontal
Vertical es el mejor diseño cuando cualquiera de estos es cierto:
- Más de cinco secciones, donde una tira se envuelve pero una columna se vuelve más alta.
- Títulos de más de dos palabras. “Garantía y reparaciones” necesita una línea completa.
- Paneles de muy diferentes alturas, ya que la columna del título permanece colocada mientras el panel cambia de tamaño.
- Contenido que se lee como un menú: secciones de documentación, listas de servicios, preguntas frecuentes agrupadas.
Manténgase horizontal durante tres o cuatro títulos cortos. Una columna lateral come aproximadamente un cuarto del ancho y con tres pestañas que no valen la pena intercambiar.
Método 1: Control de dirección del elementador
El widget Tabs en Elementor maneja esto sin un complemento.
- Arrastre el widget Tabs a la página.
- En Diseño, establezca la Dirección en Inicio para los títulos de la izquierda o Fin para los títulos de la derecha.
- Establezca Alinear título para controlar si el texto del título se encuentra a la izquierda, al centro o a la derecha dentro de la columna.
- Construya cada panel dentro de su contenedor como de costumbre.
Inicio coloca la columna de la izquierda en un idioma de izquierda a derecha y cambia automáticamente de derecha a izquierda, razón por la cual los valores se denominan Inicio y Fin en lugar de Izquierda y Derecha.
El resultado es funcional y sin estilo: títulos de texto en una columna, el panel al lado y cada borde y color que queda para la pestaña Estilo.
Método 2: las pestañas verticales preestablecidas
El widget Master Addons trata el diseño como un ajuste preestablecido en lugar de una dirección, por lo que el estilo viene con él.
- Arrastre el widget Tabs.
- Establezca el estilo preestablecido en pestañas verticales.
- Agregue un elemento repetidor por sección, cada uno con un título de pestaña.
- Establezca el tipo de icono en icono o imagen si los títulos necesitan uno, luego elija el icono.
- Escriba el contenido del panel y cambie Establecer como predeterminado en cualquier pestaña que se abra primero.
La columna llega con su propio fondo, espaciado y estado activo, por lo que un bloque utilizable tarda un minuto en lugar de una sesión de estilo. El límite es el mismo que siempre tiene el complemento: los paneles contienen contenido del editor, por lo que un formulario o una galería dentro de una pestaña significa una plantilla guardada en Pro o el widget principal.
Una variante más silenciosa: borde activo izquierdo
Vale la pena conocer el tercer ajuste preestablecido. El borde activo izquierdo mantiene la columna vertical pero elimina el aspecto del cuadro: los títulos se encuentran en el fondo de la página y el activo está marcado con una barra de color en su borde izquierdo.
Este es el que hay que buscar en páginas de estilo documentación, donde una columna de pestañas pesadas lucha contra el cuerpo del texto en busca de atención.
¿Qué pasa en un teléfono
Una pantalla de 390px no tiene espacio para una columna lateral más un panel, por lo que ambas rutas abandonan el diseño vertical.
El widget principal se apila en un acordeón vertical debajo del punto de interrupción que elija en Configuración adicional, con cada título directamente encima de su propio panel. El widget complementario apila los títulos en una columna de ancho completo con el panel debajo, lo que funciona, aunque no es un acordeón: el panel abierto permanece debajo de la lista completa de títulos.
De cualquier manera, verifique la vista del teléfono antes de publicarlo. El diseño que diseñó en el escritorio no es el diseño que ve un visitante del teléfono.
Qué método utilizar
| Situación | Método |
|---|---|
| Formularios, galerías o tablas de precios en el interior de los paneles | Core Tabs, dirección configurada para Inicio |
| Necesita ser acordeón en los teléfonos | Pestañas centrales |
| Títulos a la derecha en lugar de a la izquierda | Pestañas principales, dirección establecida en Fin |
| Iconos o imágenes en los títulos | Complemento, pestañas verticales preestablecidas |
| Columna con estilo sin trabajo de pestaña Estilo | Complemento, pestañas verticales preestablecidas |
| Navegador lateral estilo documentación simple | Complemento, ajuste preestablecido del borde activo izquierdo |
| Los paneles se encienden flotando | Complemento, efecto de pestaña configurado en Flotar |
Preguntas frecuentes
¿puede Elementor crear pestañas verticales sin un complemento?
Sí. Configure el control de dirección del widget Tabs en Inicio o Fin y los títulos se moverán a una columna lateral.
¿por qué los valores de dirección se llaman Inicio y Fin, no Izquierda y Derecha?
Entonces el diseño cambia correctamente en los idiomas de derecha a izquierda. Inicio es el lado en el que comienza el texto.
¿Cuántas pestañas funcionan en un diseño vertical?
Seis a diez es cómodo. Pasado eso, la columna se vuelve más alta que el panel al lado, lo cual parece extraño.
¿las pestañas verticales permanecen verticales en el móvil?
No. No hay suficiente ancho, por lo que ambas rutas se apilan. El widget principal se convierte en acordeón; el complemento apila títulos encima del panel.
¿Puedo poner un formulario dentro de una pestaña vertical?
Con el widget principal, sí, porque cada panel es un contenedor. Con el complemento, el equivalente apunta el tipo de contenido a una plantilla guardada, que es una opción Pro.
Pensamientos finales
Volver a la vertical es la forma de resolver un problema de ancho sin acortar los títulos. El control de dirección de Elementor lo hace sin complementos y mantiene contenedores en los paneles, lo cual importa si hay algo interactivo en el interior. Los ajustes preestablecidos del complemento importan cuando la columna del título tiene que verse terminada sin que usted la estile. Ambos tardan aproximadamente el mismo tiempo en construirse, por lo que lo que vive en el panel lo decide.
Lectura relacionada
