Pagebuilder

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 den “+”-Button des untersten Elements, dann Elemente > Misc > Social auswählen, 
rechten Pfeil klicken um es nach dem ausgewählten Element zu platzieren, fertig! 

Easy oder? 😊

Die Social Links kannst du wie immer im Kontext-Menü auf der rechten Seite entsprechend bearbeiten (um hier deine Links einzutragen) oder auch einzeln löschen.

Zuletzt gehen wir noch auf das Menü ein, welches sich öffnet, 
wenn du mit der Maus über ein Element fährst.

Mit Klick auf den Stift kannst du ein Element bearbeiten. Also zum Beispiel den Text direkt in einem Element, oder die Einstellungen rechts im Kontext-Menü.

Mit dem Pfeilkreuz verschiebst du Elemente. Dazu klickst du erst auf den das Pfeilkreuz, gehst mit der Maus auf das Element, um dass du das zu verschiebende Element platzieren willst, und entscheidest hier wieder, ob du es vor oder nach ( <  > ) dem Element haben willst.

Um ein Element zu löschen, klickst du auf den Papierkorb.

Diese Funktion haben wir bereits kennengelernt. Damit fügst du ein neues Element oder Template ein.

Um ein Element zu kopieren, klickst du auf das Plus im Kreis. 
Dabei wird die Kopie direkt unter das Original-Element platziert.