Themes Full Site Editing WordPress

In 10 Schritten zu einem WordPress Full Site Editing Block-Theme wechseln

Switch WordPress Block Theme 10 steps

Vielleicht hast du schon mit dem Gedanken gespielt, eines der neuen Block-Themes für deine Webseite zu nutzen? Mit einem Block-Theme kannst du die neuen WordPress Full Site Editing Features nutzen. So hast du als Nutzer endlich direkten Zugriff auf alle Theme-Dateien und kannst diese direkt in einem visuellen Editor anpassen.

Keine CSS-Workarounds mehr, um z. B. das Datum oder den Autorennamen auf deinem Blog zu verbergen. Du kannst den entsprechenden Autor- oder Datum-Block direkt im Editor löschen.

Das ist nicht nur einfacher, sondern auch sehr saubererer Code.

Aber wie sollst du loslegen? Und was solltest du beachten, wenn du nach einem geeigneten Block-Theme für deine Website suchst? Welche Schritte sind nötig, um eine bestehende WordPress-Seite von einem klassischen Theme zu einem Block-Theme umzuziehen? 

Um dich zu unterstützen, habe ich eine Anleitung in 10 Schritten vorbereitet:

1. Webseite auf Kompatibilität prüfen

Als Erstes solltest du schauen, dass deine Webseite die neuste WordPress Version 6 nutzt. Wenn du ein WooCommerce-Shop hast, würde ich dir derzeit noch nicht zu einem Block-Theme raten, da WooCommerce im Moment daran arbeitet, alle WooCommerce-Templates mit Blöcken umzubauen. Derzeit bist du daher noch auf das extra Plugin WooCommerce Blocks angewiesen und einige Funktionen sind noch eingeschränkt. Ich werde hier auf dem Blog berichtet, wenn WooCommerce mit Block-Themes zu hundert Prozent kompatibel ist.

2. Block-Theme wählen

Wir haben auf AinoBlocks.io schon erste Premium Block-Themes veröffentlicht. Weitere kostenlose Block-Themes findest du im WordPress.org Theme-Verzeichnis unter dem Filter “Full Site Editing”. Dort findest du auch unser kostenloses Aino Starter-Theme.

3. Header- und Footer-Aufbau notieren

Da Header und Footer von Block-Themes komplett mit Blöcken gebaut sind, musst du diese beiden Elemente nach dem Themewechsel neu aufbauen. Daher ist es sinnvoll, eine Skizze zu machen und aufzuschreiben, welche Menüpunkte du in deinem Header und Footer benötigst.

Das ist zwar etwas arbeitet, der große Vorteil ist dann aber, dass du zukünftig den Header und Footer in deinem Block-Theme sehr viel einfacher selbst anpassen kannst. Du kannst alle Elemente im visuellen Editor verschieben und anordnen, wie du es möchtest. In klassischen Themes waren diese kleinen Anpassungen (z. B. ein Logo mittig zu platzieren, oft nicht so leicht möglich).

Es wird auch möglich, unterschiedliche Header auf unterschiedlichen Seiten einzusetzen. Viele Block-Themes bieten eine Anzahl von Header- und Footer-Vorlagen (Patterns) an, aus der du dein favorisiertes Design wählen kannst.

4. Theme wechseln

Jetzt kannst du das Theme unter Design/Themes wechseln, indem du dein neues Block-Theme installierst und aktiviert.

5. Benötigte Block-Plugins installieren

Manche Block-Themes benötigen spezielle Blöcke oder ein Block Collection Plugin, das du nach der Theme-Aktivierung installieren musst.

In unseren Themes nutzen wir beispielsweise unser AinoBlocks Plugin.

WordPress FSE Block-Theme Wechsel 10 Schritte

Je nachdem, was du auf deiner Webseite zeigen möchtest, kannst du auch noch einzelne Blöcke wie ein Timeline, Accordion oder Notification Banner Block installieren.

Wird ein bestimmter Block in einem Theme benötigt, bekommst du dies oft über eine Nachricht im WordPress Dashboard angezeigt.

6. Block-Header erstellen

Jetzt kannst du loslegen, deinen neuen Header einzurichten. 

Leider musst du diesen Schritt einmalig neu machen, da Header und Footer in Block-Themes mit Blöcken gebaut sind, was eine ganz neue Technik ist. Header-Inhalte können daher nicht automatisch von deinem vorherigen Theme übernommen werden.

Die meisten Block-Themes bieten aber Beispielinhalte im Header und Footer an. Du musst deinen Header also nicht selbst aufbauen, sondern lediglich die Beispielinhalte mit deinen eigenen Inhalten austauschen.

Um das Editor-Menü zu öffnen, klicke auf Themes/Editor und dann auf das Logo (WordPress oder dein eigenes Webseiten-Logo). Klicke dann auf Template-Teile und wähle das Header Template-Teil aus der Liste der Template-Teile aus.

WordPress FSE Block-Theme Wechsel 10 Schritte

Im visuellen Editor kannst du jetzt den Logo-Block nutzen, um dein eigenes Logobild hochzuladen. Alternativ gibt es auch einen Site Title Block, wenn du deinen Webseitentitel lieber in geschriebener Form anzeigen möchtest.

WordPress FSE Block-Theme Wechsel 10 Schritte

Du kannst den Navigations-Block nutzen, um deine Menüpunkte in die Navigation einzubinden. Manche Block-Themes nutzen außerdem noch den Social Icons Block im Header, mit dem du auf Instagram, Twitter etc. linken kannst. Eventuell kannst du auch den Suche-Block einfügen.

Je nach Theme kann es sein, dass du auf mehreren Header-Vorlagen auswählen kannst.

In diesem Fall kannst du den Header mit einer alternativen Vorlage ersetzen. Dazu klickst du den Header an, was am einfachsten über die Listen-Ansicht geht. 

Sobald der Header angeklickt ist, siehst du in der Toolbar des Editors den Ersetzen-Button. Wenn du diesen anklickst, sieht du eine Vorschau aller alternativen Header-Vorlagen und du kannst eine auswählen.

7. Block-Footer erstellen

Nachdem du den Header eingerichtet hast, musst du das gleiche beim Footer machen.

Auch hier kann es sein, dass du aus unterschiedlichen Footer-Vorlagen wählen kannst. Viele Block-Themes bieten z. B. eine helles und ein dunkles Footerdesign an.

WordPress FSE Block-Theme Wechsel 10 Schritte

Die Vorlagen sind auch im Footer mit Beispielinhalten gefüllt, sodass du diese nur mit eigenen Inhalten austauschen musst.

8. Farben und Schriften in Styles auswählen

Statt über den Customizer werden in Block-Themes allgemein gültige Themeeinstellungen wie Farben und Schriften in Styles festgelegt. Block-Themes benötigen den Customizer nicht mehr. 

Klicke auf den kleinen halb hell, halb dunklen Kreis oben rechts im Editor, um die Styles Einstellungen zu öffnen.

WordPress FSE Block-Theme Wechsel 10 Schritte

Hier findest du die Option, deine Schriften zu wählen. Jedes Block-Theme liefert eine Auswahl an Schriften mit.

WordPress FSE Block-Theme Wechsel 10 Schritte

In Styles kannst du auch die Farb-, Verkaufs- und Duotone-Paletten des Themes anpassen und zusätzlich eine eigene Farbpalette anlegen.

WordPress FSE Block-Theme Wechsel 10 Schritte

Zusätzlich kannst du die Grundeinstellungen der im Theme verwendeten Blöcke anpassen. So kannst du z. B. alle Überschriften im Überschrift-Block standardmäßig aus fett setzen. 

WordPress FSE Block-Theme Wechsel 10 Schritte

So musst du dann nicht später bei jeder Nutzung des Überschrift-Blocks den Schriftschnitt neu einstellen.

9. Seiten-Templates

Da Block-Themes liefern meist eine Anzahl an eigenen Seiten-Templates mit. Diese kannst du in deinen Seiten auswählen. 

Öffne dazu eine Seite und wähle das gewünschte Template aus. 

WordPress FSE Block-Theme Wechsel 10 Schritte

Du kannst diese Templates auch im Editor anpassen, indem du das Editor-Menü öffnest. Unter Templates siehst du die Liste aller Theme-Templates. 

WordPress FSE Block-Theme Wechsel 10 Schritte

Du kannst jedes der mit Blöcken gebauten Templates im Editor an deine Bedürfnisse anpassen.

10. Plugins installieren, um Customizer-Optionen zu ersetzen (wenn nötig)

Wie schon oben erwähnt, benötigen Block-Themes keinen Customizer mehr, da alle Anpassungen entweder in Styles oder über die Templates vorgenommen werden.

Wenn du kein Plugin aktiv hast, das den Customizer benötigt, wird der Customizer nicht mehr als Menüpunkt angezeigt.

Solltest du Funktionen, wie eigenes CSS oder die Option ein Favicon zu integrieren benötigst, kannst du stattdessen ein entsprechendes Plugin installieren.

Eine statische Homepage kannst du unter Einstellungen/Lesen einrichten.

Fazit

Wie du siehst, ist der Wechsel zu einem Block-Theme gar nicht so aufwendig, wie es vielleicht anfangs scheint. Ja, es ist ein bisschen Arbeit nötig, aber du bekommst durch ein Block-Theme so viele tolle neue Möglichkeiten, dass sich ein Wechsel meiner Ansicht nach auf jeden Fall lohnt. Hinzu kommt, dass dir Block-Themes die modernste Technik bieten und damit u. a. auch eine verbesserte Webseiten-Performance bieten.

Auf langfristig werden alle Themes Block-Themes sein, es ist also durchaus von Vorteil gleich von Beginn an auf diese neue Technik zu setzen und so das Modernste, was WordPress zu bieten hat, für die eigene Webseite zu nutzen.

Wenn du Fragen hast oder du die bei etwas noch nicht so sicher bist, schreibe mir einfach einen Kommentar oder melde dich auf Twitter oder Instagram. Ich freue mich, von dir zu hören.

AinoBlocks by Elma Studio

Join the conversation

  1. Wie läuft das eigentlich mit besonderen, auf dem eigenen Server abgespeicherten Fonts und Block-Themes?
    Ich benutze derzeit einen etwas modifizierten System-Font-Stack für allen allgemeinen Text und “Bree Serif” für Headers 1-3. Bree Serif ist ein Google-Font, ich habe den aber auf meinem Server gespeichert um die externe Anfrage zu sparen und meine Ladezeit zu optimieren…
    Du siehst, Gutenberg ist mir fremd. ;)

  2. Super Erklärung für Einsteiger. Statt Skizzen schlage ich Screenshots vor – sind in Sekunden gemacht und damit kein wirklicher Aufwand mehr ;-)
    Windows bringt dafür ein Tool in den Bordmitteln mit – Mac sicher auch?

  3. Hallo Jürgen,
    Gutenberg und vor allem Block-Themes sind ja auch noch ganz neu, da kommen für uns alle jede Menge Fragen auf.

    Im Moment liefern die Block-Themes eine Anzahl von Schriften mit. Diese werden in der theme.json Datei vordefiniert und lokal im Theme mitgeliefert. In der Zukunft wird es aber auf jeden Fall auch die Option geben, eigene Fonts zu integrieren. Im Moment ist das leider noch nicht ganz so leicht möglich, ohne das Theme selbst zu modifizieren.

    Ich plane gerade einen Blogbeitrag, um mehr über den Umgang mit Schriften in Block-Themes zu erklären und auch zu zeigen, was in Arbeit/Planung ist. Einige Features sind leider momentan noch nicht ganz fertig.

    Ich werde hier noch einmal schreiben, sobald diese Beitrag fertig ist.

  4. Hallo Thomas,
    herzlichen Dank, es freut mich, dass dir der Beitrag gefällt. Ja, das stimmt, Screenshots sind natürlich einfacher :) Am besten wahrscheinlich von den Design/Menüs Menüs im Admin.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.