Cómo añadir acordeones en el editor de bloques de WordPress

Cómo añadir acordeones en el editor de bloques de WordPress

Un acordeón es un elemento de diseño que oculta y revela contenido al hacer clic sobre él. Si ve un título, haga clic en él y el resto del contenido se deslizará hacia abajo. Si vuelves a hacer clic, se oculta. Es como un desplegable, pero para contenido en lugar de menús.

Ahora bien, ¿qué ocurre si implementa correctamente los acordeones? Su contenido se vuelve más fácil de explorar, los usuarios se mantienen centrados, la navegación móvil mejora y los motores de búsqueda pueden recompensarle con una mejor visibilidad. Si lo haces todo bien, funcionarán como una tabla de contenidos que responde a las preguntas antes incluso de que los usuarios las formulen.

Esta guía le mostrará cómo implementar acordeones en WordPress utilizando herramientas amigables para el editor que mantienen el proceso simple y limpio, sin necesidad de codificación.


Añadir Acordeones en WordPress

Hay más de una forma de añadir acordeones en WordPress, pero no todas son fáciles de usar dentro del Editor de Bloques. En las siguientes secciones, empezaremos con un método básico usando un bloque incorporado, y luego pasaremos a una opción más flexible con un plugin.

Método 1: Utilizar el Bloque de Detalles Nativo

La forma más sencilla de crear un acordeón en WordPress es utilizar la función integrada Bloque de detalles. Veamos cómo funciona.

Paso 1: Añadir el bloque Detalles

Abre tu entrada o página en el Editor de bloques. Haz clic en el icono de signo más (+), busca Detalles e inserta el bloque.

Añadir el bloque Detalles

Paso 2: Añadir el título y el contenido

Introduzca el título de su acordeón en el marcador de posición "Escribir resumen". A continuación, haga clic en el icono de flecha situado junto a él para expandir la sección. Una vez expandida, aparecerá debajo un área de contenido donde podrá añadir texto, imágenes, listas o cualquier otro bloque.

Paso 3: Añadir más conmutadores

Para añadir más elementos de acordeón, repita el mismo proceso insertando nuevos bloques Detalles. Para un diseño anidado, expanda el área de contenido de un bloque Detalles existente, haga clic en el icono más (+) dentro de él y añada otro bloque Detalles.

Este método es perfecto para FAQs rápidas o configuraciones mínimas. Ten en cuenta que solo ofrece un estilo básico y no incluye opciones de diseño avanzadas.


Método 2: Utilizar el plugin Ultimate Blocks

Si desea más opciones de estilo y un mejor control de su acordeón, la función Bloques definitivos es una gran elección. Ofrece un bloque Content Toggle que funciona perfectamente en el Editor de bloques.

Paso 1: Añada el plugin a su sitio web

Desde el panel de control de WordPress, dirígete al menú Plugins y haz clic en Añadir nuevo. En la barra de búsqueda, escribe Ultimate Blocks y haz clic en Instalar ahora en la ficha del plugin. Una vez finalizada la instalación, actívalo para que los nuevos bloques estén disponibles en el editor.

Añada Ultimate Blocks a su sitio web

Paso 2: Insertar el bloque de alternancia de contenido

Abra la página o la entrada en la que desea el acordeón. Haz clic en el icono más (+), busca Content Toggle y añádelo. Este bloque crea una sección ampliable con un título y un área de contenido.

Insertar el bloque de alternancia de contenidos

Paso 3: Añadir título y contenido

Escriba el título de su acordeón en el campo de etiqueta y, a continuación, añada su contenido debajo. Puedes incluir cualquier tipo de bloque dentro del toggle, como texto, imágenes, botones, listas o incluso otro bloque Content Toggle dentro del área de contenido para crear un acordeón anidado. 

Añadir título y contenido

Para añadir más secciones de alternancia, basta con hacer clic en el icono (+) cuando pase el ratón por encima de los paneles existentes. Para eliminar un panel, haga lo mismo, salvo que en lugar de hacer clic en el icono (+), elija el icono (x) de la esquina superior derecha. 

Añadir más paneles

Paso 4: Personalizar el acordeón

Desde el panel de configuración de bloques de la derecha, puede controlar el título del panel, ajustar el estado de alternancia, activar FAQ Schema, añadir una opción de búsqueda integrada para su acordeón, elegir un icono de estado, cambiar el texto o los colores de fondo, y mucho más. 

Personalizar el acordeón
Personalizar el acordeón

Si lo utilizas para preguntas frecuentes, también puedes habilitar el marcado FAQ Schema desde la configuración para ayudar a que tu contenido sea apto para los fragmentos enriquecidos en la búsqueda de Google.

Activar esquema

Conclusión

Si su objetivo es hacer que el contenido largo sea más fácil de escanear, los acordeones ofrecen una solución limpia. Has aprendido dos enfoques: el bloque nativo Detalles ofrece una configuración ligera sin plugins adicionales y una carga rápida. El bloque Content Toggle de Ultimate Blocks añade controles de estilo avanzados, paneles anidados y un esquema de preguntas frecuentes integrado. Ambos métodos mejoran la usabilidad móvil y el potencial SEO. Elige el método que mejor se adapte a tu flujo de trabajo y a tus necesidades de contenido.



El equipo de Tableberg

Construya hermosas tablas de WordPress - ¡Visualmente!

Despídete de las tablas aburridas. Con Tableberg, puede crear tablas interactivas con capacidad de respuesta mediante el Editor de bloques, sin necesidad de código.

Interfaz Tableberg
🚀 Sé el primero en probar nuestro Bloque de mesa para WooCommerce
Este es el texto por defecto para la barra de notificaciones