Es ist 10 Monate her, seitdem wir Page Builder Sandwich für die Öffentlichkeit freigegeben haben. Wir haben jetzt rund 6.000 aktive Installationen, und das ist ein beachtlicher Erfolg für uns. Wir haben dadurch auch eine Menge Feedback erhalten, sowohl gutes als auch schlechtes. Der Konsens ist jedoch, dass die Leute es schätzen, wie einfach es im Vergleich zu den anderen Page Buildern da draußen ist, Layouts zu erstellen und ihre Inhalte zu gestalten.

Ein großer Teil des Feedbacks, das wir erhielten, waren Funktionsanfragen, und wir haben in den letzten Monaten viele dieser Funktionen hinzugefügt. Doch während wir das taten, begannen wir im Zuge dessen auch langsam, die Benutzeroberfläche zu verändern. Und infolgedessen veränderten wir auch das Nutzererlebnis … zum Schlechteren. Es war schließlich an dem Punkt angelangt, an dem wir die Benutzeroberfläche überdenken mussten, da sie einfach nicht mehr reibungslos funktionierte und die verschiedenen Funktionen auch nicht mehr zusammenpassten.

Die veraltete Benutzeroberfläche

In den vorherigen Versionen von PBS wollten wir, dass alles in Form von Schaltflächen vorliegt. Warum? Weil Schaltflächen einfach zu bedienen sind. Man klickt einfach … darauf. In den älteren Versionen des Inspectors (die Seitenleiste auf dem Bild oben) erhöhte das Klicken auf eine Schaltfläche einen Wert, und Shift+Klick auf eine Schaltfläche verringerte ihn. Das klingt einfach genug. Doch mit dem Hinzufügen von Karussells, Tabs, Karten und weiteren neuen Elementen und Funktionen wurden all diese Schaltflächen zu einem Wirrwarr aus verschiedenen Icons mit unterschiedlichen Designs und sahen langsam eher wie Hieroglyphen als wie eine coole Oberfläche aus. Für erfahrene Nutzer war dies kein Problem, aber es wirkt ziemlich einschüchternd, wenn man neu bei PBS ist.

Als Nächstes tauchten einige Probleme beim Inspector auf. Die ursprüngliche Idee war es, alles einfach und innerhalb des Inspectors verfügbar zu machen. Und mit allem meinte ich alles – von der Umwandlung von Text in Überschriften bis hin zur Änderung von Hintergrundfarben, Schriftfarben und so weiter. In seinem aktuellen Zustand enthält der Inspector jedoch nun eine Vielzahl von Optionen, bei denen man mit dem Mausrad ständig auf und ab scrollen muss. Ganz anders als der Inspector, den ich mir ehemals für die Benutzer erhofft hatte.

Schließlich haben wir vor Kurzem das Shortcode-Mapping für Ihre bevorzugten Plugins. Diese Funktion erforderte es, Textfelder, Schieberegler, Kontrollkästchen und weitere neue Optionstypen zu erstellen, die nötig waren, um das Bearbeiten von Shortcodes angenehmer zu gestalten. Anfangs war es eine gute Idee, und ja, es hat Ihnen die Handhabung von Shortcodes erleichtert. Aber auch diese Funktion wich von unserer reinen „Buttons-only“-Oberfläche ab. Rückblickend war es wirklich unmöglich, ausschließlich Schaltflächen zum Ändern von Shortcode-Attributen zu verwenden. Jetzt, in der neuesten Version, endeten wir mit zwei Arten von Steuerelementen: den Schaltflächen und den Shortcode-Feldern.

Es gibt noch einige weitere Gründe, die uns zu der Entscheidung geführt haben, dass unsere Benutzeroberfläche nicht mehr effektiv (oder für unsere Bedürfnisse geeignet) war, aber die oben genannten Punkte sind die wichtigsten. Eines stand jedoch immer fest: Wir wussten, dass wir die Benutzeroberfläche aktualisieren mussten.

Definieren, wie ein Page Builder idealerweise funktionieren sollte

Anstatt uns sofort ins Getümmel zu stürzen und Dinge direkt zu ändern, machten wir hundert Schritte zurück, um das gesamte Page-Builder-Erlebnis zu betrachten. Wir wollten der Oberfläche neues Leben einhauchen. Ehrlich gesagt wollten wir sie nicht Jahr für Jahr immer wieder neu aufbauen. Es ist  erschöpfend und stellt definitiv keine nennenswerte Hilfe für die WordPress-Community dar. Dieses Mal entschieden wir uns dafür, die Dinge langsam und sorgfältig anzugehen. Wir haben jeden Winkel von Page Builder Sandwich untersucht und herausgearbeitet, was ihn zu einem guten Page Builder macht, und schließlich  das gesamte Bearbeitungserlebnis auf einige Kernkonzepte heruntergebrochen.

Grundlegendes Konzept #1: Direkt im Inhalt tippen, um Dinge zu bearbeiten

Einer der Hauptgründe für die Installation eines Page Builders ist es, sich von den Einschränkungen des WordPress-Backend-Texteditors zu befreien. Nicht, dass der Backend-Editor nicht gut wäre, aber beim Erstellen von Webseiten zeigt er Ihnen nicht sofort, wie Ihre Webseite für Ihre Website-Besucher aussehen würde, noch erlaubt er es Ihnen, Ihre Inhalte abseits eines einspaltigen Layouts zu gestalten. Sie können dort nur Ihren Text und einige Bilder sehen, aber keines der aufwendigeren Elemente (z. B. Kontaktformulare). Sie können zwar Shortcodes hinzufügen, aber diese werden nicht in ihrer gerenderten Form angezeigt*.

* Es gibt Plugins von Drittanbietern wie Shortcake UI, die dies beheben, aber das tut hier nichts zur Sache.

Hier kommen Frontend-Page-Builder ins Spiel. Sie holen das Bearbeitungserlebnis aus dem Backend heraus und bringen es ins Frontend, sodass Sie Ihre Website genauso bearbeiten, wie Ihre Besucher sie tatsächlich sehen würden. Wie Pippin es formulieren würde: What you see is what you get (WYSIWYG).

Ein weiterer Vorteil eines Frontend-Editors ist, dass er es Ihnen ermöglicht, Ihren Text direkt zu bearbeiten. Das Eintippen von Überschriften und Absätzen bietet beim Erstellen von Websites den Komfort eines gewöhnlichen Textverarbeitungsprogramms. Schaltflächen und Tab-Beschriftungen sollten sich ebenfalls ändern lassen, indem man einfach darauf klickt und lostippt.

Dies ist der Bereich, in dem die meisten anderen Page Builder nicht überzeugen. Die meisten von ihnen zwingen Sie dazu, innerhalb eines Textfeldes zu tippen, um alles zu bearbeiten. Auch das sollte bei echten Frontend-Page-Buildern nicht der Fall sein. Das direkte Tippen und Bearbeiten von Text war seit Version 2 eine Stärke von Page Builder Sandwich, und wir haben sichergestellt, dass dies auch in Version 3 beibehalten wird.

Grundlegendes Konzept #2: Nutzen der Maus für schnelle Anpassungen

Die Maus ist ein mächtiges Werkzeug, das bei Page Buildern oft vernachlässigt wird. Oftmals verwenden Page Builder sie nur, um Benutzern das Ziehen und Ablegen von Elementen an verschiedenen Orten oder das Klicken auf Schaltflächen oder Eingabefelder zu ermöglichen. Das ist zwar in Ordnung, aber man kann mit der Maus im Bereich des Page-Buildings noch so viel mehr tun.

Zum einen gibt es ein fantastisches visuelles Feedback, wenn man die Maus als Werkzeug zur Seitenbearbeitung verwendet, insbesondere beim Anpassen visueller Eigenschaften wie Ränder, Innenabstände und Größen. Jetzt wird das Optimieren Ihrer Elemente zu einem ganz natürlichen Erlebnis.

In Version 3 von PBS werden Sie eine Reihe von Dingen mit Ihrer Maus anpassen können. Sie können Außenabstände/Abstände zwischen einzelnen Elementen, die Innenabstände innerhalb Ihrer Spalten sowie die Größen von Bildern, Icons und Karten anpassen. Wir haben außerdem Schaltflächen, mit denen Sie numerische Werte ändern konnten, durch Schieberegler ersetzt.

Grundlegendes Konzept #3: Text sollte einfach zu formatieren sein

Wenn Sie einen Schritt von Ihrem Monitor zurücktreten, werden Sie bemerken, dass der Großteil dessen, was Sie Ihren Webseiten hinzufügen, Textinhalte sind. Ja, wir haben Bilder und Icons dabei, die sie begleiten – und in letzter Zeit neigen wir dazu, größere Bilder in unsere Websites einzubinden. Aber der Großteil der wichtigen Inhalte besteht aus Text: Überschriften, Aufzählungslisten, Absätze, Zitate usw. Daneben steht, wie wir unseren Text an unsere Designs anpassen. Wir ändern entweder Größen und Farben oder stellen ihn fett oder kursiv dar. Dies dient dazu, unsere Inhalte für unsere jeweiligen Leser lesbarer, relevanter und ansprechender zu machen.

Da wir Text häufig formatieren, sollten Schaltflächen, mit denen wir Stile ändern können, sehr leicht zugänglich sein. Sie sollten nicht in einem Popup-Fenster versteckt sein, das man erst öffnen muss. Die meisten Page Builder leiden unter dieser Krankheit. Damit ihre Benutzeroberfläche als „aufgeräumt“ bezeichnet werden kann, werden selbst die meistgenutzten Optionen vor dem direkten Blick verborgen.

Um dieses Problem zu lösen, haben wir uns die am häufigsten verwendeten Textverarbeitungsprogramme angesehen. Wir bemerkten, dass sie normalerweise eine Leiste mit vielen Schaltflächen am oberen Bildschirmrand haben, die zur Textformatierung dienen, und kopierten dasselbe Layout für Version 3. Wir haben nun eine Leiste mit allen Textformatierungs-Schaltflächen, die am oberen Bildschirmrand immer präsent ist. Das macht das Formatieren wirklich schnell und sorgt dafür, dass es Ihnen bei der Textbearbeitung wie selbstverständlich von der Hand geht.

Grundlegendes Konzept #4: Erweiterte Formatierungsoptionen sollten flexibel und dennoch leicht verständlich sein

Unterm Strich sollte ein Page Builder es den Menschen ermöglichen, einfach atemberaubende Designs zu erstellen. Das bedeutet, dass wir viele verschiedene Einstellungen und Optionen bereitstellen sollten, ohne eine steile Lernkurve zu erzwingen. Ränder, Innenabstände und Textgestaltung anpassen zu können, ist großartig, aber das allein reicht oft nicht aus. Sie benötigen weitaus ausgefeiltere Optionen, um das gewünschte Ergebnis zu erzielen – Optionen wie Hintergrundbilder, Muster, Rahmen, fixierte Hintergründe und mehr. Das Anhäufen all dieser verschiedenen Einstellungen kann schnell etwas überwältigend wirken, daher haben wir einige davon vereinfacht und in Kategorien organisiert, um die Bedienung in Version 3 benutzerfreundlicher zu gestalten.

Grundlegendes Konzept #5: Shortcode-Unterstützung

Zu guter Letzt dürfen wir nicht vergessen, dass unser Page Builder auf WordPress aufbaut. Wir sollten die Plattform und ihre Funktionen annehmen und sie weder einschränken noch von ihnen abweichen. Eine enorme Funktion, die WordPress bietet, sind Shortcodes. Das bedeutet nicht, dass der gesamte Inhalt aus Shortcodes bestehen sollte – das wäre unübersichtlich –, sondern dass wir einfach mit ihnen kompatibel sein sollten. Viele Plugins und Themes verwenden Shortcodes, und es wäre ein herber Verlust, wenn wir sie alle ignorieren würden. Tatsächlich bieten Shortcodes den Nutzern maximale Flexibilität bei der Seitenerstellung.

Wir haben vor einigen Wochen unser Shortcode-Mapping-System eingeführt, und dank dessen haben wir Hunderte von Shortcodes aus Hunderten von Plugins zugeordnet. Wir haben die beliebtesten Plugins aus dem WordPress-Plugin-Verzeichnis priorisiert, sodass die Wahrscheinlichkeit groß ist, dass Sie ihnen auf Ihren eigenen Websites begegnen werden. Dies wurde in Version 3 nur noch weiter gestärkt, und wir werden dies auch in Zukunft kontinuierlich verbessern.

Fazit

Wir haben all diese oben genannten wesentlichen Eigenschaften aufgegriffen und in Page Builder Sandwich Version 3 integriert. Es ist der beste Page Builder, den wir bisher für WordPress entwickelt haben. Er ist intuitiver und natürlicher zu bedienen, arbeitet schneller, ist einfacher zu handhaben und benutzerfreundlicher denn je.

Wenn Sie Gedanken zu einer unverzichtbaren Page-Builder-Funktion haben, lassen Sie es uns wissen, indem Sie unten einen Kommentar hinterlassen.