Menü

WP Bakery Editor

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, soll die WP Bakery genutzt werden, muss diese zuerst ausgewählt werden.

Wenn der bisherige 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. 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 zunächst eine leere Ansicht des Inhaltsbereich – klicken Sie erneut 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

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.

  • Titel Slider 1

    kurzer Infotext
  • Titel Slider 2

    kurzer Infotext

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.

Die fertige Backend-Ansicht baut sich Modular auf. Habe ich beispielsweise zwei Kopf-Slider Elemente angelegt, dann werden diese im Backend untereinander angezeigt. So sieht man übersichtlich, wie viele und welche Elemente vorhanden sind inkl. Titel, hinterlegtem Infotext und Button-Text. Analog verhält sich die Ansicht beim Hochkant- bzw. Story-Teaser.

Klicken Sie erneut auf das +Zeichen und wählen Sie aus dem Baukasten zunächst den Kopf-Slide-Container (hinterlegt mit einem blauen Icon)

2. Sie landen wieder im Editor, klicken Sie dann innerhalb des Kopf-Slide-Containers wieder auf + und wählen Sie aus dem Baukasten das Element Kopf-Slide. Es öffnet sich automatisch eine Bearbeitungsmaske

3. Füllen Sie die Felder aus und gestalten so Ihren Kopf-Slider (Titel, Bild, Kurztext, Button-Text und Link)

4. Wenn Sie mehrere Slider-Elemente anlegen möchten, fahren Sie mit der Maus über einen fertigen Slider, bis Sie die grüne Schaltfläche sehen. Duplizieren Sie dann das Element, sodass Sie nicht wieder den kompletten Weg über den Baukasten gehen müssen. Nachdem Sie das Element dupliziert haben, können Sie Bild, Text, Titel etc. ganz einfach austauschen.

Der Story-Slider (Hochkant)

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.

Die Pflege von Hochkant-Teaser erfolgt analog zur Pflege von Kopf-Slidern. Lediglich folgende Unterschiede sind zu beachten:

  1. Statt Kopf Slide Container wählen Sie bitte Slider Teaser Container aus
  2. Statt Kopf Slide wählen Sie bitte Slider Teaser aus

Bei den Hochkant-Teasern wird das Modul ab 4 Elementen automatisch zu einem Slider. Bis drei Elemente ist es ein statisches Element.

Die fertige Backend-Ansicht Slider-Teaser.

Für den hochformatigen Slider bitte Slider Teaser Container und Slider Teaser Element aus dem Werkzeugkasten auswählen.

Das Akkordion

Das Akkordion gibt es in verschiedenen Farben. Diese kann frei gewählt werden. Zudem kann hinterlegt werden, ob alle Akkordions geschlossen sein oder ob ein Abschnitt geöffnet dargestellt werden soll.

Innerhalb der Abschnitte können wiederum flexibel Inhalte platziert werden – Text, Bilder, Buttons – auch eine mehrspaltige Darstellung ist möglich.

Beispiel 1 – Akkordion grau, alle Abschnitte geschlossen.

Beispiel 2 – Akkordion gelb, erster Abschnitt geöffnet, Pfeil-Icon ausgewählt.

Backend-Ansicht: Pflege des Akkordions

Zur Verwendung des Akkordions wird im Baukasten das entsprechende Element ausgewählt. Sobald es ausgewählt wird, erscheint das Element im Standard mit drei Titel-Bereichen. Es können über +Add Section weitere Abschnitte ergänzt werden. Werden weniger Abschnitte benötigt, so muss auf das x in der orangenen Schaltfläche geklickt werden.

Die blaue Schaltfläche bezieht sich auf die allgemeinen Akkordion Einstellungen, mit der orangene Schaltfläche bearbeitet man die einzelnen Abschnitte.

Mit Klick in die blaue Schaltfläche werden die allgemeinen Akkordion-Einstellungen bearbeitet. Felder, die in dieser Aufzählung nicht erläutert werden, brauchen in der Anwendung nicht weiter beachtet zu werden.

 

  • Stil: Hier können Sie ein wenig mit der Optik des Akkordions spielen. Zur Auswahl stehen Classic, Modern, Flat und Outline. Die Farbverläufe oder die Farbintensität der Abschnitte lassen sich damit ein wenig verändern.
  • Shape: Meint die Form der einzelnen Abschnittstitel. Hier können Sie zwischen rund und eher eckig wählen.
  • Farbe: Eine breite Farbpalette für die Hintergrundfarbe der einzelnen Abschnitte steht zur Verfügung. Um bei den Netzwerk-Farben zu bleiben, wählen Sie bitte zwischen Weiß, Grau und Orange – hier wurden die Farbcodes entsprechend hinterlegt.
  • Do not fill content area? Wenn Sie hier das Häkchen setzen, wird der aufgeklappte Akkordion-Bereich, in dem der Inhalt zu den einzelnen Titeln steht, nicht ausgefüllt. Im Standard ist die Fläche leicht gräulich hinterlegt.
  • Allow collapse all? Wenn dieses Häkchen gesetzt ist, dann ist die “Auf- und Zuklapp-Mechanik” der einzelnen Abschnitte dynamischer. Mit Klick auf einen Abschnitt kann man diesen Auf- und Zuklappen. Ist das Häkchen nicht gesetzt, dann schließt sich ein Abschnitt bspw. erst dann, wenn man den Abschnitt darüber oder darunter anklickt. Ist ein Abschnitt mit Klick aufgeklappt, dann schließt er sich nicht, wenn man erneut auf diesen klickt. Dies wird erst mit Setzen des Häkchens möglich.
  • Icon: Sie können entscheiden, ob die Titel-Boxen bspw. einen Pfeil oder ein Plus & Minus-Zeichen vor den Titel haben sollen.
  • Akkordion Bereich: Mit diesem Feld steuern Sie, ob alle Abschnitte geschlossen sein sollen oder ob ein Abschnitt geöffnet sein soll. Wenn Sie möchten, dass alle Abschnitte beim Laden der Seite geschlossen sind, tragen Sie in dieses Feld eine Zahl ein, die größer ist als die vorhandene Anzahl Abschnitte. Soll bspw. der erste oder dritte Abschnitt geöffnet sein und der Rest geschlossen, dann tragen Sie eine 1 oder eine 3 ein (die Zahlen variieren natürlich in Abhängigkeit der vorhandenen Abschnitte – haben Sie fünf Abschnitte und der letzte soll geöffnet sein, dann wird eine 5 eingetragen). Sie haben also die Optionen zwischen alle geschlossen oder ein Abschnitt geöffnet. Es ist nicht möglich, bspw. zwei Abschnitte zu öffnen.

Mit Klick auf den Stift in der orangene Schaltfläche kann der Titel des Abschnittes angepasst werden. In den Grundeinstellungen für den Abschnitt ist nichts weiter zu beachten.

Innerhalb der einzelnen Abschnitte können dann über das +Zeichen wie gewohnt Zeilen (auch mehrspaltig) und Inhalte hinzugefügt werden. Innerhalb eines Akkordions können grs. alle Elemente dargestellt werden, die die WP-Bakery hergibt – es sind aber nicht alle Elemente dafür geeignet. Vollflächige Elemente, wie Kopf-Slider, Teaser-Slider etc. haben zu wenig Platz, um anständig dargestellt werden zu können.

Geeignet hingegen sind das Text- und Einzel-Bild-Element, aber auch ein einzelner Button (Element TN-Button).

Der TN Button ist ein freies Element, welches an jeder Stelle eingesetzt werden kann. Button Text, Link, Farbe und Ausrichtung können frei bestimmt werden.

Mehrspaltige Elemente

Mit der WP Bakery lassen sich Inhalte auch in mehreren Spalten darstellen. Wird das Zeilenelement ausgewählt, kann die Anzahl der Spalten jedes Mal frei gewählt werden. Im Standard ist das Element einspaltig eingestellt.

Wenn eine neue Zeile hinzugefügt wird, klicken Sie links auf das Raster-Icon. Die verfügbaren Zeilen- und Spaltenverhältnisse werden angezeigt. Wählen Sie hier das gewünschte Raster aus. In der Backend-Ansicht werden Ihnen dann die einzelen Spalten zur Bearbeitung auch im richtigen Größenverhältnis angezeigt, sodass Sie die passenden Inhalte einfügen können. Jede Spalte kann dann individuell mit Inhalt befüllt werden. Auch hier ist darauf zu achten, dass man passende Inhaltselemente auswählt, die ausreichend Platz innerhalb der Spalten haben.

Beispiel für einen zweispaltigen Aufbau:

Spalte 1 – Text

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Spalte 2 – Bild

Natürlich kann frei entschieden werden, ob man ein Bild links oder rechts platziert, ob es zwei Textblöcke sein sollen oder zwei Bilder nebeneinander. Unter den Elementen in einer Spalte können weitere Elemente platziert werden.

Beispiel für einen dreispaltigen Aufbau:

Spalte 1

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Spalte 2

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Spalte 3

Ich bin ein Textblock. Klicken Sie auf den Bearbeiten Button um diesen Text zu ändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Das “Post-Grid” Element

Mit diesem Element lassen sich kategoriegesteuert Beiträge auf einer Inhaltsseite ausspielen. Der Redakteur wählt in diesem Element die gewünschte Kategorie aus und legt fest, wie viele Beiträge maximal angezeigt werden sollen. Es empfiehlt sich, 3, 6 oder 9 Beiträge zuzulassen, da das Element auf ein 3-Raster ausgelegt ist. Beispielsweise kann man so auf der Inhaltsseite “Marketing” auch Beiträge ausspielen, die die Kategorie “Marketing” hinterlegt haben. Sollen immer nur 3 Beiträge gezeigt werden, rutscht der aktuellste Beitrag immer nach.

Das Element sollte in einer vollflächigen Zeile eingesetzt werden.

Aus den verfügbaren Elementen wählen Sie Post Grid aus.

Unter den allgemeinen Einstellungen müssen Sie folgende Einträge vornehmen (nicht erwähnte Felder können ignoriert werden)

  • Data Source: Wählen Sie hier Post aus, um die Darstellung auf Beiträge zu beschränken
  • Narrow Data Source: Hier können Sie die gewünschte Kategorie eingeben, nach der die Darstellung gefiltert werden soll. Wichtig ist, dass die Kategorie bereits vorhanden ist, damit Sie sie auswählen können. Wenn Sie die ersten Buchstaben in die Zeile eingeben, werden Kategorien vorgeschlagen. Sie können auch mehrere Kategorien eingeben, sodass in der Liste Beiträge aus verschiedenen Listen dargestellt werden.
  • Total Items: Hier legen Sie fest, wie viele Beiträge maximal angezeigt werden sollen.
  • Grid Elements per row:Empfohlen ist die Eingabe 3, 6, 9 oder 12. In einer Reihe werden wie auf der Startseite maximal drei Beiträge nebeneinander dargestellt. Um in diesem Muster zu bleiben, sollten Sie die entsprechenden Zahlen eingeben. Die Liste der Beiträge aktualisiert sich automatisch, wenn neue Beiträge nachrücken.
  • Gap: Bitte wählen Sie hier immer 35px aus

Unter Data Settings können Sie die Sortierung der Beiträge festlegen. Im Standard ist immer nach Datum und Absteigend ausgewählt.

Ganz wichtig: Wählen Sie unter Item Design unbedingt die Einstellung TN Post Grid aus. Damit wird sichergestellt, dass die Optik an die Beitragskacheln der Startseite angepasst wird. Hinter dieser Einstellung liegen Styling-Einstellungen, die programmiert wurden.

Sonstige Elemente

Einige Elemente der WP-Bakery dienen der Layout-Gestaltung einer Seite. Diese werden kurz genannt bzw. gezeigt:

  • Leerer Bereich: Mit diesem Element können Sie die Abstände zwischen Elementen auf einer Seite etwas vergrößern. Gerade, wenn viel Text auf einer Seite ist, bieten sich Abstandhalter zur Auflockerung an
  • Trennlinie: Auch hierbei handelt es sich um ein optisches Element. Eine dünne Trennlinie wird erstellt und bietet sich ebenfalls an, um eine optische Trennung zwischen Abschnitten

Element Nachrichtenbox

Ich bin eine Nachrichtenbox. Klicken Sie den Bearbeiten Button um diesen Text zu ändern

Die Nachrichtenbox kann in verschiedenen Farben und Formen eingesetzt werden. Auch die Icons lassen sich individuell einstellen.

So wird es nicht gemacht!

TN Icons

Das Element TN-Icon bietet die “Netzwerk-Spinne” in fünf Versionen als Schmuckelement an. Die Ausrichtung des Elements ist immer zentriert und kann z.B. über eine Überschrift gesetzt werden oder ebenfalls als Trenner-Element fungieren.

Teilen über: