{"id":7359,"date":"2025-02-06T08:04:31","date_gmt":"2025-02-06T08:04:31","guid":{"rendered":"https:\/\/tableberg.com\/?p=7359"},"modified":"2025-02-06T08:04:31","modified_gmt":"2025-02-06T08:04:31","slug":"como-anadir-pestanas-anidadas-en-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/es\/how-to-add-nested-tabs-in-wordpress\/","title":{"rendered":"C\u00f3mo a\u00f1adir pesta\u00f1as anidadas en WordPress (Pasos sencillos)"},"content":{"rendered":"<p>Cuando el contenido est\u00e1 bien estructurado, los usuarios tienden a quedarse m\u00e1s tiempo. Las pesta\u00f1as anidadas permiten mantener el contenido ordenado, interactivo y f\u00e1cil de usar, lo que resulta perfecto para documentaci\u00f3n, tablas de precios y preguntas frecuentes.<\/p>\n\n\n\n<p>Permiten a los usuarios pasar de una secci\u00f3n a otra sin salir de la p\u00e1gina, para que todo est\u00e9 accesible en un espacio compacto. En lugar de una p\u00e1gina desordenada llena de desplazamientos interminables, lo que se obtiene es un dise\u00f1o bien estructurado en el que m\u00faltiples capas de informaci\u00f3n permanecen al alcance de la mano para facilitar la navegaci\u00f3n.<\/p>\n\n\n\n<p>Ahora, te alegrar\u00e1 saber que puedes a\u00f1adir pesta\u00f1as anidadas en WordPress sin ninguna complejidad. Todo lo que se necesita es la herramienta adecuada, y <a href=\"https:\/\/wordpress.org\/plugins\/ultimate-blocks\/\" target=\"_blank\" rel=\"noopener\">Bloques definitivos<\/a> es precisamente eso. Nuestro art\u00edculo te ayuda a encontrar la respuesta sobre c\u00f3mo a\u00f1adir pesta\u00f1as anidadas en WordPress de la forma m\u00e1s sencilla posible. <\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>A\u00f1adir pesta\u00f1as anidadas en WordPress&nbsp;<\/strong><\/h2>\n\n\n\n<p>Para usuarios de Gutenberg, <a href=\"https:\/\/tableberg.com\/es\/revision-de-ultimate-blocks\/\">Bloques definitivos<\/a> es la opci\u00f3n ideal para a\u00f1adir pesta\u00f1as anidadas con facilidad. Sin embargo, con 26 bloques diferentes construidos para diferentes prop\u00f3sitos, Ultimate Blocks no es solo para pesta\u00f1as. Es una soluci\u00f3n todo en uno que te equipa con las herramientas adecuadas para estructurar contenido, mejorar la claridad y a\u00f1adir elementos interactivos en Gutenberg.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Paso 1: Preparar el plugin<\/strong><\/h2>\n\n\n\n<p>En primer lugar, debes dirigirte a tu panel de control de WordPress. Desde all\u00ed, haga clic en <strong>Plugins<\/strong> en el men\u00fa de la izquierda y, a continuaci\u00f3n, seleccione <strong>A\u00f1adir nuevo<\/strong>. En la barra de b\u00fasqueda, escriba <strong>Ultimate Blocks, <\/strong>y el resultado deber\u00eda aparecer en cuesti\u00f3n de segundos. Una vez que el plugin aparezca en el resultado, haga clic en <strong>Instalar ahora<\/strong>. Dale un segundo para que funcione, y cuando termine, activa el plugin y listo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"371\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/Ultimate-Blocks-installation-1024x371.png\" alt=\"Instalar y activar Ultimate Blocks\" class=\"has-border-color has-primary-accent-border-color wp-image-7361\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/Ultimate-Blocks-installation-1024x371.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/Ultimate-Blocks-installation-300x109.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/Ultimate-Blocks-installation-768x278.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/Ultimate-Blocks-installation-1536x556.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/Ultimate-Blocks-installation-18x7.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/Ultimate-Blocks-installation.png 1884w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Paso 2: Insertar el bloque de contenido con pesta\u00f1as<\/strong><\/h2>\n\n\n\n<p>Abre tu post o p\u00e1gina en el editor de Gutenberg donde quieras a\u00f1adir tus pesta\u00f1as anidadas. Desde el editor, haz clic en el icono <strong>+<\/strong> busque <strong>Contenido por pesta\u00f1as<\/strong>e ins\u00e9rtelo en su contenido. Esta ser\u00e1 la base de su dise\u00f1o con pesta\u00f1as.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1692\" height=\"714\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2-1024x432.png\" alt=\"A\u00f1adir el bloque Contenido por pesta\u00f1as\" class=\"has-border-color has-primary-accent-border-color wp-image-7362\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2-1024x432.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2-300x127.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2-768x324.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2-1536x648.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2.png 1692w\" sizes=\"auto, (max-width: 1692px) 100vw, 1692px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Paso 3: Crear pesta\u00f1as y pesta\u00f1as anidadas&nbsp;<\/strong><\/h2>\n\n\n\n<p>Una vez que el <strong>Contenido por pesta\u00f1as<\/strong> tendr\u00e1 una \u00fanica pesta\u00f1a por defecto. Para crear varias pesta\u00f1as en la primera capa, haga clic en el bot\u00f3n <strong>\"+\"<\/strong> y a\u00f1ada tantas como necesite. Puede cambiar el nombre de cada pesta\u00f1a haciendo clic directamente en el t\u00edtulo y escribiendo el nuevo nombre. Cada pesta\u00f1a act\u00faa como un contenedor en el que puedes insertar texto, im\u00e1genes o cualquier otro bloque de contenido.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"423\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.1-1024x423.png\" alt=\"A\u00f1adir pesta\u00f1as\" class=\"has-border-color has-primary-accent-border-color wp-image-7363\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.1-1024x423.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.1-300x124.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.1-768x317.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.1-1536x635.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.1-18x7.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.1.png 1621w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Para crear <strong>pesta\u00f1as anidadas<\/strong>seleccione una pesta\u00f1a de la primera capa e inserte otra <strong>Contenido por pesta\u00f1as<\/strong> dentro de ella utilizando el insertador de bloques. Este nuevo bloque funcionar\u00e1 como un sistema de pesta\u00f1as de segundo nivel dentro de la pesta\u00f1a seleccionada. Puede repetir el mismo proceso para a\u00f1adir m\u00e1s capas anidadas y estructurar su contenido en varios niveles.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"475\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.2-1024x475.png\" alt=\"Fichas anidadas\" class=\"has-border-color has-primary-accent-border-color wp-image-7364\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.2-1024x475.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.2-300x139.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.2-768x356.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.2-1536x713.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.2-18x8.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/3.2.png 1884w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Paso 4: Personalizar hasta que quede perfecto<\/strong><\/h2>\n\n\n\n<p>Despu\u00e9s de haber colocado el contenido dentro de cada pesta\u00f1a, es posible que desee introducir algunos cambios en la perspectiva de sus pesta\u00f1as. Desde la <strong>Ajustes generales<\/strong> puede cambiar el <strong>tipo de ficha<\/strong>A\u00f1adir<strong> anclajes de pesta\u00f1a<\/strong>y, en la versi\u00f3n Pro, incluye<strong> iconos<\/strong>, <strong>im\u00e1genes<\/strong>y <strong>textos secundarios<\/strong> con el t\u00edtulo.<\/p>\n\n\n\n<p>En<strong> Configuraci\u00f3n de estilos<\/strong>puede ajustar el <strong>colores<\/strong> para pesta\u00f1as, t\u00edtulos y contenido, cambie el <strong>dise\u00f1o de pesta\u00f1a<\/strong> para cambiar entre <strong>horizontal y <\/strong><a href=\"https:\/\/tableberg.com\/es\/como-anadir-pestanas-verticales-en-wordpress\/\"><strong>vertical<\/strong><\/a><strong> pesta\u00f1as<\/strong> y personalizar el <strong>borde y dimensiones<\/strong> a juego con su dise\u00f1o.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"567\" height=\"992\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/4.png\" alt=\"Panel de configuraci\u00f3n de bloques\" class=\"has-border-color has-primary-accent-border-color wp-image-7367\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/4.png 567w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/4-171x300.png 171w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/4-7x12.png 7w\" sizes=\"auto, (max-width: 567px) 100vw, 567px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<p><strong>Paso 5: Vista previa y publicaci\u00f3n de las fichas anidadas<\/strong><\/p>\n\n\n\n<p>Antes de activar las pesta\u00f1as anidadas, haga clic en el bot\u00f3n <strong>Vista previa<\/strong> para comprobar que todo funciona como se espera. Aseg\u00farese de que todas las pesta\u00f1as cambian sin problemas y que las pesta\u00f1as anidadas se muestran correctamente. Si necesita realizar alg\u00fan ajuste, vuelva atr\u00e1s y modifique la configuraci\u00f3n. Cuando todo parezca correcto, haga clic en <strong>Publique<\/strong> o <strong>Actualizaci\u00f3n<\/strong> para activar los cambios.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"533\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/5.1-1024x533.png\" alt=\"Previsualizar y publicar\" class=\"has-border-color has-primary-accent-border-color wp-image-7390\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/5.1-1024x533.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/5.1-300x156.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/5.1-768x400.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/5.1-1536x800.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/5.1-18x9.png 18w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/5.1.png 1606w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>He aqu\u00ed una demostraci\u00f3n r\u00e1pida de pesta\u00f1as anidadas en acci\u00f3n.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"946\" height=\"728\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-06_13-55-10.gif\" alt=\"\" class=\"wp-image-7411\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Conclusi\u00f3n<\/strong><\/h4>\n\n\n\n<p>Las pesta\u00f1as anidadas hacen que la navegaci\u00f3n por el contenido en capas en WordPress sea m\u00e1s intuitiva, y Ultimate Blocks ofrece una forma sencilla de implementarlas en el editor Gutenberg. Sin embargo, como no admite pesta\u00f1as anidadas reales, tendr\u00e1s que insertar manualmente bloques de contenido con pesta\u00f1as entre s\u00ed para conseguir el efecto. Si utilizas un editor diferente, <a href=\"https:\/\/tableberg.com\/es\/mejores-plugins-para-pestanas-de-wordpress\/\">existen alternativas<\/a>pero no todos los plugins de pesta\u00f1as admiten el anidamiento multinivel por defecto. Prueba el m\u00e9todo que hemos revelado en este art\u00edculo, 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\u00e1s la diferencia.<\/p>","protected":false},"excerpt":{"rendered":"<p>When your content is structured well, users tend to stick around longer. Nested tabs let you keep things tidy, interactive, and user-friendly, which is a perfect fit for documentation, pricing tables, and FAQs. They work by allowing users to switch between different sections without leaving the page to keep everything accessible in a compact space. [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":7360,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[],"class_list":["post-7359","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/Nested-Tabs-850-x-335-px.png","author_info":{"display_name":"Moinul Islam","author_link":"https:\/\/tableberg.com\/es\/author\/marufmoinul27\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts\/7359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/comments?post=7359"}],"version-history":[{"count":16,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts\/7359\/revisions"}],"predecessor-version":[{"id":7412,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts\/7359\/revisions\/7412"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/media\/7360"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/media?parent=7359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/categories?post=7359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/tags?post=7359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}