Pagebuilder

pagebuilder

Stammdaten

Page Builder

Der Page Builder öffnet sich zunächst mit einem leeren weissen Fenster. Lediglich das schwarze Menü oben ist zu sehen.




Und damit geht’s los. 
Als allererstes fügst du ein neues Element mit dem “+”-Button ganz links zu der leeren Seite hinzu. 

Es gibt folgende Elemente:

  • Komponenten

  • Elemente

  • Daten

  • Vorlagen

Dabei sind die Elemente wie es der Name schon verrät die elementaren Teile die du auf deiner Webseite platzieren kannst.


Hierunter findest du Layouts (Grid, Column/Row, Accordion), Text (Schriftzug, Richtext), Media (Bild, Video, Animation), Navigation (Link, Liste) und Misc (Code, Socials).


Beispielseite: Über uns

Lass uns zum besseren Verständnis eine einfache “Über uns” Seite bauen. Diese soll stark vereinfacht wie folgt aufgebaut sein: ein Bild von unserer Organisation, dann ein Text mit einer Überschrift, dann die Consultants, und zum Schluss noch Social Links (Links zu sozialen Netzwerken). Auf geht’s! 🎉


Ganz oben soll also ein Bild sein. 

Das finden wir unter Elemente > Media > Bild. Mit einem Klick ist das Bild-Element der Webseite als leeres Platzhalter hinzugefügt. Möchte man dieses nun bearbeiten, klickt man in den Platzhalter oder auf den Stift im Menü, welches erscheint, wenn man die Maus in diesen Bereich bewegt. 


Rechts öffnet sich nun das jeweilige Kontext-Menü
Um ein Bild hinzuzufügen, klickt man auf folgendes Symbol:

Jetzt landet man im Bilder Menü
In der Übersicht, die sich als erstes öffnet, werden alle Bilder unten angezeigt. 


Mit der Suche kannst du gezielt Bilder suchen als auch die Anzeige der Bilder filtern
Tippe dazu einfach den gesuchten Text in das Suchfeld.


Klickst du ganz oben in das graue Feld (siehe nächstes Bild), kannst du auch ein Bild von deinem Computer hochladen.



Nachdem wir das passende Bild ausgewählt haben, wird es im Platzhalter angezeigt.




Als nächstes kommt der Text. 

Dazu wählen wir zuerst Elemente > Media > Schriftzug

Das ist unsere Headline


Diese müssen wir zunächst platzieren
Da wir momentan nur ein Element auf der Seite haben, ist das automatisch der Referenzpunkt
In diesem Element sieht man nun oben links zwei Pfeile.


Das bedeutet, wir können das neue Element entweder vor oder hinter dieses Element setzen. 
Da wir den Text unter dem Bild haben wollen, klicken wir auf den rechten Pfeil
Damit wird unsere Headline unter dem Bild platziert.


Diese tragen wir dann rechts im Kontext-Menü ganz oben in das freie Feld ein. 
Ausserdem bestimmen wir als Größe “H1”, ändern die Farbe und setzen die Stärke auf “400” (Fettdruck).



Unter der Headline kommt ein Textblock
Dazu wählen wir Elemente > Media > Richtext
Richtext deswegen, weil wir einen Absatz über unsere Organisation schreiben wollen. 
Da wir nun mehrere Elemente auf der Seite haben, müssen wir das Element bestimmen, um das wir den Richtext platzieren wollen
Dazu bewegen wir die Maus auf den Platzhalter für die Headline, und klicken wieder auf den zweiten Pfeil des Menüs welches oben in der linken Ecke erscheint. Dadurch platzieren wir das neue Element unter dem aktuellen Element.



Jetzt haben wir also ein Bild, eine Headline und einen Absatz als Basis-Elemente zu unserer Seite hinzugefügt. Als nächstes wollen ein paar mehr “funktionelle Elemente” hinzufügen. 



Dazu rufen wir uns Daten > Collections > Consultants auf. Mit diesem Element können wir auf einfachem Wege unser Team aus Consultants anzeigen lassen. Voraussetzung ist, das bei den Consultants im Profil die Checkbox [ √ ] Online angekreuzt ist. 


Auch dieses Element platzieren wir an unterster Stelle und wählen den letzten Absatz als Positionierungselement. Wir müssen dazu nicht auch nicht immer oben in der schwarzen Leiste auf den “+”-Button, sondern können auch direkt von dem Element zur Auswahl gelangen. Dazu klicken wir hier auf den “+”-Button, der in dessen oberen linken Ecke erscheint, wenn man die Maus auf dieses Element zieht.



Nach der Auswahl von Daten > Collections > Consultants klicken wir auf den rechten Pfeil, 
um dieses Element unter den Absatz einzufügen.



Haben wir alles richtig gemacht, werden alle Consultants deiner Organisation angezeigt, 
bei denen die Checkbox [ √ ] Online angekreuzt ist. Da sieht dann wie folgt aus:




So weit, so gut. Zum Schluss fügen wir noch unsere Social Links hinzu, 
also Links zu sozialen Netzwerken wie Facebook, Instagram, TikTok oder LinkedIn.


Also, auf de