How to create a collection of pages and display them on a single page

It is possible to display a collection of pages on your Feelbettr website using a page widget. A widget can be used to display a broad range of content from your site in a number of different layouts and styles.

In this tutorial we are going to see how to display a grid of pages on a single page. The widget displays only a small part of the content item called a stub. Each stub can be used to link directly to the full item being displayed.

Create a collection

1. A group of child pages become a collection based on their common parent.

Pages in your Feelbettr site are grouped in a parent child relationship. In order to include a page in a specific collection it needs to be grouped under the same parent page. In the screen cast below you can see the services parent holds all of the service items for the website.

2. Embedding a widget to display the collection

Once the pages are grouped appropriately the next step is to add a widget in a page to display the collection. In this example we will add a widget to the services page to display a stub of all of the pages that have the services menu as the parent. 

When adding the widget you can choose from a number of layout options and content sources.

However for this example we are going to select:

  • Widget type: grid
  • Number of items: 20
  • Number of columns for the grid: 3
  • Content source - pages (other tutorials will detail how to use the other content sources)
  • Parent page - services (this is the group of items as discussed in the first section)
  • Display settings - In this example we will use image and text. (The text is the page extract as set in the page settings panel for each content item).
  • Ordering - the actual order in the page manager of the pages. These can be dragged and dropped to be reordered. Or alternatively you can select from a range of options including title, publish date ascending and descending ordering.

3. Seeing the widget on the front end

Now when we visit the services page for the demo site the child pages of the services article can be seen in the grid layout determined by the widget. A link to the full item is attached to the image and the item title so that when the user clicks on either of them they are taken to the full version of the page.

4. Setting the image for each item

The image that is displayed in the page stub is controlled via the page settings panel for each page. This image is not automatically displayed in your content but is associated with the page when viewed in a collection or any other widget that displays that page. The image can however be used using the page snippet tool or by directly writing the text {%image%} in your page.

5. Setting the text for each item

The text displayed in the stub is taken from the page extract which is set in the Meta Details panel in the page settings side panel. The text displayed here is automatically truncated to 200 characters.

Still need help? Contact Us Contact Us