El bloque de acordeón te permite añadir secciones de texto expandibles y colapsables a tus páginas de SeedProd. Este bloque ayuda a organizar grandes cantidades de contenido en un formato compacto y fácil de usar que los visitantes pueden explorar a su propio ritmo.
Los bloques de acordeón son perfectos para preguntas frecuentes, listas de características, especificaciones de productos, términos y condiciones, o cualquier contenido donde quieras presentar información de forma clara sin abrumar a los visitantes con muros de texto. Al permitir que los usuarios hagan clic para revelar solo la información que necesitan, creas una experiencia de página más limpia y atractiva.
Añadir el bloque de acordeón a tus páginas
Sigue estos pasos para añadir un bloque de acordeón a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Acordeón en la sección deseada de tu página.
El bloque de acordeón aparece en el panel de Bloques y se puede arrastrar a cualquier sección o columna de tu página.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque de acordeón para abrir su configuración. En la pestaña Contenido, puedes gestionar tus elementos de acordeón y personalizar su apariencia.
Elementos del acordeón:
- Acordeón 1, Acordeón 2, etc.: Haz clic en cada elemento del acordeón para editar su título y contenido. Cada elemento representa una sección colapsable que los usuarios pueden expandir o contraer.
- Añadir nuevo elemento: Haz clic en este botón para añadir secciones de acordeón adicionales a tu bloque. Puedes añadir tantos elementos como necesites para organizar tu contenido de forma eficaz.
Tipografía y espaciado:
- Tamaño de fuente: Ajusta el tamaño del texto dentro del contenido de tu acordeón para que coincida con tus preferencias de diseño.
- Espacio entre: Controla el espaciado vertical entre los elementos del acordeón (el valor predeterminado es 24 píxeles). Aumenta este valor para tener más espacio o disminúyelo para un diseño más compacto.
Personalización de iconos:
- Alineación de icono: Elige dónde aparece el icono de expandir/contraer en relación con el título del acordeón (normalmente alineación izquierda o derecha).
- Icono cerrado: Selecciona qué icono se muestra cuando una sección del acordeón está contraída. Esto ayuda a los usuarios a identificar las secciones que pueden expandir.
- Color del icono cerrado: Elige el color del icono cuando el acordeón está en su estado contraído.
- Icono abierto: Selecciona qué icono se muestra cuando una sección del acordeón está expandida, proporcionando retroalimentación visual sobre el estado de la sección.
- Color del icono abierto: Elige el color del icono cuando el acordeón está en su estado expandido.
La pestaña Contenido ofrece opciones para gestionar los elementos del acordeón, ajustar la tipografía, controlar el espaciado y personalizar los iconos de expandir/contraer.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes personalizar la apariencia visual de tu bloque de acordeón:
Estilos:
- Tipografía: Ajusta la familia de fuentes, el grosor, el estilo y otras propiedades de texto para el contenido del acordeón.
- Color de texto: Establece el color del texto dentro de las secciones de contenido del acordeón
- Tipografía del encabezado: Controla las propiedades de la fuente específicamente para los títulos/encabezados del acordeón
- Color del encabezado: Elige el color de los encabezados del acordeón cuando están en estado cerrado
- Color del encabezado abierto: Establece un color diferente para los encabezados cuando sus secciones están expandidas, proporcionando una retroalimentación visual clara
- Color de fondo: Añade un color de fondo a tus secciones de acordeón para una mejor separación visual
- Color del divisor: Elige el color de las líneas que separan los elementos del acordeón
- Sombra del texto: Añade efectos de sombra a tu texto de acordeón para darle profundidad y legibilidad
- Sombra: Aplica efectos de sombra a todo el bloque de acordeón o a elementos individuales
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de acordeón (Superior, Derecho, Inferior, Izquierdo). Esto determina cuánto espacio aparece entre el acordeón y los elementos circundantes
- Relleno: Ajusta el espaciado interior dentro de tus secciones de acordeón (Superior, Derecho, Inferior, Izquierdo). Esto crea espacio entre el contenido y los bordes del acordeón
Atributos:
- ID de CSS: Muestra el identificador único autogenerado para tu bloque de acordeón. Este ID es creado automáticamente por SeedProd para estilos personalizados o para apuntar con JavaScript
- Clase personalizada: Agrega clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: Añade cualquier atributo HTML al elemento contenedor del acordeón. Introduce cada atributo en una nueva línea usando el formato: nombre-atributo|valor (por ejemplo, aria-label|Sección de Preguntas Frecuentes)
Visibilidad del Dispositivo:
- Ocultar en escritorio: Oculta el bloque de acordeón en pantallas de escritorio
- Ocultar en tableta: Oculta el bloque de acordeón en dispositivos tableta
- Ocultar en móvil: Oculta el bloque de acordeón en dispositivos móviles
Efectos de Animación:
- Animación de entrada: Elige entre varios efectos de animación que se reproducen cuando el acordeón entra en la vista. Esto añade interés visual y atrae la atención a tu contenido
La pestaña Avanzado ofrece amplias opciones de estilo, incluyendo tipografía, colores, espaciado y efectos visuales para que coincidan con tu marca.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de Acordeón y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Acordeón a tu página! Este bloque versátil te ayuda a presentar grandes cantidades de información en un formato limpio y fácil de usar que fomenta la participación sin abrumar a los visitantes. Experimenta con diferentes colores de encabezado, estilos de iconos y opciones de espaciado para crear un acordeón que coincida con tu marca y sirva a tu audiencia.