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.

Weitere Einstellungen für Seiten

Hinweis: Das CC Child Pages PlugIn kann nur mit dem Standard-Editor verwendet werden. Wird die WP Bakery genutzt, steht das PlugIn nicht zu Verfügung.

Mit dem CC Child Pages PlugIn können Teaser-Boxen auf Inhaltsseiten erstellt werden. Die Teaser-Boxen generieren sich automatisch aus den Unterseiten der Seite, auf der das PlugIn eingefügt wird. Die Boxen bestehen aus einem Bild, Titel, kurzem Anleser und Button. Die Anordnung kann zwei – oder dreispaltig sein.

Einige Voraussetzungen müssen erfüllt sein, damit das PlugIn im vollen Umfang genutzt werden kann:

  1. Die darzustellende Unterseite muss veröffentlicht sein (darf nicht als Entwurf im Seitenbaum gespeichert sein)
  2. Die darzustellende Unterseite braucht ein Beitragsbild (dieses wird in der Box angezeigt)
  3. Der Kurztext in der Box generiert sich entweder aus dem Inhaltsbereich der darzustellende Seite oder wird durch eine Zusammenfassung im Feld “Textauszug” überschrieben. Durch die Variante Textauszug können Sie steuern, was in der Box stehen soll – eine kurze, knappe Inhaltsangabe beispielsweise. Sie finden das Feld ganz am Ende innerhalb der Seitenbearbeitung. Bleibt das Feld leer, wird für den Kurztext in der Box auf den Seiteninhalt zurückgegriffen.

Anwendung des PlugIns

Die Funktion finden Sie bei den Formatierungsmöglichkeiten – dargestellt als kleines Buch-Icon. Klicken Sie darauf, um die benötigten Felder auszufüllen.

Columns: Legen Sie fest, wie viele Spalten Sie darstellen möchten – wählen Sie 2 oder 3

Read More Text: Das ist der Button Text, der auf den Boxen zu lesen ist. Hier können Sie schreiben, was Sie mögen – z.B. “Mehr”

Excerpt Length: Damit legen Sie fest, wie viele Worte maximal vom Kurztext in der Box dargestellt werden sollen. Bleibt das Feld leer, werden die Boxen unterschiedlich hoch. 15 ist ein Richtwert.

Thumbnail Size: Schreiben Sie hier immer thumbnail rein. Wenn dieses Feld leer bleibt, dann werden keine Bilder dargestellt (auch, wenn ein Beitragsbild auf der Seite hinterlegt wurde). Der Wert muss ausgefüllt sein, um ein Bild generieren zu können.

Die weiteren Felder können leer bleiben bzw. sind voreingestellt.

Klicken Sie auf ok – das Ergebnis ist dann folgender Shortcode

Sie können direkt in den Shortcode schreiben, wenn Sie bspw. den Buttontext noch einmal ändern möchten oder die Anzahl der Spalten anpassen wollen.

Bitte beachten Sie: Wenn Sie erneut auf das Buch-Icon klicken, erstellen Sie einen neuen Shortcode und bearbeiten dann nicht den bereits hinterlegten Code auf der Seite. Wenn Sie mehrere Änderungen vornehmen möchten, können Sie den Shortcode auch einfach löschen und einen neuen generieren.

Hinweis: Hierbei handelt es sich um eine Admin-Funktion! Wurden neue Seiten im Seitenbaum angelegt und veröffentlicht, muss diese Seite im Anschluss daran händisch der Navigation hinzugefügt werden, damit sie im Burger-Menü erscheint.Klicken Sie dazu links in der Funktionsleiste auf Design -> Menüs.Zwei Menüs stehen oben zur Auswahl – einmal das Hauptmenü und das Fuß-Menü. Wählen Sie aus, welches Menü Sie bearbeiten möchten und klicken Sie dann noch einmal auf Auswählen.

Nehmen wir an, der Menüpunkt “Handbuch” soll nun dem Hauptmenü hinzugefügt werden. Links haben Sie unterschiedliche Reiter, über die Sie Seiten auswählen können. Empfohlen wird auf den Reiter Suchen zu klicken und dann per Schlagwortsuche die gewünschte Seite hinzuzufügen.

Rechts wird das gesamte Menü von oben nach unten angezeigt. Per Drag&Drop können Sie die Position der einzelnen Seiten und deren Ebene bestimmen. Hier wird also nicht automatisch die Hierarchie aus dem Seitenbaum übernommen, diese muss noch einmal von Ihnen festgelegt werden. Es ist dennoch wichtig, dass die Seiten auch in der Baumstruktur Ihren richtigen Platz haben, da sich dadurch die Breadcrumb / Klickpfad generiert.

“Packen” Sie dazu also einen Eintrag, der sich bereits rechts als Baustein befindet und ziehen Sie diesen an die gewünschte Stelle. Die eingerückten Felder zeigen die Hierarchie an: 1. Ebene = Tourismusstrategie RLP 2025 – 2. Ebene = Laufende Umsetzung Tourismusstrategie Rheinland-Pfalz 2025

Sie geben also in der Suche “Handbuch” ein und diese Seite erscheint nun in der darunter stehenden Liste. Wählen Sie die Seite aus, indem Sie die Checkbox anklicken und klicken Sie dann auf  Zum Menü hinzufügen. Die Seite wird als Baustein nun ganz ans Ende auf die erste Ebene gesetzt – die Position können Sie aber wie beschrieben selbst verändern. Klicken Sie anschließend auf Menü speichern und der Navigationspunkt erscheint nun auch im Frontend.

Wichtig: Die Seite muss veröffentlicht sein und darf nicht auf Entwurf stehen, da sie sonst dem Menü nicht hinzugefügt werden kann!

Wenn Sie eine Seite aus dem Menü entfernen wollen, klicken Sie im Baustein auf den nach unten zeigenden Pfeil neben Seite. Dann öffnet sich ein weiteres, kleines Menü und Sie können hier dann einfach auf Entfernen klicken. Die Seite ist dann nicht gelöscht und nach wie vor veröffentlicht, sie wird dann lediglich nicht mehr im Menü angezeigt. Vergessen Sie auch hier nicht auf Menü speichern zu klicken, damit die Änderung sichtbar wird.

Teilen über: