An accordion is a list of questions where each answer opens when a visitor clicks the question and closes again when they click it a second time. It keeps a long FAQ page short. EverWeb 4.6 and later has a built-in Accordion. In EverWeb 4.5, use an accordion widget from another company (see below).
In EverWeb 4.6 and later: the Accordion
Add an Accordion
- Open the page and click where you want the FAQ.
- Click Containers in the toolbar and choose Accordion. You can also use Insert > Container > Accordion, or drag Accordion from the Widgets tab.
- You get three sections, with the first one open. Double-click the heading text (Section 1) and type your first question.
- Add the answer in the open area under the heading: drag a Text Box into it and type. A section can hold anything you can put on a page, such as pictures, buttons or a map.
- To open another section while you work, click the arrow at the right of its heading. Then add its question and answer the same way.
Add or remove questions
- Add a question: select the Accordion and click the + button on it, or right-click it and choose Add to Accordion > Accordion Section. To select the Accordion rather than a section, right-click and use Pick Layer.
- Change the order: drag a section up or down, or select it and click the up and down arrows on its label. On a Mac you can also press Command with the up or down arrow key.
- Remove a question: select the section and click its delete button, or press Delete. Edit > Undo brings it back.
Choose how it opens
Select the Accordion and go to Inspector > Widget Settings:
- Open Sections: One at a time (the default) closes the open answer when a visitor opens another. Multiple lets visitors open several at once.
- Which answer is open when the page loads: whatever you leave open in EverWeb. To start with every answer closed, click the arrow on the open section to close it before you publish.
- Name: helps you find this Accordion in lists such as Embed In, for example "Delivery FAQ".
- Content Maximum Width: keeps the questions in a narrower column on a large screen.
Each question is a Heading 3, so it follows your Heading 3 style. See Keep your text consistent with Paragraph Styles.
Use the Accordion on a Responsive page, where everything below moves down to make room when an answer opens. On a Centered Layout (fixed-width) page, the content below doesn't move, so an open answer can cover it. If you use it there, put it at the bottom of the page.
In EverWeb 4.5: an accordion widget
EverWeb 4.5 has no built-in Accordion. Third-party developers make accordion and FAQ widgets for EverWeb: you'll find them on the EverWeb add-ons page. To install one, see Install and use third-party widgets in EverWeb. The widget's maker supports it.
Good to know
- Search engines: closed answers are still part of your page, so search engines read them like any other text. EverWeb doesn't add FAQ structured data (extra code for search results). You don't need it for your answers to appear in Google.
- Phones and keyboards: visitors can tap a question on a phone, or use the Tab and Enter keys on a computer.
- Keep it findable: put your most common questions first, and keep each answer short. Link to a page with the details if an answer needs more room.
Related articles
- Keep your text consistent with Paragraph Styles
- Build a responsive page with Containers so it stacks neatly on a phone
- Install and use third-party widgets in EverWeb
- Make your website accessible: alt text, headings, link text and contrast
- Add a table to a page: price lists, timetables and other rows and columns