The Accordion block allows you to add expandable and collapsible text sections to your SeedProd pages. This block helps you organize large amounts of content in a compact, user-friendly format that visitors can explore at their own pace.
Accordion blocks are perfect for FAQs, feature lists, product specifications, terms and conditions, or any content where you want to present information clearly without overwhelming visitors with walls of text. By letting users click to reveal only the information they need, you create a cleaner, more engaging page experience.
Adding the Accordion Block to Your Pages
Follow these steps to add an Accordion block to your SeedProd page:
Step 1: Add the Block
Under Design > Blocks, drag and drop the Accordion block into the desired section of your page.
The Accordion block appears in the Blocks panel and can be dragged into any section or column on your page.
Step 2: Configure Content Settings
Once added, click on the Accordion block to open its settings. In the Content tab, you can manage your accordion items and customize their appearance.
Accordion Items:
- Accordion 1, Accordion 2, etc.: Click on each accordion item to edit its title and content. Each item represents a collapsible section that users can expand or collapse
- Add New Item: Click this button to add additional accordion sections to your block. You can add as many items as you need to organize your content effectively
Typography and Spacing:
- Font Size: Adjust the size of the text within your accordion content to match your design preferences
- Space Between: Control the vertical spacing between accordion items (default is 24 pixels). Increase this value for more breathing room or decrease it for a more compact layout
Icon Customization:
- Icon Align: Choose where the expand/collapse icon appears relative to the accordion title (typically left or right alignment)
- Closed Icon: Select which icon displays when an accordion section is collapsed. This helps users identify sections they can expand
- Closed Icon Color: Choose the color for the icon when the accordion is in its collapsed state
- Open Icon: Select which icon displays when an accordion section is expanded, providing visual feedback about the section’s state
- Open Icon Color: Choose the color for the icon when the accordion is in its expanded state
The Content tab provides options to manage accordion items, adjust typography, control spacing, and customize the expand/collapse icons.
Step 3: Customize the Design
In the Advanced tab, you can customize the visual appearance of your Accordion block:
Styles:
- Typography: Fine-tune the font family, weight, style, and other text properties for accordion content
- Text Color: Set the color for the text inside accordion content sections
- Header Typography: Control the font properties specifically for accordion titles/headers
- Header Color: Choose the color for accordion headers when they’re in the closed state
- Header Open Color: Set a different color for headers when their sections are expanded, providing clear visual feedback
- Background Color: Add a background color to your accordion sections for better visual separation
- Divider Color: Choose the color of the lines that separate accordion items
- Text Shadow: Add shadow effects to your accordion text for depth and readability
- Shadow: Apply shadow effects to the entire accordion block or individual items
Spacing:
- Margin: Control the outer spacing around your accordion block (Top, Right, Bottom, Left). This determines how much space appears between the accordion and surrounding elements
- Padding: Adjust the inner spacing within your accordion sections (Top, Right, Bottom, Left). This creates breathing room between the content and the accordion borders
Attributes:
- CSS ID: Displays the auto-generated unique identifier for your accordion block. This ID is created automatically by SeedProd for custom styling or JavaScript targeting
- Custom Class: Add custom CSS classes to apply specific styles from your theme or custom CSS
- Custom Attributes: Add any HTML attributes to the accordion wrapper element. Enter each attribute on a new line using the format: attribute-name|value (e.g., aria-label|FAQ Section)
Device Visibility:
- Hide on Desktop: Hide the accordion block on desktop screens
- Hide on Tablet: Hide the accordion block on tablet devices
- Hide on Mobile: Hide the accordion block on mobile devices
Animation Effects:
- Entrance Animation: Choose from various animation effects that play when the accordion scrolls into view. This adds visual interest and draws attention to your content
The Advanced tab offers extensive styling options including typography, colors, spacing, and visual effects to match your brand.
Step 4: Save Your Changes
Once you have finished configuring the Accordion block and customizing its appearance, make sure to save your work.
You’ve successfully added an Accordion block to your page! This versatile block helps you present large amounts of information in a clean, user-friendly format that encourages engagement without overwhelming visitors. Experiment with different header colors, icon styles, and spacing options to create an accordion that matches your brand and serves your audience.