Resumen: Cómo crear pestañas en WordPress
Hay 3 maneras de añadir contenido con pestañas a cualquier página de WordPress, sin necesidad de codificación.
- Instalar SeedProd – Descarga y activa SeedProd (se requiere un plan de pago para el bloque de Pestañas), luego introduce tu clave de licencia
- Añadir pestañas con SeedProd – Abre cualquier página con “Editar con SeedProd”, arrastra el bloque de Pestañas, configura tu contenido y guarda
- Usar el Editor de Bloques – Instala Ultimate Blocks (gratis), abre cualquier entrada o página y añade el bloque de Pestañas desde el insertador de bloques
- Usar un plugin gratuito – Instala Tabs Responsive, crea un conjunto de pestañas, copia el shortcode y pégalo en cualquier entrada o página
- Elige tu método – SeedProd te da control visual completo; el Editor de Bloques y Tabs Responsive funcionan con cualquier tema existente
Añadir pestañas a una página de WordPress parece sencillo, pero la mayoría de los tutoriales asumen que eres un desarrollador o que quieres instalar tres plugins solo para empezar.
La mayoría de las guías te explican cómo crear un tema personalizado desde cero. Se saltan la opción del Editor de Bloques por completo, o solo cubren un plugin.
SeedProd es mi método preferido para contenido con pestañas, pero en esta guía también te mostraré el enfoque del Editor de Bloques y una opción de plugin gratuito. No se requiere codificación.
¿Qué son las pestañas de WordPress y por qué ayudan?
Las pestañas de WordPress son paneles de contenido interactivos que organizan el contenido de una página en secciones entre las que los visitantes pueden cambiar sin necesidad de desplazarse.
Las pestañas son un tipo de sistema de navegación que organiza el contenido, facilitando a los visitantes la navegación por tu sitio web. Puedes añadir pestañas a publicaciones y páginas o usar un widget de pestañas para mostrar contenido organizado en pestañas en la barra lateral y las áreas de widgets de tu WordPress.
¿Por qué necesitas contenido organizado en pestañas en WordPress?
Además de organizar el contenido, las pestañas facilitan mucho mantener a los visitantes de tu sitio web activos y comprometidos. Como las pestañas agrupan temas de contenido en una sola página, los usuarios no necesitarán hacer clic para ir a otras páginas, lo que es ideal para períodos de atención más cortos.
Por ejemplo, WordPress.org utiliza pestañas en su página de plugins para mostrar información como detalles, reseñas, soporte y desarrollo.
Formas populares de usar pestañas en WordPress:
- Especificaciones y reseñas de productos en páginas de WooCommerce
- Detalles de contacto divididos por departamento o ubicación
- Filtros de blog (populares, recientes, categorías)
- Secciones de preguntas frecuentes con categorías separadas en pestañas
- Niveles de precios o paquetes de servicios
Las páginas de productos de WooCommerce son uno de los lugares más comunes para usar pestañas. Una pestaña dedicada para especificaciones, otra para reseñas y una para envíos mantiene las páginas de productos limpias sin ocultar los detalles que los compradores necesitan. Los plugins de pestañas dedicados para WooCommerce pueden darte aún más control sobre cómo se ven y se comportan las pestañas de las páginas de productos.
Consejo profesional: Las pestañas no deben confundirse con los acordeones. Los usuarios hacen clic en las pestañas para cambiar la información, mientras que los acordeones se expanden para revelar la información.
¿Cómo creo pestañas con SeedProd?
Para este método, usaremos SeedProd, el mejor constructor de sitios web de WordPress, para añadir contenido con pestañas a tu sitio web.
SeedProd es un constructor de sitios web de arrastrar y soltar que te permite crear diseños flexibles de WordPress sin escribir código. Con sus kits de sitios web profesionales, plantillas de páginas de destino, y editor visual en vivo, puedes personalizar cada parte de tu sitio y ver los cambios en tiempo real.
SeedProd también incluye bloques altamente personalizables, incluido el bloque de Pestañas que usaremos en esta guía.
Sigue los pasos a continuación para crear pestañas en WordPress con SeedProd.
Paso 1. Instalar el constructor de sitios web SeedProd
Primero, dirígete a la página de precios de SeedProd y elige un plan que incluya el bloque de Pestañas. El bloque de Pestañas está disponible en planes de pago; visita la página de precios para comparar opciones y encontrar la que mejor se adapte a tu presupuesto.
Una vez que hayas descargado el plugin, deberás instalarlo y activarlo en tu sitio de WordPress. Puedes seguir estas instrucciones sobre cómo instalar un plugin de WordPress si nunca lo has hecho antes.
Después de activar el plugin, navega a SeedProd » Ajustes e introduce tu clave de licencia del plugin.
Puedes encontrar tu clave de licencia de SeedProd en el panel de tu cuenta, en la sección Descargas.
Recuerda hacer clic en el botón Verificar clave antes de pasar al siguiente paso.
Paso 2. Abre tu página con SeedProd
Después de instalar SeedProd, puedes abrir cualquier página existente de WordPress en el editor visual. Ve a Páginas » Todas las páginas desde tu administrador de WordPress y busca la página a la que deseas añadir pestañas.
Haz clic en el enlace Editar con SeedProd para abrir la página en el editor visual.
En este ejemplo, agregaremos pestañas a la página Acerca de para mostrar más detalles como vacantes de empleo y directrices editoriales. Puedes elegir cualquier página que tenga sentido para tu sitio.
Paso 3. Añadir pestañas a tus páginas de WordPress
Una vez que tu página esté abierta en el editor visual, puedes hacer clic en cualquier elemento para cambiar su contenido, colores, estilo y visibilidad.
También es fácil agregar más elementos a tu página arrastrándolos desde el panel de bloques y soltándolos en su lugar.
Primero, agrega una nueva sección a la página para albergar tu contenido con pestañas. En nuestro caso, duplicaremos una de las secciones existentes y la arrastraremos al final de la página.
Después de eso, reemplaza la imagen con algo más relevante y elimina cualquier contenido que ya no necesites haciendo clic en el icono de la papelera.
Ahora puedes buscar el bloque Pestañas en el panel izquierdo y arrastrarlo a la nueva sección de tu página.
Al hacer clic en el bloque, se muestran sus ajustes de contenido, donde puedes:
- Añadir varias pestañas
- Mostrar u ocultar el icono de la pestaña
- Cambiar el tamaño de la fuente
- Aumentar o disminuir el espacio entre pestañas
- Ajustar la alineación de las pestañas
Expandir cada pestaña te permite añadir un título y escribir tu contenido usando un editor clásico con ajustes de 'lo que ves es lo que obtienes' (WYSIWYG).
También puedes habilitar un icono personalizado para agregar más interés a tus pestañas y hacer que destaquen. Cambia el interruptor 'Ocultar icono de pestaña' a la posición 'Desactivado' y elige un icono personalizado de la biblioteca de Font Awesome.
Hacer clic en la pestaña Avanzado te permite elegir más opciones de personalización, incluyendo colores de fondo personalizados, fuentes, bordes, espaciado y más.
También puedes mostrar pestañas verticales o un conjunto de pestañas horizontales haciendo clic en cualquiera de las opciones de diseño.
Recuerda hacer clic en el botón Guardar en la esquina superior derecha de la pantalla para guardar tus cambios.
Sigue los mismos pasos para añadir pestañas a cualquier otra página de tu sitio web de WordPress, luego pasa al siguiente paso para publicar tus cambios.
Paso 4. Publicar tu contenido con pestañas
Después de añadir pestañas a tus diversas páginas de WordPress, estarás listo para publicarlas para que las vean los visitantes de tu sitio web.
Para hacer esto, ve a la página SeedProd » Theme Builder y cambia el interruptor 'Habilitar tema SeedProd' a la posición 'Activado'.
Ahora puedes previsualizar tus páginas y ver tu contenido con pestañas en acción.
¿Cómo añado pestañas en el Editor de Bloques de WordPress?
Si estás utilizando un tema de WordPress estándar y no necesitas un editor visual completo, puedes agregar un bloque de pestañas de WordPress directamente en el Editor de Bloques usando un plugin gratuito.
He probado varios plugins de pestañas para el Editor de Bloques, y Ultimate Blocks es una opción gratuita y confiable con un bloque de Pestañas dedicado que funciona con cualquier tema.
Así es como se agregan pestañas a una página de WordPress usando el Editor de Bloques:
- Ve a Plugins » Añadir nuevo, busca “Ultimate Blocks” y haz clic en Instalar ahora, luego en Activar.
- Abre cualquier entrada o página en el Editor de Bloques de WordPress.
- Haz clic en el icono + para abrir el insertador de bloques y busca “Pestañas”.
- Selecciona el bloque Pestañas de la sección Ultimate Blocks y agrégalo a tu contenido.
- Haz clic en cada etiqueta de pestaña para renombrarla, luego agrega tu contenido en el panel de pestañas de abajo.
- Usa la barra lateral de configuración del bloque a la derecha para ajustar colores, estilo de pestaña y alineación.
- Haz clic en Actualizar o Publicar cuando estés satisfecho con tus pestañas.
Este método funciona sin cambiar tu tema de WordPress existente ni instalar un constructor de páginas independiente.
¿Puedo añadir pestañas en WordPress gratis?
Sí, varios plugins gratuitos de pestañas para WordPress pueden agregar contenido con pestañas sin un constructor de páginas.
Tabs Responsive funciona con cualquier tema a través de un shortcode y es lo que explicaremos a continuación. Ultimate Blocks (cubierto en el método del Editor de Bloques anterior) es la mejor opción si ya estás usando Gutenberg. WP Tabs es otra opción sólida con una interfaz basada en bloques y varios estilos de diseño.
El siguiente método es una buena alternativa si no quieres cambiar tu tema de WordPress o crear una página de destino. Usaremos el plugin gratuito Tabs Responsive de WordPress para añadir pestañas responsivas a tu sitio de WordPress.
Primero, necesitarás instalar el plugin Tabs Responsive y activarlo desde tu administrador de WordPress.
Luego, navega a Tabs Responsive » Añadir nuevas pestañas y dale un título a tu conjunto de pestañas.
Desde allí, puedes seleccionar la plantilla predeterminada, o si estás usando la versión Pro, puedes elegir entre más de 18 estilos de plantilla.
El siguiente paso es añadir tus pestañas. Puedes crear tantas pestañas como quieras e incluir:
- Títulos de pestaña
- Descripciones de pestaña
- Iconos de pestaña
También puedes editar el estilo de cada pestaña en la barra lateral derecha eligiendo estilos de pestaña personalizados, colores de fondo, colores de fuente y más.
Cuando estés satisfecho con tus pestañas, copia el shortcode de las pestañas y pégalo en cualquier lugar de tu tema de WordPress.
Por ejemplo, puedes pegar el shortcode en una publicación o página de WordPress como esta:
Así es como se verá en el front-end de tu sitio:
También puedes añadir el shortcode de las pestañas a un área preparada para widgets, como la barra lateral de WordPress o los widgets del pie de página, pegando el shortcode en un bloque de párrafo.
Después, verás tu contenido con pestañas en vivo en las áreas de tu barra lateral:
Cómo crear pestañas en WordPress - Preguntas frecuentes
¿Cómo creo pestañas en WordPress sin un plugin?
Puedes crear pestañas sin un plugin usando código HTML, CSS y JavaScript personalizado, pero este enfoque requiere conocimientos de desarrollador. La mayoría de los principiantes prefieren usar un plugin de pestañas gratuito para WordPress como Ultimate Blocks o Tabs Responsive, que se encargan de todo el código por ti. Si estás utilizando el editor visual de SeedProd, el bloque de Pestañas de arrastrar y soltar es la opción más sencilla sin código para añadir contenido con pestañas a una página de WordPress.
¿Cómo añado pestañas en el Editor de Bloques de WordPress?
Para añadir pestañas en el Editor de Bloques, instala un plugin que añada un bloque de Pestañas a Gutenberg, como Ultimate Blocks (gratuito). Una vez activado, abre cualquier entrada o página, haz clic en el inseridor de bloques +, busca "Pestañas" y añade el bloque de pestañas de WordPress a tu contenido. Luego puedes renombrar cada pestaña, añadir contenido a los paneles de las pestañas y personalizar colores y alineación en la barra lateral de configuración del bloque.
¿Cuál es la diferencia entre pestañas y acordeones en WordPress?
Las pestañas de WordPress muestran varios paneles de contenido uno al lado del otro, y al hacer clic en una pestaña se cambia el panel visible. Los acordeones se apilan verticalmente y se expanden para mostrar el contenido al hacer clic. Las pestañas funcionan mejor cuando quieres que todas las opciones sean visibles a la vez y el contenido es de longitud similar; los acordeones son mejores para contenido más largo como preguntas frecuentes, donde la mayoría de los visitantes solo leen una sección.
Si deseas un control total del diseño sobre tu contenido con pestañas, SeedProd es la opción más rápida con una vista previa visual en vivo. El método del Editor de Bloques es una buena opción si deseas mantener tu tema actual y prefieres un enfoque nativo de Gutenberg. El plugin Tabs Responsive funciona con cualquier configuración de WordPress y no requiere nada más allá de un plugin de shortcode gratuito.
Puedes añadir contenido con pestañas a tu sitio de WordPress en solo unos pocos clics, sin necesidad de código. SeedProd hace que el proceso sea rápido y fácil para principiantes si ya estás usando SeedProd para construir tu sitio.
¿Listo para añadir pestañas a tu sitio de WordPress?
También te pueden interesar estas otras guías útiles de WordPress mientras estás aquí:
- ¿Cómo crear animaciones de texto en WordPress (pasos sencillos)?
- ¿Cómo crear divisores de sección elegantes para sitios web de WordPress?
- Cómo añadir un cuadro de autor en WordPress (sin plugin)
- Cómo agregar una barra lateral diferente para diferentes páginas en WordPress
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
