Strapi PageBuilder V.1.2

1. Einleitung

Mit dieser Anleitung führen wir Sie an alle Funktionen heran, die zur Nutzung der PageBuilder Settings wichtig sind. Der PageBuilder ist im Frontend 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. Dies funktioniert aber nur, wenn dafür von Ihnen Settings im PageBuilder Backend hinterlegt wurden.

Wir werden Ihnen die Benutzeroberfläche zeigen sowie die wichtigsten Funktionen, um Farben und Fonts anzupassen und zu erstellen. In dieser Dokumentation werden Ihnen die store-, content-element- und global-settings nähergebracht.

Das generelle Aussehen der Seite wird von Ihnen als Entwickler oder Designer im PageBuilder Backend vorbestimmt. Der Content Manager hat lediglich die Möglichkeit, aus denen von Ihnen vordefinierten Farben, Schriften und Abständen im Konfigurations-PopUp, die jeweiligen Content Elemente auszuwählen.

2. Strapi PageBuilder Settings

Das Strapi PageBuilder Backend beinhaltet mehrere Content Types um Einstellungen vorzunehmen, bei denen Sie hauptsächlich mit diesen drei Settings arbeiten werden:

• Store Settings
• Global Settings
• Content-Element-Settings

Durch diese Settings wird das look and feel und Verhalten der gesamten Seite sowie einzelner Content Elemente bestimmt.

Darüber hinaus existieren für weitere, umfangreichere Einstellungen custom css sowie additionalcss, um Ihre Website maßgeschneidert an Ihre Bedürfnisse anzupassen.

Rule of thumb	Was soll angepasst werden?
Kein Content-Element	Setting in Global Settings suchen
Content-Element	Setting in Content-Element Settings suchen

3. Content Types

3.1 Store-Settings

Die Store Settings werden dazu genutzt, um grundlegende Einstellungen wie Farben und Schriftarten, die auf Content-Element-Settings und Global Settings angewendet werden können, einzurichten.

Folgend sehen Sie die wichtigsten Settings, die im PageBuilder Backend eingestellt werden können:

Funktion	Beschreibung
color	Zum Definieren von Farben via Color-Picker.
font	Das Hochladen und Anlegen von Fonts im .ttf-Format
googleFont	Hochladen und Anlegen von Google-Fonts via googleFontCssImport
typography	Zum Anlegen von typography mit den zuvor hochgeladenen Fonts, um eine Hierarchie von Headline-Tags (H1 bis H6) und Paragraph (P-Tag) festzulegen.
richtext	Enthält Einstellungen für die Text-Formatierung, wie bold und linksbündig. Diese verknüpfen Sie später mit dem Content-Element „richtext“.
button	Einstellungen für Buttons wie Font, Farbe, Button-Breite/Höhe und Hover-Effekte
link	Einstellungen für Links wie Font, Farbe und Hover-Effekte werden hier eingestellt
background	Hintergrund-Bilder, die Sie später auf Content-Elemente anwenden können
arrows	Hier werden die Pfeile nach links und rechts für die Content-Elemente carousel und gallery definiert
spaceX	Der horizontale (links/rechts) Abstand zum Layout
spaceY	Der vertikale (oben/unten) Abstand zu den Elementen ober- und unterhalb eines Content-Elements

3.2 Global-Settings

Der Name Global Settings ist hier bereits sehr beschreibend. Hier nehmen Sie Einstellungen einmalig vor, die auf die gesamte Seite Einfluss haben. Dazu gehören u.a. die Größe und Farbe der Navigation oder die Hintergrundfarbe Ihrer gesamten Website via Layout-Einstellungen.

Um in die Global-Settings zu gelangen, klicken Sie im PageBuilder-Backend auf den Menüpunkt global.

Weitere Einstellungsmöglichkeiten in den Global-Settings:

Funktion	Beschreibung
responsive	Bestimmt die Breakpoints Ihrer Seite, ab wann diese beispielsweise in die MobileView umbricht.
layout	Im Layout bestimmen Sie u.a. die Abstände und Größe Ihrer Inhalte sowie die Hintergrundfarbe.
navigation	Hier bestimmen Sie das Aussehen der Navigation. Um die Navigation nach Ihren genauen wünschen anzupassen, sind hier einfache CSS-Kenntnisse nötig.
footer	Einstellungen für den Footer und Social Media. Zusätzlich können Sie hier in verschiedenen Sprachen eine Copyright-Zeile eintragen.
seo	SEO-Optimierungen, wie Einstellungen zur Bilder-Optimierung oder ob Links sich immer in einem neuen Tab öffnen sollen.
logo	Um Favicons in verschiedenen Größen und auf verschiedenen Plattformen anzuzeigen, laden Sie diese über den Media Manager hoch.
forms	Da in Formularen auch der Richtext-Editor verwendet wird, wählen Sie hier einfach Ihr Richtext contentElementSetting aus.
search	Über search bestimmen Sie das Aussehen der Searchbar in der Navigation sowie der Lupe.
searchresults	Bestimmt das Aussehen der Searchresults auf Ihrer Seite, ganz nach Ihren wünschen.
multilanguage	Falls Ihre Seite mehrere Sprachen bedient, legen Sie hier das Aussehen Ihres languageSwitchs fest, der in der Navigation angezeigt wird.
animation	Einstellungen, ab wann Animationen auf der Seite aktiviert oder Animationen auch in Mobile-View angezeigt werden.
scrolling	Hier bestimmen Sie, wie sich die gesamte Seite beim Scrollen verhält.
scrolltotop	Bei scrolltoptop konfigurieren Sie einen grafischen Button, mit dem Ihre User an den Anfang Ihrer Seite scrollen.
captchatype	Hier wird eingestellt, ob ein Captcha verwendet werden soll und welche Art (z.B. Google Captcha).

3.3 Content-Element-Settings

Content-Elemente sind eine Art Bausteine, mit der Sie den Aufbau Ihrer Seite bestimmen. Es sind einzelne Elemente, mit der z.B. eine Headline oder Bilder auf einer Seite platziert werden.

Innerhalb der Content-Elemente werden über Konfigurations-Modale weitere Einstellungen vorgenommen, die vorher von Ihnen über die Store- und Content-Element-Settings definiert wurden. Dazu gehören Farben, Fonts oder auch die Typographie.

Um in die Content-Element-Settings im Backend zu gelangen, klicken Sie im Menü den Punkt contentElementSettings.

Hinweis: In der PageBuilder Content-Management-Dokumentation wird detaillierter auf die einzelnen Content-Elemente eingegangen.

4. Nach dem Login

Nachdem Sie nun die einzelnen Content Types kennengelernt haben, zeigen wir Ihnen, wie Sie diese anpassen. Nach dem Login in das Strapi-Backend klicken Sie auf den Punkt Content Manager.

In Menüebene 2 klicken Sie auf contentElementSettings oder store– die Ansicht wechselt zur Übersicht der vorhandenen Store- oder Content-Element-Settings.

5. Default-Settings

Sobald Sie sich nun in der jeweiligen Settings-Übersicht befinden, sehen Sie bereits vorkonfigurierte Settings, die im Installationspaket des PageBuilder Plugins direkt mit ausgeliefert werden. Bei diesen Settings reden wir im weiteren Verlauf dieser Dokumentation von Default-Settings. Zu erkennen sind diese Settings (ausgenommen font und color) an der Endung (default).

Die Default-Settings können Sie jederzeit an Ihre Bedürfnisse anpassen.

Hinweis: Vordefinierte Default-Komponenten zum Schnelleinstieg erkennen Sie an der Angabe (default) im Content-Type Namen. Beispiel: button: button (default)

5.1 Bearbeiten von (default) Store- und Content-Element-Settings

Um die einzelnen Settings besser kennenzulernen, empfehlen wir Ihnen, zuerst die Default-Settings anzupassen. Zusätzlich gibt es eine gewisse Reihenfolge, wie weiter unten Beschrieben, die bei der Anpassung der Default-Settings sinnvoll ist, da viele Settings aufeinander aufbauen und ineinandergreifen.

Hier sehen Sie eine Auflistung der store-Settings, wenn Sie in den store-Settings auf +create new entry klicken.

Am besten werden die Komponenten in der im Screenshot gezeigten Reihe nach angelegt oder bearbeitet. Aus diesem Grund fokussieren wir uns für die ersten Schritte auf die folgenden drei store-Settings, da diese Settings fast immer auch in anderen Store- sowie Content-Element-Settings verwendet werden:

Funktion	Beschreibung
color	Default-Settings: primary (dark und light), secondary (dark und light), accent und background (dark und light) colors. Die primary color bestimmt beispielsweise die Farbe der Typography-Default-Komponente.
font	Ermöglicht das Hochladen eigener Fonts im .ttf-Format.
typography	Typography bestimmt unter anderem das Aussehen der HTML-Headline-Hierarchie H1 bis H6, die Schriftgröße von Schrift-Formaten und zieht sich Farben und Fonts aus den zuvor erwähnten Komponenten color und font.

Hinweis: Mehr zu den einzelnen Store-Settings finden Sie in Kapitel 2.

1. Über den Menüpunkt „store“ gelangen Sie in die store-Settings
2. Wählen Sie nun in der Übersicht primary color (dark) zur Bearbeitung aus.
3. Die Ansicht wechselt in den Bearbeitungsmodus, in dem Sie auf den Namen des Settings oder auf das Stift-Symbol ganz rechts klicken.
4. Über das Feld name können Sie einen neuen Namen für das Setting vergeben.

Hinweis: Wir empfehlen, aussagekräftige Namen zu verwenden, damit die Einstellungen immer schnell gefunden werden können.

1. Im Anschluss wählen Sie die Farbe im Feld color aus – entweder über den Color-Picker oder über die Eingabe eines validen HEX-Wertes.
2. Über den Button save sichern Sie Ihre Änderungen. Damit ist die erste Farbe angepasst.
3. Jetzt können Sie weitere Default-Colors (z. B. secondary color) bearbeiten.

Achtung: Nach dem Speichern bleibt die aktuelle Bearbeitungsansicht offen! Wenn Sie nun neue Werte eintragen, wird kein neues Setting angelegt, sondern das aktuell geöffnete Setting wird bearbeitet.

5.1.1 Weitere Bearbeitungsmöglichkeiten

Neben der Bearbeitung können Sie in der Übersicht zusätzlich Settings duplizieren oder auch löschen.

Funktion	Beschreibung
Duplizieren	Beim Duplizieren wird das ausgewählte Setting übernommen und es öffnet sich direkt das Bearbeitungsmenü, in dem Sie neue Einstellungen vornehmen können.
Löschen	Wird löschen ausgewählt, erscheint ein PopUp, in dem Sie das Löschen bestätigen müssen. Bei Klick auf den „Confirm“-Button, wird das Element unwiderruflich gelöscht.

5.2 Neuanlage von Store- und Content-Element-Settings

Wenn Ihnen die mitgelieferten Default-Farben nicht ausreichen, können Sie jederzeit neue Store-Settings anlegen:

1. Öffnen Sie die Store-Settings store.

2. Klicken Sie auf den Button +create new entry. Es öffnet sich eine neue Seite.

3. Klicken Sie den Button add new component. Die Seite zeigt nun alle verfügbaren Store-Settings an.

4. Wählen Sie hier die gewünschte Komponente aus, in diesem Beispiel color. Der Bearbeitungsmodus öffnet sich.

5. Wie beim Bearbeiten von Store-Settings aus Kapitel 2 tragen Sie im name-Feld einen sprechenden Namen ein.
6. Wählen Sie die gewünschte Farbe aus dem color-Feld aus oder tragen Sie einen HEX-Wert ein.
7. Speichern Sie anschließend mit dem Save-Button.
8. Nun taucht Ihre neu erstellte Farbe in der store-Übersicht auf.

Hinweis: Das Neuanlegen und Bearbeiten der Content-Element-Settings funktioniert analog.

Achtung: Nach dem Speichern bleibt das Fenster offen! Wird nun ein neuer Wert in eines der Felder eingetragen, wird lediglich das zuvor gespeicherte Setting überschrieben. Es wird kein neues Setting angelegt!

5.3 Hinzufügen von Store-Settings zu Content-Element Settings, Global- und anderen Store-Settings

Sie wissen nun, wie Store- und Content –Element Settings angelegt und bearbeitet werden. Nun zeigen wir Ihnen, wie sie diese in andere Settings einsetzen können.

1. Sie haben die primary-color (dark) in den store-Settings bearbeitet
2. Nun wechseln Sie von den store-Settings zu den contentElementSettings und bearbeiten dort den seperator: Seperator (default)
3. Dort sehen Sie unter bgColors ein dropdown, in welchem Sie alle bisher angelegten Farben sehen – auch die primary-color (dark).
4. Da in dem separator-Content-Element grafische Elemente mit bis zu zwei Farben angepasst werden, wählen Sie zusätzlich noch eine andere passende Farbe aus.
5. Wie bei bgColors in diesem Beispiel funktioniert auch das Hinzufügen von anderen store-Settings wie SpaceX oder Typographie, in dem Sie diese einfach über ein dropdown hinzufügen.
6. Einzelne Elemente können auch wieder entfernt werden. Entweder durch ein x neben der Komponente (wie bei Farben) oder durch eine andere Auswahl im Dropdown (wie bei SpaceX).

5.4 Auswirkung auf das Frontend, durch Einstellungen im PageBuilder-Backend

Entsprechend Ihrer Rollen-Aufteilung bestimmen Entwicklungs- und/oder Design-Verantwortliche die Layout-Entscheidungen (Farben, Fonts und Typographie) im PageBuilder-Backend, welche dem Content-Management im Frontend via Konfigurations-Modale zur Verfügung stehen.

Im Frontend kann nicht selbst entschieden werden, ob eine bestimmte Schriftart oder Farbe in den Content-Elementen verwendet wird, wenn diese im Backend nicht entsprechend eingestellt wurde. Auf diese Weise wird die Nutzung auf freigegebene Elemente beschränkt, die Ihrer gewünschten Corporate Identity entsprechen. Fehlentscheidungen wird somit vorgebeugt.

Das folgende Beispiel verdeutlich Ihnen die Auswirkungen von Design-Entscheidungen zu Farben, die für das Content-Element gallery ausgewählt wurden:

1. Für das Content-Element gallery stehen Ihnen im PageBuilder-Backend alle Farben zur Verfügung, die in den Store-Settings im Dropdown hoverColors erstellt wurden.

2. Nun entscheiden Sie sich, für das Content-Management nur die Farben white und Rose als hoverColors-Option zur Verfügung zu stellen. Im Feld bgColors sind es die Farben white und Beige.
3. Wenn das Content-Management im PageBuilder-Frontend das Konfigurations-Modal für das Content-Element Gallery öffnet, gibt es dem Fundus der anlegten Farben lediglich die bgColors-Optionen white und Beige, bei hoverColors, wie ausgewählt und im Screenshot zu sehen, white und Rose.

Sobald Sie Farben, Fonts und die Typografie angepasst haben, können Sie die ersten Ergebnisse im PageBuilder-Frontend begutachten.

1. Mit dem CMS-User-Login kommen Sie in das PageBuilder-Frontend.
2. Über das Kontextmenü Add > Add Page legen Sie eine neue Inhaltsseite an. Im Bearbeitungsmodus platzieren Sie neue Content-Elemente über die große Schaltfläche „add new element“

5.5 Suche

Da die Liste der Settings schnell unübersichtlich werden und um die Suche nach bestimmten Settings zu erleichtern, kann nicht nur nach bestimmten Schlagwörtern wie in diesem Beispiel „Image“ gesucht werden, sondern auch noch spezifisch nach Attributen wie dem Erstellungsdatum gefiltert werden.

6. Custom CSS

Custom CSS wird dann verwendet, wenn bestimmte Elemente im Frontend gestylt werden sollen, die weder über die Global Settings noch über die Store Settings beeinflusst werden können. Dazu zählen beispielsweise Aufzählungszeichen oder animierte.

Funktion	Beschreibung
mobileCss	Hinzufügen von (allgemeinem) benutzerdefiniertem CSS. Es wird keine Media-Query angewendet (die Definition eigener Media-Queries ist hier möglich).
tabletCss	Fügen Sie spezifisches benutzerdefiniertes CSS für Tablets (über mobile) hinzu. Eine min-width-Media-Query (min-width: global.responsive.breakpoints.mobile px) wird angewendet.
desktopCss	Fügen Sie spezifisches benutzerdefiniertes CSS für Desktop (über Tablet) hinzu. Eine min-width-Media-Query (min-width: global.responsive.breakpoints.tablet px) wird angewendet.
wqhdCss	Fügen Sie spezifisches WQHD (über Desktop) benutzerdefiniertes CSS hinzu. Eine min-width-Media-Query (min-width: global.responsive.breakpoints.desktop px) wird angewendet.

6.1 Additional CSS

Additional CSSist in den folgenden Global-Settings möglich.

Funktion	Beschreibung
navigation	Das additionalCSS für die Navigation ist sehr umfangreich, da Sie hier über css alle nötigen Einstellungen vornehmen, um beispielsweise das Padding der Untermenüs zu bestimmen. Leichte css-Kenntnisse sind hier vorteilhaft.
footer	Definiert CSS, das zusätzlich zur Konfiguration angewendet wird.

Additional css ist in den folgenden store-Settings möglich.

Funktion	Beschreibung
typography	Als Default können hier bereits letter-spacing: normal; text-transform: none; eingestellt werden
button	Hier haben Sie die Auswahl zwischen zwei CSS Einstellungen. additionalCss mit der Default-Einstellung text-transform: none; und additionalCssHover (mit der Default-Einstellung border: 1px solid #000000; border-radius: 0;
link	Wie beim Button haben Sie hier Einstellungsmöglichkeiten für additionalCss und additionalCssHover. CssHover kommt mit den Default-Einstellungen text-decoration: underline; letter-spacing: normal; text-transform: none;
background	Auch hier haben Sie Einstellungsmöglichkeiten für additionalCss und additionalCssHover. Css und cssHover kommen ohne Default-Voreinstellungen_._
arrows	Die arrows haben ein arrowSvgFilterCssAttribute und dadurch bereits ein drop-shadow-Default vorgegeben drop-shadow(0px 3px 2px rgba(134, 134, 134, 0.6)).

Additional Css ist in den folgenden Content-Element-Settings möglich.

Funktion	Beschreibung
form	Auch hier haben Sie Einstellungsmöglichkeiten für additionalCss und additionalCssHover. Css und cssHover kommen ohne Default-Voreinstellungen_._
gallery	Die gallery-Elemente haben ein Default: fullScreenIconFilterCss und dadurch bereits ein drop-shadow-Default vorgegeben drop-shadow(0px 3px 2px rgba(134, 134, 134, 0.6)).

7. Assets

Das Hochladen von Bildern und Fonts funktioniert im Strapi Backend ein wenig anders als im PageBuilder Frontend über den Media Manager.

7.1 Hinzufügen von Assets an dem Beispiel Global Settings Favicon

1. In den Global Settings scrollen Sie zu dem Punkt „Logo“
2. Dort finden Sie das Favicon 32x32 vor. Das von Ihnen hochgeladene Asset muss nicht dieser Größe entsprechen und wird auf diese Größe skaliert.

3. Nun können Sie via drag and drop oder Klicken ein neues Asset auswählen und hochladen

4. Die Ansicht ändert sich ein wenig und es wird automatisch ein Häkchen bei dem hochgeladenen Asset gesetzt.

5. Über Finish wird das Bild dann als favicon verwendet. Dort kann es jederzeit bearbeitet werden.

8. Import/Export

Über Das Strapi Dashboardd, im Menüpunkt PageBuilder sind die Reiter Basic und Import/Export zu sehen.

Diese Funktionen ermöglichen Ihnen ein Settings Set zwischen zwei Umgebungen zu transferieren, ohne manuell Einstellungen zu übertragen.