WebMasterService N3rds@Work

3. Upfront Editor Tour

Wikis > UpFront Wiki > 3. Upfront Editor Tour

Der Upfront-Editor ist das Kontrollfeld, mit dem Sie alle Teile Ihres Upfront-Themas optimieren, hinzufügen, entfernen und verbessern können.

upfront_editor_overview

3.1 Aktivieren des Upfront Editors

Link to chapter 1

Um den Upfront-Editor zu aktivieren, klicken Sie auf den Upfront-Link in Ihrer WordPress-Administrationsleiste. Dies ist die schwarze Leiste, die sich am oberen Rand Ihrer WP-Sites befindet.

upfront_powers_activate

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

upfront_load_screen

Wenn Sie den Editor zum ersten Mal für ein bestimmtes Starter-Thema aktivieren, werden Sie in einer Warnmeldung gefragt, ob Sie die enthaltenen Bilder des Starter-Themas importieren oder ignorieren möchten. Wenn Sie eigene Bilder hinzufügen, können Sie die Themenbilder ignorieren und nicht in Ihre Medienbibliothek importieren.

upfront_import_or_ignore_theme_images

3.2 Grundlegende Editor-Tools

Link to chapter 2

Mit den grundlegenden Editor-Tools können Sie den Upfront-Editor öffnen und schließen sowie auf andere Bereiche Ihrer Website zugreifen, einschließlich wp-admin und Ihren Profileditor.

upfront_editor_basic_tools

Durch Klicken auf das Upfront-Symbol / den Upfront-Text wird der Upfront-Editor beendet. Wenn Sie nicht gespeicherte Änderungen vorgenommen haben, wird in einem Warnungsfeld sichergestellt, dass Sie den Editor wirklich verlassen möchten, bevor Ihre Live-Site geladen wird.

Wenn Sie auf die Schaltfläche mit den Auslassungspunkten (…) klicken, werden Optionen angezeigt, mit denen Sie Ihren WP-Admin-Bereich besuchen, im Voraus schließen oder ein Support-Ticket öffnen können.

upfront_close_admin_support

Wenn Sie auf “Profil bearbeiten” klicken, wird der Upfront-Editor geschlossen und Sie gelangen zu Ihrem Profilbearbeitungsbildschirm in Ihrem WP-Admin-Bereich.

3.3 Medienverwaltung

Link to chapter 3

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 Ihrer Website erfolgen, und wir haben den Vorgang so einfach wie möglich gestaltet.

Sie können auf Ihre Medienbibliothek zugreifen, indem Sie im Upfront-Editor auf den Link „Medien“ klicken. Daraufhin wird die Medienbibliotheksschnittstelle angezeigt, die wie folgt aussieht:

upfront_media_library_manager

Hier können Sie neue Medien hochladen, Ihre vorhandene Bibliothek durchsuchen, Bilddetails bearbeiten und eine gefilterte Suche durchführen.

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

Suchen, Navigieren und die Schaltfläche OK finden Sie unter der Anzeige der Medienbibliothek.

3.4 Beiträge und Seiten verwalten

Link to chapter 4

Im Upfront-Editor können Sie vorhandene Posts oder Seiten auswählen sowie neue Posts oder Seiten hinzufügen.

upfront_post_page_management

Wie Sie im obigen Screenshot sehen können, gibt es einige Links, die Ihnen beim Verwalten Ihrer Posts und Seiten helfen. Die beiden großen Tasten sind ziemlich selbsterklärend. Wenn Sie auf eine der beiden Optionen klicken, 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 Modal mit Listen aller aktuellen Posts und Seiten auf Ihrer Site auf. Mit diesem Tool können Sie zu dem betreffenden Beitrag / der betreffenden Seite navigieren, um sie zu bearbeiten, oder Beiträge und Seiten löschen, die Sie nicht mehr benötigen oder möchten.

upfront_posts_pages_manager

3.5 Werkzeugkasten für Drag & Drop-Elemente

Link to chapter 5

Das Herz und die Seele eines Upfront-Themas sind die Elemente. Mit diesen Elementen können Sie Ihr Upfront-Design so anpassen, dass Sie genau das tun, was Sie benötigen. In einem späteren Kapitel werden wir uns ausführlicher mit der Verwendung und Bearbeitung von Elementen befassen. Dies soll Ihnen jedoch einen allgemeinen Überblick über die verfügbaren Optionen geben. Die meisten Elemente sind nach ihrer Funktion benannt. Nachfolgend finden Sie eine kurze Übersicht über die einzelnen Elemente.

elements_toolbox

Text-Element: Mit diesem Element können Sie überall auf Ihren Websiteseiten Textelemente erstellen.

Bild-Element: Mit diesem Element können Sie 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 Sie einen auffälligen, dynamischen Slider lieben, ist dies das Element, das Sie in Upfront erstellen müssen.

Karten-Element: Wie Sie wahrscheinlich erraten haben, 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ötigen Sie ein zusätzliches Menü, manchmal möchten Sie nur ein Menü. Wir haben Sie mit dem Kartenelement vertraut gemacht.

Widget-Element: Mit dem Widget-Element, einem unserer coolsten Elemente, können Sie ein Widget an einer beliebigen Stelle auf Ihrer Website platzieren. Überschriften? Sicher! Mittlerer Inhalt? Sicher!

YouTube-Element: Dies ist das Videoelement von Upfront, mit dem Sie Ihrer Website ganz einfach Videos hinzufügen können.

Like-Box-Element: Zeigen Sie die Fans Ihrer Facebook-Seite an und lassen Sie sich von neuen Benutzern ein Facebook-Like geben, ohne Ihre Seite zu verlassen.

Kontakt-Element: Erstellen Sie ein schnelles und einfaches Kontaktformular, das Sie überall ablegen können.

Code-Element: Das Code-Element dient zur Eingabe von Code, den Sie auf Ihrer Site ausführen möchten, 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 können Sie mehr Inhalt auf weniger Website-Grundstücken mit eindeutigem Inhalt auf jeder Registerkarte bereitstellen.

upfront_tabs_example

Akkordeon-Element: Ähnlich wie Tabs verbirgt und zeigt ein Akkordeon Inhalte mit Klicks, sodass Sie Ihren Lesern mehr Inhalt auf weniger Platz bieten können.

upfront_accordion

Schaltflächen-Element: Erstellen Sie mühelos fantastische Schaltflächen.

Anmelde-Element: Speichern Sie Ihren Benutzern eine Reise zu wp-login mit einem gut gestalteten Anmeldeelement.

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

3.6 Globale Design-Einstellungen

Link to chapter 6

Wir gehen im nächsten Kapitel detailliert auf die einzelnen globalen Designeinstellungen ein. Sie finden sie jedoch im Upfront-Editor-Bereich, indem Sie auf Designeinstellungen klicken.

upfront_theme_settings

Mit diesen Einstellungen können Sie auf globale Hintergründe, globale Regionen, globales CSS, globale Typografie und globale Farben zugreifen und diese bearbeiten. Diese Änderungen werden auf Ihre gesamte Website angewendet, nicht nur auf die Seite oder den Beitrag, die bzw. den Sie möglicherweise mit Upfront bearbeiten.

3.7 Aktivieren und Deaktivieren des Reaktionsmodus

Link to chapter 7

Der Upfront-Editor unterstützt die Erstellung ansprechender Designs, die auf jedem Gerät genau das anzeigen, was Sie möchten. Der Reaktionsmodus wird in späteren Kapiteln ausführlicher behandelt. Zunächst werden Sie mit den Einstellungen vertraut gemacht.

Der Reaktionsmodus wird mit der Schaltfläche am unteren Rand des Upfront-Editorfensters aktiviert.

upfront_activate_responsive_mode

Wenn diese Option aktiviert ist, können Sie im Reaktionsmodus oben im Designfenster zwischen der Mobil-, Tablet- und Standardansicht wechseln.

upfront_responsive_phone
upfront_responsive_tablet

3.8 Umschalten der Rasteransicht

Link to chapter 8

Die Rasteransicht von Upfront ist sehr praktisch, wenn Sie Elemente anordnen und die Ausrichtung überprüfen.

Aktivieren Sie das Raster, indem Sie auf die kleine Schaltfläche neben der Schaltfläche Reaktionsmodus klicken.

upfront_toggle_grid

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

upfront_issue_grid_on

3.9 Speichern und Beenden des Upfront Editor

Link to chapter 9

Das Speichern in Upfront besteht aus zwei Teilen.

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

Wir werden in späteren Kapiteln erläutern, wie Sie einzelne Teile speichern. In Upfront sollten Sie sicherstellen, dass Sie speichern, bevor Sie den Editor beenden. Verwenden Sie dabei Warnungen, wenn Sie versuchen, die nicht gespeicherte Arbeit zu beenden.

Klicken Sie unten im Upfront-Editor auf die große grüne Schaltfläche Speichern, um Ihr Projekt zu speichern.

upfront_save_all

Nachdem Ihr Projekt gespeichert wurde, können Sie den Upfront Editor sicher beenden. Sie können Upfront beenden, indem Sie entweder auf das Upfront-Symbol / -Logo oder auf die Schaltfläche mit den Auslassungspunkten (…) klicken. Wenn Sie Ihren Browser aktualisieren oder Browser-Navigationstools verwenden, werden Sie gefragt, ob Sie bleiben und speichern möchten, bevor Sie den Upfront-Editor schließen.

Wiki-Kategorie:

Durch die weitere Nutzung der Website stimmst Du der Verwendung von Cookies zu. Mehr Information

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um Dir das bestmögliche Surferlebnis zu bieten. Wenn Du diese Website weiterhin nutzt, ohne Deine Cookie-Einstellungen zu ändern, oder unten auf "Akzeptieren" klickst, stimmst Du dem zu.

Schließen