Strapi PageBuilder V.1.2

1.Einführung

Mit dieser Schritt-für-Schritt-Anleitung führen wir Sie an alle Funktionen heran, die zur Nutzung des PageBuilders wichtig sind. Der PageBuilder ist ein WYSIWYG-Editor, dies steht für „What you see is what you get“ und bedeutet, dass die Seite bei der Bearbeitung so aussieht, wie im fertigen Zustand. So haben Sie immer die Möglichkeit, Ihren Prozess in Echtzeit zu sehen und zu überprüfen.

Wir werden Ihnen zu Anfang die Benutzeroberfläche zeigen sowie die wichtigsten Funktionen, um Bilder hochzuladen und Formulare zu erstellen. Im letzten Kapitel dieser Dokumentation werden Ihnen zudem die Content-Elemente vorgestellt, die für den Aufbau einer Seite essenziell sind.

Das generelle Aussehen der Seite wird von einem Entwickler oder Designer im Strapi Backend vorbestimmt. Als Content Manager haben Sie lediglich die Möglichkeit, aus vordefinierten Farben, Schriften und Abständen im Konfigurations-Pop-up der jeweiligen Content Elemente auszuwählen. Mehr zu den verschiedenen Content-Elementen lesen Sie in Kapitel 5.

Beginnen wir mit der Ansicht der Benutzeroberfläche nach dem Login.

Nach dem ersten Login sehen Sie hier die Konfigurations bzw. root-Page, die als erste Startseite fungiert. Hier haben Sie auch direkt Zugriff auf die Funktionen vom Kontextmenü

Funktion	Beschreibung
	1. Edit: Mithilfe des „Edit“-Button wechselt die Benutzeroberfläche in den Bearbeitungsmodus der Seite.
	2. Viewport: Wählen Sie hier, aus welcher Sicht Sie die Seite sehen wollen: - Desktop - Tablet - Mobil.
	3. (Pages-)Dropdown: Über dieses Dropdownmenü greifen Sie auf alle angelegten Seiten innerhalb Ihres Strapi-Projekts zu. Hier sind auch nicht-publizierte Seiten gelistet. Die Weltkugel symbolisiert in dem Dropdown die Startseite.
	4. Manage: Das Kontextmenü „Manage“ bietet Ihnen direkten Zugriff auf die Übersichtsseiten „Pages”, „Forms“, „Navigation“, „Categories", „Page Types und „Media“. Mehr dazu in den jeweiligen Kapiteln.
	5. Add: Neue Inhalte werden mit einem Klick auf „Add“ angelegt. Aktuell ist es über diese Auswahl nur möglich „Add Page“ auszuwählen
	6. User-Profil: Das Profilbild und die Login-E-Mailadresse des eingeloggten Profils. Mit einem Klick können Sie - sich aus Ihrem Content-Manager-Account ausloggen, - Sie können die Anzeige der Settings von Pop-up auf Linkes Menü ändern - Sie können die Softwareversion anzeigen lassen.
	7. Sprache: Über das Dropdownmenü können Sie aus allen freigeschalteten Sprachen Ihre Wahl treffen. Default ist Englisch.

2. Bearbeitungsmodus

Über den Edit-Button öffnen Sie den Bearbeitungsmodus der Page, auf der Sie sich gerade befinden. Hier werden alle platzierten Content-Elemente bearbeitet, weitere hinzugefügt sowie Konfigurationen vorgenommen. Auch der Footer kann hier angepasst werden.

Lernen: Mehr zu dem Thema Content-Elemente und deren Bearbeitung finden Sie in Kapitel 5 - Content-Elemente.

Funktion	Beschreibung
	1. Publish: Mit dem „Publish“-Button speichern Sie alle vorgenommenen Änderungen und publizieren die Seite anschließend.
	2. Save: Über den „Save“-Button speichern Sie Ihre Änderungen im sogenannten Draft-Modus. Diese werden dann noch nicht publiziert und beeinflussen nicht die Live-Version der bearbeiteten Seite.
	3. Exit: Der „Exit“-Button beendet den Bearbeitungsmodus der Seite. Als Erinnerung erscheint ein Popup mit der Meldung, dass Sie Ihre Änderungen vor dem Verlassen speichern müssen, da diese ohne einen Klick auf Save nicht automatisch übernommen werden.
	4. Preview: Im Bearbeitungsmodus ist es möglich, jederzeit in die Live-Vorschau der aktuellen Seite zu wechseln, um vorzunehmende Änderungen direkt zu überprüfen. Diese reine WYSIWYG-Preview der Seite hat keinen Einfluss auf den Stand der Speicherung und Veröffentlichung, dies geschieht nur über „Save“ oder „Publish“.
	4A. Edit View: Nach dem Klick auf „Preview“ wechselt dieser Button zu „Edit view“. Um den Preview-Modus zu verlassen, klicken Sie einfach auf „Edit view“.
	5. Manage Media: Auch im Bearbeitungsmodus können Sie bequem jederzeit auf den Media Manager zugreifen um weitere Bilder hochzuladen oder Ordner zu erstellen.

Settings

Über die Settings nehmen Sie folgende Optionen und Meta-Einstellungen der zu bearbeitende Seite vor:

Funktion	Beschreibung
Name	Name der aktuellen Seite
URL	URL der aktuellen Seite
Hide Navigation	Navigation anzeigen oder verbergen
Hide Footer	Footer anzeigen oder verbergen
Enable redirect	Ist diese Option aktiviert, wird der Anwender auf die Seite der Redirect URL weitergeleitet
Redirect URL	Spezifizieren Sie die URL, auf die der Anwender von dieser Seite aus geführt wird
Synchronize English Version	Dadurch werden alle Änderungen zurückgesetzt und mit der neuesten Speicherung der Standardseite (Englisch) synchronisiert.
Reset to Published	Änderungen werden auf die letzte Veröffentlichung zurückgesetzt
SEO-Tab	Der SEO-Reiter mit Suchmaschinenoptimierungen und Meta-Einstellungen für die aktuelle Seite

Add new element

Fügen Sie Ihrer Seite im Bearbeitungsmodus neue Content-Elemente zu über den permanent am unteren Enden der Seite angelegte Schaltfläche „Add new element“. Diese ist nur hier im Bearbeitungsmodus zu sehen und nicht Bestandteil der Live-Seite.

Footer

Der Footer ist im unteren Bereich auf jeder Seite Ihrer Website angebracht. Er ist in Spalten aufgebaut und kann üblicherweise Bilder (wie Logos, Zertifikate, etc.), interne und externe Verlinkungen, rechtliche Informationen oder Freitext enthalten. Eine Extraspalte für den Social-Media-Bereich gehört ebenfalls zum Footer.

Footer editieren

Der Footer ist ähnlich wie ein Content-Element aufgebaut. Der einzige Unterschied ist, dass Änderungen am Footer auf jeder Seite der gesamten Website dargestellt wird und nicht mehr als ein Footer pro Website erstellt werden kann.

Lernen: Mehr zu dem Thema Settings gibt es in dem Unter-Kapitel Settings und mehr zu Content-Elementen sind in Kapitel 5 – Content Elemente zu finden.

Sie aktivieren den separaten Bearbeitungsmodus vom Footer unterhalb der großen „Add new element“-Schaltfläche. Mit einem Mouseover aktiviert sich der Bearbeitungsrahmen mit Buttons.

Nach einem Klick auf das ganz rechte, äußere Stift-Symbol wird das Popup aufgerufen. Wenn es sich um den ersten Footer auf Ihrer Website handelt, wird nun der „Create list“-Button angezeigt. Wenn auf Ihrer Website bereits einen Footer angelegt wurde, werden Sie zur Bearbeitung des Footers weitergeleitet. Die Erstellung eines Footers ist empfehlenswert, aber optional.

Das Bearbeitungsfenster für den Footer enthält für jede anzulegende Spalte einen eigenen Rich-Text-Editor und die Möglichkeit, Bilder hinzuzufügen. Weitere Spalten werden über den „Create new element“- Button hinzugefügt. Wie auch bei Content-Elementen wird die Reihenfolge der Elemente über die beiden blauen Pfeile links verändert.

In dem Screenshot sehen Sie zudem, dass der Social Media Bereich ein eigenes Stift-Symbol besitzt. Hier öffnet sich nach einem Klick auf den Stift ebenfalls ein Popup, in dem Sie Bilder mit Verlinkungen zu Social Media oder anderen Seiten erstellen können. Zusätzlich können Sie frei einen Titel für diese Sektion festlegen.

Nach der Bearbeitung klicken Sie auf den „Accept & Save“-Button zum Speichern und Verlassen der Footer-Bearbeitung. Zum Verwerfen Ihrer Änderungen gibt es den „Reset“-Button.

3.Manage

Verwalten Sie alle Inhalte Ihrer Website über das Kontextmenü „Manage“. Dazu zählen die folgenden Optionen:

• Manage Pages - Manage Pages
• Manage Forms - Formular Manager
• Manage Media - Media Manager
• Manage Navigation - Navigation
• Manage Categories - Kategorien
• Manage Page Types - Page Types

Nach dem Aufrufen von Pages und Forms wird Ihnen eine Übersichtsseite mit Informationen und Optionen je Element angezeigt. Bei Manage Media wird der Medien-Manager des PageBuilder geöffnet. Ein Klick auf Navigation führt Sie zum intuitiven Bearbeitungstool der Hauptnavigation für alle Menüebenen und Menüpunkte.

Ausführliche Informationen zu den einzelnen Manage-Optionen finden Sie in den folgenden Kapiteln.

Hinweis: Die Option “Manage” ist nur außerhalb des Bearbeitungsmodus sichtbar. Sobald Sie sich im Bearbeitungsmodus befinden, taucht “Manage” nicht mehr auf.

Manage Pages

Über den Menüpunkt „Manage Pages“ wechseln Sie in die Listenansicht aller erstellten Inhaltsseiten Ihres Projektes mit weiteren Infos.

Folgende Spalten gibt es im Detail:

Funktion	Beschreibung
1. Search	Die Suchfunktion ermöglicht es innerhalb der Seitenübersicht nach Stichworten zu suchen.
2. Action	Aktionen besteht aus mehreren Buttons: - in den Bearbeitungsmodus (Stift-Symbol) dieser Seite wechseln - das Löschen der Seite (Papierkorb-Symbol) - das Kopieren der Seite - die Veröffentlichung zurückzuziehen (Papierflieger-Symbol)
3. ID	ID – interne, eindeutige, durchnummerierte Nummer
4. Type	Hier sind die Pagetypes aufgeführt
5. Name	Name – durchsuchbare interne Seitenbezeichnung
6. URL	URL zur Seite – verlinkt direkt zur gewählten Inhaltsseite
7. Created at	Der SEO-Reiter mit Suchmaschinenoptimierungen und Meta-Einstellungen für die aktuelle Seite
8. Published	Veröffentlichungsstatus – schnell erkennbar an grünen (veröffentlicht) und roten (nicht veröffentlicht) Punkten

Hinweis: Das Datumsformat des Erstellungsdatums orientiert sich in Strapi an der jeweils eingestellten Sprache.

Formular Manager

Über den Formular-Manager legen Sie Formulare an, die mit dem Content-Element „Form“ auf Inhaltsseiten platziert werden können.

Funktion	Beschreibung
1. Create Form	Über den Button „+ Create form“ legen Sie ein neues Formular an.
2. Übersicht	In dieser Liste stehen bislang angelegten Formulare mit folgenden Informationen: -Aktionen: Über die Buttons können Sie das Formular bearbeiten oder löschen -ID des Formulars -Interner Name des Formulars -Auf der Seite angezeigter Titel des Formulars -Creator: Wer hat das Formular angelegt -Erstellungsdatum des Formulars.
3. Search	Die Suchfunktion ermöglicht es innerhalb der Formularübersicht nach Stichworten zu suchen.

Ein Klick auf den Button „Create Form“ öffnet die Eingabemaske, mit der Sie das Formular nach Ihren Wünschen anlegen.

Funktion	Beschreibung
1. Kopfbereich	Hier werden alle relevanten Daten zum Empfang der Formulardaten eingetragen, wie Name und E-Mail-Adresse des Empfängers, der die Daten der User erhalten soll. Ebenso tragen Sie hier die Bezeichnungen für Ihren Submit- und Cancel-Button ein.
2. Captcha	Optional können Sie einen Captcha-Schutz aktivieren. Dieser taucht beim platzieren des „Form“-Content-Elements auf der Seite auf, sofern ein Captcha von einem Entwickler oder Designer im Strapi Backend konfiguriert wurde.
3. E-Mail-Template	Dropdownmenü zur Auswahl vorhandener Templates für den E-Mail-Versand. Das Template ist optional, da ein Default-Template bereits hinterlegt ist. Der Designer oder Entwickler erstellt das E-Mail-Template im Backend.
4. „Add new form field“-Dropdown	Dropdownmenü für Formular-Elemente

Mit Ihrer Auswahl aus dem Dropdownmenü „Add new form field“ fügen Sie Ihrem gewünschten Formular alle notwendigen Felder hinzu.

Auflistung aller form fields

Diese form fields stehen Ihnen im Dropdown zur Verfügung.

Funktion	Beschreibung
Email	Ein einzeiliges Textfeld, dass Sie für die Eingabe einer E-Mail-Adresse verwenden
Checkbox	Checkboxen ermöglichen Ihrem Anwender, eine einzelne Auswahl anhand eines beschrifteten Buttons zu treffen.
Message	Ein mehrzeiliges Textfeld, welches längere Nachrichten ermöglicht.
File	Durch „File“ können Anwender Dokumente, Bilder und Videos hochladen und mit dem Formular verschicken. Es sind verschiedenste Dateienformate möglich, die Sie über den Validation-Tab einstellen.
Date	Über „Date“ kann der Anwender ein Datum über einen Picker in einem Kalender auswählen.
Dropdown	Wenn Sie dem Anwender verschiedene Auswahlmöglichkeiten, wie z.B. Anreden an die Hand geben möchten, nutzen Sie das Dropdown form field.

Analog zu den Einstellungen von Content-Elementen nehmen Sie hier die verschiedenen Einstellungen zu den Formular-Feldern vor.

Lernen: Weitere Informationen zu Content-Elementen finden Sie in Kapitel 5 – Content Elemente

Hinweis: Felder wie die Checkbox müssen für jede einzelne Checkbox erneut ausgewählt und konfiguriert werden.

Neue Felder erscheinen direkt über dem Dropdownmenü und können mit den blauen Pfeilen rechts verschoben werden.

Schauen wir uns eines der Felder genauer an. In diesem Beispiel wurde das Feld „Text“ ausgewählt.

Bisher ist dort noch wenig zu sehen. Die weitere Bearbeitung nehmen Sie über das Stift
Symbol vor. Die Einstellungen unterscheiden sich je nach Typ des Feldes. Zwei Tabs sind jedoch immer zu finden: „Field Settings“ und „Validation“.

Tab „Field Settings“

In Tab „Field Settings“ gibt es für das Text-Feld folgende Einstellungen:

Funktion	Beschreibung
Field Label	Der Name bzw. die Überschrift des Input-Feldes.
Placeholder	Ein Platzhalter-Text, der im Input-Feld angezeigt wird, bevor User Eingaben tätigen.
Notification in case of incorrect entry	Eine Fehlermeldung, die angezeigt wird, wenn die Eingabe nicht den Vorgaben der Validierung entspricht.
Use label as fieldname	Wählen Sie, ob die Beschriftung auch als Feldname verwendet werden soll. Der Feldname wird in der E-Mail angezeigt, wenn das Formular gesendet wird. Der Feldname muss eindeutig sein.

Tab „Validation“

Die Einstellungen im Tab „Validation“ ist dem Feld-Typ angepasst. Im Feld „Text“ können Sie mehrere optionale Einstellungen vornehmen, während es der Feld-Typ „E-Mail“ nur die Option hat, das Feld als Pflichtfeld anzugeben. Diese Option ist für jedes Feld möglich.

Passend zum Beispiel „Text“ sind die folgenden Einstellungen möglich:

Funktion	Beschreibung
Mandatory field	Wenn aktiviert, muss der Benutzer dieses Eingabefeld ausfüllen, sonst kann das Formular nicht gesendet werden.
Minimum number of characters	Geben Sie hier einen numerischen Wert ein. Der Benutzer muss dann mindestens diese Anzahl von Zeichen in das Eingabefeld schreiben, sonst kann das Formular nicht abgeschickt werden. Bleibt das Feld leer, findet keine Prüfung statt.
Maximum number of characters	Geben Sie hier einen numerischen Wert ein. Der Benutzer darf nicht mehr als diese Anzahl von Zeichen in das Eingabefeld schreiben, sonst kann das Formular nicht gesendet werden. Wird das Feld leer gelassen, findet keine Validierung statt.
Do not allow letters	Wenn diese Option aktiviert ist, kann das Formular nicht gesendet werden, solange sich Buchstaben im Eingabefeld befinden.
Do not allow numbers	Wenn diese Option aktiviert ist, kann das Formular nicht gesendet werden, solange sich Zahlen im Eingabefeld befinden.
Do not allow special characters	Wenn aktiviert, kann das Formular nicht gesendet werden, solange das Eingabefeld Sonderzeichen enthält.
Do not allow spaces	Wenn diese Option aktiviert ist, kann das Formular nicht gesendet werden, solange sich Leerzeichen im Eingabefeld befinden.
Regular expression	Geben Sie einen regulären Ausdruck ein, anhand dessen die Eingabe überprüft werden soll - (erweiterte Überprüfungsoption). Gute Kenntnisse in RegEx und umfangreiches Testen sind hier unerlässlich!

Hinweis: Die hier aufgezählten Einstellungsmöglichkeiten sind so auch in den anderen form fields zu finden, allerdings gibt es ein paar Sonderfälle, die nun aufgezählt werden.

Form field Settings „File“

Bei dem form field „File“ gibt zwei weitere Felder, die so in den anderen Validation-Tabs nicht vorkommen.

Funktion	Beschreibung
Mandatory field	Wenn aktiviert, muss der Benutzer dieses Eingabefeld ausfüllen, sonst kann das Formular nicht gesendet werden.
Allowed file extensions (.pdf, .png, ...)	Fügen Sie hier Dateierweiterungen hinzu, die zum Hochladen zugelassen werden sollen. Sie können die Standard-Kontrollkästchen für Dateierweiterungen verwenden, aber Sie können auch manuell zusätzliche Erweiterungen hinzufügen. Die Erweiterungen werden durch ein Komma getrennt.
Max. file size in MB	Geben Sie hier die maximale Dateigröße in MB an. Wenn Sie das Feld leer lassen, beträgt die maximale Größe 4 MB.

Form field Settings „Date“

Auch bei dem form field „Date“ gibt es weitere Felder, die so in den anderen Validation-Tabs nicht vorkommen.

Funktion	Beschreibung
Mandatory field	Wenn aktiviert, muss der Benutzer dieses Eingabefeld ausfüllen, sonst kann das Formular nicht gesendet werden.
Allow selection maximum X days in the past	Geben Sie hier Tage (ganzzahlig) ein, um einen Zeitraum zu definieren, der vom aktuellen Tag in die Vergangenheit reicht. Es sind nur Einträge erlaubt, die in diesen Zeitraum fallen. Es darf kein Startdatum parallel zur Verwendung definiert werden.
Allow selection maximum X days into the future	Geben Sie hier Tage (ganzzahlig) ein, um einen Zeitraum zu definieren, der vom aktuellen Tag in die Zukunft reicht. Es sind nur Einträge zulässig, die in diesen Zeitraum fallen.
Start date	Wählen Sie ein Datum. Eingaben vor diesem Datum sind nicht zulässig.
Not allowed period beginning	Definieren Sie hier den Beginn eines Zeitraums. Einträge, die innerhalb dieses Zeitraums liegen, sind nicht zulässig. Die Prüfung funktioniert nur, wenn für den Zeitraum ein Anfang und ein Ende definiert sind.
Not allowed period end	Definieren Sie hier das Ende eines Zeitraums. Einträge, die innerhalb dieses Zeitraums liegen, sind nicht zulässig. Die Prüfung funktioniert nur, wenn für den Zeitraum ein Anfang und ein Ende definiert sind.

Tab „Dropdown Values“

Das form field „Dropdown“ hat einen weiteren Tab. Hier verwalten und erstellen Sie die einzelnen Dropdown-Einträge.

Funktion	Beschreibung
Dropdown options	Geben Sie hier die Optionen ein, die dem Benutzer in der Dropdown-Liste zur Verfügung stehen sollen. Standardmäßig sind der Name und der Wert identisch. Das bedeutet, dass die Beschreibung der Option und der übergebene Wert identisch sind. Durch Aktivieren des Kippschalters können Sie unterschiedliche Beschreibungen für Bezeichnung und Wert pflegen.
Option Label and Value & add new option	Hier tragen Sie den Wert ein, der im Dropdown angezeigt wird. Durch betätigen des oben genannten Schalters, lassen sich hier unterschiedliche Werte für Label und Value eintragen.

Form als Content-Element platzieren

Wenn Sie Ihre gewünschten Felder angelegt und konfiguriert haben, speichern Sie das fertige Formular mit den „Save“-Button. Die Platzierung auf einer Inhaltsseite erfolgt über das Content-Element „Form“.

Lernen: Weitere Informationen zu Content-Elementen, wie das platzieren von Content-Elementen, gibt es in Kapitel 5 – Content Elemente

Da Sie mehrere Formulare anlegen können, wählen Sie Ihr gewünschtes Formular einfach aus dem Dropdownmenü aus.

Media Manager

Der Medien-Manager ermöglicht es Ihnen, Dateien wie Bilder, Videos, Audios sowie Dokumente effizient zu verwalten. Diese werden über die jeweiligen Content-Elemente integriert.

Funktion	Beschreibung
1. Suche und Filter:	Sie können gesuchte Medien mit der Suche finden oder die Medien filtern, um nur gezielte Medien-Typen anzeigen zu lassen.
2. Übersicht:	Ihre hochgeladenen Dateien und Ordner werden mit einer Vorschau (oder dem Dateisymbol) und weiteren Datei-Informationen angezeigt. Ordner lassen sich via Doppelklick öffnen.
3. Hochladen von Dateien und Ordner erstellen:	Über den Button „Select file“ öffnet sich die Eingabemaske zum Hochladen neuer Dateien. Der Button „Create Folder“ lässt Sie einen neuen Ordner erstellen. Aktuell ist es nur möglich einen Ordner oder eine Datei einzeln anzulegen oder hochzuladen.

Detailansicht

Der Medien-Manager bietet Ihnen die Möglichkeit, Metadaten hochgeladener Dateien einzutragen und zu bearbeiten. Dies umfasst Informationen wie Titel, Alt-Text und interne Notizen.

Wenn Sie eine bereits hochgeladene Mediendatei in der Übersicht anklicken, öffnet sich die dazugehörige Eingabemaske rechts.

In dieser Ansicht stehen verschiedene Möglichkeiten und Einstellungen zur Auswahl.

Funktion	Beschreibung
1. Button Replace	Die Datei kann über diesen Button durch eine andere Datei ausgetauscht werden.
2. Button Delete permanently	Ermöglicht Dateien dauerhaft zu löschen.
3. Bild in einem neuen Tab öffnen	Über diesen Link wird das Bild in voller Größe in einem neuen Tab geöffnet
4. Download	Ermöglicht den Download der ausgewählten Datei
5. Copy Link	Die Verlinkung zu dieser Datei kann so kopiert werden
6. Media name	Der Name der Datei
7. Alternate text	Alternativ-Text, der über Screen Reader den Inhalt des Bildes vermittelt oder diesen Text anzeigt, falls das Bild nicht richtig dargestellt wird.
8. Titel	Titel des Bildes
9. Internal: Notes, copyright notices, source	Interne Notizen, die nur in diesem Feld angezeigt werden, um beispielsweise zu notieren, woher eine Datei stammt.

Navigation

Die Webseiten-Navigation im PageBuilder besteht aus maximal drei Ebenen. Die Navigationsleiste kann optional auch die Suchfunktion und das Dropdown zum Wechsel der Anzeigesprache enthalten, wenn die Mehrsprachigkeit eingerichtet ist.

Wie Sie eine neue Navigation anlegen und editieren

Über das Kontextmenü „Manage“ rufen Sie die Navigationsübersicht mit einem Klick auf „Manage Navigation“ auf. Dort definieren Sie auch das Logo oder ein anderes Bild, inklusive einer Verlinkung, üblicherweise zur Startseite. Mit einem Klick auf die Bildfläche öffnet sich der Media Manager, in dem Sie ihr Logo oder Bild auswählen. Sollten Sie ihr Logo austauschen wollen, geschieht dies mit einem erneuten Klick auf Ihr Logo.

Das Herzstück der Navigation sind die Menüpunkte in den drei Ebenen. Über den Button „Create Element (layer x)“ werden neue Menüpunkte in den jeweiligen Ebenen angelegt.

In jedem Element legen Sie den Namen (Anzeigename in der Navigation) und die verlinkte Inhaltsseite fest.

Hinweis: Ist eine Seite noch nicht in dem Status „Publiziert“, kann diese an dieser Stelle zwar ausgewählt werden, allerdings wird die Verlinkung bis zum Publizieren der Seite nicht in der Navigation angezeigt.

Bei externen Links bedienen Sie den Toggle „External?“ und geben anschließend den Namen und die externe Verlinkung ein.

Das Verschieben der Elemente innerhalb der Hierarchie der Navigation ist per Mausklick über vier Pfeile möglich. Damit können Sie auch die Ebenen 1 bis 3 innerhalb der Navigation festlegen, in dem sie die Pfeile in die jeweilige Richtung anklicken.

Im Beispiel liegt „Fine E-Bikes“ als erstes Element auf der ersten Ebene – der Hauptebene in der Navigation. Alle Pfeile bis auf der Pfeil nach unten sind in diesem Fall ausgegraut, da es keine Ebene 0 gibt und das Element bereits ganz oben in der Rangliste steht. Da nur der Pfeil nach unten aktiv ist, kann dieses Element nur nach unten verschoben werden und würde mit „Our Story“ die Plätze tauschen. Erst nach diesem Tausch aktivieren sich die anderen Pfeile, damit dieses Element gegeben falls auch in die Ebene 2 oder 3 verschoben werden kann.

Das Navigations-Element „Arabica Cruiser“ kann von Ihnen mit dem linken Pfeil in die Ebene 1 – der Hauptebene – verschoben werden oder Sie ändern die Reihenfolge zwischen „Arabica Cruiser“ und „Robusta Cruiser“ auf Ebene 2.

Funktion	Beschreibung
	Das Stiftsymbol ermöglicht Ihnen die Bearbeitung der Elemente. Hier passen Sie Name und Verlinkung an.
	Über den Button „Create Element“ fügen Sie Ihrer Navigation weitere Elemente zu. Dieser Button erscheint für alle Ebenen, die Ihre Navigation bereits hat. (layer 1 und layer 2 in diesem Beispiel).

Manage Categories

Mithilfe der Kategorien können Sie Ihre Pages dementsprechend verknüpfen. Wenn die Option Kategorie im Page Type freigeschaltet ist, können Sie diese im im Extension Tab der Page Settings auswählen. Dies ist z.B. hilfreich um Pages im Content Element "Overview Page" später zu gruppieren. Im Manage Bereich steht Ihnen folgende Übersicht zur Verfügung:

Funktion	Beschreibung
1. Create category	Über den Button wird eine neue Kategorie erstellt
2. Search	Durchsucht die Kategorien nach dem eingegeben Begriff
3. Action	Hier können Sie die Kategorien: - Bearbeiten (Stift-Symbol) -Löschen (Mülleimer-Symbol)
4. ID	interne, eindeutige, durchnummerierte Nummer
5. Name	durchsuchbare interne Bezeichnung
9. Created at	Datum der Erstellung

Beim Erstellen oder Bearbeiten einer Kategorie haben Sie die Möglichkeit diese in den angebotenen Sprachen zu bennenen.

Manage Page Types

Über die Page Types haben Sie die Möglichgkeiten Pages einer von Ihnen bestimmten Art zu verwalten und zu gruppieren. Möchten Sie z.B. Pages für Blogs, News oder Produktseiten anders gestalten als Ihre restlichen Pages können Sie dies hier tun. Im Manage Bereich steht Ihnen folgende Übersicht zur Verfügung:

Funktion	Beschreibung
1. Create Page Type	Über den Button wird ein neuer Page Type erstellt
2. Search	Durchsucht die Page Types nach dem eingegeben Begriff
3. Action	Hier können Sie den Page Type: - Bearbeiten (Stift-Symbol) -Löschen (Mülleimer-Symbol)
4. ID	interne, eindeutige, durchnummerierte Nummer
5. Color	Farbe des Icon Symbols des Page Types
6. Name	durchsuchbare interne Bezeichnung
7. Path	URL-Prefix der den Pages vorgestellt sind
8. Number of Pages	Anzahl der zugeordneten Pages die unter dem Type erstellt wurden
9. Created at	Datum der Erstellung

Wenn Sie nun einen neuen Page Type erstellen, erscheint ein Pop-Up in dem der Name des Page Types eingegeben werden muss und ein Context Path eingegeben werden kann. Der Context Path ist ein URL-Prefix der den Pages vorgestellt wird wie z.B. /blog /product etc. Name und Context Path können später nicht weiter angepasst oder korrigiert werden.

Edit Page Type

Nachdem der Page Type benannt wurde gelangen Sie in den Bearbeitungsmodus des Page Types. Hier können Sie folgende Funktionen bearbeiten:

Funktion	Beschreibung
1. Configure localized names	Möglichkeit die Page Type sprachspezifisch zu bennenen
2. Color	Farbliche Einstellung des Page Type Icons
3. Enabled Content Elements	Auswahl der Content Elements die im Page Type zur Verfügung stehen
4. Category	Schaltet in den Page Settings im Extension Tab die Option Kategorie frei
5. Thumbnail	Schaltet in den Page Settings im Extension Tab die Option Thumbnail frei
6. General	Schaltet in den Page Settings im Extension Tab die Option General frei
7. Time and Scheduling	Schaltet in den Page Settings im Extension Tab die Option Time and Scheduling frei

Die PageType-Eigenschaften die bei Punkt 8 & 9 konfiguriert werden, sind von allen Pages dieses PageTypes benutzbar. Sie erweitern das bestehende Page-Objekt und ermöglichen es Ihnen damit, vielfältige weitere Anwendungsfälle für ihre Pages abzubilden. Da das was rechts (9) konfiguriert wird Auswirkungen hat auf das Page Objekt ist es im JSON Format links (8) dargestellt. Besonders technisch versierte können dies auch im JSON anpassen.

Ein HTML-Content Element kann dann zur Darstellung auf der Page verwendet werden. (technisch anspruchsvoll)

Haben Sie Ihre Änderung im Page Type abgeschlossen und gespeichert, haben Sie nun die Möglichkeit unter den Kontextmenü „Add“ eine neue Page nach Ihrem Page Type zu erstellen.

4. Add

Über das Kontextmenü „Add“ erstellen Sie mit einem Klick auf „Add Page“ eine neue Inhaltsseite.

Zu Beginn muss lediglich ein Name (interne Bezeichnung) eingegeben werden. Über den „Confirm“-Button wird dieser kurze Vorgang bestätigt und die Seite ist ab sofort im Dropdown aller Inhaltsseiten gelistet, auch wenn die Seite noch nicht veröffentlich und nicht verlinkt ist.

Name und URL sowie das Verstecken der Navigation und des Footers der neuen Seite passen Sie jederzeit über die Schaltfläche Settings im Bearbeitungsmodus an.

Lernen: Weitere Informationen zur Bearbeitung der Settings finden Sie im Kapitel 1 – Bearbeitungsmodus unter dem Punkt Settings.

5.Content Elemente

Auf einer Inhaltsseite können über platzierte Content-Elemente Texte, Medien sowie die dynamische Anordnung von Bildern, Videos und Textblöcken platziert werden. Auch reine Gestaltungselemente sind möglich. Content-Elemente können in ihrer Reihenfolge verschoben, individuell angepasst und auch wieder gelöscht werden. Dies ist nur innerhalb des Bearbeitungsmodus der Inhaltsseite möglich.

Neues Content-Element hinzufügen

Am unteren Ende einer Inhaltsseite im Bearbeitungsmodus befindet sich die große Schaltfläche „Add New Element“. Darüber öffnet sich eine Übersicht aller verfügbaren Content-Elemente, die Sie Ihrer Seite hinzufügen können. Mit einem Klick auf ein Element wird dieses oberhalb der Schaltfläche auf der Seite platziert.

Übersicht über alle Content-Elemente

Funktion	Beschreibung
	Accordion: Das Content-Element wird für Präsentation umfangreicher Informationen auf kleinem Raum genutzt, perfekt für eine FAQ.​ Dabei wird die Benutzeroberfläche nicht überladen dank einklappbarer Textabschnitte. Ob dies automatisch geschieht, ist konfigurierbar.
	Button: Bestimmte Funktionen wie das Navigieren zu anderen Seiten oder das Auslösen​ von Aktionen werden auf der Website durch das Button-Element aktiviert.​
	Cards: Ob als Teaser mit Links zu anderen Inhalten oder für übersichtliche Daten im Raster – Karten können aus Bildern, Überschriften, ​Texten und Buttons bestehen. Mit dem integrierten Rich-Text-Editor haben Sie bei der Textgestaltung freie Hand. ​
	Carousel: Über das Karussell ist eine dynamische Präsentation von Bildern innerhalb eines Content-Elements möglich. Neben der klassischen Funktion als statisches Kopfbild stehen im Karussell auch Texteditor und Call-to-Action-Elemente für scrollbare Content-Teaser zur Verfügung.​
	Date: Zeigt auf der Page das Datum an, an dem die Page publiziert wurde
	Form: Ihre Formulare können mit dem Formular-Manager konfiguriert und über das Content-Element im PageBuilder auf beliebig vielen Inhaltsseiten integriert werden.
	Gallery: Die Galerie ist perfekt geeignet, um zahlreiche Medieninhalte auf kleinem Raum visuell ansprechend zu präsentieren. Das notwendige Bild- und Videomaterial wird aus dem Media-Manager importiert. Mehrere Darstellungsformen bieten Ihnen eine gute Integrität in Ihr Layout.
	Headline: Im PageBuilder ist es möglich, eine SEO-freundliche Überschriften-Hierarchie zu​ erstellen. Mit wenigen Klicks können Seitentitel (H1) und Zwischenüberschriften​ (H2, H3, usw.) in den verwendeten Content-Elementen angelegt werden.​
	HTML: Für mehr Flexibilität bei der Gestaltung und Platzierung von Elementen bietet der PageBuilder die Möglichkeit, HTML-Elemente direkt auf der Seite zu platzieren. Sie können alle gültigen HTML-Elemente einfügen, einschließlich Iframes, Scripts und Styles.
	Image: Um einzelne Bilder zu platzieren, wird dieses Content Element genutzt. Über den MediaManager werden hier Bilder selektiert. Die Größe kann im Anschluss nachträglich noch geändert werden. Auch kleine Bildunterschriften sind möglich.
	Image Ticker: Wahlweise als animiertes Laufband oder statische Bildanzeige bringt der Image-Ticker​ viele Bilder in eine Reihe. Ideal für Partner-Logos und Referenzen. Die Bilder können​ interne oder externe Verlinkungen enthalten.
	Image with markers: Nach Auswahl eines geeigneten Bildes über die Optionen können Sie individuelle Markierungen auf dem Bild platzieren und bei Bedarf mit einem Klick auf die Markierung Text anzeigen lassen. Ideal für Karten, Grundrisse und Pläne.
	Multimedia: Multimedia-Elemente sind ein grundlegendes und wichtiges Element auf Seiten. So werden visuelle Inhalte dargestellt und die User-Experience verbessert. Mögliche Medien im Multimedia-Element sind Bilder, abspielbare Audio-Dateien, YouTube- und self-hosted Videos.​
	Overview Page: ​ Zeigt jede publizierte Page an einer bestimmten Kategorie
	Quick Links: ​Im Zusammenhang mit der Searchbar können Quicklinks helfen direkt auf andere nützliche Pages zu verweisen
	Search Bar: ​Sie können eine Searchbar direkt auf der Page platzieren
	Slider: ​Ähnlich wie das Overview Element bietet der Slider an die Pages eines bestimmten Types in einem Slider Element mit Vorschaubild übersichtlich zu präsentieren.
	Separator: Der Sektionstrenner ist ein grafisches Element mit CSS-Auszeichnungen und unterscheidet sich damit vom Spacer. Er dient dazu, um Abschnitte einer Inhaltsseite stilvoll voneinander zu trennen. Dies gelingt durch vordefinierte Muster wie Wellen, welche eine visuelle Hierarchie ermöglichen, um die Ästhetik Ihrer Inhalte beizubehalten.
	Spacer: Mit dem Spacer sorgen Sie für Freiraum, damit Content-Elemente in einem angenehmen Abstand zueinander platziert werden können.​ Durch individuelle Maße und Farben steht einem modernen UX-Design nichts mehr im Wege.​
	Text: Eine einfache Textbearbeitung ist mit unserem Rich-Text-Editor (RTE) möglich. Mit diesem können User Texte formatieren und gestalten, ohne dabei direkt mit dem HTML-Code arbeiten zu müssen. Der integrierte Link-Chooser sorgt für interne und externe Verlinkungen im Text.​
	Text with image: Das Text-mit-Bild-Element besteht aus einem Rich-Text-Editor, kombiniert mit einem Medien-Element. Informationen können visuell​ansprechend und verständlich präsentieren werden. Die Nutzung von Zwischenüberschriften ist ebenfalls möglich. ​

Content-Elemente editieren

Mit einem Mouseover über das zu bearbeitende Element wird der blaue Bearbeitungsrahmen mit mehreren Buttons sichtbar. Jedes Element besitzt je nach Typ unterschiedliche Bearbeitungsoptionen.

­­­Allgemeine Bearbeitungsmöglichkeiten

Funktion	Beschreibung
	Links oben: Die zwei Pfeile auf der linken Seite ermöglichen es, die Reihenfolge des Content-Element nach oben oder unten zu ändern.
	Mitte oben: In der Mitte steht immer der Name des ausgewählten Content-Elements. Im Beispiel handelt es sich um das Content-Element „Button“.
	Rechts oben: An dieser Stelle befinden sich verschiedene Optionen zur weiteren Bearbeitung des Content-Elements. Folgende Buttons finden Sie dort:

Funktion	Beschreibung
	Hinzufügen: Unterhalb des ausgewählten Content-Elements wird ein weiteres Element platziert – es öffnet sich das Elemente-Auswahlfenster.
	Duplizieren: Das ausgewählte Content-Element wird kopiert und unterhalb der Auswahl erneut platziert, inklusive Einstellungen, Text und Medien.
	Bearbeiten: Hinter dem Stift verbirgt sich ein Fenster für weitere Bearbeitungsmöglichkeiten. Beispiel. Beim Content-Element Karussell legen Sie hier die Slides an.
	Löschen: Nach einem Klick erscheint ein Bestätigungsfenster. Nach Ihrer Bestätigung wird das ausgewählte Content-Element gelöscht.
	Settings: Weitere Optionen für das ausgewählte Content-Element. Mehr dazu unter dem Unterkapitel Settings: Der Tab „Options“ und Settings: Der Tab „Animationen“.

Settings: Der Tab „Options“

Jedes Content-Element verfügt über Settings weitere Optionen, die das Aussehen und Verhalten des jeweiligen Content Elementes beeinflussen.

Lernen: Für weitere Informationen zu Einstellungen im Strapi Backend nutzen Sie bitte die komplette Settings-Dokumentation zum PageBuilder.

Jedes Content-Element hat zum Teil unterschiedliche Settings. Aus diesem Grund sind hier einmal die wichtigsten Settings aufgelistet, die in jedem Content-Element zu finden sind.

Funktion	Beschreibung
Content-Element design	In diesem Beispiel „Button design“. Vordefiniertes Aussehen für Content-Elemente, die von einem Designer oder Entwickler im Strapi Backend bestimmt wurden.
Background color	Auswahl an Hintergrund-Farben, die über ein Dropdown ausgewählt werden können. Diese Farbe beeinflusst nur die Hintergrundfarbe des ausgewählten Content-Elementes.
Use as an anchor	Aktivieren Sie diese Option und vergeben Sie einen eindeutigen Namen, um über einen Link direkt zu diesem Element springen zu können.
Custom classes	Es können Benutzerdefinierte Klassen für Content-Elemente eingetragen werden. Dies geschieht über Custom css, welches von einem Entwickler oder Designer im Strapi Backend eingestellt wird. Von dieser Person wird Ihnen dann auch die Klasse zum Eintragen mitgeteilt.

Achtung: Hier werden nur die wichtigsten Optionen aufgelistet, die für die Gestaltung eines Content-Elements essentiell oder in allen Content-Element-Optionen zu finden sind!

Hinweis: Einzelne Optionen unter “Options” tauchen zum Teil nur auf, sofern diese von einem Entwickler oder Designer im Strapi Backend konfiguriert wurden.

Settings: Der Tab „Animationen“

Bringen Sie Ihre Content-Elemente in Bewegung! Mit dem Zahnrad-Button „Options“ gelangen Sie über den Tab „Animations“ in das Fenster. Aus vorkonfigurierten Animationen im Dropdown können Sie das gewünschte Verhalten auswählen, um dynamische Bewegungen zu erzeugen. Das Testen ist über den Vorschaumodus möglich.

Funktion	Beschreibung
Fade-in animation	Sobald ein User beim Scrollen der Seite auf Höhe des jeweiligen Content-Elements angekommen ist, wird die ausgewählte Animation getriggert und das Element erscheint auf diese Weise auf Ihrer Seite.
Fade-out animation	Scrollen User an dem Content-Element vorbei, wird die Fade-out Animation ausgelöst und das Element verlässt die Anzeigefläche Ihrer Seite.
Dropdown-Optionen	Sowohl für Fade-in, als auch für Fade-out Animationen steht Ihnen eine abwechslungsreiche Auswahl zur Verfügung.

Animationen müssen von Ihnen erst aktiviert werden. Standardmäßig sind diese ausgeschaltet. Möchten Sie zuvor aktivierte Animationen wieder ausschalten, wählen Sie im Dropdown bitte „disabled“.

Settings: Der Tab „Extensions“

Mit dem Hinzufügen der Page Types haben Sie die Möglichkeit weitere Einstellungen im Tab "Extensions" zu nutzten, wenn diese dementsprechend in der Page Type Konfiguration freigeschaltet wurden.

Funktion	Beschreibung
Categories	Ordnet eine Page einer Kategorie zu
Thumnbnail: Title	Überschrift des Page Thumbnail
Thumnbnail: Teaser	Sub-Headline für das Page Thumbnail
Thumnbnail: Preview Text	Vorschautext des Page Thumbnail
Thumnbnail: Image	Bild vom Thumbnail der Page -Thumbnail wird generell im Content Element Slider oder Overview Page angezeigt
Publish Date	Mithilfe des Content-Elements Date kann in dem Setting das anzuzeigende Datum ausgewählt werden
Publish Time	n/a
Create date	n/a
Create Time	n/a
Start	n/a
End	n/a
All day	n/a
Repeat Internal	n/a