About the Accordion element
On a website, an accordion refers to a vertically stacked list of headers that visitors can click on to expand or collapse the content within. Accordions enhance interaction between customers and your online store by allowing them to control the displayed content. A commonly employed scenario for accordion design is the FAQs page, where multiple questions are listed, and viewers can simply click on a question to reveal the answer they seek.
GemPages provides an Accordion element that enables you to achieve this design on your website. To add the Accordion element to your page, please follow the steps below:
Step 1: In the GemPages Dashboard, select your page to enter the Editor.
Step 2: In the Editor, search for the Accordion element and drag & drop it onto your preferred spot on the page.
Once finished, the Accordion element’s configurations will be presented on the left sidebar, which we will cover in the next section.
Configure the Settings Tab
Item management
Click on the arrow icon and you will see the option to input the title of the accordion. You can also control the number of accordions at this point.
To add an additional item: Simply click on the “Add more” option.
To duplicate an item: Hover over the desired slide and click on the duplicate icon.
To remove an item: Hover over the specific slide and click on the trash icon.
Text
At this point, you have the ability to fine-tune the typography of the accordion. Here are the available options:
- Styles: Select your desired style from the pre-defined options, which include 6 heading styles and 3 paragraph styles.
- Font: Choose the font you wish to use for the text. If you want to use a font that is not listed, you can refer to the provided guidance on how to add a custom font in Editor ver 7.
- Size: Adjust the font size by specifying a value in pixels.
- Color: Modify the color of the text to your preference.
Click on the “Show more” button to reveal more customization options.
Font Weight: Choose your desired font weight from the provided drop-down menu.
Line Height: Adjust the height of the text by specifying a percentage value.
Letter Spacing: Modify the spacing between letters by inputting a value in pixels.
Text Transform: Transform the text in one of the following ways:
- No transformation applied.
- Uppercase: Convert all text to uppercase.
- Lowercase: Convert all text to lowercase.
- Capitalize: Capitalize the first letter of each word.
General
Accordion Icon: Select an icon that represents the expand and collapse action of the accordion.
Icon Position: Decide whether the icon should be positioned on the left or right side of the text within the accordion.
Default Item: Enable this option to set one of your accordion items to be initially open by default. To assign a default item, enter the item order number in the “Default item” field.
Allow Open Multiple: By activating this option, users will have the ability to open multiple accordion items simultaneously, allowing for more than one item to be expanded at the same time.
States
You have the flexibility to determine the appearance of the accordions based on different states: normal, hover, and when clicked for accordion selection. Below are the customization options available to you:
Text Color: Choose the text color to your preference by selecting a color from the provided palette or inputting a specific hex code.
Icon Color: Choose your preferred color for the icon.
Background Color: Customize the background of the header/ question space.
Border: Enhance the header by adding a border. Choose the border color, thickness, and style to achieve the desired effect.
Corner: Input the value into the box to achieve your preferred corner style for the header.
Size
Full width: Activate this toggle to expand the accordion to the full width of your page. Alternatively, you will have the option to specify your desired width in pixels or percentages.
Item spacing: Specify the desired gap between two items in pixels.
Header size: Select the header size (commonly referred to as the question space). You can choose from three predefined sizes or click the three-dot button to customize the size according to your preference.
Inside space: Determine the size of the inner space (typically referred to as the answer space).
Align
This parameter allows you to determine how the accordion is positioned on your page. There are three options to choose including left-aligned, centered, and right-aligned.
Configure the Advanced Tab
For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.
That’s it! If you run into any problems when editing, get in touch with our customer support via email or Live Chat.