Wie man eine Collection erstellt – Website Editor

Eine Collection stellt die Sammlung mehrerer Einträge dar und ermöglicht so Vorlagen für Unterseiten mit immer gleicher Struktur zu erstellen. Beliebte Beispiele sind der Blog, Stellen- oder Immobilienangebote.

Dieser Artikel erklärt dir, wie du eine Collection erstellst und sinnvoll nutzt.

Inhaltsangabe

Basiswissen
Starte mit einem Collection-Template oder ganz von vorne
Die ersten Schritte: Eine Collection erstellen
Collection-Felder
Content-Manager: Neue Einträge erstellen
Einzelseiten-Layout: Das Design deines Collection-Eintrags
Collection-Auflistung: Deine Collection-Übersicht auf der Website
Collection-Templates
Import deines Collection-Inhalts

Basiswissen

Eine Collection wie z. B. ein Blog besteht aus 4 Teilen:

Die Collection-Felder, die die Struktur aller Einträge vorgibt, z. B. Titel, Name, Datum, Veröffentlicht / Unveröffentlicht-Filter, Text-Inhalt etc.
Die Collection-Einträge, die den jeweiligen Content enthalten, wie zum Beispiel Blogartikel oder Jobangebot
Die Collection-Auflistung, die die Vorschau auf der Website organisiert
Das Einzelseiten-Layout (Single-Page-Layout), welches das einheitliche Design der einzelnen Collection-Einträge regelt

Im Collections-Manager verwaltest du deine Collection. Hier findest du unter anderem den Content-Manager, in dem du die einzelnen Einträge und deinen Inhalt verwalten kannst.

Um zum Collection-Manager zu gelangen, klicke im Header-Menü oben rechts auf “Mehr” und dann Collections-Manager.

Hier kannst du nun deine Collection auswählen. Nach einem Klick öffnet sich der entsprechende Manager für die Collection. Oder, du erstellst hier eine neue Collection über + Neue Collection.

Bevor es jetzt an die Erstellung einer Collection geht, ein paar wichtige Hinweise:

Bitte bedenke, dass die Collection nicht Teil des Website-Editor-Backups ist. Es empfiehlt sich daher, die Collections regelmäßig manuell aus dem Collections-Manager zu exportieren.
Collections beinhalten dynamischen Content, der mit dem Website Editor verknüpft ist. Deshalb sind Collections bei einem Website-Export nicht enthalten.

Starte mit einem Collection-Template oder ganz von vorne

Es gibt zwei Wege, wie du eine Collection auf deiner Website erstellst. Du kannst ganz von vorne anfangen mit der Collection-Auflistung, oder du benutzt eines unserer Collection-Templates. Startest du mit einem Template, wird dir direkt die Collection-Auflistung auf der Website erstellt, mit Feldern und Struktur im Collections-Manager inkl. Beispiel-Content angelegt.

Wenn du direkt mit einem Template starten möchtest, dann öffne die Kategorie Collection in der linken Content Sidebar, scrolle zum Abschnitt Collection-Templates und füge eines der Templates per Drag & Drop an die gewünschte Stelle in deiner Website ein.

Danach kannst du hier weiterlesen und dir die einzelnen Funktionsweisen anzuschauen.

Wenn du vorher eine fertige Collection sehen möchtest, um dich mit der Funktion vertraut zu machen, so empfehlen wir dir zum Beispiel unsere Templates “Wanderlust”, “Pesk”, “Evergreen”, “Ashop” oder “Opus”. Dort sind jeweils Collections schon in der Seite eingebaut.

Die ersten Schritte: Eine Collection erstellen

Wenn du mit einer komplett neuen Collection starten möchtest, kannst du das mit den folgenden Schritten auch machen:

Klicke im Website Builder im oberen Menü rechts auf Mehr. Es öffnet sich ein Dropdown-Menü.
Klicke jetzt auf Collections-Manager.
Es öffnet sich recht das Panel für deine Collections. Hier findest du die Übersicht über alle Collections, die du erstellt hast.
Über Neue Collection legst du eine neue Collection an. Gib der Collection einen passenden Namen, z.B. “Blog” und klicke rechts auf das Speichern-Icon.
Der Website Editor erstellt jetzt die Collection für dich.
Ist die Collection erstellt, öffnet sich für dich in derselben Ansicht der Collections Manager mit einer Übersicht über die Felder und das Einzelseiten-Layout (Single-Page-Layout) für deine Collection.
Standardmäßig beinhalten deine Einträge die beiden Pflicht-Felder Name und Slug.
Du kannst nun weitere Felder hinzufügen.
Über das Icon für Content verwalten öffnet sich ein neuer Tab im Website Editor, in dem du deine Einträge z.B. Blogposts oder Immobilienangebote anlegen kannst.
Unter Seiten wird jetzt auch automatisch das Einzelseiten-Layout hinzugefügt.

Collection-Felder

Mit den Daten-Felder kannst du bestimmten welche Informationen pro Eintrag in welchem Format angegeben werden sollen. Diese Felder bilden dann das “Formular”, dass du für jeden Eintrag ausfüllst und werden bei der Collection-Auflistung und beim Einzelseiten-Layout mit Elementen verknüpft, um die enthaltenen Daten eines Eintrages darzustellen.

Mit jedem Eintrag wird automatisiert aus dem Einzelseiten-Layout und den Feldern, die du erstellt hast, eine eigene Seite erstellt.

Standardmäßig werden in Collections zwei Pflicht-Felder angelegt:

Der Name ist der Titel des Eintrags
Slug ist ein vereinfachter Teil der URL, der genutzt wird, um den jeweiligen Eintrag zu identifizieren und wird automatisch aus dem Namen generiert. Diesen kannst du natürlich anpassen, aber bitte beachte, dass du in einer Collection nicht zweimal den gleichen Slug verwenden kannst.

Füge weitere Felder hinzu, indem du entweder im Collections Manager auf Neues Feld klickst oder in der Übersicht des Content-Managers für die Einträge auf Felder klickst. Du wirst dann zum Collections-Manager weitergeleitet.

Im Collections-Manager ist es möglich, für jede einzelne Collection die Felder separat zu erstellen und zu verschieben, damit sie deine bevorzugte Reihenfolge bekommen.

Im Abschnitt Blog: Felder werden dir die Felder der Collection Blog angezeigt, da diese aktuell ausgewählt ist. Würde die Collection Aktuelle Infos heißen, so hieße der Abschnitt Aktuelle Infos: Felder. So kannst du schnell und einfach überprüfen, ob du auch gerade die Felder für die richtige Collection bearbeitest.

In diesem Abschnitt kannst du nicht nur die vorhandenen Felder bearbeiten, sondern auch weitere hinzufügen, indem du auf Neues Feld klickst.

Um ein neues Feld zu definieren, kannst du aus verschiedenen Feldtypen wählen:

Textfeld eignet sich für ein Wort oder einen Satz
Richtext eignet sich für längere Texte, die du ggf. noch formatieren möchtest
Link bietet dir die Möglichkeit einen Link zu hinterlegen
CMS bietet dir die Möglichkeit einzelne Elemente und Section-Templates oder ganze Seiten einzubinden
Dateien ermöglicht es dir Dateien oder Bilder darzustellen
Checkbox lässt dich zwischen den beiden Status "erfüllt" und "nicht erfüllt" wählen, d.h. es eignet sich perfekt, um zwischen zwei Zuständen zu wählen. Du kannst z.B. später über die Checkbox entscheiden, ob ein Eintrag “veröffentlicht” ist oder nicht, indem eine aktive Checkbox bedeutet “veröffentlicht” und eine deaktivierte Checkbox “unveröffentlicht” bedeutet. Sowas lässt sich später auch gut als Filter für die Collection-Auflistung verwenden.
Auswahl gibt dir die Möglichkeit, ein Dropdown-Auswahlmenü mit mehreren Optionen zu erstellen, z.B. um bei eine Immobilienauflistung die Einträge in unterschiedliche Kategorien einzuordnen, wie bspw. Wohnung, Häuser, Büro, Gewerbe etc.
Datum gibt dir die Möglichkeit z.B. ein Datum einzutragen, wann der Artikel geschrieben wurde.
Nummer gibt dir als Sortierungsmöglichkeit z.B. die Sortierung nach Zahlen

Im Eingabefeld Label trägst du den Namen des Felds ein. Sobald du dich für einen Typ entschieden hast, wird dir ein weiteres Eingabefeld Hilfetext angezeigt. Gib hier eine kurze Beschreibung des Feldes an, wenn du das als Stütze benutzen möchtest. So kannst du auch nach längerer Zeit sicherstellen, dass du weißt, wofür dieses Feld gedacht war.

Hier ist ein Beispiel für die verschiedenen Felder anhand unseres Beispiel-Blogs aus dem Template “Evergreen”:

Content-Manager: Neue Einträge erstellen

Erstelle jetzt deinen ersten Eintrag. Klicke dafür im Collection-Manager auf das Icon für den Content-Manager. Es öffnet sich links vom Collection-Manager eine Liste deiner Einträge.

Klicke auf + Eintrag hinzufügen, um einen neuen Eintrag zu erstellen.
Jetzt öffnet sich ein Overlay und du hast hier die Möglichkeit, deinen Eintrag mit Inhalt zu befüllen. Jeder Eintrag zeigt dir alle Felder an, die du für die Collection angelegt hast und ermöglicht es dir außerdem SEO-relevante Informationen zu hinterlegen. Hier hast du auch die Möglichkeit neue Felder hinzuzufügen.
Klicke auf Speichern, sobald du mit deinen Änderungen fertig bist.

Im nächsten Schritt empfiehlt es sich nun zunächst festzulegen, wie die einzelnen Einträge auf der Website dargestellt werden. Das wird über das Einzelseiten-Layout festgelegt.

Im Anschluss legst du fest, wo und wie die Collection auf der Website dargestellt und sortiert wird. Das wird über der Collection-Auflistung geregelt.

Einzelseiten-Layout: Das Design deines Collection-Eintrags

Das Einzelseiten-Layout definiert das einheitliche Design aller Einträge. Hier erstellt du dir eine Vorlage für alle deine Einträge einer bestimmten Collection.

Es ist möglich, dieses Design von verschiedenen Orten aus aufzurufen:

Aus dem Collection-Manager heraus:

In der Seitenübersicht:

Rufe das Einzelseiten-Layout auf und bearbeite die Vorlage wie jede andere Seite im Website Editor. Dir stehen dafür alle Collection-Felder zur Verfügung.

Fangen wir mit einem Header und eine Footer an. Hier empfiehlt es sich natürlich, die entsprechenden Elemente zu referenzieren.

Zwischen dem Header und Footer kannst du nun festlegen, welcher Content aus welcher Collection dargestellt werden soll.

Wenn du Content hinzufügen möchtest, der statisch bleiben soll, weise dem Element kein Collection-Feld zu, stattdessen belasse es auf Keine Zuordnung. Inhalt bleibt statisch.

Für dynamischen Content, also dem Inhalt deiner einzelnen Collection-Einträge, wähle ein passendes Element aus und verknüpfe dieses mit einem Collection-Feld.

Wenn du deine Felder den einzelnen Elementen zugewiesen hast, kannst du jetzt über die Vorschau sehen, wie der Content jedes einzelnen Eintrags in diesem vorgefertigten Layout aussieht.

Collection-Auflistung: Deine Collection-Übersicht auf der Website

Die Collection-Auflistung erstellt eine Übersicht deiner Collection-Einträge auf der Website. Dort wird dir quasi dein Blog, deine Immobilien-Einträge oder Jobangebote angezeigt.

In dem linken Einstellungspanel hast du die Möglichkeit, Sortierungen und Filterungen vorzunehmen.

Bitte beachte: Du kannst hier nur eine Collection und nur Einträge aus einer gemeinsamen Collection anzeigen lassen. Sogenannte Querverweise zwischen zwei Collections sind aktuell nicht möglich. Überlege dir also genau, welche Collection welche Inhalte darstellen soll.

Möchtest du den Inhalt an mehreren Stellen auf deiner Website anzeigen lassen oder anders sortieren, so kannst du die Auflistung einfach duplizieren oder neu dort anlegen, wo die entsprechende Collection angezeigt werden soll.

Du hast bei der Collection-Auflistung zwei Möglichkeiten. Wenn du noch keine Collection erstellt hast, ist es möglich eine bestehende Collection hier erstellen zu lassen.

Hast du schon eine Collection erstellt, empfehlen wir dir mit dem Collection-Auflistungs-Container zu arbeiten. Diesen fügst du folgendermaßen ein:

Wechsle im Website Editor auf die entsprechende Seite, auf der du die Collection anzeigen möchtest
Klicke nun im linken Panel auf Collections
Ziehe den Container Collection Auflistung jetzt an die Stelle in deiner Website, auf der du die Collection angezeigt haben möchtest
Der Website Editor fragt dich jetzt, welche Collection du verlinken möchtest. Wähle deine aktuelle Collection aus.
Du kannst jetzt die Styles anpassen und weitere Filterungen und Einstellungen vornehmen.
Lege nun fest, in welchem Design dir welche Inhalte in der Collection-Auflistung angezeigt werden sollen. Füge dafür unterschiedliche Elemente zu der Collection-Auflistung hinzu, wie zum Beispiel ein Bildelement, eine Überschrift 2 und ein Textelement.
Für jedes einzelne Element kannst du dabei festlegen, welches Feld aus deiner Collection hier angezeigt werden soll. Du siehst, dass dabei automatisch der Content aus den jeweiligen Einträgen reingeneriert wird.

Collection-Templates

Der Website Editor bietet dir einige vorgefertigte Collection-Templates, mit denen du direkt eine Collection auf deiner Website einfügen kannst. Im Hintergrund wird dann die Collection mit vorgefertigten Feldern und Beispiel-Inhalt erstellt.

Wechsle im Website Editor auf die entsprechende Seite, auf der du die Collection anzeigen möchtest
Klicke nun im linken Panel auf Collections
Hier findest du den Abschnitt Collection-Templates, wie z. B. für einen Blog, Immobilien-Listing, Job-Ausschreibungen oder Team-Übersicht
Ziehe das gewünschte Template per Drag & Drop an die Stelle in deiner Website, auf der du die Collection angezeigt haben möchtest.
Jetzt kannst du das Einzelseiten-Layout, die Collection-Felder anpassen und den Beispiel-Content durch deine Inhalte ersetzen.

Import deines Collection-Inhalts

Es ist möglich, den Content einer Collection zu importieren. Erstelle dafür eine neue Collection und setze die Daten-Felder auf, die in die Collection importiert werden sollen.

Jetzt kannst du im Content-Manager über das Ellipsen-Icon (die drei Punkte) auf Import klicken und eine bestehende Collection über eine CSV - oder JSON-Datei hochladen.

Nach dem Hochladen siehst du auf der linken Seite alle Überschriften bzw. Feldernamen, die aus der Import-Datei gezogen wurden und auf der rechten Seite findest du jeweils ein Dropdown, über das du das Collection-Felder der neu angelegten Collection zuweisen kannst.

Wenn du mit der Zuweisung zufrieden bist, klicke auf Import und warte bist der Import erfolgreich abgeschlossen wurde.

Wenn du hier noch keine Erfahrungen gesammelt hast, empfehlen wir dir zunächst einen Test-Import auf einer Test-Seite mit zwei-drei Einträgen.

Bitte beachte, dass der Import nur für Text möglich ist. Bilder und Videos müssen manuell bei den einzelnen Einträgen hinzugefügt werden.