¿Cómo utilizar Acordeones en el Editor de bloques de Waclis?

Los Acordeones del Editor de bloques de Waclis permiten organizar información en diferentes elementos que el visitante puede abrir para consultar su contenido.

En lugar de mostrar toda la información simultáneamente, puedes presentar encabezados como:

▸ Características del producto

▸ Formas de entrega

▸ Garantía

▸ Instrucciones de uso

Cuando el visitante abre uno de ellos, puede acceder al contenido correspondiente:

▾ Garantía

  El producto cuenta con las condiciones de garantía
  indicadas por la empresa...

Esta estructura permite presentar bastante información ocupando menos espacio visual y facilitando que cada visitante consulte solamente aquello que le interesa.

Dentro del Editor de bloques encontrarás diseños prediseñados en:

Secciones → Acordeones

También encontrarás un componente de tipo Accordeon dentro de los componentes disponibles para construir estructuras personalizadas.

¿Qué es un acordeón?

Un acordeón es una estructura formada por diferentes elementos desplegables.

Cada unidad suele contener conceptualmente:

Item
├── Encabezado
└── Contenido

Por ejemplo:

CARACTERÍSTICAS TÉCNICAS
↓
contenido...

ENVÍOS
↓
contenido...

GARANTÍA
↓
contenido...

Cuando el encabezado se utiliza como control interactivo, el visitante puede abrir o cerrar su contenido.

¿Para qué puede utilizarse un Acordeón?

Los acordeones no están limitados a Preguntas frecuentes.

Puedes utilizarlos para organizar:

• especificaciones técnicas;

• instrucciones;

• condiciones comerciales;

• información de entrega;

• políticas;

• garantías;

• procesos;

• etapas de contratación;

• documentación;

• información de productos;

• contenidos educativos;

• características;

• preguntas frecuentes;

• requisitos;

• información legal resumida;

• cualquier contenido dividido en temas.

Ejemplo: información de producto

▸ Características

▸ Materiales

▸ Medidas

▸ Envíos

▸ Garantía

Cada apartado puede desplegar información adicional.

Ejemplo: servicio

▸ ¿Qué incluye?

▸ Proceso de implementación

▸ Requisitos

▸ Plazos

▸ Soporte posterior

Ejemplo: instrucciones

▸ Paso 1 · Preparación

▸ Paso 2 · Instalación

▸ Paso 3 · Configuración

▸ Paso 4 · Puesta en marcha

Acordeones y Preguntas frecuentes no son lo mismo

Esta diferencia es fundamental.

Preguntas frecuentes

Representa un tipo de contenido.

Ejemplo:

¿Realizan envíos?

¿Qué medios de pago aceptan?

¿Los productos tienen garantía?

Acordeón

Representa una forma de organizar el contenido.

Puedes utilizarlo para:

Especificaciones

Documentación

Proceso

Garantía

sin necesidad de que exista ninguna pregunta.

Una FAQ puede utilizar un Acordeón

Por ejemplo:

▸ ¿Realizan envíos?

▸ ¿Qué medios de pago aceptan?

▸ ¿Cómo solicito asistencia?

En ese caso:

FAQ = contenido.

Acordeón = presentación.

Pero también puedes utilizar un Acordeón sin preguntas

Por ejemplo:

▸ Información general

▸ Características técnicas

▸ Condiciones de contratación

▸ Soporte

Aquí no estás creando una FAQ, sino un contenido informativo organizado mediante un acordeón.

¿Cuándo conviene utilizar un Acordeón?

Puede ser una buena alternativa cuando tienes varias secciones de información relacionadas y mostrarlas todas abiertas produciría una página demasiado extensa.

Por ejemplo:

Características
[10 líneas]

Medidas
[8 líneas]

Materiales
[12 líneas]

Garantía
[15 líneas]

Envíos
[10 líneas]

Todo abierto puede ocupar mucho espacio.

Con un acordeón:

▸ Características
▸ Medidas
▸ Materiales
▸ Garantía
▸ Envíos

el visitante puede elegir qué información consultar.

¿Cuándo puede no ser la mejor opción?

No es necesario utilizar un acordeón cuando toda la información debería permanecer visible desde el primer momento.

Por ejemplo:

• un título principal;

• una propuesta comercial importante;

• un beneficio esencial;

• una llamada a la acción;

• una condición que el usuario necesita conocer necesariamente.

No escondas información importante solamente para reducir la altura de la página.

Información principal vs información complementaria

Puedes pensar en esta diferencia:

Información principal

Conviene que permanezca visible.

Por ejemplo:

Plan Premium

USD XX

Incluye...

Información complementaria

Puede organizarse mediante acordeón.

Por ejemplo:

▸ Detalle de funcionalidades

▸ Condiciones

▸ Preguntas sobre implementación

¿Cómo agregar una sección de Acordeones?

Ingresa al Editor de bloques de la página o área editable donde quieras incorporarla.

Después abre:

Secciones

y selecciona:

Acordeones

Paso 1: abre Acordeones

Waclis mostrará los diseños prediseñados disponibles.

Elige principalmente según:

• cantidad de elementos;

• estilo de los encabezados;

• distribución;

• espacio disponible;

• tipo de contenido.

Posteriormente podrás reemplazar los textos y personalizar la apariencia.

Paso 2: agrega el diseño elegido

Selecciona la composición que quieras utilizar.

Una vez incorporada podrás modificar los elementos que forman parte del acordeón.

Paso 3: identifica la estructura

Antes de clonar, eliminar o mover elementos, utiliza:

Navigator

Una estructura de este tipo puede contener conceptualmente:

Accordion
├── Item
│   ├── Encabezado
│   └── Contenido
│
├── Item
│   ├── Encabezado
│   └── Contenido
│
└── Item
    ├── Encabezado
    └── Contenido

La estructura exacta dependerá del diseño seleccionado.

¿Por qué utilizar Navigator?

Porque visualmente puedes hacer clic sobre:

Garantía

pero estar seleccionando solamente:

• el texto;

• el control;

• el encabezado;

cuando en realidad quieres modificar o clonar todo el Item.

Navigator te ayuda a seleccionar el nivel correcto.

Paso 4: modifica el encabezado

El encabezado debe explicar claramente qué encontrará el visitante al abrirlo.

Por ejemplo:

Características técnicas

es más informativo que:

Más información

Otros buenos ejemplos

Medios de pago

Proceso de implementación

Documentación requerida

Garantía y soporte

Materiales y composición

Evita encabezados ambiguos

Por ejemplo:

Información

Detalles

Ver más

si tienes varios Items similares.

El visitante debería poder decidir si necesita abrirlo sin tener que adivinar qué contiene.

Paso 5: modifica el contenido

Dentro del Item reemplaza el contenido de ejemplo.

Puede consistir en:

• un Paragraph;

• varios textos;

• listas;

• Links;

• otros componentes según la composición.

Ejemplo

Encabezado:

Garantía

Contenido:

Las condiciones de garantía dependen del producto adquirido. Consulta la información correspondiente o comunícate con nuestro equipo si necesitas asistencia.

Responde o explica directamente

Evita comenzar con párrafos innecesariamente largos.

Si el encabezado es:

Tiempo de implementación

la respuesta debería comenzar explicando ese tema.

Por ejemplo:

El plazo depende del alcance del proyecto y de las configuraciones requeridas.

Utiliza listas cuando ayuden

Un acordeón es especialmente útil para organizar información estructurada.

Por ejemplo:

¿Qué necesitamos para comenzar?

- Datos de la empresa.
- Información del proyecto.
- Material disponible.
- Persona responsable.

Una lista puede ser más legible que un párrafo largo.

No conviertas cada Item en una página completa

Si una sección desplegable termina conteniendo enormes cantidades de contenido, puede ser mejor:

• crear una página específica;

• enlazar documentación;

• dividir en varios Items;

• utilizar otra sección.

Ejemplo de contenido demasiado extenso

▾ Términos y condiciones

[40 párrafos completos]

Quizás sea preferible:

▾ Términos y condiciones

Consulta las condiciones completas aplicables.

[ Ver términos y condiciones ]

cuando exista una página específica.

Cantidad de Items

No existe una cantidad obligatoria.

Puedes utilizar:

• 3;

• 4;

• 5;

• 8;

• otra cantidad según el contenido.

La decisión debería depender de la información real.

Evita agregar Items vacíos para completar el diseño

Si el ejemplo contiene seis apartados y tú necesitas cuatro, elimina los dos sobrantes.

No inventes contenido solamente para conservar la estructura original.

Clonar un Item

Si necesitas agregar un nuevo apartado:

1. utiliza Navigator;

2. selecciona la unidad completa;

3. utiliza Clonar elemento;

4. reemplaza:

   • encabezado;

   • contenido;

   • enlaces;

   • identificadores personalizados si existen.

No clones únicamente el Heading

Si seleccionas solamente:

Heading

puedes terminar con:

Item
├── Heading
├── Heading
└── Contenido

cuando en realidad querías crear un Item completamente nuevo.

Selecciona la unidad completa

Conceptualmente:

Accordion
└── Item
    ├── Encabezado
    └── Contenido

Selecciona:

Item

o el contenedor equivalente del diseño.

Clonar componentes interactivos requiere atención

Los acordeones necesitan mantener correctamente la relación entre:

• encabezado;

• contenido desplegable;

• estructura interna.

Por eso es preferible clonar la unidad completa y conservar sus Classes estructurales.

IDs después de clonar

Si el Item utiliza IDs personalizados, revísalos después de clonar.

Un ID debe mantenerse único dentro de la página.

Evita:

Item 1
id="garantia"

Item 2
id="garantia"

Importante

No asumimos que todos los diseños del editor utilicen IDs visibles o que la clonación siempre los conserve de la misma manera.

La recomendación es:

si encuentras IDs en una unidad clonada, comprueba que sigan siendo válidos y únicos.

Eliminar un Item

Si necesitas quitar uno:

1. selecciónalo mediante Navigator;

2. comprueba que tengas la unidad completa;

3. utiliza Eliminar elemento.

Recuerda que Waclis no muestra una confirmación antes de eliminar.

Si eliminas algo incorrectamente

Utiliza:

Deshacer

inmediatamente.

No elimines solamente el texto

Si quieres eliminar:

Garantía
+
contenido de garantía

elimina el Item completo.

No dejes:

[ Item vacío ]

dentro del acordeón.

Mover Items

También puedes reorganizar el orden.

Por ejemplo:

Antes:

Información general

Garantía

Características

Envíos

Después:

Información general

Características

Envíos

Garantía

Selecciona la unidad completa y utiliza las herramientas de movimiento.

Revisa Navigator después de mover

Esto permite confirmar que el Item continúa dentro de:

Accordion

y no quedó fuera de la estructura interactiva.

Orden lógico de la información

El orden debería ayudar al visitante.

Por ejemplo, para un producto:

1. Características
2. Medidas
3. Materiales
4. Envíos
5. Garantía

Para un servicio

1. Qué incluye
2. Requisitos
3. Implementación
4. Plazos
5. Soporte

Para un proceso

1. Preparación
2. Configuración
3. Validación
4. Puesta en marcha

El orden puede seguir el recorrido natural del usuario.

Agrupar información relacionada

Evita un acordeón como:

▸ Garantía
▸ Equipo
▸ Colores
▸ Empresa
▸ Envíos
▸ Historia
▸ Medidas

sin una lógica común.

Puede ser mejor separar contenidos en diferentes Sections.

Un acordeón debe tener un tema reconocible

Por ejemplo:

INFORMACIÓN DEL PRODUCTO

▸ Materiales
▸ Medidas
▸ Cuidados
▸ Garantía

o:

PROCESO DE IMPLEMENTACIÓN

▸ Preparación
▸ Configuración
▸ Capacitación
▸ Puesta en marcha

Título de la Section

Puedes agregar un Heading general.

Por ejemplo:

Información adicional

Conoce todos los detalles

Especificaciones

Proceso de implementación

Preguntas frecuentes

según el contenido.

No es obligatorio utilizar “Acordeón” como título

El visitante no necesita conocer el nombre del componente.

El título debería describir la información.

Por ejemplo:

Especificaciones del producto

es mucho mejor que:

Acordeón de información

Mantén los encabezados relativamente breves

Por ejemplo:

Garantía y devoluciones

es más sencillo que:

Todo lo que debes conocer acerca de nuestras políticas relacionadas con garantías y devoluciones de productos

La explicación extensa puede ir dentro.

Encabezados de longitud similar

No tienen que medir exactamente lo mismo, pero una estructura equilibrada facilita el recorrido.

Por ejemplo:

Materiales

Medidas

Cuidados

Garantía

Cuidado con encabezados muy largos en celular

Un encabezado puede necesitar varias líneas.

Comprueba:

• altura;

• ícono;

• Padding;

• alineación.

No reduzcas demasiado el texto solamente para mantenerlo en una línea.

El contenido puede ser más extenso

Una de las ventajas del acordeón es que el contenido solo ocupa espacio visual cuando se consulta.

Puedes utilizar respuestas algo más desarrolladas que en una Card pequeña.

Aun así, mantén una estructura clara.

Separar información compleja

En lugar de:

▸ Información completa

con todo dentro, puede ser mejor:

▸ Características

▸ Compatibilidad

▸ Instalación

▸ Garantía

Esto ayuda al visitante a encontrar el tema exacto.

¿Uno abierto o varios?

El comportamiento exacto depende del diseño o componente utilizado.

Algunos acordeones pueden permitir diferentes formas de interacción según cómo estén construidos.

No es necesario modificar esta lógica si el diseño elegido ya satisface tu necesidad.

Concéntrate primero en:

• encabezados;

• contenido;

• cantidad;

• orden;

• presentación.

No modifiques JavaScript solamente para cambiar el contenido

Si el acordeón:

• abre;

• cierra;

• funciona correctamente;

y solamente quieres reemplazar textos, no necesitas modificar código.

Utiliza las opciones visuales del editor.

Classes estructurales

Los componentes interactivos pueden depender de Classes propias para funcionar.

No elimines ni sustituyas Classes existentes sin comprender su función.

Ejemplo

Si encuentras un elemento con varias Classes:

class="... ... ..."

y necesitas agregar:

acordeon-producto

puede ser preferible agregar tu Class y conservar las existentes.

No reemplaces

class="estructura-a estructura-b"

por:

class="mi-acordeon"

sin saber qué estás eliminando.

El componente puede dejar de abrir o cerrar correctamente.

Class propia para personalizar

Puedes utilizar una estructura conceptual como:

producto-acordeon
producto-acordeon-item
producto-acordeon-titulo
producto-acordeon-contenido

manteniendo las Classes que ya utiliza el componente.

Linked styles

Si todos los Items comparten una Class visual, Waclis puede mostrar:

Linked styles

cuando modificas:

• fondo;

• Border;

• Padding;

• Typography.

Esto puede ser deseable para mantener todos los Items consistentes.

Ejemplo

Todos los encabezados:

class="acordeon-titulo"

pueden compartir:

• color;

• Font weight;

• Padding;

• fondo.

Si quieres destacar un Item

Puedes mantener la Class general y agregar una excepción.

Por ejemplo:

class="acordeon-item destacado"

No necesitas eliminar el estilo común.

Diseño visual de los Items

Puedes personalizar:

• Background Color;

• Text Color;

• Border;

• Border radius;

• Padding;

• Typography;

• espacios.

Una estructura limpia puede ser suficiente

Por ejemplo:

────────────────────────────────────
Características                     +
────────────────────────────────────
Medidas                             +
────────────────────────────────────
Garantía                            +
────────────────────────────────────

No todos los acordeones necesitan Cards grandes.

Otra alternativa

┌──────────────────────────────────┐
│ Características               + │
└──────────────────────────────────┘

┌──────────────────────────────────┐
│ Medidas                       + │
└──────────────────────────────────┘

Ambas pueden funcionar.

El indicador de interacción

Un acordeón suele necesitar una señal visual de que puede abrirse.

Puede aparecer mediante:

• flecha;

• símbolo +;

• chevron;

• otro ícono.

Mantén ese indicador visible y coherente.

No confíes solamente en Hover

En un celular no existe el mismo comportamiento que al pasar el mouse.

El encabezado debería parecer interactivo también sin Hover.

Hover en el encabezado

Puedes utilizar un Hover sutil:

• cambio de fondo;

• cambio de color;

• cambio de borde.

Pero no es obligatorio.

No utilices un efecto excesivo

El objetivo principal es permitir localizar y consultar información.

Una animación llamativa en cada encabezado puede distraer.

Estados Active

Dependiendo de la estructura, puedes personalizar estados interactivos cuando corresponda.

Si utilizas:

Estilo → State

comprueba cuidadosamente qué elemento estás modificando y si el estilo es compartido.

No dependas de Active para que el contenido sea comprensible

El texto y la relación entre encabezado y contenido deben ser claros independientemente del efecto visual.

Padding del encabezado

Un encabezado necesita suficiente espacio para ser:

• legible;

• fácil de seleccionar;

• cómodo en dispositivos táctiles.

Evita áreas demasiado pequeñas.

Espacio para el ícono

Si tienes:

Características +

asegúrate de que el título no se superponga con el indicador cuando el espacio se reduce.

Comprueba especialmente celular.

Responsive

Los acordeones suelen adaptarse bien a estructuras de una columna.

Por ejemplo:

Desktop

┌──────────────────────────────┐
│ Características            + │
└──────────────────────────────┘

┌──────────────────────────────┐
│ Materiales                 + │
└──────────────────────────────┘

Celular

┌──────────────────┐
│ Características +│
└──────────────────┘

┌──────────────────┐
│ Materiales      +│
└──────────────────┘

Pero debes comprobar:

• textos largos;

• Padding;

• íconos;

• Links;

• listas.

Acordeones en dos columnas

Puede existir una composición con dos grupos.

Por ejemplo:

[ Grupo A ]      [ Grupo B ]

Si las respuestas son extensas, revisa especialmente tablet y móvil.

En pantallas pequeñas puede ser preferible:

[ Grupo A ]

[ Grupo B ]

No mantengas columnas demasiado estrechas

Un contenido desplegado necesita suficiente ancho para leerse.

Utiliza Grid Row y las configuraciones responsive cuando corresponda.

Links dentro del contenido

Puedes incorporar enlaces.

Por ejemplo:

Garantía

Consulta las condiciones completas aquí:

[ Ver condiciones de garantía ]

Utiliza textos de enlace descriptivos

Es preferible:

Ver condiciones de garantía

que:

Haz clic aquí

Botones dentro del acordeón

También puede existir un Button si la estructura lo necesita.

Por ejemplo:

Documentación

Descarga la ficha técnica completa.

[ Descargar ficha ]

Comprueba que el botón continúe siendo accesible en móvil.

Imágenes dentro de un Item

Un contenido desplegable también puede contener una imagen si el diseño lo requiere.

Por ejemplo:

▾ Medidas

[ esquema técnico ]

Alto: ...
Ancho: ...

En ese caso revisa:

• Width;

• Alt;

• responsive;

• peso de la imagen.

No conviertas todos los Items en composiciones complejas

Si cada apartado contiene:

• imágenes;

• botones;

• videos;

• múltiples columnas;

tal vez sea más apropiado crear Sections independientes.

Utiliza el acordeón cuando realmente facilite la navegación.

Tablas dentro de un acordeón

Puedes utilizar una Table para datos estructurados.

Por ejemplo:

▾ Especificaciones

| Medida | Valor |
| Alto   | ...   |
| Ancho  | ...   |

Comprueba especialmente el comportamiento móvil.

Una tabla demasiado ancha puede generar scroll horizontal.

Formularios dentro de un acordeón

Técnicamente una estructura compleja puede incluir distintos componentes, pero antes de colocar un formulario dentro de un panel desplegable evalúa la experiencia.

Para una acción principal puede resultar más claro mantener el formulario visible.

Acordeón para especificaciones técnicas

Un ejemplo muy útil:

ESPECIFICACIONES

▸ Dimensiones

▸ Materiales

▸ Compatibilidad

▸ Cuidados

▸ Garantía

El visitante puede consultar solamente los datos que necesita.

Acordeón para un proceso

CÓMO FUNCIONA

▸ 1. Solicitud

▸ 2. Evaluación

▸ 3. Implementación

▸ 4. Puesta en marcha

▸ 5. Soporte

Si necesitas enfatizar una secuencia cronológica más visual, también puedes considerar la sección Timeline, que veremos más adelante.

Acordeón vs Timeline

Utiliza:

Acordeón

cuando necesitas organizar información desplegable.

Utiliza:

Timeline

cuando el orden temporal o secuencial es parte central de la comunicación.

Ejemplo

2019 → evento
2021 → evento
2024 → evento

es más apropiado para Timeline.

Acordeón vs Tabs

Dentro de Componentes también encontrarás Tabs.

Ambos permiten organizar contenido.

Acordeón

Presenta contenidos en una lista vertical desplegable.

▸ Tema A
▸ Tema B
▸ Tema C

Tabs

Organiza mediante pestañas.

[ Tema A ] [ Tema B ] [ Tema C ]

Contenido...

¿Cuál elegir?

Un acordeón puede resultar especialmente cómodo cuando:

• existen muchos temas;

• los títulos son relativamente largos;

• quieres una lectura vertical;

• móvil es importante.

Tabs puede funcionar bien cuando:

• existen pocos grupos;

• los nombres son breves;

• el usuario necesita alternar entre contenidos relacionados.

Acordeón vs Cards visibles

Utiliza Cards visibles cuando quieres que el visitante pueda comparar rápidamente varios elementos.

Por ejemplo:

[ Beneficio 1 ] [ Beneficio 2 ] [ Beneficio 3 ]

No ocultes los beneficios principales detrás de un acordeón sin necesidad.

Un acordeón reduce información simultáneamente visible

Esto es una ventaja cuando existe mucho contenido.

Pero también significa que el visitante debe realizar una acción para descubrirlo.

Utilízalo conscientemente.

Acordeón en Home

Puede utilizarse cerca del final para:

• información adicional;

• preguntas frecuentes;

• condiciones;

• detalles del servicio.

Evita ubicar dentro de un acordeón la propuesta principal de la Home.

Acordeón en páginas de servicios

Puede resultar muy útil para:

Qué incluye

Metodología

Requisitos

Plazos

Soporte

permitiendo que la página mantenga una estructura compacta.

Acordeón en una landing page

Puede utilizarse para resolver objeciones antes de un CTA.

Por ejemplo:

Beneficios
↓
Testimonios
↓
Detalles
▸ Implementación
▸ Condiciones
▸ Soporte
↓
CTA

Acordeón en Productos

Puede utilizarse dentro de bloques editables para información general.

Por ejemplo:

INFORMACIÓN DE COMPRA

▸ Envíos

▸ Formas de pago

▸ Garantía

Recuerda que estos bloques complementan el contenido dinámico de Productos.

Animaciones

El acordeón ya posee una interacción propia relacionada con abrir y cerrar contenido.

No es necesario agregar muchas animaciones adicionales.

Si quieres, puedes utilizar:

Avanzado → Animate on scroll

sobre la Section completa.

Evita animar cada Item de forma diferente

Esto puede hacer que una estructura funcional se vuelva innecesariamente llamativa.

¿Qué sucede si un Item deja de abrir?

Si el acordeón funcionaba anteriormente:

1. utiliza Deshacer si acaba de ocurrir;

2. revisa Navigator;

3. comprueba que el Item siga dentro del Accordion;

4. compara su estructura con un Item que sí funcione;

5. revisa si modificaste Classes;

6. revisa IDs personalizados;

7. verifica si eliminaste alguna parte estructural.

No agregues JavaScript inmediatamente

Si el componente ya funcionaba, el problema puede estar en una modificación estructural.

Diagnostica antes de escribir código adicional.

¿Qué sucede si todos los contenidos permanecen visibles?

Primero comprueba:

• estructura;

• Classes;

• si estás viendo el diseño correcto;

• si una modificación CSS está forzando visibilidad.

No agregues reglas para esconder contenido sin determinar la causa.

¿Qué sucede si el texto queda oculto al abrir?

Revisa:

• Height;

• Max Height;

• Overflow;

• Padding;

• CSS personalizado.

Un Height rígido puede impedir que el contenido crezca.

Evita Height fijo en el contenido desplegable

Si tienes:

.acordeon-contenido {
    height: 100px;
}

y posteriormente agregas más texto, puede cortarse.

Cuando sea posible, permite que el contenido pueda adaptarse a su longitud.

¿Qué sucede si al abrir un Item aparece scroll horizontal?

Revisa el contenido interno.

Puede existir:

• imagen demasiado ancha;

• tabla;

• iframe;

• Width fijo;

• enlace muy largo;

• Margin excesivo.

¿Qué sucede si el ícono queda sobre el título?

Revisa:

• ancho;

• Padding;

• alineación;

• tamaño de Font;

• estructura.

Comprueba móvil antes de agregar Position manual.

¿Qué sucede si los Items tienen estilos diferentes?

Puede deberse a:

• Classes diferentes;

• ID específico;

• Linked styles;

• estilos inline;

• una modificación realizada únicamente sobre un Item.

Si deberían ser iguales, comprueba las Classes compartidas.

CSS personalizado para Acordeones

Si necesitas personalización avanzada, utiliza un alcance específico.

Por ejemplo:

info-acordeon
info-acordeon-item
info-acordeon-titulo
info-acordeon-contenido

Ejemplo

.info-acordeon .info-acordeon-item {
    border: 1px solid #ddd;
    border-radius: 12px;
    margin-bottom: 12px;
}

.info-acordeon .info-acordeon-titulo {
    font-weight: 600;
}

No elimines Classes funcionales

Las Classes propias deberían agregarse a la estructura existente cuando corresponda.

No reemplaces las Classes del componente solamente para utilizar las tuyas.

Evita CSS como

.accordion * {
    display: block !important;
}

si no comprendes su impacto.

Una regla tan general puede alterar el comportamiento desplegable.

CSS solamente visual

Es más seguro utilizar CSS para aspectos como:

• color;

• borde;

• Padding;

• Typography;

sin alterar propiedades funcionales si no es necesario.

Utilizar IA para personalizar un Acordeón

ChatGPT, Claude o Gemini pueden ayudarte.

Por ejemplo:

Estoy trabajando con un Acordeón dentro del Editor de bloques de Waclis.

El acordeón funciona correctamente y NO quiero modificar su comportamiento de apertura o cierre.

La sección principal utiliza:
.info-acordeon

Quiero únicamente:
- Border radius de 12 px.
- Separación de 12 px entre Items.
- Padding de 20 px en los encabezados.
- Títulos con Font weight 600.
- Fondo ligeramente diferente al pasar el cursor.

No elimines ni reemplaces ninguna Class existente.

No agregues JavaScript.

No modifiques otras secciones.

Devuélveme solamente el CSS visual necesario.

Esta restricción es especialmente importante

Indicar:

El acordeón ya funciona correctamente. No modifiques su lógica.

reduce el riesgo de que una IA intente reconstruir un comportamiento que no necesita cambiarse.

IA para organizar el contenido

También puede ayudarte a decidir cómo dividir la información.

Por ejemplo:

Tengo este contenido sobre un servicio:

[pegar información]

Quiero organizarlo en un acordeón.

Agrupa la información en un máximo de cinco Items.

Propón un título breve para cada Item.

No inventes información.

Mantén todos los datos proporcionados.

IA para simplificar encabezados

Puedes pedir:

Tengo estos títulos de acordeón:

[lista]

Hazlos más breves y claros, manteniendo su significado.

Cada título debe permitir comprender qué información encontrará el visitante al abrirlo.

Ejemplo práctico: información de producto

Queremos:

INFORMACIÓN DEL PRODUCTO

▸ Características

▸ Materiales

▸ Medidas

▸ Cuidados

▸ Garantía

Paso 1

Abre:

Secciones → Acordeones

Paso 2

Selecciona un diseño.

Paso 3

Reemplaza el título general.

Paso 4

Reemplaza cada encabezado.

Paso 5

Completa el contenido.

Paso 6

Elimina Items sobrantes.

Paso 7

Clona la unidad completa si necesitas agregar otro.

Paso 8

Reorganiza el orden.

Paso 9

Comprueba la interacción.

Paso 10

Revisa celular.

Paso 11

Guarda.

Paso 12

Utiliza:

Ver página

y abre cada Item.

Ejemplo práctico: proceso de implementación

¿CÓMO ES EL PROCESO?

▸ Relevamiento

Analizamos las necesidades y definimos el alcance.

▸ Configuración

Preparamos las opciones necesarias para el proyecto.

▸ Validación

Revisamos el resultado antes de la puesta en marcha.

▸ Puesta en marcha

La solución comienza a utilizarse en el entorno correspondiente.

▸ Acompañamiento

El equipo continúa disponible según las condiciones del servicio.

Si la secuencia es muy importante

Evalúa posteriormente la sección:

Timeline

porque puede comunicar mejor el orden cronológico.

Ejemplo práctico: documentación

DOCUMENTACIÓN

▸ Manual de usuario

Descripción breve...
[ Descargar ]

▸ Especificaciones técnicas

Descripción breve...
[ Ver ficha ]

▸ Condiciones de garantía

Descripción breve...
[ Ver condiciones ]

El acordeón permite mantener el área compacta.

Buenas prácticas para Acordeones

Recomendamos:

• utilizar un tema común;

• crear encabezados claros;

• colocar una idea principal por Item;

• ordenar lógicamente;

• eliminar Items innecesarios;

• utilizar Navigator antes de clonar o eliminar;

• clonar la unidad completa;

• conservar Classes estructurales;

• revisar IDs personalizados;

• mantener estilos consistentes;

• comprobar contenido largo;

• probar móvil;

• verificar la interacción desde Ver página;

• limitar CSS a cambios visuales cuando el componente ya funciona.

Errores frecuentes

Confundir Acordeones con Preguntas frecuentes

Un acordeón puede contener muchos tipos de información.

Utilizar un encabezado como “Ver más”

Describe qué contiene.

Colocar demasiados temas diferentes en el mismo acordeón

Mantén una temática común.

Crear un Item gigantesco

Divide la información si ayuda al visitante.

Clonar solamente el Heading

Clona la unidad completa.

Eliminar solamente la respuesta

Elimina el Item completo cuando corresponda.

Mover solo el encabezado

Mueve la unidad completa.

Eliminar Classes internas

Puede afectar la interacción.

Repetir IDs personalizados

Mantén identificadores únicos.

Modificar JavaScript para cambiar textos

No es necesario.

Agregar JavaScript cuando el componente ya funcionaba

Diagnostica la estructura primero.

Utilizar Height fijo para contenido variable

Puede cortar información.

Mantener dos columnas demasiado estrechas en celular

Adapta la estructura.

Utilizar Hover como única indicación de interacción

El acordeón también debe ser comprensible en dispositivos táctiles.

Ocultar información esencial detrás de un acordeón

Mantén visibles las condiciones principales cuando corresponda.

Utilizar CSS global

Limita el alcance a la sección.

No probar todos los Items

Abre y revisa cada uno después de guardar.

Flujo recomendado

1. DEFINIR EL TEMA
↓
2. DIVIDIR LA INFORMACIÓN EN ITEMS
↓
3. ORDENAR LOS ITEMS
↓
4. ELEGIR DISEÑO
↓
5. AGREGAR ACORDEÓN
↓
6. REEMPLAZAR ENCABEZADOS
↓
7. REEMPLAZAR CONTENIDO
↓
8. ELIMINAR / CLONAR ITEMS
↓
9. REVISAR NAVIGATOR
↓
10. PERSONALIZAR ESTILO
↓
11. REVISAR RESPONSIVE
↓
12. PROBAR APERTURA / CIERRE
↓
13. GUARDAR CAMBIOS
↓
14. VER PÁGINA

Checklist antes de publicar un Acordeón

• El acordeón tiene un tema claro.

• Cada Item corresponde a un tema concreto.

• Los encabezados permiten anticipar el contenido.

• No quedan textos de ejemplo.

• Eliminé Items innecesarios.

• El orden es lógico.

• Las unidades clonadas conservan la estructura correcta.

• Revisé Navigator.

• No eliminé Classes estructurales necesarias.

• Los IDs personalizados son únicos.

• Los enlaces funcionan.

• Las imágenes o tablas internas se adaptan correctamente.

• Ningún contenido queda cortado al abrir.

• No existe scroll horizontal inesperado.

• Los encabezados son cómodos de utilizar en celular.

• Los íconos de interacción se visualizan correctamente.

• Desktop funciona.

• Tablet funciona.

• Celular funciona.

• Probé todos los Items.

• El CSS personalizado está limitado a esta sección.

• No agregué JavaScript innecesario.

• Probé el resultado mediante Ver página.

En resumen

Los Acordeones permiten organizar información en elementos que pueden desplegarse cuando el visitante necesita consultarlos.

Puedes utilizarlos para:

• especificaciones;

• procesos;

• requisitos;

• documentación;

• garantías;

• instrucciones;

• condiciones;

• preguntas frecuentes;

• contenidos adicionales.

La diferencia principal es:

Preguntas frecuentes → define el contenido.

Acordeón → define la forma de organizarlo.

Una estructura habitual puede pensarse como:

Accordion
├── Item
│   ├── Encabezado
│   └── Contenido
├── Item
└── Item

Por eso, cuando necesites:

• clonar;

• mover;

• eliminar;

trabaja sobre la unidad completa y utiliza Navigator para confirmar la jerarquía.

También es importante conservar las Classes necesarias para el funcionamiento del componente.

Si el acordeón ya abre y cierra correctamente y solo quieres cambiar su aspecto:

modifica el diseño, no reconstruyas su lógica.

Utiliza CSS o Estilo para personalizaciones visuales y evita intervenir sobre JavaScript o estructuras funcionales sin una necesidad concreta.

Una buena sección de Acordeones permite presentar mucha información sin abrumar al visitante, manteniendo cada tema fácil de encontrar y consultar.