{"id":907,"date":"2025-07-14T18:22:29","date_gmt":"2025-07-14T18:22:29","guid":{"rendered":"https:\/\/tableberg.com\/?p=907"},"modified":"2025-07-14T18:22:31","modified_gmt":"2025-07-14T18:22:31","slug":"como-crear-pestanas-en-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/es\/how-to-create-tabs-in-wordpress\/","title":{"rendered":"C\u00f3mo crear pesta\u00f1as en WordPress para organizar el contenido"},"content":{"rendered":"

Si tienes que publicar mucha informaci\u00f3n de varios tipos en entradas de blog o p\u00e1ginas de forma concisa, las pesta\u00f1as pueden ser un elemento web \u00fatil para hacerlo. Te permiten organizar el contenido en secciones separadas para que los usuarios puedan explorar y encontrar selectivamente la informaci\u00f3n que necesitan.<\/p>\n\n\n\n

Con el editor de bloques Gutenberg, puedes a\u00f1adir f\u00e1cilmente pesta\u00f1as a las entradas de tu blog. En este art\u00edculo, te mostraremos c\u00f3mo crear pesta\u00f1as en WordPress para organizar el contenido. Antes de eso, responderemos a algunas preguntas b\u00e1sicas.<\/p>\n\n\n\n

\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\u00bfQu\u00e9 son las pesta\u00f1as?<\/strong><\/div>\n\t\t\t<\/div>
\n\t\t\t\t
\u00bfCu\u00e1ndo utilizar pesta\u00f1as? <\/strong><\/div>\n\t\t\t<\/div><\/div>\n\t\t\t<\/div>\n\t\t\t
\n\n

Las pesta\u00f1as sirven como herramienta de navegaci\u00f3n, permiti\u00e9ndole mostrar mucha informaci\u00f3n en varias secciones. Como resultado, los usuarios no tienen que depender de un desplazamiento excesivo para explorar una amplia informaci\u00f3n en tu post o p\u00e1gina.<\/p>\n\n\n\n

Proporcionan un formato estructurado para que los usuarios puedan encontrar la informaci\u00f3n espec\u00edfica que buscan haciendo clic en ellas. Normalmente, las pesta\u00f1as se utilizan para mostrar las p\u00e1ginas web en las secciones hero y header.<\/p>\n\n\n\n

Pero hoy en d\u00eda, con la ayuda de ciertos plugins de Gutenberg, puedes crear contenido con pesta\u00f1as en cualquier lugar de cualquier publicaci\u00f3n o p\u00e1gina.<\/p>\n\n<\/div>

\n\n

El contenido tabulado funciona excepcionalmente cuando se tiene una gran cantidad de informaci\u00f3n que necesita ser mostrada en un formato tabular. Este elemento es especialmente eficaz para organizar los siguientes tipos de informaci\u00f3n.<\/p>\n\n\n\n

Descripciones de los productos:<\/strong> Puede utilizar este bloque para cubrir las especificaciones del producto, las caracter\u00edsticas y las opiniones de los clientes en pesta\u00f1as separadas.<\/p>\n\n\n\n

Oferta de servicios:<\/strong> Si tiene varios planes o paquetes de servicios, es mejor mostrarlos en secciones separadas.<\/p>\n\n\n\n

Planes de precios:<\/strong> Ya es una pr\u00e1ctica habitual mostrar varios planes de precios en distintas pesta\u00f1as de los sitios web.<\/p>\n\n\n\n

Preguntas frecuentes<\/strong>: Aunque a la mayor\u00eda de la gente le gusta utilizar los bloques de preguntas frecuentes y de alternancia de contenidos para la secci\u00f3n de preguntas frecuentes, tambi\u00e9n puede utilizar el bloque de pesta\u00f1as para cubrir esta secci\u00f3n.<\/p>\n\n\n\n

Informaci\u00f3n comparativa:<\/strong> Si hay informaci\u00f3n que se presentar\u00eda mejor en una secci\u00f3n contigua, el bloque de pesta\u00f1as es \u00fatil en este caso.<\/p>\n\n<\/div><\/div>\n\t\t<\/div>\n\n\n\n

Crear pesta\u00f1as para cualquier contenido en WordPress<\/h2>\n\n\n\n

La biblioteca de bloques por defecto de Gutenberg no tiene el bloque de pesta\u00f1as. Debes usar un plugin como Bloques definitivos<\/a> para tenerlo en la biblioteca de plugins. El plugin tiene 25+ plugins adicionales mediante los cuales puedes llevar tu dise\u00f1o web y marketing de contenidos al siguiente nivel.<\/p>\n\n\n\n

La \"Tabbed Contenido<\/a>de Ultimate Blocks te permite a\u00f1adir cualquier contenido en las pesta\u00f1as. Veamos c\u00f3mo hacerlo. <\/p>\n\n\n\n

Paso 01: Instalar y activar el plugin Ultimate Blocks<\/h3>\n\n\n\n

Ir a Plugins > A\u00f1adir nuevo plugin<\/strong>. Tipo Bloques definitivos<\/strong> en la barra de b\u00fasqueda de la esquina superior derecha. Instale<\/strong> y activar<\/strong> el plugin despu\u00e9s de que aparezca a continuaci\u00f3n.<\/p>\n\n\n\n

\"Instale<\/figure>\n\n\n\n

Paso 02: Insertar el bloque de contenido con pesta\u00f1as<\/h3>\n\n\n\n

Abra una entrada o p\u00e1gina. Busque el icono Contenido por pesta\u00f1as<\/strong> pulsando Bot\u00f3n m\u00e1s (+)<\/strong>. Una vez que encuentres el bloque, a\u00f1\u00e1delo al editor de Gutenberg.<\/p>\n\n\n\n

\"A\u00f1ade<\/figure>\n\n\n\n

Paso 03: A\u00f1adir nuevas pesta\u00f1as y cambiarles el nombre<\/h3>\n\n\n\n

Haciendo clic en el bot\u00f3n icono m\u00e1s (+)<\/strong>puede a\u00f1adir tantas pesta\u00f1as como desee al bloque.<\/p>\n\n\n\n

\"A\u00f1adir<\/figure>\n\n\n\n

Coge el cursor y haz clic en la pesta\u00f1a una a una. Se te permitir\u00e1 renombrarlas. Entonces, renombra las pesta\u00f1as en funci\u00f3n del contenido que vayas a mostrar.<\/p>\n\n\n\n

\"Cambiar<\/figure>\n\n\n\n

Paso 04: A\u00f1adir contenido a las pesta\u00f1as<\/h3>\n\n\n\n

Seleccione una pesta\u00f1a en la que desee a\u00f1adir contenido. A continuaci\u00f3n, sit\u00fae el cursor en su editor. Ver\u00e1s el icono Bot\u00f3n m\u00e1s (+)<\/strong> del editor Gutenberg. Haz clic y elige el bloque de contenido que necesites.<\/p>\n\n\n\n

\"A\u00f1adir<\/figure>\n\n\n\n

Para el tutorial, hemos a\u00f1adido los bloques de texto e imagen a la pesta\u00f1a. De la misma manera, puedes a\u00f1adir otros bloques a la pesta\u00f1a. Haga lo mismo en otras pesta\u00f1as.<\/p>\n\n\n\n

\"Textos<\/figure>\n\n\n\n

Paso 05: Personalizar las pesta\u00f1as<\/h3>\n\n\n\n

Ac\u00e9rcate a la barra lateral derecha mientras mantienes seleccionado el bloque Contenido en pesta\u00f1as. Encontrar\u00e1s varias opciones para configurar, como los Tipos de pesta\u00f1as, el Anclaje de pesta\u00f1as y la Capacidad de respuesta.<\/p>\n\n\n\n

Una vez que actualices a la versi\u00f3n premium, podr\u00e1s a\u00f1adir iconos a los t\u00edtulos de las pesta\u00f1as, textos secundarios y botones de llamada a la acci\u00f3n a las pesta\u00f1as.<\/p>\n\n\n\n

\"Configuraci\u00f3n<\/figure>\n\n\n\n

A continuaci\u00f3n Ficha Estilos<\/strong>. Tendr\u00e1s opciones para colorear el contenido de las pesta\u00f1as, cambiar el dise\u00f1o de las pesta\u00f1as y establecer una nueva dimensi\u00f3n. Espero que puedas explorar y hacer esto por ti mismo.<\/p>\n\n\n\n

\"Estilizar<\/figure>\n\n\n\n
\n\n\n\n

Tutorial en v\u00eddeo<\/h3>\n\n\n\n
\n