Cuando el contenido está bien estructurado, los usuarios tienden a quedarse más tiempo. Las pestañas anidadas permiten mantener el contenido ordenado, interactivo y fácil de usar, lo que resulta perfecto para documentación, tablas de precios y preguntas frecuentes.
Permiten a los usuarios pasar de una sección a otra sin salir de la página, para que todo esté accesible en un espacio compacto. En lugar de una página desordenada llena de desplazamientos interminables, lo que se obtiene es un diseño bien estructurado en el que múltiples capas de información permanecen al alcance de la mano para facilitar la navegación.
Ahora, te alegrará saber que puedes añadir pestañas anidadas en WordPress sin ninguna complejidad. Todo lo que se necesita es la herramienta adecuada, y Bloques definitivos es precisamente eso. Nuestro artículo te ayuda a encontrar la respuesta sobre cómo añadir pestañas anidadas en WordPress de la forma más sencilla posible.
Añadir pestañas anidadas en WordPress
Para usuarios de Gutenberg, Bloques definitivos es la opción ideal para añadir pestañas anidadas con facilidad. Sin embargo, con 26 bloques diferentes construidos para diferentes propósitos, Ultimate Blocks no es solo para pestañas. Es una solución todo en uno que te equipa con las herramientas adecuadas para estructurar contenido, mejorar la claridad y añadir elementos interactivos en Gutenberg.
Paso 1: Preparar el plugin
En primer lugar, debes dirigirte a tu panel de control de WordPress. Desde allí, haga clic en Plugins en el menú de la izquierda y, a continuación, seleccione Añadir nuevo. En la barra de búsqueda, escriba Ultimate Blocks, y el resultado debería aparecer en cuestión de segundos. Una vez que el plugin aparezca en el resultado, haga clic en Instalar ahora. Dale un segundo para que funcione, y cuando termine, activa el plugin y listo.
Paso 2: Insertar el bloque de contenido con pestañas
Abre tu post o página en el editor de Gutenberg donde quieras añadir tus pestañas anidadas. Desde el editor, haz clic en el icono + busque Contenido por pestañase insértelo en su contenido. Esta será la base de su diseño con pestañas.
Paso 3: Crear pestañas y pestañas anidadas
Una vez que el Contenido por pestañas tendrá una única pestaña por defecto. Para crear varias pestañas en la primera capa, haga clic en el botón "+" y añada tantas como necesite. Puede cambiar el nombre de cada pestaña haciendo clic directamente en el título y escribiendo el nuevo nombre. Cada pestaña actúa como un contenedor en el que puedes insertar texto, imágenes o cualquier otro bloque de contenido.
Para crear pestañas anidadasseleccione una pestaña de la primera capa e inserte otra Contenido por pestañas dentro de ella utilizando el insertador de bloques. Este nuevo bloque funcionará como un sistema de pestañas de segundo nivel dentro de la pestaña seleccionada. Puede repetir el mismo proceso para añadir más capas anidadas y estructurar su contenido en varios niveles.
Paso 4: Personalizar hasta que quede perfecto
Después de haber colocado el contenido dentro de cada pestaña, es posible que desee introducir algunos cambios en la perspectiva de sus pestañas. Desde la Ajustes generales puede cambiar el tipo de fichaAñadir anclajes de pestañay, en la versión Pro, incluye iconos, imágenesy textos secundarios con el título.
En Configuración de estilospuede ajustar el colores para pestañas, títulos y contenido, cambie el diseño de pestaña para cambiar entre horizontal y vertical pestañas y personalizar el borde y dimensiones a juego con su diseño.
Paso 5: Vista previa y publicación de las fichas anidadas
Antes de activar las pestañas anidadas, haga clic en el botón Vista previa para comprobar que todo funciona como se espera. Asegúrese de que todas las pestañas cambian sin problemas y que las pestañas anidadas se muestran correctamente. Si necesita realizar algún ajuste, vuelva atrás y modifique la configuración. Cuando todo parezca correcto, haga clic en Publique o Actualización para activar los cambios.
He aquí una demostración rápida de pestañas anidadas en acción.
Conclusión
Las pestañas anidadas hacen que la navegación por el contenido en capas en WordPress sea más intuitiva, y Ultimate Blocks ofrece una forma sencilla de implementarlas en el editor Gutenberg. Sin embargo, como no admite pestañas anidadas reales, tendrás que insertar manualmente bloques de contenido con pestañas entre sí para conseguir el efecto. Si utilizas un editor diferente, existen alternativaspero no todos los plugins de pestañas admiten el anidamiento multinivel por defecto. Prueba el método que hemos revelado en este artículo, comprueba si se ajusta a tus necesidades y, si no, explora otros plugins que puedan funcionarte mejor. No te contengas y ponte manos a la obra ya. Empieza a organizar tu contenido y verás la diferencia.
