The Collections feature is useful tool when you have several items of the same type you wish to display on your website. It allows you to create templates for subpages that all follow the same structure. Popular examples include a blog, job postings, or real estate listings, directories or just simple news.
This article explains how to create and use a collection.
Table of contents
- Basic Knowledge
- Start from scratch or with a Collection template
- The first steps: Creating a Collection
- Collection fields
- Content-Manager: Create new entries
- Single-page Layout: The design of your collection entry
- Collection listing: Your Collection overview on the website
- Import your Collection content
A Collection such as a blog consists of 4 parts:
The Collection fields that define the structure of all entries, e.g. title, name, date, published/unpublished filter, text content, etc.
The Collection entries referred to as items that contain the respective content, e.g. blog article or job offer.
The Collection Listing, which organises the preview on the website
The Single Page Layout, which organises the uniform design of the individual collection items.
In the Collections Manager you steer your Collection. Here you will find, among other things, the Content Manager, in which you can manage the individual entries and your content.
To get to the Collection Manager, click on More in the header menu at the top right and then Collections Manager.
Here you can select your Collection. After a click, the corresponding manager for the Collection opens. Or, you can create a new Collection here via + New Collection.
Before you start creating a Collection, here are a few important notes:
- Please note that the Collection is not part of the website editor backup. It is therefore recommended to manually export the Collections from the Collections Manager on a regular basis. We are working on a backup solution in the near future.
- Collections contain dynamic content that is linked to the website editor. Therefore, collections are not included in a website export.
Start from scratch of with a Collection template
There are two ways to create a collection on your website. You can start from scratch with the collection listing, or you can use one of our collection templates. If you start with a template, the collection listing is created directly on the website, with fields and structure in the Collections Manager, including sample content.
If you want to start directly with a template, then open the Collection category in the left-hand content sidebar, scroll to the Collection templates section and insert one of the templates into the desired position on your website using drag & drop.
Then you can read on here and take a look at the individual functions.
If you would like to see a finished collection beforehand in order to familiarise yourself with the function, we recommend our templates "Wanderlust", "Pesk", "Evergreen", "Ashop" or "Opus", for example. Collections are already built into the page there.
The first steps: Creating a Collection
If you want to start with a completely new collection, you can also do this with the following steps:
- In Website Builder, click on More in the top menu on the right. A drop-down menu opens.
- Now click on Collections Manager.
- The panel for your collections opens. Here you will find an overview of all the collections you have created.
- Use + New Collection to create a new Collection. Give the Collection a suitable name, e.g. "Blog", and click on the save icon on the right.
- The Website Editor will now create the collection for you.
- Once the Collection has been created, the Collections Manager opens for you in the same view with an overview of the fields and the single-page layout for your collection. By default, your entries contain the two mandatory fields Name and Slug.
You can now add more fields.
Above the icon for Manage content, a new tab opens in the Website Editor where you can create your entries, e.g. blog posts or real estate offers.
Under Pages, the single page layout is now also added automatically.
With the data fields you can determine which information is to be entered for each entry and in which format. These fields then form the "form" that you fill out for each entry and are linked with elements in the Collection Listing and in the single-page layout in order to display the data contained in an entry.
With each entry, a separate page is automatically created from the single-page layout and the fields you have created.
By default, two mandatory fields are created in Collections:
- The Name is the title of the entry
- Slug is a simplified part of the URL that is used to identify the respective entry and is automatically generated from the name. You can of course customise it, but please note that you cannot use the same slug twice in a Collection.
Add more fields by either clicking on New field in the Collections Manager or by clicking on Fields in the overview of the entries in the Content Manager. You will then be redirected to the Collections Manager.
In the Collections Manager it is possible to create and move the fields separately for each individual collection so that they get your preferred order.
In the section Blog: Fields section, the fields of the Blog Collection are displayed, as this is currently selected. If the Collection were called Info, the section would be called Info: Fields. This way you can quickly and easily check whether you are editing the fields for the correct Collection.
In this section you can not only edit the existing fields, but also add more by clicking on + New field.
To define a new field, you can choose from different field types:
- Text field is suitable for one word or one sentence.
- Richtext is suitable for longer texts that you may want to format.
- Link offers you the option of adding a link.
- CMS allows you to integrate individual elements and section templates or entire pages.
- Files allows you to display files or images
- Checkbox lets you choose between the two statuses "fulfilled" and "not fulfilled", i.e. it is perfect for choosing between two states. For example, you can later use the checkbox to decide whether an entry is "published" or not, in that an active checkbox means "published" and a deactivated checkbox means "unpublished". This can also be used later as a filter for the collection listing.
- Choice gives you the option to create a drop-down selection menu with several options, e.g. to classify the entries in a property listing into different categories, such as flat, houses, office, commercial, etc.
- Date allows you to enter a date, for example, when the article was written.
- Number gives you a sorting option, e.g. sorting by numbers.
Enter the name of the field in the Label input field. As soon as you have decided on a type, another input field Help text is displayed. Enter a short description of the field here if you want to use it as a support. This way you can make sure that you know what this field was intended for, even after a long time.
Here is an example of the different fields using our example blog from the template "Evergreen":
Content Manager: Create new entries
Now create your first entry. To do so, click on the icon for the content manager in the collection manager. A list of your entries opens to the left of the Collection Manager.
- Click on + Add entry to create a new entry.
- Now an overlay opens and you have the possibility to fill your entry with content. Each entry shows you all the fields you have created for the collection and also allows you to enter SEO-relevant information. Here you also have the option of adding new fields.
- Click on Save as soon as you are finished with your changes.
In the next step, it is advisable to first determine how the individual entries are displayed on the website. This is determined via the individual page layout.
Then you determine where and how the collection is displayed and sorted on the website. This is regulated via the collection listing.
Single-page layout: The design of your collection entry
The single-page layout defines the uniform design of all entries. Here you create a template for all your entries in a particular collection.
It is possible to call up this design from different places:
From the Collection Manager:
In the page overview:
Call up the single-page layout and edit the template like any other page in the website editor. All collection fields are available to you for this purpose.
Let's start with a header and a footer. Of course, it is advisable to reference the corresponding elements here.
Between the header and footer you can now define which content from which collection should be displayed.
If you want to add content that should remain static, do not assign a collection field to the element, instead leave it set to No assignment. Content remains static.
For dynamic content, i.e. the content of your individual collection entries, select a suitable element and link it to a collection f
Once you have assigned your fields to the individual elements, you can now use the preview to see how the content of each individual entry looks in this prefabricated layout.
Collection listing: Your collection overview on the website
The collection listing creates an overview of your collection entries on the website. Your blog, your real estate entries or job offers are displayed there.
In the settings panel on the left, you have the option of sorting and filtering.
Please note: You can only display one collection and only entries from a common collection. So-called cross-references between two collections are currently not possible. So think carefully about which collection should display which content.
If you want to display the content in several places on your website or sort it differently, you can simply duplicate the listing or create a new one where the corresponding collection is to be displayed.
You have two options for the collection listing. If you have not yet created a collection, it is possible to create an existing collection here.
If you have already created a collection, we recommend that you work with the collection listing container. You insert it as follows:
- In the Website Editor, switch to the page on which you want to display the Collection.
- Now click on Collections in the left panel.
- Now drag the Collection Listing container to the place on your website where you want the collection to be displayed.
- The Website Editor now asks you which collection you want to link. Select your current collection.
- You can now adjust the styles and make further filters and settings.
- Now determine in which design which contents are to be displayed in the collection listing. To do this, add different elements to the collection listing, such as an image element, a heading 2 and a text element.
- For each individual element, you can determine which field from your collection is to be displayed here. You can see that the content is automatically generated from the respective entries.
The website editor offers you some ready-made collection templates with which you can directly insert a collection on your website. The collection is then created in the background with ready-made fields and sample content.
- In the Website Editor, switch to the page on which you want to display the collection.
- Now click on Collections in the left panel.
- Here you will find the Collection Templates section, e.g. for a blog, property listing, job advertisements or team overview.
- Drag and drop the desired template to the place on your website where you want the collection to be displayed.
- Now you can customise the single page layout, the collection fields and replace the sample content with your content.
Import your Collection content
It is possible to import the content of a collection. To do this, create a new collection and set the data fields that are to be imported into the collection.
Now you can click on Import in the Content Manager via the ellipsis icon (the three dots) and upload an existing collection via a CSV or JSON file.
After uploading, you will see all the headings or field names that were dragged from the import file on the left-hand side, and on the right-hand side you will find a dropdown in each case that you can use to assign the collection field to the newly created collection.
When you are satisfied with the assignment, click on Import and wait until the import has been completed successfully.
If you have no experience with this, we recommend that you first do a test import on a test page with two-three entries.
Please note that the import is only possible for text. Images and videos must be added manually to the individual entries.