Elemento Acordeón

¿Qué es un Elemento Acordeón (Accordion Element)?

Un acordeón (accordion) es una lista de encabezados apilados verticalmente en los que los visitantes pueden hacer clic para expandir o contraer. Esto permite a los clientes controlar qué información ven, manteniendo su página organizada y fácil de navegar.

Un caso de uso común para el diseño de acordeón es la página de Preguntas Frecuentes, donde se enumeran múltiples preguntas y los espectadores simplemente pueden hacer clic en una pregunta para revelar la respuesta que buscan:

Cómo Añadir el Elemento Acordeón en GemPages

Para añadir el elemento Acordeón a su página, siga los pasos a continuación:

Paso 1: En el Plantilla principal de GemPages, seleccione su página para entrar al Editor.

Una vez finalizado, las configuraciones del elemento Acordeón se presentarán en la barra lateral izquierda:

Configurar Elemento Acordeón

El elemento Acordeón en GemPages es totalmente personalizable. Las configuraciones se dividen en dos pestañas principales: Configuración y Avanzado.

1. La Pestaña Configuración

Gestión de Artículos

• Para añadir un artículo: Simplemente haga clic en la opción Añadir más . 
• Para duplicar un artículo: Pase el cursor sobre el artículo deseado y haga clic en el icono de duplicar. 
• Para eliminar un elemento: Pase el cursor sobre el artículo específico y haga clic en el icono de papelera.

Estilo de Artículos

• Fondo: Color de fondo para cada artículo (incluyendo el estado contraído y expandido del artículo) en el Acordeón.

• Borde: Personalice el color, grosor y trazo del borde.

• Esquina: Ajuste el radio de esquina para bordes redondeados.

• Sombra: Añada efectos de sombra para dar profundidad.

Encabezado de Artículos

• Icono del Título: La configuración del icono de encabezado de Acordeón.

• Título: El estilo de texto del título del encabezado.

• Icono de expansión: La configuración para el icono expandido de cada artículo en el Acordeón.

• Altura: La altura del encabezado de Acordeón. Por defecto, su altura es Automática, lo que significa que la altura se redimensionará automáticamente para ajustarse al contenido dentro del encabezado. 

• Fondo: Cambie el color de fondo del encabezado.

• Relleno: El relleno del encabezado de Acordeón, cree el espaciado interno desde el borde hasta el contenido dentro del artículo.

• Borde: Personalice los bordes del encabezado.

• Alineación: Alineación del contenido de Encabezado (incluyendo el icono y título del Encabezado).

Contenido de Artículos

• Relleno: El relleno del área de contenido para cada artículo de Acordeón.

Espaciado de Artículos

• Espacio: El espaciado entre cada artículos de Acordeón. Espaciado predeterminado = 16px

Efecto

• Hover de artículo: La configuración para el estilo del encabezado de Acordeón al pasar el cursor.

• Expandir encabezado: La configuración para el estilo del encabezado de Acordeón cuando está expandido. Al hacer clic en la configuración Expandir se abrirá su ventana emergente que contiene la configuración del estado Expandido.

Tamaño

• Ancho: Tamaño del contenido real dentro del elemento Acordeón.

Forma

Estas configuraciones de Forma son para el contenedor del Acordeón.

• Borde
• Esquina:
• Sombra:

Condición de Visualización

• Modo de expansión: Seleccione el número de artículos que un cliente puede abrir simultáneamente.
• La opción Individual les permite abrir solo un artículo.
• La opción Múltiple les permite abrir más de un artículo al mismo tiempo.
• Expansión automática: Establezca uno de los artículos del acordeón para que esté abierto inicialmente por defecto.

Cuando esta opción es Sí, aparecerá la configuración de elegir el artículo expandido por defecto. Seleccione el artículo que está expandido por defecto. Si hay múltiples artículos abiertos por defecto, sepárelos con una coma.

Alineación

• La alineación se desactivará cuando el Ancho del elemento sea 100%.
• Si no, la opción de alineación predeterminada es alinear al Centro.

2. La pestaña Avanzada

Para una personalización más avanzada, navegue a la pestaña Avanzada y siga las instrucciones en este artículo.