Collections are a powerful way to fetch dynamic data to showcase on your website. Popular website pages that you can create using this element are Blog Archive Pages, Author List Pages, Documentation Archive Pages, and more!
Using Droip’s Collection element, you can easily narrow down the exact scope of the data you want to fetch through various criteria like Collection Type, Post Type, and Taxonomy! Depending on the structure of your website, the options listed within these types differ as they are also fetched dynamically.
To add a Collection to your website, follow these steps:
From the Collection Settings, you can define the scope of the data you want fetched and apply filtering, sorting, and other customizations. To access this, click on the Collection icon on the inline editor.
The first criterion you can set is the Collection Type. Here you’ll find the following options:
Once you’ve selected your Collection Type, you can then configure the specific settings for that type.
The first Collection option is Post. The Post Collection option extends beyond typical Blog Posts. In WordPress, various content types fall under the Post umbrella, including Pages, Attachments, and Custom CSS, among others.
Once you set your Collection as Post, you can then go on to choose these specific Post Types. These options will vary based on the structure of your website.
Posts can be inherited. You can do so by ticking the Parent checkbox.
Select the number of columns you want the Collection to consist of, ranging from 1 to 5 Columns.
Set the filter method and criteria for the data. You can filter by:
To add a filter, click on the + icon that’s in this section’s top right corner. A new window called Add Filter should appear from where you can select the Method and other conditions. You can add multiple filters like this.
To edit or delete a filter, use the ellipsis icon next to each filter.
Specify the conditions to sort the Items by setting the Method and Order. From Method, you can select either Ascending or Descending. And for Order, you can choose which Attribute to sort according to.
To sort, click on the + icon that’s in the top right corner. A new window called Add Sorting will appear from where you can set the Method and Order.
To edit a Sorting, click on the three-dot icon that is beside each of them and choose the Edit option. You can also delete the Sorting by clicking on the three-dot icon again and selecting the delete option.
Enable Items Pagination to limit the number of items displayed on each page. Once enabled, you will be able to set the following:
These settings will be automatically reflected inside the previously empty Pagination Wrapper.
Similarly, ‘Comments’ are another type of content that you’ll often find on websites.
If you’ve selected Comment as your Collection, you can then go on to choose the Comment Type i.e. which set of comments you want to fetch.
Depending on your website’s structure and what’s installed on it, there can also be more than one Comment Type! Examples include Blog Post Comments, Product Reviews, etc.
Since comments are automatically inherited, nested comments can also be showcased easily.
Set the filter method and criteria for the Comments. You can filter by:
To add a filter, click on the + icon that’s in this section’s top right corner. A new window called Add Filter should appear from where you can select the Method and other conditions. You can add multiple filters like this.
To edit or delete a filter, use the ellipsis icon next to each filter.
Specify the conditions to sort the Comments by setting the Method and Order. From Method, you can select either Ascending or Descending. And for Order, you can choose which Attribute to sort according to.
To sort, click on the + icon that’s in the top right corner. A new window called Add Sorting will appear from where you can set the Method and Order.
To edit a Sorting, click on the three-dot icon that is beside each of them and choose the Edit option. You can also delete the Sorting by clicking on the three-dot icon again and selecting the delete option.
Enable Items Pagination to limit the number of items displayed on each page. Once enabled, you will be able to set the following:
These settings will be automatically reflected inside the previously empty Pagination Wrapper.
Lastly, we have Terms. Terms can be anything from Categories to Tags. For this, you can select the following:
As mentioned previously, a Post Type encompasses many forms of content in WordPress. Here, you’ll find the options for Posts, Pages, and more.
In WordPress, Taxonomy is a grouping mechanism used to organize content. Examples include Categories, Tags, etc. You can also create custom Taxonomies for every Post Type.
The options in Taxonomy will differ based on the Post Type selected as each Post Type has a different set of Terms.
Terms can also be inherited. You can do so by ticking the Parent checkbox.
After you’ve configured the Collection element settings, your Collection List will be populated by this content dynamically. This is because the elements that make up a Collection Item have been set up by default to dynamically retrieve the information from the CMS itself.
You can edit these settings by clicking on any one of these elements and opening its Dynamic Content Settings from their inline editor as shown in the image above. Here, you can choose the Type of Content in your data set you want to retrieve as well as specify its Value.
You can have both static and dynamic elements in your Collection List:
Static Elements
Static elements remain the same for all Collection Items. Simply drag and drop them from the Elements Panel into the collection, and they will be static by default.
Dynamic Elements
Certain Static Elements can be set up to fetch and show Dynamic Data. All you have to do is select it and click on the Data Collection icon to configure it.
Was this page helpful?
Our website uses cookies to improve your browsing experience on our website. By continuing to use this website, you agree to their use. For details, please check our Privacy Policy.
Experience Droip in Action – Explore a live-built page and see the power of our builder in action.
Explore Live