Create Interactive Collapsible Content with Accordion Element in PageFly

Table of Contents:

1. Introduction
2. Setting Up General Settings for the Accordion Element
   1. Adding Accordion Items
   2. Editing Accordion Icon Selector
   3. Allowing Open Multiple Toggle
   4. Setting Default Active Item
   5. Enabling Scroll Top Toggle
3. Adjusting Accordion Header
4. Styling the Accordion Element
   1. Normal State
   2. Hover State
   3. Active State
5. Editing Accordion Content
6. Testing and Fine-tuning on Live View
7. Using Pre-made Section Templates
   1. Adding a Section Template
   2. Modifying the Accordion Content
8. Conclusion

How to Use the Accordion Element on Your PageFly Page

The accordion element is a powerful tool that allows you to create collapsible content on your PageFly page. Whether you want to create a FAQ section or add collapsible content to your page, the accordion element can greatly enhance the user experience. In this tutorial, we will guide you through the process of using the accordion element effectively.

1. Setting Up General Settings for the Accordion Element

To start using the accordion element, you first need to set up the general settings. Here's how you can do it:

1.1 Adding Accordion Items

In the basic elements section, you will find the accordion element. Choose one of the three accordion variants and drag it to the page canvas. You can then use the settings to add new accordion tabs, duplicate or delete them, and rearrange their order.

1.2 Editing Accordion Icon Selector

The accordion icon selector allows you to choose between three accordion icons and two icon positions. Please note that you cannot upload your own icon here.

1.3 Allowing Open Multiple Toggle

If you want to enable the feature that allows multiple accordions to be open simultaneously, simply toggle on the "Allow Open Multiple" option. This option only works on the live page.

1.4 Setting Default Active Item

The default active item drop-down menu gives your customers the ability to choose an accordion item to be open by default on the live view. However, this setting only works on the live page.

1.5 Enabling Scroll Top Toggle

Enabling the scroll top toggle will automatically scroll the page to the top of an accordion header when users click on it. This feature is only effective on the live page.

2. Adjusting Accordion Header

To further customize the accordion header, you can edit the header text, anchor text, and toggle the icon visibility. If you need more guidance, you can refer to our icon element video tutorial for additional tips and tricks.

3. Styling the Accordion Element

Similar to a button element, the accordion element has three stages: the normal state, hover state, and active state. You can make styling changes to each state to match your page's design.

3.1 Normal State

The normal state is the default appearance of the accordion. You can modify the styling elements to align with your page's visual theme.

3.2 Hover State

The hover state represents the appearance of the accordion when users hover over it. You can adjust the styling elements to enhance the interactive experience.

3.3 Active State

The active state reflects the appearance of the accordion when it is selected by the user. Customize the styling elements to make the selected accordion stand out.

4. Editing Accordion Content

The accordion element is not limited to text. You can also add additional elements like headings, paragraphs, and images to the accordion content section. Drag and drop these elements into the accordion to create visually appealing and informative content.

5. Testing and Fine-tuning on Live View

After setting up the accordion, it's important to test it on the live view. Ensure that the default active item and the allow open multiple options are working as expected. If you encounter any issues or require assistance, you can always reach out to our 24/7 live chat support for help.

6. Using Pre-made Section Templates

If you prefer not to build from scratch, PageFly offers pre-made section templates that you can utilize. By selecting the FAQs template category, you can choose a suitable section template for your needs. Simply modify the content or add additional elements to the accordion content section if necessary.

6.1 Adding a Section Template

To add a section template, click on the plus icon in the page editor. Choose the FAQs section template category and select the desired section. From there, you can customize the content or add new elements to the accordion as required.

6.2 Modifying the Accordion Content

If you decide to use a pre-made section template, you can easily modify the accordion content. Replace existing content with your own or add new elements to provide the desired information to your visitors.

7. Conclusion

The accordion element is a versatile tool that enhances the user experience on your PageFly page. By utilizing its features and customizing its settings and styles, you can create visually appealing and interactive collapsible content. Experiment with different layouts and elements to find the perfect design for your page and engage your visitors effectively.

Highlights:

• Create collapsible content with the accordion element
• Enhance user experience on your PageFly page
• Set up general settings for the accordion element
• Customize the accordion header and its styling
• Add various elements to the accordion content
• Test and fine-tune the accordion on the live view
• Utilize pre-made section templates for ease of use

FAQ:

Q: How can I add an accordion to my PageFly page? A: To add an accordion to your PageFly page, simply drag and drop the accordion element from the basic elements section onto the page canvas. From there, you can customize its settings and content according to your needs.

Q: Can I use my own icons for the accordion element? A: Unfortunately, the accordion element does not currently support the ability to upload custom icons. However, you can choose between three pre-existing accordion icons.

Q: Can I have multiple accordions open at the same time? A: Yes, you can enable the "Allow Open Multiple" toggle in the settings to allow multiple accordions to be open simultaneously. This provides users with the flexibility to view multiple sections of content at their convenience.