Menü

WP Bakery Editor – Neue Elemente

 

Mit dem Redesign erfuhr das Tourismusnetzwerk zudem ein großes Update hinsichtlich des Editors – also im Prinzip das Werkzeug, mit dem redaktionelle Inhalte gepflegt werden können. Dieser Editor heißt WP Bakery.

Durch diesen neuen Editor ergeben  sich deutlich mehr Gestaltungsmöglichkeiten auf den Inhaltsseiten – hierzu wurden neue Inhaltselemente programmiert, die im Folgenden vorgestellt werden.

Wichtig zu erwähnen ist, dass der neue Editor nicht verwendet werden muss! Alle Inhaltsseiten, Beiträge, Termine etc. können weiterhin wie gewohnt mit der bekannten Bearbeitungsmaske (dem sogenannten Gutenberg Editor) redaktionell gepflegt werden. Der Gutenberg Editor ist standardmäßig ausgewählt – dies ist erkennbar durch die graue Hinterlegung des verwendeten Editors auf in der Seitenbearbeitung.

Wenn der Gutenberg Editor verwendet wird, können jedoch nicht die neuen Inhaltselemente verwendet werden! Soll die WPBakery verwendet werden, muss links auf den Button “Backend  Editor” geklickt werden. Die Ansicht ändert sich wie folgt:

 

Die Bezeichnung heißt nun “Classic Mode” und die Bearbeitungsmaske stellt sich auf den neuen Editor um. Nun können diverse Inhaltselemente genutzt und flexibel eingesetzt werden. Neu ist auch, dass mit der Bakery auch Spalten-Elemente verwendet werden können. Diese ermöglichen es, bspw. Text und Bilder nebeneinander zu platzieren und die Seiten redaktionell aufzuwerten. Zudem ist man völlig frei in der Platzierung der Inhaltselemente.

 

Der grundlegende Umgang mit der WP Bakery

Wenn Inhalte mit dem neuen Editor erstellt werden, müssen Sie in einzelnen Containern denken. Man schreibt seine Inhalte also nicht mehr nur einfach herunter und fügt bspw. noch ein Bild ein, sondern man arbeitet in den sogenannten Inhaltsbereichen. Klicken Sie dazu auf das Plus-Zeichen und eine Maske der verfügbaren Inhaltselemente öffnet sich. Die für Sie relevanten sind rot eingerahmt. Stellen Sie sich vor, dass Sie einen Baukasten haben, aus dem Sie sich die anzuzeigenden Elemente zusammenstellen. Man muss einzelne Inhaltselemente miteinander kombinieren.

 

Die Basis für die gesamte Pflege der Inhalte ist das Element Inhaltsbereich.

Ist das Inhaltselement Inhaltsbereich ausgewählt, gelangen Sie zurück in den Editor. Das Element Inhaltsbereich muss nur ein Mal ausgewählt werden, danach arbeiten Sie nur noch in dieser Box.

Sie erhalten dann diese noch leere Ansicht des Inhaltsbereich – klicken Sie auf das Plus-Zeichen und wählen das Element Zeile aus. Dieses Element bildet die einzelnen Container, innerhalb derer die Elemente angelegt werden und ist das erste Baukasten-Teil.

 

Wenn Sie eine neue Zeile hinzugefügt haben, ergeben sich weitere Optionen. Am oberen Rand der noch leeren Zeile sehen Sie noch einige Funktionen, bspw. können Sie das Raster der Box frei wählen und die Anzahl der Spalten und auch deren Aufteilung festlegen. Sie können die Inhaltselemente aber auch duplizieren, löschen oder an eine andere Stelle ziehen. Das Inhaltselement bildet damit den Rahmen für die redaktionelle Pflege. Innerhalb dieser Box werden dann die weiteren Inhaltselemente angelegt, was im Folgenden gezeigt werden soll.

 

Der Kopf-Slider / Vollflächige Slider

 

Frontend-Ansicht:

Der Vollflächige Slider besteht aus einem großen Bild, einer Info-Box und einem Link-Feld. Sie sind frei in der Anzahl der Slider und jeder Slider kann individuell gestaltet werden (unterschiedliche Bilder und Texte). Eine automatische Wechselzeit von 5 Sekunden ist hinterlegt und diese greift, sobald mindestens zwei Slider-Elemente hinterlegt sind.

 

Backend-Ansicht:

Unser Baukasten-System wird hier fortgeführt – die Basis Inhaltsbereich + Zeile werden nun mit weiteren Elementen gefühlt. Beim vollflächigen Slider brauchen Sie nichts am Spaltenformat der Zeile zu verändern, sie bleibt einspaltig über die ganze Breite.

Achten Sie darauf, dass Sie immer innerhalb der Zeile arbeiten und hier die Elemente hinzufügen. Die fertige Backend-Ansicht sieht aus wie im Screenshot gezeigt – der Weg dahin wird im folgenden gezeigt.

 

Wenn Sie eine leere Zeile angelegt haben, klicken Sie auch hier wieder auf das Plus-Zeichen, um die Auswahl der Inhaltselemente zu öffnen. Wählen Sie dann das Element Kopf Slider Container.

 

 

Die Ansicht ändert sich wie folgt – links erscheint ein blaues Zeichen für das ausgewählte Element, in diesem Fall der Kopf Slider Container. Klicken Sie nun wieder auf das Plus-Zeichen.

 

Wählen Sie das Element Kopf Slide aus.

 

Es öffnet sich folgende Ansicht (hier schon vorausgefüllt). Die Größe des Bildes beträgt 1366×471 Pixel. Legen Sie also ein Bild fest sowie eine Überschrift, einen kurzen Text für die Info-Box und den Link und Link-Text. Speichern Sie Ihre Angaben.

 

Wenn Sie weitere Slider-Elemente hinzufügen wollen, klicken Sie einfach auf das Plus direkt unter dem Slider und wählen noch einmal das Element Kopf Slide aus. Alternativ können Sie auch über einen vorhanden Slider fahren und diese duplizieren, wie in der grünen Schaltfläche zu erkennen ist.

 

Der Story-Slider (Hochkant):

Frontend-Ansicht:

 

Der Slider im hochkantigen Format (“Story-Slider”, da er an die Storys der Social-Media-Kanäle erinnert) kann vielseitig eingesetzt werden. Auf der Startseite wird es beispielsweise zur Darstellung der Top-Themen verwendet oder zum anteasern von Unterseiten. Auch eine Mischung von Inhalten ist möglich (bspw. Beiträge und Seiten, die thematisch zueinander passen, da die Links händisch gepflegt werden müssen).

Die Kacheln setzen sich aus einem Bild , Titel und einem Button zusammen. Zudem gibt es ein optionales Datums-Feld, was bspw. zur Darstellung von Top-Themen genutzt werden kann.

 

Die Bilder für die hochkantigen Formate haben eine Größe von 380 x 541 px.

Backend:

Auch hier folgen Sie wieder dem Baukasten-System wie oben beschrieben – Sie setzen in in einen Inhaltsbereich ein neue Zeile ein (auch hier am besten nur eine Spalte, da der Slider Platz benötigt), klicken dann auf das Plus-Zeichen. Es öffnet sich die Auswahl der Inhaltselemente – dieses Mal wählen Sie das Element Slider Teaser Container aus.

Wieder haben Sie nachfolgende Ansicht – links erscheint das Zeichen für den eingesetzten Container:

Klicken Sie erneut auf das Plus-Zeichen und wählen Sie nun das Element Slider-Teaser aus.

Nun öffnet sich die Bearbeitungsmaske – füllen Sie hier alle Felder aus. Das Datums-Feld zwingt Sie nicht, hier ein Datum herein zu schreiben – Sie können es auch leer lassen oder für eine Zwischenüberschrift / Schlagwort verwenden.

 

 

Zweispaltige Elemente – Beispiel Bild und Text

 

Frontend

Mit der WP-Bakery können Sie bspw. auch zweispaltige Elemente kreieren – Sie können dabei frei entscheiden, ob das Bild links oder rechts angezeigt werden soll, ob Sie Texte einfügen möchten, zwei Bilder nebeneinander oder zwei Textblöcke nebeneinander. Auch hier greift wieder das Baukasten-Prinzip, aus dem Sie sich bedienen können. Gezeigt wird die Vorgehensweise am Beispiel eines zweispaltigen Bild-Text-Blocks. Auch den Button darunter können Sie als eigenständiges Element nutzen und einsetzen.

 

Backend:

Wie gewohnt fügen Sie im Inhaltsbereich eine neue Zeile hinzu.

Teilen über: