Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo añadir contenido en pestañas en entradas y páginas de WordPress

Uno de nuestros lectores nos preguntó recientemente cómo dividir las entradas en pestañas para guardar o ahorrar espacio y facilitar a los usuarios encontrar lo que buscan.

En WPBeginner, hemos ayudado a muchos propietarios de sitios web a mejorar la organización de su contenido con estructuras / disposición / diseño / plantilla.

Añadir pestañas de contenido le permite incluir más información acerca de sus productos y servicios en una sola página, mejorando la experiencia del usuario y manteniendo todos los detalles en un lugar práctico. Como resultado, reducirá el desorden de la página y facilitará la navegación a los visitantes.

En este artículo, le mostraremos cómo añadir pestañas de contenido a sus entradas y páginas de WordPress, asegurándose de que sus visitantes puedan encontrar fácilmente lo que necesitan.

Add tabbed content in WordPress posts and pages

¿Cuándo se debe utilizar el contenido por pestañas en WordPress?

El uso de pestañas permite añadir más detalles en poco espacio o dividir grandes porciones de contenido para mejorar la organización y la experiencia del usuario.

Supongamos que tiene una tienda en línea. Puede añadir pestañas para descripciones de productos, reseñas / valoraciones, especificaciones técnicas y mucho más. Esta separación ayuda a proporcionar todos los detalles para sus clientes en un solo lugar y hace que la página sea interactiva.

Del mismo modo, puedes ver contenido en pestañas en las páginas de plugins de WordPress.org. La página se divide en diferentes secciones utilizando pestañas como detalles, reseñas, instalación, soporte e información de desarrollo.

Tabbed content preview

El contenido en pestañas ayuda a mantener a la gente en su sitio web WordPress. No tiene que enviar a la gente a otra página para obtener todos los detalles que necesitan acerca de sus productos y servicios.

Dicho esto, veamos cómo añadir contenido en pestañas a las páginas y entradas de WordPress.

Estos son los dos métodos que utilizaremos para conseguirlo:

Método 1: Añadir contenido en pestañas utilizando un maquetador de páginas de destino

La mejor manera de añadir contenido con pestañas en WordPress es utilizando un SeedProd. Es el mejor maquetador de páginas de destino y sitios web de WordPress. SeedProd es fácil de usar para principiantes y viene con un maquetador de arrastrar y soltar, plantillas prefabricadas y múltiples opciones de personalización.

Para este tutorial, usaremos la licencia SeedProd Pro porque incluye bloques avanzados para añadir contenido en pestañas. También hay una versión SeedProd Lite que puedes utilizar de forma gratuita.

En primer lugar, tendrá que instalar y activar el plugin SeedProd. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez activado, será redirigido a la pantalla de bienvenida de SeedProd en su escritorio de WordPress. Introduzca su clave de licencia, que encontrará en el área de su cuenta SeedProd.

SeedProd license key

A continuación, puede dirigirse a SeedProd ” Páginas de destino desde su panel de administrador de WordPress.

Después, basta con hacer clic en el botón “Crear nueva página de destino”.

Add a New SeedProd Landing Page

A partir de aquí, SeedProd le mostrará múltiples plantillas de páginas de destino entre las que elegir.

Seleccione la plantilla que desee utilizar. Pasa el cursor sobre la plantilla y haz clic en el icono naranja de la marca de verificación.

Select a landing page template

Se abrirá una ventana emergente en la que tendrá que introducir un título para su página en el campo “Nombre de la página” y un slug de enlace permanente en “URL de la página”.

Después, basta con hacer clic en el botón “Guardar y empezar a editar la página”.

Enter a name for your page

Esto iniciará el editor de arrastrar y soltar de SeedProd. Ahora puede añadir diferentes bloques a su plantilla y editar los elementos existentes.

Para añadir contenido en pestañas, basta con arrastrar el bloque “Pestañas” de la sección Avanzado y soltarlo en la plantilla de la página.

Add tabs block to the template

A continuación, puede personalizar el bloque de pestañas en SeedProd.

Por ejemplo, puede hacer clic en el botón “Añadir nuevo elemento” para añadir tantas pestañas como desee. Además, hay opciones para editar el tamaño de letra, el espacio entre texto y la alineación del contenido de cada pestaña.

Add new items to tab block

A continuación, puede hacer clic en cualquier pestaña para editarla más y añadir detalles.

Por ejemplo, puede cambiar el título de cada pestaña, añadir contenido y cambiar el icono de la pestaña.

Add content and change tab label

Además, SeedProd también ofrece opciones avanzadas de personalización.

Basta con hacer clic en la pestaña “Avanzado” del menú de la izquierda. Aquí puedes cambiar la disposición / disposición / diseño / plantilla de la pestaña, la tipografía, el color, el color de fondo, los bordes y mucho más.

Edit advanced settings for tab block

Cuando haya realizado cambios en el bloque de pestañas y personalizado su página de destino, no olvide hacer clic en el botón verde “Guardar” de la parte superior.

Después, puede dirigirse a la pestaña “Ajustes de página”.

Publish your tabbed content page

A continuación, puede hacer clic en el conmutador “Estado de la página” y cambiar el estado de Borrador a Publicar.

Puede hacer clic en el botón “Guardar” para guardar los cambios y cerrar el maquetador de páginas.

Ahora, sólo tiene que visitar su sitio web para ver en acción el contenido en pestañas de la página de WordPress.

Tabbed content landing page preview

Método 2: Añadir contenido en pestañas usando un plugin de WordPress

Si no desea utilizar un maquetador de páginas de destino, puede utilizar un plugin dedicado de WordPress para añadir contenido en forma de pestañas a sus entradas y páginas.

En primer lugar, tendrás que instalar y activar el plugin Tabs Responsive. Para más detalles, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez activado, puede ir a Pestañas adaptables ” Añadir nuevas pestañas desde su escritorio de WordPress y empezar por introducir un nombre para sus pestañas.

Enter a name for your tab

A continuación, puede desplazarse hacia abajo para añadir todas las pestañas que desee haciendo clic en el botón rojo “Añadir nuevas pestañas”.

Además, puede editar cada pestaña individualmente cambiando su título, añadiendo una descripción, utilizando un icono de pestaña diferente y editando la ubicación del icono.

Edit tabs settings and add details

Además, el plugin también ofrece diferentes ‘Ajustes de pestañas’ en el menú de la derecha.

Por ejemplo, puede elegir si desea mostrar el título de las pestañas, seleccionar distintas opciones para el título y el icono, cambiar la posición del icono, mostrar el borde de las pestañas, seleccionar el color del texto, etc.

Edit tabs settings and add details

Una vez realizados los cambios, ya puedes utilizar las pestañas en cualquier entrada del blog o página utilizando el shortcode generado por el plugin.

Basta con hacer clic en el botón “Publicar”.

Publish your tabs

A continuación, puedes añadir las pestañas en cualquier página o entrada utilizando el shortcode [TABS_R id=130]. Sólo asegúrese de reemplazar el número de identificación en el shortcode con el número de identificación de su pestaña.

Puedes encontrar fácilmente el ID de la pestaña y el shortcode yendo a Pestañas adaptables ” Todas las pestañas y copiando el código bajo la columna Tabs Shortcode.

Find ID number for tabbed content

A continuación, sólo tiene que añadir una nueva entrada o editar una ya existente.

Cuando estés en el editor de bloques de Gutenberg, sigue adelante y añade un bloque shortcode para introducir el shortcode.

Add a shortcode block

A continuación, puedes obtener una vista previa de la entrada o página de tu blog. Si todo es correcto, puede hacer clic en el botón “Publicar” o “Actualizar” para guardar las pestañas de su entrada.

Ahora, visite su sitio web para ver el contenido por pestañas en acción.

Tabbed content plugin preview

Esperamos que este artículo te haya ayudado a aprender cómo añadir contenido con pestañas a entradas y páginas de WordPress. También puedes consultar nuestra guía sobre WooCommerce simplificado y nuestra lista de expertos sobre los mejores plugins de WordPress para sitios web de empresas.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

34 comentariosDeja una respuesta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Ahmed Abo Rwash

    It’s excellent, professional, and valuable. Thank you

    • WPBeginner Support

      You’re welcome!

      Administrador

  3. Alexander

    Hi, I need to display posts as tabs, I need the post title to be the tab label and the post content to be the tab content, any recommendations on how to do it?

  4. msiddiqui

    very simply explain u r no 1 in WordPress

    • WPBeginner Support

      Glad you like our content :)

      Administrador

  5. navya

    I am beginner in wp.Can anyone help me to solve my problem?
    in my site there is part of ou story as like history,fo eg. if click on 2018 tab i wanto get the corresponding description about 2018.How to do this in wp.Thank you in advance

  6. Dan Acton

    I love this, Not the end of the world if this option is not available, just would like to be able to edit a current set of tabs using the same interface in which I created them. Is this possible instead of having to paste new content in between the shortcodes?

  7. Andi Sutrisnya

    How to stop playing video in tab when switching to another tab if i have video in every tab? Please help me

  8. Lena

    Is it possible to have just a button on the users editor which automatically creates a new tab where he/she can write her content in?
    I’m planning a Content sharing platform …

  9. David

    Hi,
    I’m looking for vertical tabs that have the option of adding a link for each tab so that each tab has an address.
    Can you suggest a tab plugin that has this option or a tutorial that explains how to add this functionality.
    Thanks for any help

    David

  10. Soni

    This is a helpful article.
    I would like to know about the tabbed content in wpbeginner homepage. Could this plugin create the same tabbed content?
    Or you use another plugin to create that tabbed content?
    I think that tab is great.

  11. Ssekito

    Kindly show me how to post content under the different tabs i have put on my blog.

    Thanks

      • Ssekito

        Thanks for the reply!

        I am actually a beginner of wordpress blog and i want to first get familiar with it so that i upgrade to wordpress.org with bluehost as my host.

        I want to monetize my blog as i am into affiliate marketing! I currently want to add content just below each pages i created on the menu bar and some social share buttons though am finding it challenging!

        Please guide me this.

        Thanks.

  12. Sase Antic

    Helpful info on tabs in WordPress!

    However, is there a solution in this plugin or any other WP plugin to add tabs at the whole site (site-wide) and not just in posts and pages?

    For example: I need one “tabs group” consisted of 3 tabs, and I like to add it sitewide (the same content / tabs at all pages and posts; like menu / submenu but with tabs functionality).
    Is this possible?

    Otherwise, it’s a lot of work to add the same “tabs group” to all pages and posts one by one.

    Thanks in advance for the reply!

  13. uvie

    what if i need the tab to display contents in the form of widgets.how can i achieve that

  14. Tony

    This looks like a great tabs plugin – but, it would be even greater if I can added also to Pages not just posts. I looked all over, but does not appear in editor of Pages – any chance of that?

  15. Sameer

    Hello,

    Is it possible to create tables inside tabs in wordpress blog pages. Please see this page: , Please help me to create something like this one in wp.

    • WPBeginner Support

      Yes, it is possible. You will need to generate the HTML code required for the table in the content area of each tab.

      Administrador

  16. Weiwei

    if in the content , there are more pages, what should I do?

  17. WPBeginner Staff

    If you cannot figure out why you would need them, then this means that you don’t really need them on your website. We write about a lot of cool things that users can add to their websites. If users find something useful, then they can add it to their site.

  18. Shah

    I’m very new to building a website. I think being so far advanced, your assumption of how well someone like me can understand and follow your instructions, is highly exaggerated. I still don’t understand what tabs are for. I know you explained it, and even showed us where we can see them in action, but I still don’t understand why I need to have tabs. It would be great if you were more deliberate in giving us, slower people, more examples. Thanks!

  19. Heather Lewis

    This is a helpful article. I will use this plugin whenever it’s necessary. I think this is much better compared with the one I am using in terms of design. Thank you for sharing.

  20. vinayak

    hi and thanks for providing a post where i could add tabbed content in my blog.
    i was looking for a plugin that could do this.

  21. Amjaru

    Is the content in the tabs searchable or does the short code prevent the content from being searched?

  22. Knitwit23

    can you show us a post where this is in use?

  23. KonaGirl

    Will this plugin make a tabbed menu hierarchy? If it does, then do I remove the menu tabs prior to adding this plugin?

      • Sally Bennett

        It would be very useful if you explained what ‘tabs’ are to a complete novice

        • WPBeginner Staff

          Tabs are like tabs in a folder or a telephone index book. Allowing users to browse different sections by clicking on the tab title. You can see them in action here.

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.