Der Upfront-Editor ist das Kontrollfeld, mit dem Du alle Teile Deines UpFront-Themes optimieren, hinzufügen, entfernen und verbessern kannst.

3.1 Aktivieren des UpFront Editors

Um den UpFront-Editor zu aktivieren, klicke auf den UpFront-Link in Deiner WordPress-Administrationsleiste. Dies ist die schwarze Leiste, die sich am oberen Rand Deiner WP-Seite befindet.

Nach der Aktivierung wird der UpFront-Ladebildschirm angezeigt, während der Editor geladen wird. Wenn Du den Editor zum ersten Mal ausführst, kann es einige Zeit dauern, bis Du zur Bearbeitung bereit bist. Diese Ladezeit wird beim nächsten Laden des UpFront-Editors kürzer.

Wenn Du den Editor zum ersten Mal für ein bestimmtes Starter-Theme aktivierst, wirst Du in einer Warnmeldung gefragt, ob Du die enthaltenen Bilder des Starter-Themes importieren oder ignorieren möchtest. Wenn Du eigene Bilder hinzufügst, kannts Du die Themenbilder ignorieren und nicht in Deine Medienbibliothek importieren.

3.2 Grundlegende Editor-Tools

Mit den grundlegenden Editor-Tools kannst Du den UpFront-Editor öffnen und schließen sowie auf andere Bereiche Deiner Webseite zugreifen, einschließlich WP-Admin und Deinen Profileditor.

Durch Klicken auf das UpFront-Symbol / den UpFront-Text wird der UpFront-Editor beendet. Wenn Du nicht gespeicherte Änderungen vorgenommen hast, wird in einem Warnungsfeld sichergestellt, dass Du den Editor wirklich verlassen möchtest, bevor Deine Live-Seite geladen wird.

Wenn Du auf die Schaltfläche mit den Auslassungspunkten (…) klickst, werden Optionen angezeigt, mit denen Du Deinen WP-Admin-Bereich besuchen, den Editor schließen oder ein Support-Ticket öffnen kannst.

Wenn Du auf “Profil bearbeiten” klickst, wird der UpFront-Editor geschlossen und Du gelangst zu Deinem Profilbearbeitungsbildschirm in Deinem WP-Admin-Bereich.

3.3 Medienverwaltung

Das Verwalten von Medien in UpFront ist noch einfacher als das Verwalten mit der Standard-WP-Medienbibliothek. Erstens kann die Medienverwaltung problemlos über das Front-End Deiner Webseite erfolgen, und wir haben den Vorgang so einfach wie möglich gestaltet.

Du kannst auf Deine Medienbibliothek zugreifen, indem Du im UpFront-Editor auf den Link „Medien“ klickst. Daraufhin wird die Medienbibliotheksschnittstelle angezeigt, die wie folgt aussieht:

Hier kannst Du neue Medien hochladen, Deine vorhandene Bibliothek durchsuchen, Bilddetails bearbeiten und eine gefilterte Suche durchführen.

Klicke zum Hochladen neuer Medienelemente auf den Link „Medien hochladen“ in der oberen rechten Ecke des Medienbibliotheks-Popups.

Suchen, Navigieren und die Schaltfläche OK findest Du unter der Anzeige der Medienbibliothek.

3.4 Beiträge und Seiten verwalten

Im UpFront-Editor kannst Du vorhandene Beiträge oder Seiten auswählen sowie neue Beiträge oder Seiten hinzufügen.

Wie Du im obigen Screenshot sehen kannst, gibt es einige Links, die Dir beim Verwalten Deiner Beiträge und Seiten helfen. Die beiden großen Tasten sind ziemlich selbsterklärend. Wenn Du auf eine der beiden Optionen klickst, wird eine neue UpFront-Seite oder ein neuer Beitrag im Arbeitsbereich des UpFront-Editors angezeigt.

Die andere Option unter diesen beiden Schaltflächen ruft ein Modul mit Listen aller aktuellen Beiträge und Seiten auf Deiner Webseite auf. Mit diesem Tool kannst Du zu dem betreffenden Beitrag/der betreffenden Seite navigieren, um sie zu bearbeiten, oder Beiträge und Seiten löschen, die Du nicht mehr benötigst oder möchtest.

3.5 Werkzeugkasten für Drag & Drop-Elemente

Das Herz und die Seele eines UpFront-Themes sind die Elemente. Mit diesen Elementen kannst Du Dein UpFront-Design so anpassen, dass es genau das tun, was Du benötigst. In einem späteren Kapitel werden wir uns ausführlicher mit der Verwendung und Bearbeitung von Elementen befassen. Dies soll Dir jedoch einen allgemeinen Überblick über die verfügbaren Optionen geben. Die meisten Elemente sind nach ihrer Funktion benannt. Nachfolgend findest Du eine kurze Übersicht über die einzelnen Elemente.

Text-Element: Mit diesem Element kannst Du überall auf Deinen Webseitenseiten Textelemente erstellen.

Bild-Element: Mit diesem Element kannst Du ein einzelnes Bild hinzufügen und anpassen.

Galerie-Element: Wie der Name schon sagt, dient dieses Element zum Erstellen von Galerien mit mehreren Bildern.

Slider-Element: Wenn Du einen auffälligen, dynamischen Slider liebst, ist dies das Element, das Du in UpFront erstellen musst.

Karten-Element: Wie Du wahrscheinlich erraten hast, handelt es sich um ein Kartenelement. Es ist jedoch nicht irgendein Kartenelement, da unser Element die Erstellung von wunderschönen benutzerdefinierten Kartenstilen unterstützt.

Menü-Element: Manchmal benötigst Du ein zusätzliches Menü, manchmal möchtest Du nur ein Menü. Erstelle mit diesem Modul beliebig viele individuelle Menüs.

Widget-Element: Mit dem Widget-Element, einem unserer coolsten Elemente, kannst Du ein Widget an einer beliebigen Stelle auf Deiner Webseite platzieren. Überschriften? Sicher! Mittlerer Inhalt? Sicher!

YouTube-Element: Dies ist das Videoelement von UpFront, mit dem Du Deiner Website ganz einfach Videos hinzufügen kannst.

Like-Box-Element: Zeige Fans Deiner Facebook-Seite an und lasse Dir von neuen Benutzern ein Facebook-Like geben, ohne Deine Seite zu verlassen.

Kontakt-Element: Erstelle ein schnelles und einfaches Kontaktformular, das Du überall ablegen kannst.

Code-Element: Das Code-Element dient zur Eingabe von Code, den Du auf Deiner Webseite ausführen möchtest, und nicht zur Anzeige von Code-Snippets. Dieses Element ist praktisch für Skripte sowie zum Einbetten von Videos und Inhalten aus Nicht-YouTube-Quellen.

Registerkarten-Element: Mit dem Registerkartenelement kannst Du mehr Inhalt auf weniger Webseiten-Platz mit eindeutigem Inhalt auf jeder Registerkarte bereitstellen.

Akkordeon-Element: Ähnlich wie Tabs verbirgt und zeigt ein Akkordeon Inhalte mit Klicks, sodass Du Deinen Lesern mehr Inhalt auf weniger Platz bieten kannst.

Schaltflächen-Element: Erstelle mühelos fantastische Schaltflächen.

Anmelde-Element: Ein gut gestaltetes Anmeldeelement.

Beitrags-Element: Dieses Element dient zum Anzeigen von Beitrags-Listen, z. B. kürzlich veröffentlichte Beiträge, empfohlene Posts, Favoriten-Posts usw.

3.6 Globale Design-Einstellungen

Wir gehen im nächsten Kapitel detailliert auf die einzelnen globalen Designeinstellungen ein. Du findest diese im UpFront-Editor-Bereich, indem Du auf Designeinstellungen klickst.

Mit diesen Einstellungen kannst Du auf globale Hintergründe, globale Regionen, globales CSS, globale Typografie und globale Farben zugreifen und diese bearbeiten. Diese Änderungen werden auf Deine gesamte Webseite angewendet, nicht nur auf die Seite oder den Beitrag, die bzw. den Du möglicherweise mit UpFront bearbeitest.

3.7 Aktivieren und Deaktivieren des Responsive-Modus

Der UpFront-Editor unterstützt die Erstellung ansprechender Designs, die auf jedem Gerät genau das anzeigen, was Du möchtest. Der Responsive-Modus wird in späteren Kapiteln ausführlicher behandelt. Zunächst wirst Du mit den Einstellungen vertraut gemacht.

Der Responsive-Modus wird mit der Schaltfläche am unteren Rand des UpFront-Editorfensters aktiviert.

Wenn diese Option aktiviert ist, kannst Du im Responsive-Modus oben im Designfenster zwischen der Mobil-, Tablet- und Standardansicht wechseln.

3.8 Umschalten der Rasteransicht

Die Rasteransicht von UpFront ist sehr praktisch, wenn Du Elemente anordnen und die Ausrichtung überprüfst.

Aktiviere das Raster, indem Du auf die kleine Schaltfläche neben der Schaltfläche Reaktionsmodus klickst.

So sieht Dein Designbereich aus, wenn das Raster aktiviert ist.

3.9 Speichern und Beenden des Upfront Editor

Das Speichern in UpFront besteht aus zwei Teilen.

1. Speichern des Elements/der Region/des Layouts, an dem Du arbeitest, und
2. das gesamte Projekt speichern.

Wir werden in späteren Kapiteln erläutern, wie Du einzelne Teile speicherst. In UpFront solltest Du sicherstellen, dass Du speicherst, bevor Du den Editor beendest. Achte auf Warnungen, wenn Du versuchst, die nicht gespeicherte Arbeit zu beenden.

Klicke unten im UpFront-Editor auf die große grüne Schaltfläche Speichern, um Dein Projekt zu speichern.

Nachdem Dein Projekt gespeichert wurde, kannst Du den UpFront Editor sicher beenden. Du kannst UpFront beenden, indem Du entweder auf das UpFront-Symbol / -Logo oder auf die Schaltfläche mit den Auslassungspunkten (…) klickst. Wenn Du Deinen Browser aktualisierst oder Browser-Navigationstools verwendest, wirst Du gefragt, ob Du bleiben und speichern möchtest, bevor Du den UpFront-Editor schließt.