FAQ Section in Elementor: Complete Setup Guide

Elementor includes two built-in widgets for creating FAQ sections: the Accordion widget (one item open at a time) and the Toggle widget (multiple items can stay open). Both are available in Elementor Free. This guide shows you how to set up, style, and optimize your Elementor FAQ section step by step.

Creating FAQ Sections with Elementor

Elementor makes FAQ creation straightforward with its drag-and-drop interface. You don't need any coding knowledge or additional plugins—the built-in widgets handle the accordion functionality.

The main decision is choosing between the Accordion and Toggle widgets. Both look similar but behave differently when users interact with them.

Elementor's Built-in FAQ Options

Accordion Widget

The Accordion widget displays expandable content sections. When you click to open one item, any previously open item automatically closes. This keeps the FAQ section compact and focused.

• Only one section open at a time
• First item open by default (configurable)
• Clean, traditional FAQ experience
• Best for longer FAQ sections where space matters

Toggle Widget

The Toggle widget also displays expandable sections, but multiple items can remain open simultaneously. Users can expand several questions at once for comparison or reference.

• Multiple sections can be open at once
• All items closed by default (configurable)
• Users have more control
• Good when users might compare answers

Which to Choose

For most FAQ pages, use the Accordion widget. The single-open behavior is what users expect from FAQs, and it keeps your page tidy. Use Toggle only if users genuinely need to view multiple answers simultaneously. For more on accordion design decisions, see our FAQ accordion design guide.

Step-by-Step: Creating an FAQ with Elementor Accordion

Adding the Widget

1. Open your page in Elementor editor
2. In the left panel, search for "Accordion"
3. Drag the Accordion widget to your desired location on the page
4. The widget appears with default placeholder content

Customizing Content

1. Click on the Accordion widget to open its settings
2. In the Content tab, you'll see the default accordion items
3. Click on an item to expand its settings
4. Replace the Title with your question
5. Replace the Content with your answer (supports text formatting, links, and basic HTML)
6. Click + Add Item to add more questions
7. Drag items to reorder them

Styling Options

Click the Style tab to customize the appearance:

• Border: Add borders around items or between them
• Background: Set background colors for title and content areas
• Title typography: Font family, size, weight, line height
• Content typography: Separate styling for answer text
• Icon: Change the expand/collapse icon style and color

Mobile Responsiveness

Elementor's accordion is responsive by default. To fine-tune mobile appearance:

1. Click the responsive mode icon in the bottom toolbar
2. Switch to tablet or mobile preview
3. Adjust typography sizes and padding for smaller screens
4. Ensure tap targets are large enough (minimum 44px)

Step-by-Step: Creating an FAQ with Elementor Toggle

Adding the Widget

1. In the Elementor panel, search for "Toggle"
2. Drag the Toggle widget to your page
3. The setup process is identical to the Accordion widget

Differences from Accordion

• All items start closed by default
• Users can open multiple items without others closing
• Different icon animation (plus/minus vs. arrow)
• Same styling options available

When to Use Toggle vs. Accordion

• Use Accordion: Standard FAQ pages, long FAQ sections, when space is limited
• Use Toggle: Comparison content, when users need to reference multiple items, shorter FAQ sections

Advanced Elementor FAQ Designs

Nested Accordions

For large FAQ sections with many categories, you can nest accordions. Place an Accordion widget inside another accordion's content area to create a two-level hierarchy:

• Level 1: Categories (Shipping, Returns, Products)
• Level 2: Individual questions within each category
• Note: Requires Elementor Pro for inner section support, or creative workarounds in Free

FAQs with Icons

Add visual interest by customizing icons:

1. In the Content tab, find the Icon settings
2. Choose between several icon styles (arrow, plus, none)
3. In Style tab, customize icon color, size, and hover effects
4. Consider using different colors for expanded vs. collapsed states

FAQ with Search (Using Add-ons)

Elementor's native widgets don't include search. For searchable FAQs, consider these options:

• Essential Addons for Elementor: Includes an Advanced Accordion with filtering capabilities
• JetElements: Premium add-on with advanced accordion features
• Custom JavaScript: Add a search input that filters accordion items (requires coding)

Adding FAQ Schema to Elementor FAQs

Elementor's accordion widgets don't generate FAQ schema automatically. You need to add it manually or use add-ons.

Manual Method (Custom HTML Widget)

Learn more about FAQ schema markup and why it matters for SEO.

1. Generate your FAQ schema using our FAQ Schema Generator
2. In Elementor, drag an HTML widget to your page (anywhere—it's invisible to users)
3. Paste your JSON-LD schema code into the HTML widget
4. Update and test with Google's Rich Results Test

Using Elementor Add-ons

Some Elementor add-ons include automatic schema:

• Schema Pro: Works with any content, including Elementor accordions
• Rank Math SEO: Has an FAQ block, though separate from Elementor widgets

Using Our Generator Tool

The simplest approach for Elementor users:

1. Enter your FAQ questions and answers in our generator
2. Copy the generated JSON-LD code
3. In Elementor, add an HTML widget at the bottom of your page
4. Paste the code and publish
5. Keep the schema updated when you change FAQ content

Elementor FAQ Design Tips

For comprehensive design guidance beyond Elementor-specific tips, read our FAQ page design best practices guide.

Typography Settings

• Question text: Use 16-18px minimum, bold weight for clear hierarchy
• Answer text: 15-16px with comfortable line height (1.6-1.8)
• Font choice: Match your site's body font for consistency
• Mobile sizes: May need slight reduction, but prioritize readability

Spacing and Alignment

• Add padding inside accordion items (15-20px recommended)
• Use consistent spacing between items
• Align icon position (left or right) based on your design
• Keep content width reasonable (600-800px max for readability)

Color Customization

• Question background: Slightly different shade can help define clickable areas
• Active state: Change color when item is expanded to show state
• Icon color: Match your accent color for visual consistency
• Borders: Subtle dividers between items improve scanability

Hover Effects

• Add hover color change to questions to indicate interactivity
• Keep transitions smooth (0.2-0.3s)
• Don't overdo animations—subtle is better

Elementor FAQ Section Templates

Save time by starting with templates:

• Elementor Template Library: Search for "FAQ" in the template library (Pro feature)
• Save as template: Once you style an FAQ section you like, save it as a template for reuse
• Third-party templates: Sites like Starter Templates and Envato Elements include FAQ section designs

Common Issues and Troubleshooting

Accordion Not Expanding

• Check for JavaScript conflicts with other plugins
• Clear any caching plugins and test again
• Test in incognito mode to rule out browser cache
• Check browser console for JavaScript errors

Styling Not Applying

• Your theme CSS may override Elementor styles—increase specificity
• Clear Elementor's CSS cache (Elementor → Tools → Regenerate CSS)
• Check if you're editing the correct breakpoint (desktop/tablet/mobile)

Schema Not Being Detected

• Verify the HTML widget contains valid JSON-LD
• Check that the script tags are correct
• Use Google's Rich Results Test with your live URL
• Ensure the page is published, not just saved as draft

Elementor FAQ Examples and Inspiration

Common FAQ layout patterns you can create in Elementor:

• Full-width FAQ page: Accordion centered with 800px max width, clean and focused
• Two-column FAQ: Categories on the left, accordion on the right (requires Elementor Pro)
• FAQ section on landing page: Accordion below pricing or features section
• Product page FAQ: Compact accordion below product description
• FAQ with intro text: Heading and paragraph above the accordion providing context