New from third party EverWeb widget provider, EverWeb PowerUp, is the Accordion FAQ widget which is absolutely free to download and use for EverWeb users. The Accordion widget lets you to add collapsible/expandable text sections to the pages of your website. This is perfect for when you want your site to provide an FAQ section, instructions lists, or when you want to break down a large amount of text in to smaller, more digestible collapsible sections for your visitors. It’s also a simple widget to set up and use… here’s all you need to know…
Downloading and Installing the Accordion Widget
To get started with the Accordion widget on your site, first make sure that you are using EverWeb version 3.4 or higher before continuing. Please also note that sometimes the widget is referred to as ‘accordion’ and sometimes as ‘accordian’ due to a spelling error within the widget In the instructions below, you may, therefore, see different spellings at various times!
- Go to the EverWeb PowerUp website at https://www.everwebpowerup.com.
- Click on the Widgets menu option then click on the Download button for the Accordion FAQ widget.
- The widget file will download to your default download location on your computer.
- Launch EverWeb if you have not done so already then click on the Widgets tab in the Inspector Window.
- Now go to the location on your computer where you downloaded the Accordion FAQ widget to.
- The Accordion FAQ widget file is displayed as a folder called ‘accordian.ewwdgt’ (Note that the folder contains a spelling error).
- Drag and drop the ‘accordian.ewwdgt’ folder on to the widgets you see displayed in the Widgets tab in EverWeb. the widget will be installed.
- You can check that the widget is installed by typing in the first few letters of the widget’s name in the Widget search box e.g. ‘acc’. You should see the widget displayed in the search results.
- The widget is now installed. To use it, just drag and drop it from the Widgets tab on to your page.
The Accordion Widget in Use
Once you have drag and dropped the widget on to your page, move it to the location where you want it on the page. You can use the widget on both fixed width and responsive pages in your site and as a fixed or full width object.
To create a collapsible/expandable section, first make sure that the widget is selected, then go to the Widget Settings tab. Click on the ‘Add’ button in the ‘Accordion Sections’ section. Your new section will be created. You’ll see the section displayed in the Editor Window with the default section name ‘Double click to edit’ label as the label for the accordion section. To change the heading, double click on the label in the Accordions Section of the Widget Settings. Enter the name that you want for the section then press Enter to Continue.
Customizing An Accordion Section
Once you have created your section you will probably want to change its font, color and perhaps background color. To change the font style and size, select the widget in the Editor Window, then press Command+T, or use the Fonts button in the Toolbar, to call up the Fonts Panel. Change the font and font size as desired. Note that your customization will be applied to all of the Accordion Sections you have in the widget. Use Command+T again to close the Fonts Panel.
To change the color of the Accordion Section, use the Styles section of the Widget Settings. Here you can change the color of the text, the background color of the text, hover colors for text and background as well as the color of the background and text of the sections when they are open.
Customizing the Content of an Accordion Section
The text content for a section is added using the Styled Text Editor for the section you want to add text to. the Styled Text Editor has its own controls for changing the front, font style and size as well as font color. If you want to change the color of the text background, you do this using the ‘Content Background Color’ option in the Styles section of the Widget Settings.
Using the Widget with Full Width Settings
As mentioned earlier, you can use the widget in both fixed and responsive page layouts. If you want to set the widget as a full width object, first make sure the widget is selected, then go to the Metrics Inspector and check the ‘Full Width’ option in the ‘Size’ section. In addition, you may find it useful to add some left and right margins to the widget so that it does not bump up against the sides of the browser window. You might also want to limit how wide the full width object can be set to e.g. you might want to limit the width of the object to 800 pixels. `to do this, use the Maximum Width option.
Third Party provider, EverWeb PowerUp, has made a simple, but effective, to use widget that makes adding collapsible/expandable text sections to your website’s pages.
If you have any questions about this post, please let us know in the Comments Section below and we’ll get back to you asap!