Upfront Review: Passen Sie alles über einen Front-End-Editor an

Veröffentlicht: 2015-04-16

Von seinen Entwicklern als „die Zukunft von WordPress“ bezeichnet, ist Upfront ein neues Website-Builder- und Content-Editor-Tool, das Anfang 2015 von WPMU DEV eingeführt wurde.

Upfront enthält eine Auswahl an Starter-Themes für Ihre WordPress-Website. Nachdem Sie eine Auswahl getroffen haben, können Sie damit beginnen, fast jedes Element Ihrer Website anzupassen , alles über eine visuelle Frontend-Oberfläche mit Drag-and-Drop-Funktion.

Upfront ersetzt auch die standardmäßigen Post- und Seiteneditor-Bildschirme von WordPress, um die Point-and-Click-Inline-Bearbeitung in WordPress zu ermöglichen. Egal, ob Sie die Starter-Themes komplett neu gestalten möchten, um Ihre eigene benutzerdefinierte Website zu erstellen, oder einfach nur das Hinzufügen neuer Inhalte zu WordPress intuitiver gestalten möchten, Upfront könnte das Tool sein, auf das Sie gewartet haben.

Um herauszufinden, ob dies das beste Builder-Tool für WordPress ist, lesen Sie weiter für unseren vollständigen Upfront-Test. Alternativ können Sie direkt zur Demo springen, um es selbst zu erleben.

Upfront Review: Was dieses Site Builder Tool kann

Upfront arbeitet an der Eltern-Kind-Thema-Beziehung. Das bedeutet, dass Upfront auf Ihrer WordPress-Website als zentrales übergeordnetes Thema installiert wird und Sie dann aus einem der untergeordneten Themen auswählen können, die dafür erstellt wurden.

Untergeordnete Themen im Voraus überprüfen

Diese untergeordneten Themen dienen dann als Grundlage Ihrer Website. Zum Zeitpunkt des Schreibens stehen nur drei untergeordnete Themen zur Auswahl : Fixer, Scribe und Spirit. In Zukunft werden jedoch weitere Designs hinzugefügt.

Upfront Review Spirit Starter Theme

Sie sehen alle gut aus und funktionieren genauso gut als eigenständiges Thema, ohne dass eine Anpassung erforderlich ist.

Frontend-Drag-and-Drop-Bearbeitung

Sobald Sie ein untergeordnetes oder Starter-Design ausgewählt haben, können Sie es anpassen.

Wie bereits erwähnt, erfolgt die gesamte Bearbeitungs- und Designarbeit über ein intuitives Frontend, einen visuellen Drag-and-Drop-Editor. Das bedeutet, was Sie sehen, ist wirklich das, was Sie bekommen. Es ist nicht erforderlich, den zugrunde liegenden Code selbst zu bearbeiten oder das Fenster zu wechseln, um eine Vorschau Ihrer Arbeit zu erhalten.

Schwebende Regionen, unbegrenzte Seitenelemente

Wenn es darum geht, Ihre benutzerdefinierten Seitenlayouts zu erstellen, verwendet Upfront Bereiche und Elemente. Die verfügbaren Elemente – zum Zeitpunkt des Schreibens 16 – können per Drag & Drop auf die Seiten Ihrer Website gezogen werden. Sie können Seitenelemente wie Bilder nicht nur per Drag-and-Drop verschieben, sondern auch Text in der Zeile bearbeiten .

Diese Inline-Bearbeitung erfolgt einfach durch Doppelklicken auf den Text und Beginnen mit der Eingabe. Sie erhalten auch Zugriff auf eine gute Reihe von Formatierungssteuerelementen, während Sie den Text über den Frontend-Editor hinzufügen und bearbeiten.

Textbearbeitung im Voraus überprüfen

Neben der Möglichkeit, Textbereiche und Bilder per Drag-and-Drop an ihren Platz zu ziehen und sie dann über die visuelle Benutzeroberfläche zu verschieben, stehen zahlreiche andere Seitenelemente zur Auswahl. Zum Zeitpunkt des Schreibens umfassen diese ziehbaren Seitenelemente : Schieberegler, Registerkarten, Akkordeons, Bildergalerien, Videos, Formulare, Schaltflächen und Karten. Sie können auch das Code-Element verwenden, um Ihrem Design benutzerdefinierten Code hinzuzufügen.

Ziehende Elemente im Voraus überprüfen

Darüber hinaus können alle Widgets, die auf Ihrer Website aktiv sind , ob von Drittanbieter-Plugins, WordPress-Kern oder benutzerdefinierten Optionen, in Ihre Seitendesigns eingefügt werden. Dies gibt Ihnen wirklich einen fast unbegrenzten Spielraum, was in Ihre Website-Layouts aufgenommen werden kann.

Vollständige regionale Anpassbarkeit

Jede der Regionen, aus denen Ihre Seite besteht, und die darin enthaltenen Elemente können weiter angepasst werden. Dazu gehört das Ändern der Größe; Position; Hintergrundtyp – einschließlich Video, Slider, Karte; und andere Darstellungseinstellungen, die sich auf den Typ des bearbeiteten Bereichs beziehen. Durch Klicken auf das Bearbeitungssymbol wird ein kontextsensitives Bedienfeld angezeigt, in dem Sie Ihre Änderungen vornehmen können.

Regionseinstellungen im Voraus überprüfen

Die Änderungen werden alle in Echtzeit übernommen . Dank des Live-Vorschaueffekts dieses Frontend-Editors müssen Sie Ihre Seite nicht aktualisieren.

Wenn Sie die Bereiche auf der Seite ziehen und verschieben, werden Sie feststellen, dass sie schweben und nicht an einem Raster fixiert sind. Dies bedeutet, dass Sie in der Lage sind, einige wirklich frei fließende Designs zu erstellen, anstatt durch willkürliche Grenzen eingeschränkt zu werden.

Upfront-Review-Grid-Layout

Für die Pixel-Pusher da draußen enthält Upfront jedoch ein optionales, praktisches visuelles Raster , mit dem Sie Ihre Seitenelemente präziser ausrichten können.

Benutzerdefinierte Front-End-Beitrags- und Seitenbearbeitung

Mit Upfront kann jeder Beitrag und jede Seite auf Ihrer Website sein eigenes benutzerdefiniertes Design und Layout haben . All dies kann über die visuelle, Frontend-, Drag-and-Drop-Oberfläche erstellt werden.

Indem Sie die Notwendigkeit beseitigen, Beiträge im Backend Ihrer Website zu erstellen und dann zwischen der Frontend-Vorschau und dem Kerneditor hin und her zu wechseln, um das Aussehen richtig zu machen, hat Upfront bereits einen wichtigen Bereich gelöst, der WordPress zurückhält . Dank der zusätzlichen Anpassungs- und Inhaltsoptionen, wie den Widgets und Elementen, wurde auch ein ganz anderer Bereich der Möglichkeiten eröffnet.

Während Sie die globalen Kopf- und Fußzeilenbereiche anpassen können, die auf der gesamten Website verwendet werden, können Sie diese Bereiche auch auf der Basis einzelner Posts und Seiten anpassen, um ein individuelleres Aussehen für eine einzelne Seite zu erzielen.

Zu den weiteren bemerkenswerten Funktionen von Upfront gehört ein voll responsives Layout für die wachsende Armee mobiler Benutzer, die über ihre Smartphones und Tablets auf Websites zugreifen. Wie Sie es vom WPMU DEV-Team erwarten würden, ist dieses Thema vollständig Multisite-fähig.

Benutzerdefinierte Beitragstypen werden ebenfalls unterstützt und können auf die gleiche Weise wie der normale Blog-Beitragstyp bearbeitet werden. Es gibt auch eine praktische, aber kurze Tour, die Ihnen den Einstieg erleichtert, wenn Sie die Customizer-Oberfläche zum ersten Mal starten.

Das Hauptmerkmal von Upfront ist, dass die gesamte Arbeit und Inhaltsbearbeitung über den Frontend-Editor erfolgt. Dies hoffen die Entwickler des Projekts, um es von der Konkurrenz abzuheben. Während einige andere WordPress-Seitenersteller einen Front-End-Editor zum Anpassen Ihrer Website anbieten, scheint Upfront der einzige zu sein, bei dem die gesamte Aktion über das Front-End, die visuelle Oberfläche, einschließlich der Erstellung von Blog-Post-Inhalten, stattfindet.

Upfront Review: die Benutzererfahrung

Nachdem Sie Upfront auf Ihre Website hochgeladen und eines der Starter-Child-Themes dafür ausgewählt haben, können Sie mit der Arbeit an Ihrer Website beginnen .

Upfront-Theme-Installation

Durch Klicken auf die Schaltfläche „Design mit Upfront anpassen“ in der Frontend-Ansicht Ihrer Website wird die Bearbeitungsoberfläche gestartet.

Upfront Review-Benutzeroberfläche

Die optionale Tour führt Sie durch die Hauptfunktionen des Plugins. Alternativ können Sie einfach direkt einsteigen und loslegen. Da die Starter-Themes mit allen Funktionen eines modernen WordPress-Themes ausgestattet sind, können Sie damit beginnen, die vorhandenen Elemente zu inspizieren und anzupassen.

Überprüfungselement im Voraus überprüfen

Das Austauschen der Bilder gegen Ihre eigenen ist so einfach wie das Klicken auf sie und das Ziehen und Ablegen des neuen Bildes in Ihre Medienbibliothek. Es steht Ihnen jedoch frei, so viele bereits vorhandene Inhalte zu löschen, wie Sie möchten . Auf diese Weise können Sie mit Upfront wirklich kreativ werden.

Upfront Review Swap-Bild

Wenn Sie die verfügbaren Elemente in Ihr Seitenlayout einfügen möchten, müssen Sie sie nur per Drag & Drop an eine beliebige Stelle auf der Seite ziehen. Einmal zur Seite hinzugefügt, kann jedes Element individuell angepasst werden. Beispielsweise kann das Posts-Element geändert werden, um einzelne Posts oder Listen von Posts in Ihrem Layout anzuzeigen.

Einstellungen der Beitragsliste im Voraus überprüfen

Dies eignet sich hervorragend zum Erstellen einer benutzerdefinierten Beitragsarchivseite oder zum Hervorheben Ihrer besten Beiträge auf der Startseite Ihrer Website. Die Einstellungen für das Beitragselement geben Ihnen viel Flexibilität, wie dieser Inhalt angezeigt wird. Dies umfasst nicht nur, welche Beiträge angezeigt werden sollen, sondern auch, welche Teile der Beiträge enthalten sein sollen. Dies umfasst: das Post-Datum, die Anzahl der Kommentare, das vorgestellte Bild und vieles mehr.

Upfront wird nicht nur zum Entwerfen und Anpassen der Startseite Ihres Einstiegsthemas verwendet, sondern auch zum Arbeiten an Beiträgen und Seiten . Das ist großartig, da es eine nahtlose und konsistente Oberfläche zum Entwerfen der Website und zum Erstellen von Inhalten schafft.

Um zur Beitrags- und Seitenansicht zu wechseln, klicken Sie einfach auf den Link Beiträge/Seite und wählen Sie dann aus, welchen vorhandenen Inhalt Sie bearbeiten möchten, oder erstellen Sie ein neues Element.

Vorabüberprüfung Wählen Sie einen Beitrag aus

Der gewählte Beitrag öffnet sich dann im Upfront-Editor . Auf diese Weise können Sie einfach Inhalte hinzufügen oder das Design überarbeiten. Das Ersetzen des klobigen WordPress-Nachbearbeitungssystems, bei dem Sie die Fenster wechseln müssen, um eine Vorschau Ihrer Arbeit anzuzeigen, liefert ein sofortiges Upgrade der Kernsoftware.

Upfront Review Post Editor Klein

Das meiste, was Sie über den standardmäßigen Post-Bearbeitungsbildschirm von WordPress tun können, wie das Hinzufügen eines vorgestellten Bildes, das Bearbeiten des Post-Titels und das Hinzufügen des Post-Inhalts, kann über die visuelle Oberfläche von Upfront erfolgen.

Upfront Review Post Editor

Wenn Sie Änderungen an der Typografie Ihrer Website vornehmen möchten, bietet Ihnen Upfront eine einfache Möglichkeit, dies zu tun. Über das Design-Einstellungsfeld können Sie ein Textelement auswählen, z. B. Überschrift 2, und dann die verwendete Schriftart bearbeiten. Dies wird dann global auf Ihrer gesamten Website angewendet.

Upfront Review Typografie

Sie können das Erscheinungsbild des Textes in einzelnen Elementen noch anpassen. Mithilfe der Designeinstellungen können Sie die Änderungen jedoch schnell auf Ihre gesamte Website anwenden . Das Gleiche gilt für die Farben der Website, obwohl die Benutzeroberfläche nicht klar macht, für welches Element Ihrer Website die jeweilige Farbeinstellung gilt.

Überprüfen Sie die Farbeinstellungen im Voraus

Um schnelle Änderungen am Aussehen und Inhalt der Starterthemen vorzunehmen, ist Upfront sehr einfach zu erlernen. Wenn es jedoch darum geht, weitreichendere Anpassungen vorzunehmen oder eigene Seitenlayouts von Grund auf neu zu erstellen, ist ein größerer Zeitaufwand erforderlich, um sich damit auseinanderzusetzen.

Das ist ziemlich vernünftig. Vor allem in Anbetracht des Umfangs und der Funktionalität dieses Tools. Wie bei anderen WordPress-Themes und Plugins dieser Art gilt: Je mehr Sie hineinstecken, desto mehr werden Sie auf lange Sicht herausholen.

Preisgestaltung

Upfront kann Ihnen gehören, indem Sie dem WPMU DEV Membership Club beitreten. Dadurch erhalten Sie Zugriff auf Upfront sowie über 350 Plugins und andere Themen. Die Mitgliedsgebühren beginnen beim Jahresplan bei 24,50 USD pro Monat und steigen bei der monatlichen Zahlungsoption auf 99 USD.

Nach der Anmeldung und solange Sie Mitglied sind, erhalten Sie Zugriff auf das 24/7-Support-Forum und die täglichen Live-Chat-Sitzungen. Die vollständigen Preisoptionen für Upfront finden Sie auf der WPMU DEV-Website.

Fazit

WPMU DEV war eine Weile ruhig, als es darum ging, neue WordPress-Themes zu veröffentlichen. Mit der Veröffentlichung von Upfront ist es leicht zu verstehen, warum. Mit über zwei Jahren Entwicklungszeit und „über einer Million ausgegebenen Dollars“ ist Upfront sicherlich ein wichtiges Projekt für das WPMU-DEV-Team und vielleicht auch für WordPress selbst.

In der Ankündigung von Upfront machen seine Entwickler einen interessanten Punkt über die Konkurrenz dieses Tools und von WordPress im Allgemeinen . Während Dienste wie Squarespace, Wix und Weebly derzeit weniger Entwicklungs- und maßgeschneiderte Anpassungs- und Erweiterungsmöglichkeiten bieten als WordPress, bieten sie eine benutzerfreundlichere Oberfläche zum Veröffentlichen von Inhalten und zum Gestalten Ihrer Website nach Ihren Wünschen.

Upfront zielt darauf ab, diese Art von Anpassungsschnittstelle zu WordPress zu bringen. Insgesamt macht es einen ziemlich guten Job. Wenn Sie WordPress benutzerfreundlicher machen möchten, entweder für sich selbst, Ihre Kunden oder diejenigen, denen Sie diese Software empfehlen, ist Upfront eine Option, die Ihnen zur Verfügung steht.

Wenn Sie sich für Upfront entscheiden, müssen Sie sich an eine Lösung eines Drittanbieters binden. und obwohl es schön wäre, wenn WordPress diese Art von Bearbeitungserfahrung bieten könnte – entweder als Teil des Kerns oder über ein „offizielles“ Add-On, gibt es vorerst Upfront.

Während Programmierer und Entwickler, die in der Lage sind, ihre eigenen Themen zu entwerfen oder Standardprodukte anzupassen, Upfront kaum benötigen, sollten alle anderen, die schon immer ihre eigenen benutzerdefinierten Seitenlayouts und Designs erstellen wollten, unbedingt die Online-Demo von Upfront ausprobieren für eine Probefahrt.

Es ist noch früh für Upfront , aber sie haben einen guten Start hingelegt. Da immer mehr Starterthemen online gehen und zusätzliche Elemente eingeführt werden, sollte dieser benutzerfreundliche Editor wirklich zur Geltung kommen.

Erfahren Sie mehr über Upfront oder testen Sie jetzt die Demo

Haftungsausschluss: Ich schreibe Beiträge für den WPMU DEV-Blog – die Macher von Upfront – auf freiberuflicher Basis; Die Meinungen in diesem Artikel sind jedoch alle meine eigenen und werden von dieser Beziehung überhaupt nicht beeinflusst.