They say that a website page has 3 seconds to catch a visitor's attention, so if your content is text-heavy, chances are that it's just getting skimmed. Give your members a fresh, convenient and engaging user experience with Accordions!
What is an accordion?
Nope, it's not just an instrument. An accordion is a clickable area that advanced users can create to reveal or hide long pieces of text-heavy, but still important content that your members need. No need to have an internal battle on good design vs. vital information.
What will the accordion look like?
How can I set up my first accordion?
(If you already have accordions on your page, make sure you have separation in your source code, such as <p></p> or <div></div> tags, between the first accordion and your new one when following these steps.)
Go to the page where you'd like to add an accordion.
Click within the page to bring up the content editor.
Add a header or introduction text above where you'd like your accordion to appear. You may also want to add in the text that will appear below your accordion at this point, to ensure your content is ordered correctly.
When you're ready to create your accordion, select the Accordion option.
Once you click Accordion, a modal will pop-up enabling you to enter the Accordion Title.
Click the Insert button to add the accordion to the page.
Next, replace the text inside of the accordion.
Then click the green Save button (always save each section you edit!), and you're all set!
How can I add another accordion?
To add a new accordion, make sure you have separation in your source code, such as <p></p> or <div></div> tags, between the first accordion and your new one.
Once you have created space for the new accordion, repeat the steps above to create subsequent accordions.
Why is the page jumping when I open or close my accordion?
Your experience as a logged-in admin user with the accordions will differ from your non-admin users since you are seeing the site in "edit" mode. You may experience "jumps" in the page when testing the accordions. We recommend logging out and viewing the page with the accordion to preview how the page will truly appear to your users.
Novi Tip: If you choose to have an accordion default to have text hidden, your content will be hidden behind the accordion unless the member knows that the plus/minus signs allow them to click on it for the full text. Make it known that your information lives within the accordion with a great, informative header or description.
Where can I learn more?
Can Novi walk me through it?
If you'd like some professional help getting your accordions set up, check out our One on One Workshops and schedule some time with a Novi team member: https://hq.noviams.com/one-on-one-time