Skip to main content
This guide refers to the latest page template available with the Website Builder and Kajabi Pages. If you are using the Premier Legacy Templates, please refer to the guide here.

​
What is an accordion block?

An Accordion Block displays content in a collapsible dropdown format. Each accordion has a Heading that is always visible and a Body that expands when clicked, making it useful for FAQs, instructions, or any content that benefits from being shown on demand. The Accordion Block behaves as a dropdown bar with a Heading Text identifying the Block. When a user clicks open the Accordion Block on your Page, they can view the Body Text: openingaccordionblock.gif

​
Adding an accordion block

  1. From the Dashboard, click Website.
  2. Click Landing Pages.
  3. Open the page editor for your Page. Learn more
  4. Click the Section you want to edit or Add section..
  5. In the sidebar, click Add Content.
  6. From the list, select the options from the FAQS section (formerly accordion). Select Add.
  7. The accordion block will appear at the bottom of the section as a stack or grid.
  8. Click Save
Accordianfaq
Tip: To include additional accordion blocks in the Section, simply click + Add Content in the Section editor and repeat the steps for adding the Accordion Block. To format your blocks in a Grid, we recommend adding an FAQ Grid Section.

​
Customizing an accordion block

In an Accordion Block, configure the Width of the Block, Heading text, Body text, and your Block Settings: 14ADE06C-C1AA-4FE6-8BBC-5F2C325CADE1.png
Note: The font size and style of the accordion Heading and Body text are controlled by your site’s Style Guide settings, not within the Accordion Block itself. To change how the text appears, update the Fonts and Font Colors settings in your Style Guide. Learn how to customize your Style Guide.
Tip: Utilize the Body Text Editor to easily add your text content to your Accordion Block.

​
Block settings

To adjust the look and feel of the Block, configure your Block Settings by customizing the:
  • Icon: Change the Icon Style to a Plus or an Arrow and select an Icon Color to fit your brand
  • Background: Customize the block background color or image. [Learn more]
  • Desktop and Mobile Layout: Adjust how the block displays on different screen sizes. [Learn more]
  • Animations: Add entrance animations to the block. [Learn more]
  • Time Reveal: Set a delay for when the block becomes visible on the page. [Learn more]
Accessing your Accordion Block Settings:
  1. From the Dashboard, click Website.
  2. Click Pages.
  3. Open the page editor for your Page. Learn more
  4. Hover over the Accordion Block you want to customize and click Edit.
  5. In the sidebar, scroll down to Block Settings to customize the options listed above.
36DCB17A-C28A-4962-AF34-A0A4AA533AC9.png