✅Cómo Crear Pestañas en Gutenberg sin Instalar Plugins: Solo con HTML, CSS y JavaScript

Si utilizas Gutenberg como editor en WordPress, te habrás dado cuenta de que no existe un bloque nativo para crear pestañas (o «tabs») que te permitan mostrar diferentes contenidos dentro de la misma sección. Y si solo necesitas agregar pestañas en una entrada concreta o en un par de páginas específicas, no tiene mucho sentido instalar un plugin completo de bloques adicionales solo para esto.

Afortunadamente, existe una solución mucho más ligera y rápida: crear las pestañas directamente con un poco de HTML, CSS y JavaScript, usando el bloque de HTML personalizado que ya viene con Gutenberg.

En este artículo te muestro un ejemplo práctico de cómo insertar un sistema de 4 pestañas, cada una con su propio texto y un botón que puedes personalizar a tu gusto. Lo mejor es que si tienes conocimientos básicos de HTML, podrás modificar o ampliar este código para adaptarlo a lo que necesites.

Y si no te manejas mucho con HTML o CSS, no te preocupes, al final del artículo te recomiendo algunos recursos para empezar.

El ejemplo: pestañas creadas con código puro

Aquí te dejo el código que puedes copiar y pegar directamente en un bloque de HTML dentro de Gutenberg:

<style>
  .tabs-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }
  .tabs {
    display: flex;
    cursor: pointer;
    border-bottom: 2px solid #ccc;
  }
  .tab {
    flex: 1;
    padding: 15px;
    text-align: center;
    background: #f9f9f9;
    transition: background 0.3s;
  }
  .tab.active {
    background: #13b0a0;
    color: #fff;
    font-weight: bold;
  }
  .tab:hover {
    background: #009975;
    color: #fff;
  }
  .tab-content {
    display: none;
    padding: 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
  }
  .tab-content.active {
    display: block;
  }
  .tab-content p {
    margin-bottom: 15px;
  }
  .tab-content a {
    display: inline-block;
    padding: 10px 20px;
    background: #13b0a0;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
  }
  .tab-content a:hover {
    background: #009975;
  }
</style>

<div class="tabs-container">
  <div class="tabs">
    <div class="tab active" data-tab="tab1">Pestaña 1</div>
    <div class="tab" data-tab="tab2">Pestaña 2</div>
    <div class="tab" data-tab="tab3">Pestaña 3</div>
    <div class="tab" data-tab="tab4">Pestaña 4</div>
  </div>

  <div id="tab1" class="tab-content active">
    <p>Contenido de la Pestaña 1. Aquí puedes poner texto, imágenes o lo que necesites.</p>
    <a href="#">Ir a enlace 1</a>
  </div>
  <div id="tab2" class="tab-content">
    <p>Contenido de la Pestaña 2. Ideal para mostrar otra sección de información.</p>
    <a href="#">Ir a enlace 2</a>
  </div>
  <div id="tab3" class="tab-content">
    <p>Contenido de la Pestaña 3. Puedes añadir aquí listas, imágenes o lo que quieras.</p>
    <a href="#">Ir a enlace 3</a>
  </div>
  <div id="tab4" class="tab-content">
    <p>Contenido de la Pestaña 4. Última pestaña para completar la sección.</p>
    <a href="#">Ir a enlace 4</a>
  </div>
</div>

<script>
  const tabs = document.querySelectorAll('.tab');
  const contents = document.querySelectorAll('.tab-content');

  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      // Quitar clases activas
      tabs.forEach(t => t.classList.remove('active'));
      contents.forEach(c => c.classList.remove('active'));

      // Activar la pestaña clicada y su contenido
      tab.classList.add('active');
      document.getElementById(tab.dataset.tab).classList.add('active');
    });
  });
</script>

Lenguaje del código: HTML, XML (xml)

Este código creará 4 pestañas con su respectivo contenido y un botón en cada una, listos para personalizar:

• Pestaña 1: Contenido y botón 1.
• Pestaña 2: Contenido y botón 2.
• Pestaña 3: Contenido y botón 3.
• Pestaña 4: Contenido y botón 4.

¿Qué puedes hacer con este ejemplo?

• Cambiar el texto y el diseño de cada pestaña fácilmente.
• Agregar imágenes, listas, tablas o cualquier otro contenido HTML dentro de cada pestaña.
• Personalizar los botones para que apunten a diferentes páginas o secciones de tu sitio.

¿Cómo modificar el código para agregar más pestañas?

1. Agregar una pestaña adicional

Para crear una pestaña más (por ejemplo, una Pestaña 5), solo tienes que seguir estos dos pasos:

Paso 1: Añadir el nuevo botón de pestaña en la barra superior

<div class="tab" data-tab="tab5">Pestaña 5</div>

Colócalo después del último .tab existente, dentro del bloque <div class="tabs">...</div>.

Paso 2: Crear el contenido de la nueva pestaña

<div id="tab5" class="tab-content">
  <p>Contenido de la Pestaña 5. Aquí puedes añadir cualquier información extra.</p>
  <a href="#">Ir a enlace 5</a>
</div>

Ubícalo junto al resto de las secciones con id="tab1", tab2, etc.

🚩 TIP: Recuerda mantener la misma estructura y seguir la numeración para que el JavaScript pueda identificar correctamente cada pestaña.

2. Modificar el contenido dentro de cada pestaña

En cada bloque de contenido (<div class="tab-content">), puedes reemplazar o agregar lo que quieras:

• Cambiar el <p> por una lista <ul>, una imagen <img>, un video embebido o incluso un formulario completo.
• Cambiar el enlace del botón (<a href="#">) por cualquier URL interna o externa.
• Añadir múltiples botones, textos enriquecidos o cualquier otro elemento HTML.

¿Puedo personalizar también el estilo?

Sí, absolutamente. El bloque <style> dentro del código te permite cambiar:

• Los colores de las pestañas activas e inactivas.
• El color y diseño de los botones.
• El padding, bordes, tipografías, etc.

Si tienes nociones básicas de CSS, puedes hacer que este sistema de pestañas encaje perfectamente con el diseño de tu sitio.

¿No sabes mucho de HTML o CSS? Aquí tienes recursos para empezar

• 🔗 Introducción a HTML: aprende a estructurar tu contenido
• 🔗 Introducción a CSS: guía básica para diseñar con estilos

¿Merece la pena esta solución?

Si solo necesitas unas pocas pestañas personalizadas en entradas específicas, esta solución es ideal: no recargas WordPress con más plugins, mantienes el control total del código y puedes personalizarlo hasta el más mínimo detalle.

Si en cambio buscas un sistema global para gestionar pestañas en todo el sitio y sin tocar código, entonces sí podrías plantearte algún plugin de bloques o un addon para tu maquetador visual.