Cómo poner pestañas en tu web de WordPress, paso a paso

Si tu web está hecha con WordPress, seguramente tienes alguna página que no para de crecer: la de servicios, la de un producto con mil detalles o la de preguntas frecuentes. Hasta ahora, para ordenarla en pestañas había que instalar un plugin. Desde WordPress 7.1, que salió el 19 de agosto, ya no hace falta: el editor trae su propio bloque de pestañas (en inglés, Tabs).

Bien usado, ayuda a que una página larga se lea de un vistazo. Mal usado, esconde justo lo que tu cliente estaba buscando. Te explico paso a paso cuándo te conviene y cómo crearlo.

Qué es el bloque de pestañas

Lo anunció WordPress en la nota de lanzamiento de la versión 7.1 y lo explica en su documentación oficial del bloque. En llano:

• Tiene dos partes: una fila de pestañas (los botones con el nombre de cada apartado) y los paneles, que son el contenido de cada una.
• El visitante solo ve un panel cada vez y cambia de uno a otro pulsando en las pestañas.
• Dentro de cada panel puedes poner cualquier bloque: texto, listas, imágenes, botones…
• Sigue el patrón de pestañas del W3C (el organismo que marca los estándares de la web), así que está pensado para funcionar con teclado y con lectores de pantalla sin que tengas que tocar nada.

Antes de empezar: ¿te conviene usar pestañas?

Las pestañas esconden contenido. Eso es bueno cuando el lector solo necesita una parte, y malo cuando lo necesita todo. Una regla sencilla:

Sí, cuando los apartados son alternativos

• Tipos de curso o de servicio: «Iniciación», «Avanzado», «Infantil».
• Información de un producto: «Medidas», «Materiales», «Cuidados».
• Servicios para públicos distintos: «Particulares» y «Empresas».

No, cuando es información que todos buscan

• Precio, teléfono, horario o dirección: siempre a la vista.
• Pasos que hay que seguir en orden (por ejemplo, cómo hacer un pedido).
• Contenidos que el lector quiere comparar a la vez, como dos tarifas. Para eso, mejor una tabla o dos columnas.

Paso 1. Comprueba tu versión de WordPress y haz una copia

El bloque solo está disponible a partir de WordPress 7.1. Entra en tu panel, ve a Escritorio > Actualizaciones y mira qué versión tienes. Si te toca actualizar, haz antes una copia de seguridad completa y revisa que tus plugins y tu tema estén al día. Te lo contamos con calma en cómo editar tu web sin estropear nada.

Un detalle: esto vale para el editor de bloques de WordPress. Si tu web está montada con un maquetador como Elementor o con el editor clásico, el bloque no te aparecerá de la misma forma.

Paso 2. Prepara el contenido fuera del editor

Antes de abrir WordPress, escribe en un documento:

• El nombre de cada pestaña, corto y del mismo tipo (todo sustantivos, por ejemplo).
• El texto de cada panel, con una estructura parecida en todos: qué es, para quién, cuándo y un botón.
• Qué irá fuera de las pestañas: un título y una frase de introducción encima, y lo importante (precio, contacto) a la vista.

Si te cuesta encontrar las palabras, te ayudarán las claves para escribir los textos de una web.

Paso 3. Inserta el bloque

1. Abre la página y sitúate donde quieras las pestañas.
2. Pulsa el botón + y busca «Tabs», o escribe /tabs en una línea vacía. Si tu WordPress está en español, el nombre puede aparecer traducido.
3. El bloque aparece con dos pestañas. Escribe en cada botón su nombre.
4. Para añadir otra, usa la opción Add tab de la barra de herramientas del bloque, o sitúate al final del nombre de la última pestaña y pulsa Intro. Se crea a la vez su panel vacío: WordPress empareja pestañas y paneles por posición (la primera con el primero, y así).

Paso 4. Rellena cada panel

Cada panel funciona como un bloque Grupo: pega el texto que preparaste y añade lo que necesites. Intenta que los paneles tengan una extensión parecida, para que la página no «salte» de tamaño al cambiar de pestaña, y termina cada uno con lo que quieres que haga el lector, por ejemplo un botón de «Reservar plaza».

Paso 5. Ponle una etiqueta para lectores de pantalla

Selecciona la fila de pestañas y, en la barra lateral, busca el ajuste Label (etiqueta). Escribe qué agrupan, por ejemplo «Tipos de curso». Quien navega con lector de pantalla oirá ese nombre y sabrá qué tiene delante.

Paso 6. Dale un estilo discreto

Cada pestaña admite ajustes de color, tipografía, borde y espaciado. Para que todas tus páginas sean coherentes, mejor cambiarlo una sola vez para todo el sitio que pestaña a pestaña. Si tu tema es de bloques, lo tienes en Apariencia > Editor > Estilos, dentro del apartado de bloques.

• Usa los colores de tu marca, sin inventar otros (aquí te explicamos cómo aplicar los colores de tu marca en tu web).
• Comprueba que el texto de las pestañas se lee bien sobre su fondo.
• Asegúrate de que se nota a simple vista qué pestaña está abierta: en los ajustes de color puedes darle un color propio a la pestaña activa.

Paso 7. Pruébalo como lo haría un cliente

• En el móvil: abre la vista previa en tu teléfono y mira que los botones se ven enteros y se pueden pulsar con el dedo sin equivocarse.
• Con el teclado: en el ordenador, pulsa la tecla Tab hasta llegar a las pestañas y usa las flechas izquierda y derecha para pasar de una a otra, que es lo que marca el patrón del W3C. Si no responde así, conviene revisarlo.
• Con alguien de fuera: pídele a una persona que encuentre un dato concreto. Si lo busca en la pestaña equivocada, cambia los nombres.

Lista rápida para guardar

• WordPress 7.1 o posterior, y copia de seguridad antes de actualizar.
• Pestañas solo para apartados alternativos; lo esencial, a la vista.
• De 2 a 4 pestañas, con nombres cortos.
• Etiqueta (Label) puesta en la fila de pestañas.
• Probado en el móvil y con el teclado.

Unas pocas pestañas bien pensadas ordenan una página; demasiadas solo esconden el desorden.

Si tu página de servicios ha crecido tanto que ya no sabes cómo ordenarla, o quieres que alguien revise de paso cómo está tu WordPress antes de actualizar, en Online Navarra me encargo del diseño y el mantenimiento de webs de pequeños negocios. Cuéntame qué necesitas.