The List Block

8 minutes

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
  • events

Data sources

All it takes to list the data correctly is to go through the first tab of the Data settings as follows:

  1. Choose the data Source
  2. Choose the type of sorting
  3. 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.
  4. By limiting the amount of items you can set the number of entries which will be listed, if you aren’t using pagination.
  5. 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.

TIP: Choosing more specific parameters

Parameter selection described in the third step will create a list of entries which correspond to all the chosen parameters. If you want to exclude specific entries from the chosen source, select the individual in the Exclude field.

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.

  1. Set the layout of the list as either the Grid (tile layout) or as the List (list of entries in rows).
  2. Choose, if you want to display the images with the entries. When displaying the images, also choose the aspect ratio of the used images.
  3. 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 %.
  4. 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.
  5. 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.
  6. 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.

Tip: Choosing the right appearance

For clarity and fast navigation around the website, don’t choose different list designs for pages with “similar” content. For example, use the same list for womens’, mens’ and childrens’ pants (or shirts, socks, etc.). A different design can then be used for a list on the homepage.

Filtering entries

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:

  1. 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.
  2. 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.
  3. Next, set the type of parameters selection for every category. The options are:
    1. Select - the visitor chooses just one of the options from the menu
    2. Checkboxes - the visitor chooses by checking one or more options
    3. Links - all the options are displayed and by clicking one of them, the visitor will be shown the one they chose
    4. Radio - the visitor sees all the options and chooses just one
  4. Filtering is set up.

Tip: Correctly chosen filters

Before launching the website, it is recommended to try multiple filter settings. Not all filtering options work great with every parameter. Try asking someone who isn’t setting up the filters.

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.