折叠元素

Use this article to learn about the “fold” element and how to use it.

About collapsing elements

The accordion element is used to create collapsible content on the page, making the page more concise and improving the user experience to increase the conversion rate. You can use the “fold” element as a “label”, the content of a “slide” element, or to display your store’s FAQ.

你可以在下面的视频查看更多信息。

To use the Collapse element, select the icon called Add Element on the left sidebar > Container > select the Collapse element, then drag and drop the element into the page editor.

Note that you can use the search function to find this element, not in the sidebar.

pagefly accordion 1

There are several variants of the folded element to suit most of your needs. We’ll continue to add more variations to help you save time.

Drag a variant into a layout and see how to configure it.

Collapsible element configuration

The accordion element has a number of parameters that allow you to fine-tune the appearance of your content by setting them for optimal conversion rates.

Select an element in the layout to view its parameters.

pagefly accordion 2

Through this article, we will show the parameters of the “General” and “Style” options of the “Fold” element.

General option parameters

1. Content
  • Collapsible Items : Add/remove/duplicate collapsible elements here. You can also rearrange the order of these folded elements by dragging the 3 dots icon to the left of their name.
  • Folded logo : You can choose 3 styles of icons according to your preference.
  • Logo Position : Choose between Left or Right.
  • Allow Multiple Items Open : Allow your visitors to open multiple tabs at once.
  • Open Items by Default: Default items for folded elements, which can be opened without clicking.
2. OperationYou can read more about action parameters here
3. Properties You can read more here .
4. Visibility You can read more here .
5. Animation effect You can read more here .

style option parameter

You can choose from the following styles:
  • collapsible element title
  • Collapse element content

For “Collapse Element Header Style”, in addition to the following parameters, you can also choose “Header State”, which contains 3 options: “Normal”, “Hovered”, “Selected”.

1. OverallYou can read about all these parameters here .
2. MarginsYou can read about all these parameters here .
3. Typesetting and printingYou can read about all these parameters here .
4. BackgroundYou can read about all these parameters here .
5. BorderYou can read about all these parameters here .
6. DisplayYou can read about all these parameters here .
7. Custom CSSYou can read about all these parameters here .

Contains element settings

A collapsible element is a group of multiple contents. You edit by dragging other elements in the “folded content” as normal modules.

pagefly accordion 3

From this, you can drag and drop any other element within the accordion.

Navigate this category

PreviousPrevious article

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese, French and Japanese. Please check the flags on the page header.

I got it!
Start a free trial and enjoy 3 months of Shopify for $1/month. Sign up now