About Content List Element
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 Element
- Step 1: Click on the Elements icon > In the PageFly tab choose the Content list element
- Step 2: Drag and drop the desired Content list variant you want into the editor and then start using it
The Content list element comes with multiple variations covering most of your needs. But we will continue to add more variations to help you save time
How To Configure The Content List Element
Content list element comes with plenty of parameters allowing you to fine-tune content appearance for the best possible conversion rate.
Select the element in the layout to view its settings.
General Settings
Select the whole Content list element and navigate to the General tab, plenty of parameters that let you adjust the Content list element will be shown
Content List Item
Content list items is where you use to manage the number of items. With that parameter, you can add, move, duplicate or remove any items in Content list element
| Add new Content list items by clicking on the Add new items button. Note: The number of items in a Content list is unlimited |
 |
| Move the item by clicking-and-holding the ellipsis icon in the left of item, and drag this into the new placement |  |
| Duplicate or remove Content list items by using the two buttons next to each tab item. |  |
Layout Type
The Content list element can display the list of products in two layout types: Grid and Slideshow.
- With Grid Layout: It arranges products in a structured grid format, making it easy for customers to view multiple items at once. Check its configuration options below:
| Items per row: Adjust the number of items displayed in each row. |  |
| Fill last row: If you turn on this option, the elements in the last row will take up the entire width of that row. |  |
| Alignment: Specify the position for the item inside Content list element.
Note: If you enable Fill last row, then Alignment won’t function |
 |
| Item spacing: Adjust space between items. |  |
| Enable equal height: Make all the items inside the Content list have equal height Note: This feature only appears if you select Legacy editor when creating PageFly page |
 |
- With Slideshow: It arranges products in a sliding banner format, allowing you to browse through items one at a time, often with animation effects. Check its configuration options below:
| Items Displayed: Set the number of Content items displayed at a time. |  |
| Items To Scroll: Configure the number of slides that will scroll when you click the navigation button.
The value of Items displayed above is the maximum number of Items to scroll |
 |
| Display Partial Items: Enable this option will make the previous and next items partially visible |  |
| Navigation Type: There are 5 different styles for the left/right arrow navigation buttons. You can also choose “None” to hide those buttons.
Note: On desktop and laptop, some options only appear on mouse over |
 |
| Pagination Type: There are 3 different styles for pagination indicators. |  |
| Set Max Height: If enabled, the slideshow’s height will match that of the highest slide, including hidden slides. |  |
| Vertical Alignment: If “Set Max Height” is disabled, choose from 3 vertical alignment options to align the slides as desired. |  |
| Items Spacing: Adjust the spacing between slides. This setting is defaulted by 30px |  |
Styling Settings
You may modify a range of parameters in the Styling tab, such as element size, spacing, borders, typography, colors, and more, to guarantee that the Content list element matches the overall layout of your page.
You can check more information about the Styling tab here.
How To Configure The Content List Item
After you have completed configuring the Content list element, it is now time to edit the Content list item. You can add news elements, such as Heading, Image, Icon into the Content list variant you are using, as well as remove ones that you don’t intend to use
Similar to the Content list element, Content list item provides a range of parameters to optimize appearance. Selecting the Content list item, you will see its parameters in the General and Styling tabs.
In the General tab, you can choose whether to sync the styling of a Content list item within the Content list element with other items by selecting Yes or No in the Sync item box:
- Yes: Content list item and all elements inside it will be synced with other items.
- No: If you choose this option, there are 2 options you can select to unsync the Content list item:
- All: This is a default option when you choose No. If you choose this option, you will unsync the content list item and its children elements.
- Container: Only unsync the content list item and keep its children elements synced.
For the Styling tab, you may adjust the size, spacing, borders, typography, colors, and more of the Content list item element. Simply click on Content list element > Navigation to Styling to see those parameters
Frequently Asked Questions
1. What is the Content list element?
PageFly Content list element is designed to help you save time on styling similar items and building content boxes with pre-made variants.
If you want to boost your store’s credibility, let’s use the PageFly Content list element to create a trust badge section that’s just as impressive as Dossier’s. Check out this video to see how it’s done:
2. Why should I use the Content List for my page?
The purpose of the Content list element is 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 your customers when scrolling through the Shopify Page.
