Muestra partes grandes de texto en secciones que pueden contraerse para ayudar a los visitantes a navegar por el contenido con mucho texto.

Usa bloques de acordeón para mostrar contenido de texto en secciones que pueden contraerse. Esta es una gran opción para páginas estructuradas con mucho texto, como preguntas frecuentes u ofertas de productos. Los bloques de acordeón ayudan a mantener tu página breve y los visitantes se desplazan menos.

Mira el video

Cómo funcionan los bloques de acordeón

Los visitantes del sitio ven el bloque de acordeón como una lista de títulos junto a los iconos de expansión. Dependiendo de la configuración de diseño, el primer elemento puede expandirse por defecto.

Los visitantes hacen clic en cada título para abrir su texto de descripción. Cada bloque de acordeón solo puede tener un elemento expandido a la vez. Si hacen clic en un elemento expandido, se contrae. Si hacen clic en un elemento cuando otro elemento ya está expandido, el elemento expandido anteriormente se cierra.

Agregar un bloque de acordeón

Para agregar un bloque de acordeón:

1. Edita una página o publicación, haz clic en Agregar bloque o en un punto de inserción y, a continuación, selecciona Acordeón en el menú. Para obtener ayuda, consulta Agregar contenido con bloques.
2. Abre el editor de bloques presionando el ícono del lápiz en el bloque.
3. En la pestaña Contenido, agrega y edita elementos en el bloque de acordeón. Cada elemento incluye el texto del título, que siempre se muestra, y el texto de descripción, que se muestra cuando el elemento se expande.
4. En la pestaña Diseño, modifica el estilo del bloque de acordeón.
5. Haz clic fuera del editor de bloques cuando hayas terminado. Los cambios se guardan automáticamente.

Agregar y editar elementos

En la pestaña Contenido:

• Haz clic en un elemento de la lista para editar el título y la descripción.
• Haz clic en Agregar artículo para agregar un nuevo artículo.
• Haz clic y mantén presionado un elemento para reorganizarlo.
• Posiciona el cursor sobre un elemento y haz clic en el ícono de la papelera para eliminarlo.

Cuando abras un artículo, verás más opciones:

• Edita el texto del título en el campo Título.
• Edita el texto .de descripción en el campo Descripción
• Haz clic en Duplicar para crear una copia del elemento.
• Haz clic en Eliminar para eliminar el elemento.

Modificar el estilo de un bloque de acordeón

En la pestaña Diseño, puedes modificar el estilo del texto, diseño, aspecto e icono del bloque:

• Haz clic en Título para establecer el formato y la alineación del texto del título.
• Haz clic en Descripción para establecer el formato y la alineación de la descripción, junto con otras opciones como:
  • Ancho, que establece el ancho del texto.
  • Relleno, que establece la cantidad de espacio en blanco alrededor del texto.
  • Alineación, que establece en qué dirección se alinea el texto.
  • Ubicación, que establece dónde se coloca el texto dentro del bloque.
• Activa Expandir primer elemento para que el primer elemento se expanda de forma predeterminada.
• Habilita Permitir varios elementos abiertos para evitar que un elemento se cierre cuando se abre otro.
• Haz clic en Divisores para modificar el estilo de las líneas que dividen cada elemento o deshabilitarlas.
• Haz clic en Ícono para establecer el ícono de expansión como una flecha o un signo más.
• Debajo del ícono, establece su tamaño, grosor y ubicación.
• Define el relleno de filas para cambiar la cantidad de espacio en blanco alrededor de cada elemento.
• En los sitios de la versión 7.1, activa la opción Color de fondo para agregar un fondo de color al bloque, establecer los radios de las esquinas y cambiar el relleno del fondo. Los colores de fondo del bloque no se admiten en la versión 7.0.
• Al lado de Trazo, habilita una línea continua o punteada para delinear el bloque. Para líneas continuas y punteadas, establece el Color y Grosor del trazo. 
• Haz clic en el menú desplegable Modo de fusión para elegir una configuración de transparencia. Estos efectos son ideales si estás superponiendo un bloque de acordeón sobre una imagen u otro contenido visual.
• Para desenfocar el Elemento o el Fondo, activa la opción Desenfocar y usa el control deslizante para ajustar el nivel de desenfoque.

Hay personalizaciones de Trazo, Modo de mezcla y Desenfoque disponibles para las secciones del Editor dinámico. Para las secciones que usan el editor clásico, solamente está disponible la función de Trazo.

Fuente y color del texto

La fuente y el color del texto siguen la configuración de estilos de tu sitio. Ten en cuenta que cambiar esta configuración afecta a todos los elementos de tu sitio web con la misma configuración:

• En el panel Fuentes, los títulos de los bloques de acordeón siguen los ajustes de Encabezado y el tamaño de Encabezado 4. Las descripciones de los bloques de acordeón siguen la configuración de Párrafos y el tamaño de Párrafo 2.
• En el panel Colores, los títulos de los bloques de acordeón siguen el retoque de Encabezado (pequeño) para el tema cromático. Las descripciones de los bloques de acordeón siguen el retoques de Párrafo (mediano).

Otros colores

En el panel Colores, usa los retoques bajo Bloque de acordeón para cambiar el color del divisor, el color del ícono y el color de fondo predeterminado.