👆 Cómo añadir pestañas a las entradas y páginas de WordPress
Una página larga con especificaciones, reseñas e instrucciones: los usuarios se desplazan, se pierden y se van. Las tiendas resolvieron este problema hace mucho tiempo dividiendo descripciones, parámetros y reseñas en pestañas. Sin recarga, sin desplazamiento hasta la sección necesaria.
Pero las pestañas no solo son útiles para tiendas en línea. Mire cualquier página de plugin en WordPress.org: la información, las reseñas, la instalación, todo está separado en pestañas. Los usuarios ven la estructura de inmediato y cambian a donde necesitan.
A continuación, dos métodos prácticos para añadir pestañas a las entradas y páginas de WordPress. Primero, mediante un constructor de páginas, si ya tiene uno instalado. Segundo, mediante el plugin gratuito Tabs Responsive, si necesita pestañas sin atarse a un constructor específico.
💡 Resumen rápido:
- Verifique si su constructor de páginas tiene un módulo de pestañas
- Instale el plugin gratuito Tabs Responsive desde el directorio de WordPress.org
- Cree las pestañas en el constructor de arrastrar y soltar y rellénelas con contenido
- Inserte el shortcode generado en la página necesaria o en un widget
Cómo se diferencian las pestañas de los acordeones
Las pestañas no deben confundirse con los acordeones, tienen propósitos distintos. Un acordeón expande un bloque y colapsa el resto: práctico para preguntas frecuentes y pantallas móviles. Las pestañas mantienen todas las pestañas visibles y cambian el contenido al instante. Los usuarios siempre ven la estructura y pueden saltar rápidamente a cualquier sección.
Según Nielsen Norman Group, los acordeones son apropiados cuando los usuarios necesitan solo una sección de entre varias. Las pestañas funcionan cuando es probable que los visitantes cambien entre pestañas en una misma visita. Para páginas de producto, ganan las pestañas: los compradores comparan especificaciones y descripción en una misma ventana sin perder el contexto.
Preste atención: si el contenido de una pestaña supera una pantalla, un acordeón podría ser más conveniente. Una pestaña larga obliga a desplazarse igual que una página normal.
Método 1: pestañas mediante un constructor de páginas
Si ya está usando un constructor de páginas, está de suerte. La mayoría de los constructores populares incluyen un módulo de pestañas de serie.
Elementor
Elementor, el maquetador visual más popular para WordPress: más de 10 millones de instalaciones activas y entre el 40 y el 50% del mercado de maquetadores visuales, según datos de Colorlib para 2026. El módulo de pestañas está incluido en la versión gratuita. Arrastre el elemento «Tabs» a la página, edite los títulos y el contenido de las pestañas, y personalice el estilo para que coincida con el diseño de su sitio.
La ventaja es que las pestañas de Elementor heredan los estilos globales: las fuentes, los colores y los espaciados se aplican automáticamente. No necesita editar el CSS por separado.
WPBakery
WPBakery (antes Visual Composer), un maquetador premium que suele incluirse con los temas. A diferencia de Elementor, aquí el módulo de pestañas comienza vacío: usted añade elementos independientes a cada pestaña, texto, imágenes, iconos, botones. Esto ofrece más flexibilidad, pero requiere algunos pasos adicionales durante la configuración.
Si necesita instrucciones detalladas para WPBakery, tenemos una guía específica.
Método 2: plugin Tabs Responsive, configuración paso a paso
No tiene un maquetador visual e instalar uno solo para las pestañas es excesivo. Tabs Responsive, un plugin gratuito del directorio de WordPress.org, hace exactamente lo que promete: añade pestañas a cualquier entrada o página mediante un shortcode o un widget.
🔗 Tabs Responsive en WordPress.org
El plugin está activo y actualizado: más de 20.000 instalaciones activas, calificación de 4,7 sobre 5, más de 500 reseñas, última actualización en mayo de 2026, compatible con WordPress 6.8.3. La versión gratuita incluye una plantilla de diseño, estilos horizontal y vertical, y compatibilidad con iconos de Font Awesome. La versión Pro añade más de 20 plantillas, más de 500 fuentes de Google y animación de contenido.
Paso 1: instalación
En el panel de administración de WordPress, vaya a Plugins → Añadir nuevo, escriba tabs responsive en la búsqueda. Localice el plugin de wpshopmart, haga clic en Instalar ahora y luego en Activar.
Tras la activación, aparece un nuevo elemento «Tabs Responsive» en el menú izquierdo.
Paso 2: crear sus primeras pestañas
Vaya a Tabs Responsive → Añadir nuevas pestañas. Se abrirá un constructor con función de arrastrar y soltar.
Primero, asigne al conjunto de pestañas un nombre descriptivo, por ejemplo, «Ficha técnica del producto» o «Pestañas de la página de inicio». Esto le resultará útil cuando tenga varios conjuntos para distintas páginas.
El constructor puede parecer imponente, pero la lógica es sencilla:
Ahora complete las pestañas propiamente dichas. En la sección Añadir pestañas, configure para cada pestaña:
- Título de la pestaña, lo que el usuario verá en la pestaña: «Descripción», «Especificaciones», «Reseñas».
- Descripción de la pestaña, el contenido de la pestaña. Funciona un editor WYSIWYG completo: puede insertar imágenes, vídeos, música y otros shortcodes.
- Icono de la pestaña, elija un icono de la biblioteca Font Awesome integrada en el plugin.
- Mostrar encima del icono, opción que sitúa el título encima del icono o desactiva el icono, dejando solo el texto.
- Eliminar, botón para borrar una pestaña concreta.
- Añadir nuevas pestañas, agrega una pestaña vacía al conjunto.
- Eliminar todo, restablece todas las pestañas de una vez.
Las pestañas se pueden arrastrar para cambiar el orden. Haga clic en Guardar borrador durante el proceso; si abandona la página accidentalmente, los cambios no se perderán.
Paso 3: diseño y estilos
La apariencia de las pestañas se configura en la barra lateral derecha del constructor.
La versión gratuita ofrece una plantilla de diseño:
La versión Pro añade 19 plantillas más. Pero incluso en la versión gratuita puede personalizar: color de fondo y de fuente, familia tipográfica, relleno, bordes, alineación del icono y animación de transición.
Si los ajustes estándar no son suficientes, el plugin dispone de un campo para CSS personalizado:
Aquí se encuentra también el botón Actualizar ajustes predeterminados; haga clic en él para que todos los nuevos conjuntos de pestañas se creen con los parámetros de estilo actuales.
Paso 4: publicar las pestañas en una página
Cuando el contenido y el estilo estén listos, haga clic en Publicar en la parte superior de la pantalla.
El plugin generará un shortcode como [TABS_R id=443]. Cópielo.
Abra la entrada o página donde necesite añadir las pestañas y pegue el shortcode en la ubicación deseada. Funciona en cualquier editor, tanto el clásico como Gutenberg.
Si necesita añadir pestañas a una barra lateral o al pie de página, utilice el widget Tabs Responsive. Vaya a Apariencia → Widgets:
Haga clic en el enlace «Click here» y accederá a la pantalla de widgets, donde podrá arrastrar el widget a cualquier área:
El resultado tras 5-7 minutos de configuración tiene este aspecto:
Los colores y estilos aquí son básicos; si lo desea, ajústelos en el panel derecho del constructor o mediante CSS personalizado.
Vea el vídeo para conocer el proceso completo, desde la instalación hasta las pestañas terminadas en la página:
⁉️🤔 Preguntas frecuentes
¿Las pestañas funcionan en dispositivos móviles?
Sí. El plugin Tabs Responsive está construido sobre Bootstrap, por lo que las pestañas se adaptan a cualquier pantalla. En pantallas estrechas, las pestañas horizontales pueden convertirse en una lista vertical o un acordeón, según la plantilla elegida. Revise cómo se ven las pestañas en un teléfono después de la configuración: si el texto de la pestaña es largo, el estilo vertical puede resultar más conveniente que el horizontal.
¿Se pueden añadir pestañas al cuerpo de una entrada sin un plugin?
Sin un plugin o un constructor, no, a menos que escriba su propio código JavaScript y CSS. WordPress por defecto no ofrece una solución lista para pestañas en el contenido. El plugin Tabs Responsive resuelve la tarea sin código: la instalación y configuración toman minutos, el resultado se obtiene mediante shortcode. Esto es un equilibrio entre «no quiero instalar un plugin» y «no quiero escribir código desde cero».
¿Las pestañas afectan al SEO?
Con una implementación adecuada, no. El contenido de todas las pestañas se carga en el HTML de la página en la primera renderización, Google lo ve y lo indexa. El plugin Tabs Responsive entrega todo el contenido en el código fuente, sin carga asíncrona, lo cual es seguro para el SEO. Los problemas solo pueden surgir con pestañas cargadas por AJAX (el contenido de la pestaña se carga solo al hacer clic), use este tipo de soluciones con precaución.
¿Qué hacer si las pestañas entran en conflicto con el tema?
El conflicto de estilos es el problema más común. Primero pruebe el campo de CSS personalizado en los ajustes del plugin: normalmente un par de líneas son suficientes para corregir el color de fondo o el relleno para el tema. Si eso no ayuda, cambie del estilo horizontal al vertical en los ajustes de la plantilla, a veces el problema está solo en uno de los modos. Como último recurso, el foro de soporte del plugin en WordPress.org: el desarrollador responde y ayuda con los conflictos.
¿En qué se diferencia Tabs Responsive de las pestañas de un constructor?
El plugin no está vinculado a un constructor específico. Si decide cambiar de constructor o migrar al editor de bloques nativo, las pestañas mediante shortcode seguirán funcionando. Con las pestañas de Elementor o WPBakery, no existe esa flexibilidad: al cambiar de constructor, las pestañas desaparecen con él. Adicionalmente, Tabs Responsive admite estilo vertical, widgets e iconos, algo que no todos los constructores ofrecen en su versión gratuita.
Qué elegir para su tarea
Si ya tiene instalado un constructor de páginas, use su módulo de pestañas. Es más rápido: un arrastrar y soltar, y las pestañas están en la página.
Si no hay un constructor, use el plugin Tabs Responsive. Es gratuito, se actualiza y no lo ata a un constructor específico. El shortcode y el widget funcionan en cualquier tema y cualquier editor.
Para tiendas en línea WooCommerce, el plugin añade una pestaña separada con descripción a la ficha del producto, algo que no está disponible con las pestañas de Elementor.
Pruebe Tabs Responsive en un sitio de prueba: la instalación toma un minuto y construirá sus primeras pestañas en 5 minutos. Si se atasca en algún paso, consulte el video de arriba o escriba en los comentarios, lo resolvemos juntos.
Un equipo profesional de escritores y editores especializados en la creación de contenido de calidad.