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 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.
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 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 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 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 orange, erster Abschnitt geöffnet, Pfeil-Icon ausgewählt.
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.
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.
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.
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.
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.
Eröffnung Tourist Information Neue Altstadt Frankfurt am Main
Neuer Leitfaden „Tourismus der Zukunft gestalten – Praxisleitfaden Nachhaltigkeit im Deutschlandtourismus“ mit Empfehlungen und Umsetzungshilfen für Tourismusdestinationen.
Die neue Unterseite im Tourismusnetzwerk Hessen bietet einen kompakten Überblick darüber, wo die Daten aus dem Tourismus-Hub Hessen überall ausgespielt 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)
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.
Einige Elemente der WP-Bakery dienen der Layout-Gestaltung einer Seite. Diese werden kurz genannt bzw. gezeigt:
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.
