How to Add an Accordion or FAQ Section to a Page
Use the Accordion element to show questions and answers in expandable rows. Visitors click a header to reveal the answer—ideal for FAQs, policy details, product specs, or supporting information that does not need to be visible all at once.
This guide covers how to add the element and configure the main settings that control content and behavior.
Before You Start
Make sure you have:
- FAQ copy written (question + answer for each row).
- A page open in the Page Builder.
- A section or container ready for the FAQ block (often below pricing or testimonials).
Keep your most important sales copy outside the accordion. Use expandable rows for supporting details visitors may read only when they have objections.
Step 1: Add the Accordion Element
- Open Pages and click Edit on your page.
- In the Page Builder, find Accordion in the element panel.
- Drag Accordion into the target section or container.
- Click the accordion on the canvas to open settings.
For long FAQ pages, place the accordion in a dedicated section with a headline above it (for example Frequently Asked Questions).
Step 2: Add and Manage Accordion Items
Each accordion row is an item with two parts:
| Part | What it is |
|---|---|
| Header | The visible question or title visitors click to expand. |
| Content | The answer or body text shown when the row is open. |
Item actions
| Action | What it does |
|---|---|
| Add item | Creates a new FAQ row. |
| Remove item | Deletes a row from the accordion. |
| Reorder items | Changes the order rows appear on the page. |
| Edit header | Updates the question or title text. |
| Edit content | Updates the answer or explanation text. |
Write headers as clear questions: How long does shipping take? works better than Shipping.
Keep answers concise. Long paragraphs inside accordions are harder to scan on mobile.
Step 3: Configure Default State
| Setting | What it does |
|---|---|
| Default state | Controls which item (if any) starts expanded when the page loads. |
Common patterns:
- First item open — Good when the top question addresses the biggest objection.
- All collapsed — Good when you want a compact FAQ block.
- Specific item open — Useful when one answer is critical for compliance or trust.
Test the default state in Preview so you know what visitors see before clicking anything.
Step 4: Configure the Expand Icon
| Setting | What it does |
|---|---|
| Icon | The expand/collapse indicator (such as chevron or plus/minus) when supported. |
| Icon position | Whether the icon sits at the start or end of the header row. |
| Active state | How the icon looks when a row is open vs closed. |
Icons help visitors understand the row is clickable. Make sure the icon does not overlap long header text on small screens.
Step 5: Adjust Layout (Main Style Options)
You do not need to customize every color to launch. Focus on these structural settings:
| Area | What to check |
|---|---|
| Gap between items | Space between FAQ rows so they do not feel cramped. |
| Header padding | Tap-friendly click area on mobile. |
| Body padding | Readable spacing around answer text. |
| Container width | Whether the accordion spans full width or a narrower column. |
| Border or divider | Visual separation between rows when your template uses borders. |
Preview on tablet and mobile. Headers with long text may need shorter wording or more padding.
Step 6: Save, Publish, and Test
- Click Save in the builder.
- Publish the page. See Publish a page.
- Open the live URL.
- Click every row to confirm expand and collapse works.
- Confirm the default open item matches your intent.
Testing checklist
- Open and close each item on desktop.
- Repeat on mobile—tap targets should be easy to hit.
- Confirm no overlapping elements block header clicks.
- Read answers for formatting issues (broken links, missing line breaks).
Best Practices
- Put conversion-critical copy (offer, guarantee, CTA) above or outside the accordion.
- Group related questions together and order from most common to least common.
- Use 5–10 strong FAQ rows rather than dozens of thin answers.
- Match header wording to real customer objections from support tickets.
Troubleshooting
| Problem | What to check |
|---|---|
| Row does not expand | Correct element selected; no overlapping container blocking clicks. |
| Wrong item open on load | Default state setting for that item. |
| Content looks cramped on mobile | Header/body padding and gap between items. |
| Icon misaligned | Icon position and header text length on small screens. |
Outcome
Your page now has a working FAQ or accordion section. Visitors can expand only the answers they need, which keeps the page scannable while still addressing objections in depth.
Related Docs
FAQ
When should I use an accordion instead of plain text?
Use an accordion for FAQs, policies, specs, or supporting details visitors may expand only when needed. Keep essential sales copy visible outside hidden panels.
Can I reorder FAQ questions after creating them?
Yes. Reorder items in the accordion item list. Publish again if the page was already live.
Should the first FAQ be open by default?
It depends on your page. Opening the first item can address the top objection immediately. Keeping all rows collapsed keeps the section more compact.
Can I add links inside accordion answers?
Yes. You can include links in the content body. Test them after publishing to confirm they open correctly on mobile.
How many FAQ items should I add?
Most landing pages work well with roughly 5–10 focused questions. Too many rows can overwhelm mobile visitors even when collapsed.