How to Edit PageFly Content List Element

About Content List ElementClick to copy

PageFly Content List Element is designed to help you save time on styling similar items and building content boxes with pre-made variants, so that you can spend time on other tasks.

With Content list, you only need to customize an element in one Content list item and the style will be applied to that element in Content List. In Particular, you can change the content in each item.

You can check more details in the video tutorial below.

How To Access PageFly Content List ElementClick to copy

  • Step 1: Click on the “Element” icon on the left toolbar
  • Step 2: In PageFly tab, click on the Content List element in the menu
  • Step 3: Drag and drop the variants that you need into the page editor and then start using it.

There are 11 types for you to choose from, you can scroll down to find more.

pagefly content list

Note: You can search this element by using the search function instead of finding it in the sidebar.

How To Configure The Content List ElementClick to copy

A Content list contains one or more items. It’s possible to control the number of items in a Content list via the General tab. Select a Content list to see its parameters.

The parameters in the General and Styling tab are specific to this element.

General ConfigurationClick to copy

Add Content List ItemClick to copy

  • Click onto the Add new item button in the General tab, the new item will be displayed in the Content list item box.
  • The number of items in a Content list is unlimited.

Add content list item

Move Or Delete An ItemClick to copy

Each content list item can be repositioned and deleted

  • To move the item, in the Collection list item box, click-and-hold the ellipsis icon in the left of item, and drag this into the new placement

  • To delete the item, click onto the Trash bin icon in the Collection list item box

Layout TypeClick to copy

There are 2 layout types for the Content List element to display

Grid Layout

  • Items per row:
    • Adjust the number of items in a row
    • The maximum of items displayed per row is 12

  • Item spacing:
    • Adjust the spacing among the items in the Content list
    • This setting is defaulted by 30px

  • Enable equal height: Make all items inside this Content list have Equal Height

  • Content Position: Specify the position for the content inside this Content list

Slideshow Layout

  • Items per Show: Set the number of items displayed on one slide

Note: The value of Items per show is always 1 unit smaller than the value of the total number of Content list items

  • Items to scroll: Set the number of slides will show up additionally after we click  the navigation button (if any)

Note: the maximum number depends on the amount of number of Items Per Show you’ve set above

  • Item spacing: Adjust the spacing among the items in the Content list

  • Display partial items: make the next item partially visible

  • Navigation type: There are 5 different styles for the left/right arrow navigation button on the slide.

Note: some navigation options only appear on mouseover and all options will be shown as default on mobile view.

  • Pagination type: There are 3 different styles for pagination

  • Set max height: If any, the height of the whole slide will fit to the highest slide, including those that are hidden

  • Vertical alignment: If you disable Set max height option, there are 3 alignment options of Vertical alignment for you to choose

You can get further information about ATTRIBUTES, VISIBILITY, ANIMATION parameters here

Styling ConfigurationClick to copy

You can check more information about the Styling tab here

Important NoteClick to copy

Beside Adding new elements in the Content List, you also can Delete some elements in pre-made variants.

How To Configure The Content List ItemClick to copy

With Content list items, you can choose how to sync styling between Content list item elements in Styling synchronization.

  • Sync to master: Content list item and all elements inside it will be synced with others items.
  • Unsync CLI element only: not sync the Content list items styling, all elements inside it still sync styling with others.
  • Unsync CLI and all children: not sync the Content list item and all elements inside to others. When you select this type, you can edit for a single Content list and this changes will not be applied to others

The parameters in the General and Styling tab of items are the same with other elements.

Frequently Asked QuestionsClick to copy

1. Overview

Maximum of Items per row?12
Default Item Spacing?30 px
How many types of Content List element are there?11

2. What is the Content List element?

PageFly Content List Element is designed to help sellers save time on styling similar items and building content boxes with pre-made variants.

3. Why should I use the Content List for my page?

Content List Element is here to break down contents into main points from long documents, as it’s essential to edit complicated boring contents, to bring join and interests to customers when scrolling through the Shopify Page.

Navigate this category

Next articlePrevious

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us