Collections

In this article, we'll show you how to use Collections in Sitejet. The Collections feature is useful in situations when you have several items of the same type you wish to display on your website, and 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.

Table of contents


Basic knowledge

A Collection consists of four main parts:

  1. The Collection, defines the structure (fields) for all Collection items, for example, title, name, date, etc.
  2. The Collection entries that contain the respective content
  3. The Collection container which displays a preview of the Collection item entries
  4. The Collection template that controls the uniform design of the item pages

Add a Collection

First, you like to open the Collection Manager and define your first Collection. For this, please follow these steps: 

  1. Go to "More" on the top right menu. A dropdown menu appears.
  2. Choose "Collection Manager".

  3. Now, a new tab will with the Collections Manager. On the left side of the panel you will find the list overview of all your collections that you have created for your site.
  4. Through the "+" Icon, you are able to add another collection. Give your Collection a great name and save it. For this example, we are working with the Template Evergreen and Plesk, that already have a predefined collection to help you guide the way.

  5. Click on "save". Aaaand done! This creates an empty Collection with default values for the fields and the Collection template. You will find it on the left side in the list as well. 
  6. With a click on the Collection, you are able to manage it. Besides content, you will also find the layout and the data fields.

    Under Content you will find a list of all collection entries you have in this collection. If you use a template or a website that already has a collection, you will find a list of sample entries here, as in the example.


    Under layout you will find an overview of all the places on your website where the Collection is included. On the other hand, you have access to the individual page layout, in which you can define how the individual collection entry should look.

    Under Data Fields you will find the individual fields that you want to use in your collection entry. By default, your entries "only" contain the two fields "Name" and "Slug".

    You can now add more fields. In the screenshot you can see the collection from the template "Evergreen".


  7. If you would like to see an example with entries beforehand to familiarize yourself with collections, take a look at our templates such as Pesk, Evergreen, Ashop or Opus. Each of them has a collection inserted.For example, you can create a new page for testing with these collections.

Import a Collection or blog entries

It is possible to import a collection. Please create a new collection and import another collection (for example from WordPress or another website) with a *.csv file into the new collection.

Here we recommend that both the collection and the CSV file have the same values for the data fields in advance. Otherwise it will not work.

However, when importing, it is only possible to import text! In the Collections Manager you have the possibility to open a dropdown on the right side via Content. Here there is the option "Import".


Collection listing

For each Collection, you can find a list of all the locations of your collection under Layout → Collection Listing. Here you will also find the different languages, if you work with multilingual Collections.

You have an overview here and can go directly from the Collection Manager to the container on your website to edit the Collection there. The listing also contains additional information if you manage a multilingual website.


The Single Page Layout - Your Collection Template

The Single Page Layout defines the uniform design of all Collection entries. Here you can define how your single entry should look when a visitor clicks on the entry on your website. You can access the Single Page Layout via Layout -> Single Page Layout.

Here you have an overview of the templates sorted by language and can call up the layout from the overview. Here you can also define the name and URL for the layout. Once you have called up the Collection template, a new tab opens in the Website Builder.

You can now edit the single page layout like any other page in the editor. In addition, all collection fields are now available for linking.

ou can tell from the Collection symbol of an element whether this element is assigned to a Collection element and is therefore "dynamic" or "static".

Example: If you want to see your header (or just your menu/navigation) and footer from the website in each entry, simply create a reference of these elements in the template.

It is now possible to customize the header and content for each of your entries. Please add a corresponding element for the heading and link it to the corresponding Collection field. For example, 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 mapping. Content remains static".


Fields

Fields contain certain information and data for a respective Collection item in a standardized format. You can use these fields either in the item itself or in the Collection container, similar to the way databindings are used. A separate page is automatically created for each item from the "Collection template" and the fields.

Available fields

By default, two fields are created in each Collection:

  • "Name" is the title of the item
  • "Slug" is a search engine-friendly part of the URL that is used to identify a specific item. It is automatically generated from the name, but can also be customized

You can add more fields by clicking on "Fields" and "New Field".

You can choose from the following different field types when creating a field:

  • The "Plain Text" and "Rich Text" fields can be used for all possible types of texts.
  • "CMS" offers you the possibility to integrate individual Sitejet elements, presets, or even entire pages.
  • "File(s)" lets you connect to files in the media manager. 
  • "Checkbox" lets you choose between two statuses: checked and unchecked. You could use this for example for the checkboxes "published" and "unpublished" as a filter later.
  • "Choice" to create a dropdown menu for sorting.
  • "Date" lets you define a certain date for your item.
  • "Number" gives you the chance to mark the items by numbers. A great filter option for later.
  • "Link" lets you set a link as a field.

In the " Label" input field, enter the name you would like for the field. As soon as you have decided on a type, another input field called "Help text" will be displayed. Enter a short description of the field here so that your colleagues, your customer, or even you will always know what this field was intended for.


Collection containers

Now, let's find a great place for your Collection on the website! For this, you need to add a "Collection Container" to the place you like to see your Collection. A Collection Container is an element that displays a preview of the Collection Items on a website. 

For example, if you wanted to display your blog, a Collection Container could contain the blog titles and link to the individual blog entries, that are Collection Items. In the Collection Container settings, you can set defaults for sorting and filtering the items in the preview. Only one Collection can be assigned to a Collection Container at a time. Currently, it is not yet possible to "mix" and "cross reference". But we will work on that in the future.

If you want to display the contents of a Collection in several places on your website, you can link several Collection Containers to the same Collection or duplicate a Collection Container that has already been added. 

The Collection Container can be added to your site as follows:

  1. Scroll down on the left content panel and look for "Collections". 

  2. Click and Drag for example the "Collection" into the Website Builder. You will then see a new Container.

  3. Now, you are able to choose from the Collection you like to place there. You are also able to directly access the "Collection Item template", assign filter, work on the styles and make all the adjustments to get your Collection work on your website. 

  4. After you have added a Collection Container to the website, you need to define, what content should be displayed and how it should be displayed. You can change this at any time! For this, please select for example an image element, a headline 2 and 4, and text fields. Now, you are able to define which content from your Collection should be displayed there. 

  5. You are able decide for yourself which content you like to display in your Collection Container. When you change the field names or content, this should directly be displayed. If not, please just save and reload. 

  6. If no entries have been created yet for this Collection, a corresponding message appears. Clicking on "Manage items" takes you to where you can create, delete, and edit items.


Add new items

To create new entries, go to the Collections Manager in your Collection. Click on "Manage items". An overlay opens that shows an overview of all assigned fields. You can now fill them with content according to your wishes.

Click on " Save" as soon as you are finished with your changes.

Via " Fields" you can access your fields directly from the collection entry and modify them if necessary or create new ones. However, these will then be created for all entries in this collection.

Under " Preview" you get to a view of existing entries and their content. You can define which information should be displayed and which should be displayed on the respective entry page. The preview view is made possible with a collection container. How this is inserted, we have already mentioned in the section "Collection Container".

With " Save" you obviously save your progress in the collection entry. But this function does not replace the global save function!

If you click on " Settings", you will be guided in the overlay to the SEO settings, as well as other important settings.

You will then see your first Collection item. This item consists of an overview of all assigned fields. Now you can fill it with content according to your wishes. 

Click on " Save" as soon as you are done with your changes. 


Preview

The preview view gives a preview of existing items and their contents. You can specify which information should be displayed in the preview and which should only be displayed on the respective item page. 

For example, if you had a Collection of job openings, you can specify that you want a list of job titles to appear in the Collection container (without job descriptions), but you want all field data to appear on the item page (including job title and job description).

As already mentioned, the preview view is made possible with a Collection container. How this is inserted has already been mentioned in the "Collection Containers" section above.


Become a part of our Community!

Exchange ideas with other web designers about current developments, tips, and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. You can join the Sitejetters community here.

Back to the top

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us