Full Site Editing mit WordPress

Zuletzt aktualisiert am 26. Dezember 2024 um 09:47 Uhr

Mit dem Update auf Version 6.1 bringt WordPress die Gestaltung von Website-Layouts auf ein völlig neues Level. Mit den neuen Block-Themes Twenty TwentyTwo und Twenty TwentyThree werden Themes in WordPress künftig wohl noch einmal völlig neu gedacht werden müssen.

War der neue Block-Editor, auch bekannt als Gutenberg-Editor, bei der Einführung 2018 noch sehr umstritten, um nicht zu sagen, verhasst, hat dieser sich in den vergangen 5 Jahren zum wertvollen Tool bei der Gestaltung von Website-Layouts gemausert. Und mit der Möglichkeit des Full Site Editings ist er nun endgültig zu einer vollwertigen Alternative zu den üblichen PageBuildern in WordPress geworden.

2019 – beim Relaunch dieser Website – bin ich leider noch am Versuch gescheitert, diese Seite komplett mit dem Gutenberg – Editor zu gestalten. Zu rudimentär waren die Funktionen, zu oft hätte ich Elemente eines Dritt-Plugins einbinden müssen und zu viel mit CSS nachjustieren. Daher hatte ich mich seinerzeit noch dazu entschieden, die Startseite statt mit dem Gutenberg-Editor mit dem PageBuilder – Plugin von SiteOrigin zu gestalten.

Letzte Woche habe ich dann mal spaßeshalber versucht, meine Website mit Twenty TwentyThree nachzubauen. Ich habe weniger als eine Stunde gebraucht um die Seite 1:1 in dem jetzigen Layout zu gestalten – und das ohne eine einzige Zeile Custom CSS zu benötigen. Da auch die Ladezeiten dieser mit dem neuen Standard-Theme gebauten Website sehr vielversprechend sind, werde ich diese Website daher wohl in den nächsten Monaten komplett von meinem bisherigen Lieblings-Theme Weaver auf Twenty TwentyThree umstellen.

Was ist das besondere am Full Site Editing

Das erste was nach dem Update auf WordPress 6.1 auffällt ist, dass der Customizer nicht mehr unter „Design“ zu finden ist. Stattdessen gibt es dort einen neuen Menüpunkt, den „Editor“

Klickt man auf den Menüpunkt für Editor, landet man in den Editor, der für die Darstellung der Startseite zuständig ist. Ganz wichtig: Das ist NICHT der Inhalt der Startseite, der hier definiert wird. Hier wird das Layout festgelegt. Wobei in meinen Augen gerade bei der Startseite diese Definition etwas „fließend“ ist.

Wenn Deine Startseite also eine Übersicht Deiner Blogbeiträge sein soll, dann legst Du hier fest, an welcher Stelle die Beiträge angezeigt werden sollen, wie viele Beiträge, wie das Beitragsbild im Verhältnis zum Textauszug positioniert werden soll, etc.

Du könntest außerdem noch einen Textblock hinzufügen, in dem Du beschreibst, um was es auf Deinem Blog geht und unter den Blogbeiträgen noch einen kurzen Über Mich-Text. Das könnte dann zum Beispiel so aussehen:

Das gesamte Layout Deiner Startseite wird hier definiert. Du hast alle Freiheiten, das Aussehen dieser Seite zu gestalten.

Bissl langweilig – geht das auch mit Farbe?

Zugegeben, der Screenshot oben ist designtechnisch nicht so der Reiser. Etwas Farbe und Abwechslung würden dem Layout sicher gut tun.

Auch das ist mit dem neuen Full Site Editor überhaupt kein Problem. Schauen wir uns doch mal die Liste der Blöcke, die für das Design oben verwendet wurden, etwas genauer an. Das kannst Du übrigens über das Symbol mit den drei versetzt untereinander angeordneten Strichen oben am Bildschirmrand.

Jedes dieser Elemente kann individuell gestaltet werden. Solltest Du die Seitenleiste am rechten Bildschirmrand, die Dir die Gestaltungselement anzeigt, nicht sehen können, kannst Du diese durch Klick auf das Zahnrad-Symbol am oberen rechten Bildschirmrand öffnen.

Wie Du auf dem Screenshot 1.3 sehen kannst, habe ich die Seite aus einer Kombination von Gruppen, Spalten und den eigentlichen Inhalten zusammengestellt.

Gruppen dienen dabei als übergeordnete Elemente. Du kannst sie zum Beispiel dann verwenden, wenn Du mit wechselnden Hintergrundfarben für bestimmte Sektionen arbeiten möchtest. Die Hintergrundfarbe definierst Du dann für die jeweilige Gruppe und ordnest Deine weiteren Inhalte dann in dieser Gruppe an.

Spalten definieren, wie der Inhalt auf Deiner Website angeordnet ist: Einspaltig bedeutet, der Inhalt dieser Spalte wird über die gesamte Inhaltsbreite Deiner Website angezeigt. Du kannst aber auch 2, 3 oder mehr Spalten definieren und über die Einstellung des Spaltenblocks definieren, wie groß die jeweilige Spalte sein soll.

Und innerhalb der Spalten kannst Du dann alle Inhaltsblöcke einfügen, die der Block-Editor von WordPress Dir zur Verfügung stellt.

Ich habe im Beispiel oben jetzt für die Gruppe, die meinen Blog und den Über-Mich-Text beinhaltet, meine WP Bistro-Farben hinterlegt. Das geht über die Einstellung „Farbe“ für den Gruppen-Block. Hier kannst Du nicht nur die Hintergrundfarbe, sondern auch die Farbe für den Text und die Links, die sich in dieser Gruppe befinden, definieren:

Du kannst diese Farbeinstellungen für jeden einzelnen Block definieren.

In der Listenansicht ( siehe Bild 1.3 ) kannst Du die Element nach belieben per Drag & Drop an die gewünschte Stelle schieben, so dass auch nachträgliche Anpassungen am Layout überhaupt kein Problem mehr sind.

Stile festlegen

Natürlich musst Du nicht jedem Element Deiner Seite die Farben (oder andere Stile) manuell zuweisen. Du kannst für Dein Layout auch einen globalen Stil definieren, der immer dann zur Anwendung kommt, wenn Du nichts anderes definiert.

Dafür verwendest Du das Symbol mit dem halb gefüllten Kreis am rechten oberen Bildschirmrand.

Du kannst jetzt entweder aus voreingestellten Stilen Deines Themes auswählen oder Deinen ganz eigenen Stil festlegen. Du hast dabei die Optionen „Typographie“ ( für Schriften, Schriftgrößen-, -farben, etc.), Farben und Layout.

Unter Layout definierst Du im Wesentlichen die Inhaltsbreite Deiner Website und die „weite Breite“, also wie breit die Seite auf Monitoren angezeigt wird, die größer als Deine Inhaltsbreite sind. Das ist insbesondere wichtig für die Hintergrundfarben. Wird hier für die weite Breite „100%“ eingestellt, gehen die Hintergründe über die komplette Monitorbreite.

Außerdem kannst Du in diesem Bereich die Innenabstände festlegen – also, wie groß der Textabstand zum inneren Rand eines Elementes ist.

Templates und Template-Parts

Wenn Du aus dem Editor heraus auf das WordPress-Symbol in der oberen linken Ecke klickst, kannst Du zu den anderen Templates Deines Themes und zu den Template-Parts ( oder Template-Teilen) wechseln.

Hier kannst Du beliebig viele Templates, also Vorlagen, anlegen, die Du überall in Deinen Theme verwenden kannst. So könntest Du hier zum Beispiel ein Template für Seiten definieren, dass keinen Header anzeigt und dieses für Deine LandingPages verwenden.

Oder Du kannst unter Template-Parts einen alternativen Header anlegen mit einem anderen als dem Standard-Navigations-Menü. Diesen Standard-Header fügst Du in ein individuelles Template ein, dass Du dann z.B. für Deine Blog-Kategorieseiten verwenden könntest.

Deiner Fantasie bei der Gestaltung Deines Themes sind also mit dem Full Site Editing von WordPress (fast) keine Grenzen mehr gesetzt.

Was aktuell noch fehlt

Auch wenn mein Testlauf des neuen Block-Editors mich absolut begeistert hat: Das ein oder andere Manko gibt es leider noch.

So fehlt mir im Moment noch die Möglichkeit, bestimmte Elemente zum Beispiel für die mobile Darstellung ein- oder auszublenden. Andere Pagebuilder bieten mir die Möglichkeit, für das Smartphone ein alternatives Headerbild zu hinterlegen oder eine individuelle Ansicht zu definieren, die nur auf der Desktop-Version angezeigt wird. Diese Möglichkeiten bietet Twenty TwentyThree aktuell leider noch nicht, was die Gestaltung des responsiven Designs aktuell noch ein wenig hakelig macht.

Und unter den Schriften sind moment nur wenig Schriftarten hinterlegt. Will man eine andere Schrift als die vom Theme vorgegebenen verwenden muss man aktuell noch auf ein Plugin oder Custom CSS zurückgreifen. Hier würde ich mir eine native Implementierung im Editor wünschen.

Fazit

In meinen Augen werden Pagebuilder-Themes durch den neuen Theme-Editor in WordPress in naher Zukunft mehr oder weniger überflüssig werden. Das Arbeiten mit WordPress wird sich grundlegend wandeln.

Alle Optionen des neuen Editors in einem Blog-Artikel zusammenzufassen würde viel zu weit führen. Ich plane hierzu aber in Kürze ein Webinar, um den Editor mit all seinen Möglichkeiten ausführlich vorzustellen. Wenn Du daran Interesse hast, trag Dich gern heute noch in meinen Newsletter ein – dann verpasst Du den Termin ganz sicher nicht.