This article will provide details on how to add/edit the Accordion widget on a web page. Before we begin, let’s cover a couple of key terms to help you better understand what they’re in reference to as you navigate your way through this article.
Section(s): the total area, or section, for each widget.
Container(s): blocks that organize and group content together within a section. Think of them like boxes that hold different parts of a webpage, such as text, images, or videos, keeping everything neat and orderly. For example, the Split Content/Image widget has a block designated for text and a block designated for an image/video; these separate blocks are containers, since they contain the content within the section.
To add this widget to a page, click +Add Section >> select Accordion >> then use the settings in the left-hand menu to make your edits, which we’ll cover in more detail below.
ACCORDION
What’s Included/Available: header, customizable content blocks with sub-content blocks that expands/collapses when clicked, background
Common Uses: show and hide content interactively for your visitors; product details and specifications, FAQ’s, content rich articles, etc.
How to Edit/Settings
- Start with editing the Head/Title of the first content block, which should be the subject of what you’ll be providing further details on. For example, if you’re using this to set up a FAQ you would add the question to the Head/Title (ex: What’s included in the program?).
- Next, edit the Content section and add the additional information in correspondence to the Head/Title. Using the FAQ example from above, you would add the answer to the question added in the Head/Title (ex: Program includes daily workouts with videos, hands on coaching, nutrition plan, etc).
- You will then repeat the same steps for each section/dropdown you wish to include. You can add additional sections by clicking Add Item. If you wish to change the order of the sections you can use the directional arrows to move them up/down as desired. You also have the option to copy sections by clicking Duplicate.
- Vertical Padding: controls how much spacing there is between the content and top/bottom of the section, which you can adjust by using the slider. You can click Default to reset the padding back to its original size.
- Font Size: gives you the option to adjust the size of all fonts in the section, which you can adjust by using the slider. You can click Default to reset the font size back to its original size.
- Heading Font Size: gives you the option to adjust the Head/Title font size, but does not affect the text in the Content. You can click Default to reset the font size back to its original size.
- Mode: allows you to choose if multiple sections can be opened simultaneously, or if they can only be viewed one at a time, which you can select from its dropdown.
- Head Content: the content you add here will be displayed at the top of the section, but unlike the main content this does not have a dropdown option; click Edit Content >> add your desired content >> then Set Content.
- Foot Content: the content you add here will be displayed at the bottom of the section; click Edit Content >> add your desired content >> then Set Content.
- Background Color: allows you to change the background color of the section; click into the box and select the desired color. If you’re familiar with color hex codes you can also paste those into the Background Color field.
- Text Color: gives you the option to change the font color of all text in the section; click into the box and select the desired color. If you’re familiar with color hex codes you can also paste those into the Text Color field.
- Heading Color: gives you the option to change the font color of the text in the Head Content; click into the box and select the desired color. If you’re familiar with color hex codes you can also paste those into the Heading Color field.
- Item Heading Color: gives you the option to change the font color of the Head/Title text; click into the box and select the desired color. If you’re familiar with color hex codes you can also paste those into the Item Heading Color field.
- Once you’ve finished making your edits to the Accordion section, click Set Content >> then Save the page to complete the process.
We hope this helps but please feel free to reach out to
success@myfithive.com with any additional questions you may have.