The List block allows you to clearly list chosen entries, such as articles, events or e-shop products.
The advantage of the List block is the automatic addition of new content, without having to edit it on every page where you use it.
What can the List block list
As mentioned before, the list block is able to list data, which is contained in individual modules. Modules, which have entries that you can list, include:
- e-shop products
- blog posts
All it takes to list the data correctly is to go through the first tab of the Data settings as follows:
- Choose the data Source
- Choose the type of sorting
- According to the chosen data source there is an option of more specific selection. For example, when listing products, you can only list the products that are a part of a specific category, articles can be listed according to the author, and for events, you can list only the ones with a specific tag.
- By limiting the amount of items you can set the number of entries which will be listed, if you aren’t using pagination.
- If you want to use pagination simply choose what the sliding will look like and then set the number of listed items on one page. (The button text can be changed to your own)
By following these steps, all the work on the Data tab is done.
Appearance of the list
The appearance of the entries can be changed according to their position on the website. Therefore, it is possible to have the same list on every page, but each with different design.
To appropriately edit the appearance, we will use the second tab of the list settings, called Appearance.
- Set the layout of the list as either the Grid (tile layout) or as the List (list of entries in rows).
- Choose, if you want to display the images with the entries. When displaying the images, also choose the aspect ratio of the used images.
- When using the List layout, there will be an option of the image alignment. Choose if the images should be displayed left or right of the entries. You can also set the width of the images in %.
- If you choose the Grid layout, you can select the number of columns in which the entries will appear. The position of the text below the image can also be changed.
- The next option is to show/hide the metadata. Metadata are the additional information about the entries - for articles, it is the author and the date of publication.
- The last option allows you to highlight the first entry. This option will display the first entry separately on the first line (in both layouts) in larger size. It works great for highlighting the newest blog posts.
You might have noticed that in the last update (2.30) a Filtering option was added. Filtering allows for a simpler navigation through the listed entries for your visitors.
To correctly set up the filters, we need to go to the Filters tab and do the following:
- Choose the position of the filters. If you choose the Horizontal option, the filter parameters will appear in a row above the list. For the Vertical option, the parameters will appear in a column next to the list.
- The following settings change according to the chosen data source. Each of the categories can be used for the filter, the choice is up to you.
- Next, set the type of parameters selection for every category. The options are:
- Select - the visitor chooses just one of the options from the menu
- Checkboxes - the visitor chooses by checking one or more options
- Links - all the options are displayed and by clicking one of them, the visitor will be shown the one they chose
- Radio - the visitor sees all the options and chooses just one
- Filtering is set up.
Possible uses of lists
For what exactly can you use the List block? We will show two examples of good uses for this block.
Example 1: Travel blog
Imagine a situation where you are creating a blog about your travels. For 2 weeks you go to Portugal. For every day of travelling, you create one article for your readers.
The ideal way to make the reading of the articles clear and comfortable for the readers is to create a page on your blog for every trip (in our case two weeks in Portugal) and name it accordingly. For this example, it could be: Spring trip to Portugal. And this page should include the List block, which will list all the related articles.
By doing this, you won’t have to manually add every article to the page. You just set it up once and every added article will automatically appear on the page, sorted by the date (so the reader will be able to follow your footsteps day by day).
Example 2: E-shop product categories
Imagine you own a clothing e-shop. In the administration, you have created detailed entries for every product. To make the navigation simple for the visitors, you want to create pages containing different product categories. For example T-shirts, Hoodies, Pants. After creating the T-shirts page, we put the List block on the page. The source in this case will be Products from the T-shirt category. This way, you will have a page with a list of only T-shirts, and new products will appear as you create them in the administration. Without having to edit the page at all.