El bloque Acordeón te permite añadir secciones de texto expandibles y plegables a tus páginas de SeedProd. Este bloque te 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 acordeón son perfectos para preguntas frecuentes, listas de características, especificaciones de productos, términos y condiciones, o cualquier contenido en el que desee 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, se crea una experiencia de página más limpia y atractiva.
Añadir el bloque Acordeón a tus páginas
Sigue estos pasos para añadir un bloque Acordeón a tu página 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 Acordeón aparece en el panel Bloques y se puede arrastrar a cualquier sección o columna de la página.
Paso 2: Configurar los ajustes de contenido
Una vez añadido, haz clic en el bloque Acordeón para abrir su configuración. En la pestaña Contenido, puedes gestionar los elementos del acordeón y personalizar su apariencia.
Elementos del acordeón:
- Acordeón 1, Acordeón 2, etc.: Haga clic en cada elemento del acordeón para editar su título y contenido. Cada elemento representa una sección plegable que los usuarios pueden expandir o contraer.
- Añadir nuevo elemento: Haga clic en este botón para añadir secciones adicionales de acordeón a su bloque. Puede añadir tantos elementos como necesite para organizar su contenido de forma eficaz.
Tipografía y espaciado:
- Tamaño de fuente: Ajuste el tamaño del texto dentro del contenido de su acordeón para que se adapte a sus 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 obtener más espacio o disminúyelo para obtener un diseño más compacto.
Personalización de iconos:
- Alineación del icono: Elija dónde aparecerá el icono de expandir/contraer en relación con el título del acordeón (normalmente alineación a la izquierda o a la derecha).
- Icono cerrado: Seleccione qué icono se muestra cuando una sección de acordeón está contraída. Esto ayuda a los usuarios a identificar las secciones que pueden expandir.
- Color del icono cerrado: Elija el color del icono cuando el acordeón esté en estado colapsado.
- Icono abierto: Seleccione qué icono se muestra cuando se expande una sección de acordeón, proporcionando información visual sobre el estado de la sección.
- Color del icono abierto: Elija el color del icono cuando el acordeón esté en 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 expansión/contracción.
Paso 3: Personalizar el diseño
En la pestaña Avanzado, puedes personalizar la apariencia visual de tu bloque Acordeón:
Estilos:
- Tipografía: Ajuste la familia tipográfica, el peso, el estilo y otras propiedades del texto para el contenido del acordeón.
- Color del 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 cerrados.
- Color de encabezado abierto: establece un color diferente para los encabezados cuando sus secciones están expandidas, lo que proporciona una respuesta 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 de texto: añade efectos de sombra al texto de tu acordeón para darle profundidad y facilitar la lectura.
- Sombra: Aplica efectos de sombra a todo el bloque de acordeón o a elementos individuales.
Espaciado:
- Margen: controla el espacio exterior alrededor del 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 espacio interior dentro de las secciones del acordeón (superior, derecha, inferior, izquierda). Esto crea un espacio entre el contenido y los bordes del acordeón.
Atributos:
- CSS ID: Muestra el identificador único generado automáticamente para tu bloque acordeón. Este ID es creado automáticamente por SeedProd para estilos personalizados o JavaScript.
- Clase personalizada: añade 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 utilizando el formato: nombre-del-atributo|valor (por ejemplo, aria-label|Sección de preguntas frecuentes).
Visibilidad del dispositivo:
- Ocultar en el escritorio: Ocultar el bloque de acordeón en las pantallas del escritorio.
- Ocultar en tableta: Ocultar el bloque acordeón en dispositivos tableta.
- Ocultar en dispositivos móviles: Ocultar el bloque 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 se desplaza a la vista. Esto añade interés visual y llama la atención sobre tu contenido.
La pestaña Avanzado ofrece amplias opciones de estilo, incluyendo tipografía, colores, espaciado y efectos visuales para adaptarse a tu marca.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Acordeón y personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque 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 se adapte a tu marca y sirva a tu público.