Cómo agregar pestañas a publicaciones y páginas de WordPress

Cómo agregar pestañas a publicaciones y páginas de WordPress

Las pestañas son una característica bastante común en muchos sitios web, especialmente en las tiendas de comercio electrónico. Los propietarios de tiendas de comercio electrónico generalmente usan pestañas en el área de descripción del producto, donde dividen las reseñas, la descripción, las especificaciones técnicas, etc. en múltiples pestañas.


ejemplo de pestañas en acción en un sitio web de comercio electrónico

Aún así, las pestañas se han utilizado en muchos otros tipos de sitios web, no solo en sitios web de comercio electrónico. Incluso el sitio web oficial de WordPress.org usa pestañas en las páginas de descripción de complementos. Vea la imagen a continuación para ver las pestañas resaltadas en WP.org.

pestañas en la página de descripción del complemento wordpress.org

Muchos otros propietarios de sitios web usan pestañas en diferentes tipos de sitios web. Sin embargo, las pestañas no deben confundirse con acordeones, que se expanden para revelar información. A continuación, observe cómo he usado acordeones en mi sitio web..

acordeones en vistamedia.xyz

Pero aparte de los acordeones, estamos aquí para hablar sobre pestañas, así que no perdamos nuestro enfoque; Solo necesitaba aclarar la distinción entre pestañas y acordeones. Ahora, espero que estemos en la misma página ��

En esencia, los propietarios de sitios web usan pestañas para dividir la información que de otro modo hubiera ocupado una página o publicación completa. Eso significa que las pestañas hacen que la información sea mucho más fácil de digerir, sin forzar necesariamente a los usuarios a golpear la rueda de desplazamiento un millón de veces.

En otras palabras, las pestañas mejoran la usabilidad de su sitio web, especialmente en un mundo de períodos de atención más cortos. Por lo tanto, si desea mantener a los usuarios en su sitio por más tiempo sin aburrirlos con páginas largas, debería considerar usar pestañas.

En la publicación de hoy, le mostramos exactamente cómo agregar pestañas a sus publicaciones y páginas de WordPress. Antes del final de esta publicación, tendrá todas las instrucciones que necesita para usar las pestañas a su favor. Esperamos que disfrutes hasta el final, y no te vayas sin compartir tus pensamientos en la sección de comentarios. Fuera del camino, comencemos.

Use un generador de páginas

Si ya tiene instalado un creador de páginas, tiene suerte: es probable que ya tenga un módulo de pestañas al alcance de su mano. La mayoría de los principales creadores de páginas ofrecen pestañas como parte de su conjunto principal de elementos del creador de páginas. Aquí hay un vistazo rápido a dos de nuestros favoritos.

Elementor Free Page Builder

Pestañas de Elementor Page Builder

Información y descargaVer la demostración

El popular creador de páginas Elementor incluye pestañas como parte de la versión gratuita del complemento. Todo lo que necesita hacer es insertar un elemento de pestaña en su página, luego editar el título, el contenido, el estilo, etc. Eso es todo!

WPBakery Premium Page Builder

Pestañas de WPBakery Page Builder

¿Usa un tema premium que incluye WPBakery Page Builder (como nuestro propio tema Total)? ¡Excelente! Las pestañas están integradas y son fáciles de usar..

El módulo de pestañas WPBakery es ligeramente diferente del ejemplo anterior ya que las pestañas están inicialmente vacías cuando las agrega. Deberá insertar elementos de página adicionales (área de texto, imágenes, iconos, etc.) dentro de las pestañas para agregar su contenido. Pero esto le da un montón de libertad para crear pestañas como desee (además de las opciones de estilo incorporadas). Ya hemos cubierto este creador de páginas en el blog, así que si desea obtener instrucciones más detalladas, consulte nuestra guía de WPBakery (nota: este complemento se llamaba anteriormente Visual Composer, lo siento de antemano por cualquier confusión).

Instalar el complemento de WordPress Tabs

Pestañas Plugin gratuito de WordPress

Si no está utilizando un creador de páginas, no es necesario usar uno solo para pestañas. Hay muchas alternativas excelentes, como el complemento gratuito de WordPress conocido simplemente como Tabs por WP Shop Mart. Tabs es un ingenioso plugin de WordPress que te ayuda a crear un número ilimitado de pestañas hermosas sin sudar.

Comencemos instalando el complemento Tabs WordPress. Dado que está disponible en el repositorio oficial de complementos de WordPress, puede instalar el complemento directamente desde el panel de administración de WordPress.

Estamos utilizando la versión gratuita, pero hay una versión premium disponible si desea actualizar para funciones adicionales más adelante.

Instalar el complemento de pestañas de WordPress

Inicie sesión en su panel de administración de WordPress y navegue hasta Complementos> Agregar nuevo e ingrese “pestañas wpshopmart” en el cuadro de búsqueda de palabras clave. Una vez que encuentre el complemento correcto, presione el Instalar ahora botón como se muestra a continuación.

instalar el complemento de pestañas de wordpress

Después de eso, haga clic en el Activar botón. Y eso es todo, su plugin Tabs Responsive WordPress está listo para usar. Ahora, creemos un par de pestañas para descubrir qué ofrece este complemento.

Configurar el complemento de WordPress sensible a pestañas

La activación del complemento agregará un nuevo elemento a su menú de administrador de WordPress. Para crear nuevas pestañas, navegue hasta Tabs Responsive> Agregar nuevas pestañas como detallamos en la captura de pantalla a continuación.

Agregar nuevas pestañas con el complemento WordPress Responsive para pestañas

Hacerlo te lleva al Creador de respuestas de pestañas que está repleto de todas las funciones que necesitas para crear pestañas hermosas como un jefe. Vea la imagen a continuación para ver qué esperar.

pestañas responsive wordpress plugin tab builder

Todo un pergamino, ¿no? Bueno, puedes encontrar la mayoría de las funciones en la barra lateral derecha. Tenga en cuenta, también, que las pestañas individuales tienen su configuración. Incluso puede usar editores WYSIWYG en las pestañas, lo que significa que tiene mucho control sobre sus pestañas.

Ahora, creemos un par de pestañas de muestra y visualícelas en una página o publicación.

Añadir título

agregar título de pestañas

Comience dando a sus pestañas un título descriptivo (al igual que con los menús de navegación) como se muestra en la imagen de arriba. De esta manera, puede identificar fácilmente sus pestañas en el panel de administración de WordPress más adelante en caso de que necesite editar algo. A los fines de este tutorial, bauticé mis pestañas “Probar pestañas de inicio”.

Elegir plantilla de diseño de pestañas

elegir plantilla de diseño de pestañas

Como se ve en la captura de pantalla anterior, su próximo paso consiste en elegir una plantilla de diseño que le gustaría usar para sus pestañas. La versión gratuita del complemento Tabs WordPress le ofrece solo una plantilla de diseño, pero siempre puede actualizar a la versión premium para 19 más. Habla de libertad de diseño.

Agregar pestañas

A continuación, agregue tantas pestañas como desee como se muestra a continuación.

agregar nuevas pestañas

Hemos creado una lista numerada que detalla lo que puede hacer en el Agregar pestañas sección mostrada arriba. Los números corresponden a cada área.

  1. Título de la pestaña – Agregue el título de su pestaña en este campo, por ejemplo. Descripción, especificaciones, detalles, etc..
  2. Descripción de la pestaña – Agregue la descripción de su pestaña aquí. Este campo le permite agregar el contenido de su pestaña. La mejor parte es que puede usar el editor WYSIWYG (que se muestra en el número 3 a continuación) para agregar contenido enriquecido a sus pestañas, incluidas imágenes, música y videos
  3. Utilice WYSIWYG – Si desea utilizar el familiar Wsombrero-YUNED-See-yos-Wsombrero-YUNED-solet editor para crear el contenido de su pestaña, siéntase libre de presionar este botón para abrir la ventana emergente
  4. Ícono de pestaña – Este campo le ayuda a elegir un icono para usar en su pestaña. El complemento Tabs WordPress le ofrece acceso a toneladas de íconos de Font Awesome para animar sus pestañas como un profesional
  5. Mostrar icono arriba – Si desea mostrar el título de la pestaña junto al icono, le encantará esta función. Además, le permite deshabilitar el icono sin tocar el título de la pestaña
  6. Eliminar – Presione este botón para eliminar una pestaña específica
  7. Añadir nuevas pestañas – Haga clic en este botón para agregar más pestañas
  8. Eliminar todos – ¿Cansado de todas las pestañas? Solo presiona el Eliminar todos botón para restablecer todo

Un par de consejos extra para ayudarte. Primero, puede arrastrar y soltar las pestañas para reordenarlas y organizarlas como desee.

Segundo: no olvides presionar el Guardar borrador botón una o dos veces mientras crea sus pestañas para asegurarse de no perder ningún cambio en caso de que se aleje del generador de pestañas por accidente.

Por último, si necesita ayuda, hay un gran azul Obtener apoyo botón justo debajo del Agregar pestañas sección (y en la mayoría de las páginas del complemento) que lo lleva al foro oficial de soporte de pestañas en WordPress.org. No dude en presionar el botón de soporte si necesita ayuda en cualquier momento.

Tabs Shortcode

pestañas shortcode

A continuación, encontrará el código corto de pestañas que usa para agregar y mostrar sus pestañas en cualquier página o publicación que desee. Por ejemplo, nuestro shortcode es [TABS_R id = 443]. Para mostrar las pestañas en una página, simplemente copie y pegue el código corto anterior en esa página en particular.

Widget de pestañas

soporte de widget de pestañas

¿Desea agregar sus pestañas en un área de widgets en su sitio web? Si ese es un rotundo sí, te encantará el soporte de widgets que viene con el complemento Tabs WordPress.

Golpear el Haga clic aquí el enlace en la imagen de arriba lo lleva a la pantalla de widgets de WordPress, donde puede agregar sus pestañas en cualquier lugar donde tenga un área de widgets en su tema.

widget de pestañas

CSS personalizado

Si bien el complemento Tabs WordPress viene con muchas opciones de personalización de pestañas (¡solo mira esa barra lateral derecha; está lleno de opciones de estilo!), Puedes agregar tus propios estilos CSS personalizados como se muestra a continuación.

pestañas wordpress plugin css personalizado

Además, puede establecer su configuración personalizada como la configuración predeterminada para todas las pestañas nuevas simplemente haciendo clic en Actualizar configuración predeterminada botón como se muestra en la imagen de arriba.

La barra lateral derecha

pestañas opciones de estilo del complemento de wordpress

La barra lateral derecha que destacamos en la imagen de arriba lleva el día para el suyo verdaderamente. Está repleto de todas las opciones que necesita para diseñar sus pestañas al contenido de su corazón. Las opciones notables incluyen:

  • Color de fondo de la pestaña
  • Color de fuente de tabulación
  • Familia tipográfica y estilo
  • Opciones de visualización para título e icono de pestaña
  • Alineación de posición del icono de la pestaña, es decir, antes o después del título de la pestaña
  • Bordes de tabulación
  • Múltiples animaciones de descripción de pestañas
  • Y mucho más

Agregue sus pestañas a una página o publicación de WordPress

Una vez que agregue el contenido de la pestaña y las opciones de estilo, desplácese hacia arriba y haga clic en Publicar botón como se muestra a continuación.

En este punto, tus pestañas están listas. Simplemente necesita agregar las pestañas a una página o publicación de WordPress. Simplemente copie el shortcode de pestañas que vimos anteriormente. El nuestro es [TABS_R id = 443].

Inicie su editor de publicaciones (incluso si está utilizando Gutenberg) y pegue el shortcode en su publicación / página. Después de eso, presiona el Publicar botón como se muestra a continuación.

Después de unos 5 minutos de configurar las cosas; Estoy usando el tema Twenty Seventeen y un montón de Lorem Ipsum, se me ocurrió el siguiente resultado.

Tenga en cuenta que no personalicé los colores ni nada. Dime que piensas; no fue tan fácil?


Agregar pestañas a sus páginas y publicaciones de WordPress es cosa de estudiantes de cuarto grado. No espero que tenga ningún problema, especialmente si está utilizando un complemento como Tabs de WP Shop Mart.

¿Cómo agrega pestañas a sus páginas y publicaciones de WordPress? ¿Cuál es tu complemento favorito de WordPress para pestañas? Por favor comparta sus pensamientos en los comentarios. Feliz creando!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me