Strapi PageBuilder V.1.2

Hinweis: Stellen Sie sicher, dass Sie die Installationsanleitung befolgt haben und Strapi sowie Next.js gestartet worden sind. Die Installationsanleitung finden Sie auf unserer Website https://www.am-gmbh.de

1. Store-, Global- und Content-Element-Settings

Um in die Settings zu gelangen, klicken Sie nach dem Login in das Strapi-Backend auf Content Manager.

In Menüebene 2 des PageBuilder sind mehrere Content-Types enthalten, bei denen hauptsächlich mit diesen drei gearbeitet wird:

• Store-Settings
  Die Store-Settings werden genutzt, um grundlegende Einstellungen an Farben und Schriftarten vorzunehmen, um diese im Anschluss auf Content-Elemente und Global-Settings anzuwenden.
• Global-Settings
  Mit den Global-Settings nehmen Sie Einstellungen vor, die Einfluss auf die gesamte Seite haben. Dazu gehören u. a. die Größe und Farbe der Navigation oder die Breite einer Seite mit globaler Hintergrundfarbe und globalen Abständen der Website.
• Content-Element-Settings
  Content-Elemente sind einzelne Bausteine, mit denen Sie beispielsweise eine Headline oder Bilder im Frontend platzieren. Damit diese optisch Ihren Wünschen entsprechen, werden die Bausteine in den Content-Element-Settings angepasst und dort mit den vordefinierten Store-Settings verknüpft.

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

Lernen: Auf weitere Content-Types gehen wir in der kompletten Settings-Dokumentation ein.

2. Store-Settings

Die Store-Settings werden in den Store-, Global- und Content-Element-Settings genutzt. Folgend sehen Sie die wichtigsten Einstellungen, die im PageBuilder-Backend vorgenommen werden:

Element	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

Bei der Installation des PageBuilders werden vordefinierte Default-Settings installiert. Diese können Sie an Ihre Bedürfnisse anpassen. Für die ersten Schritte fokussieren wir uns auf folgende drei store-Settings:

Store Setting	Auswirkungen
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: Vordefinierte Default-Komponenten zum Schnelleinstieg erkennen Sie an der Angabe (default) im Content-Type-Namen. Beispiel: button: button (default)

Lernen: Für weitere Informationen nutzen Sie bitte die Settings Dokumentation zum PageBuilder.

2.1 Default-Settings bearbeiten

Sie können Default-Settings bearbeiten. Am Beispiel des store-Settings color erläutern wir das Vorgehen:

1. Öffnen Sie die store-Settings über den Menüpunkt store

2. Da primary color für die Typografie genutzt wird, passen wir dieses Default-Setting zuerst an. Über das Stift-Symbol rechts wählen Sie color: primary color (dark) zur Bearbeitung aus.
   

3. Die Ansicht wechselt in den Bearbeitungsmodus.

4. Über das Feld name können Sie einen neuen Namen für das Setting vergeben.

Hinweis: Damit Settings stets schnell auffindbar sind, empfehlen sich aussagekräftige Namen.

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

Warnung: 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.

2.2 Settings neu anlegen

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.

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

2.3 Überprüfung Ihrer ersten Konfigurationen im Frontend

Sobald Sie Farben, Fonts und die Typografie angepasst oder erstellt 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“

Lernen: Weitere Informationen zum PageBuilder-Frontend und den einzelnen Content-Elementen finden Sie in der ausführlichen CMS-Dokumentation. Eine kurze Übersicht dazu hier im Kapitel 4.

3. Global-Settings

Hier nehmen Sie Einstellungen vor, die auf Ihre gesamte Website Einfluss haben. Dazu gehören u.a. die Größe und Farbe der Navigation oder die Hintergrundfarbe via Layout-Einstellungen.Um in die Global-Settings zu gelangen, klicken Sie im PageBuilder-Backend auf den Menüpunkt global.

Zu den Einstellungsmöglichkeiten in den Global-Settings gehört auch das Layout. Im Screenshot sehen Sie Werte für die Breite einer Seite sowie die globale Hintergrundfarbe und globale Abstände.

Weitere Einstellungsmöglichkeiten in den Global-Settings:

• Responsive
• searchresults
• Layout
• multilanguage
• Navigation
• animation
• footer
• scrolling
• Seo
• scrolltotop
• Logo
• captchatype
• forms
• sanitizing
• Search

4. Content-Element-Settings

Über die Content-Elemente platzieren Sie im PageBuilder-Frontend Elemente wie Headlines oder Bilder auf Ihrer Seite. Im Vorfeld des Content-Managements werden Konfigurationen im PageBuilder-Backend vorgenommen.

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

Innerhalb der Content-Elemente im PageBuilder-Frontend finden Sie in den Konfigurations-Modalen weitere Einstellungen, die zuvor im Backend über die Store- und Content-Element-Settings definiert wurden. Dazu gehören Farben, Fonts oder auch die Typographie.

Entsprechend Ihrer Rollen-Aufteilung bestimmen Entwicklung- 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 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.