Adding an expandable accordion section

Click to expand... Well not here, but on your Page!

Sometimes, you need to present a complex set of information in your page, but you don't want to overwhelm your client. Accordion sections are a great solution! They expand and collapse to help keep everything easy to read.

There's no limit to how many Accordions you can use on a Page - use as many as you need!

Your client will be able to click on each Accordion section to view its contents.

Adding an Accordion 

You can place Accordions in any Block of your page except the Embed Block.

To get started, go to any blank line to bring up the + symbol. Click on that, and then choose Accordion from the menu.

Note: If you're adding multiple accordions to your page, we recommend you hit Return a couple times between them, to leave blank lines. That way, if you decide to place an accordion in a different spot, you can insert it in any of these blank spots. You can remove these when you have your layout finalized.

Adding content to the section

The default accordion is ready for a heading. Type that in, and hit Enter. That opens up the section so you can start adding body text.

Note: If you need to add many accordion sections, you can add your heading and then type Ctrl-Enter or Cmd-Enter. That starts a new accordion section.

In addition to text, you can add images, videos, clickable buttons, and maps to any accordion. Click the + symbol on any blank line to add these.

Note: In the PDF version of your page, all accordions will display expanded.

Styling an accordion section

To get started, click on the top edge of the section. A toolbar will pop up. Click on the styling icon.

There are two general styles for an accordion section:

• Simple style: uses a solid background color
• Visual style: uses a background image

Simple style options

Using the Simple style, you can enable the Header Color switch and choose one of your brand colors.

You can also enable the Background Color switch, which will fill the section with a light tint of the header color.

Visual style options

When you change your Accordion section to Visual styling, Qwilr will load a random image into the header. (Don't worry, you can change this image!)

You can change the height of the header to show more or less of your image, and you can add an overlay of one of your brand colors. You can also adjust its opacity.

Ready to change that image? Head to the top right corner of the header and click the Swap Image icon.

That action takes you to your image library, where you can choose from our library of stock images or upload one of your own.

Note: Qwilr has a mobile-responsive layout. This means that as your page is viewed on different screen sizes, the Accordion headers will change in width. The images you've used in these headers will crop automatically to fit. We recommend using a flexible background image. 690 x 220 pixels is a good starting size.

Button styling

Every Accordion section has a set of buttons to expand and collapse it, and you can customize these as well. 

To get started, click on the top edge of the section to bring up the toolbar. Then click the styling icon. Choose the Button tab.

From there, you can change the button color and symbol. You can also choose a larger button with customized text on it.

Cloning an Accordion section

Once you've set up an accordion section as you like, you can quickly make a copy - it's a great time-saver.

To clone an accordion section, click along its top edge to bring up the toolbar. Then click the Clone icon.

That places an identical accordion below the original one. You can edit the content and styling of the clone as needed.

Deleting an Accordion section

If you need to delete an accordion section, keep in mind that all its content will be deleted as well. You may want to copy/paste the text somewhere else beforehand.

Click on its top edge to bring up the toolbar. Then click the Delete icon.

Got questions? Reach out to our support team by emailing help@qwilr.com!