SnugGrid ist eine kleine App für die Menüleiste deines Mac. Mit einer Taste legt sie deine Fenster in ordentliche Reihen, mit immer gleichem Abstand dazwischen. Ich habe sie für mich gebaut, weil ich den ganzen Tag viele Terminals und Browserfenster offen habe.

Sie ist kostenlos, Open Source und noch in der Beta. Getestet habe ich sie bisher nur auf meinem eigenen Mac mit dem neuesten macOS. Den Download und alles Weitere findest du auf der SnugGrid-Seite. Sag mir gern, wie sie bei dir läuft.

Kostenlos, auf wordpress.org.

Architrave ist unser neues WordPress-Theme, und du liest diesen Beitrag gerade darin. Es ist ein Block-Theme für Blogs und für Texte, die man gern bis zum Ende liest. Es ist kostenlos und du findest es auf wordpress.org.

Kurz gesagt

• Zum Lesen gemacht. Eine ruhige Seitenleiste, der Artikel auf einem eigenen Blatt und eine Schrift, die auch bei langen Texten angenehm bleibt.
• Deine Leser:innen bestimmen mit. Schriftgröße, hell oder dunkel und ein Fokus-Modus.
• Viele kleine Details. Inhaltsverzeichnisse für lange Beiträge, eine eigene Karte für jedes Beitragsformat, verschachtelte Kommentare, ein Archiv nach Jahren und ein ruhiges Layout auf dem Handy. Auf Deutsch und Englisch.
• Dein eigener Look mit Vibetiles. Mit unserem kostenlosen Plugin Vibetiles änderst du das Design direkt auf der Seite und teilst es als Stil. Ein zweites Plugin, Architrave Extras, gibt es jetzt auch auf wordpress.org.

Warum ein neues Theme?

Es ist unser erstes neues Theme seit Jahren, die Frage ist also berechtigt. Für das, was wir als Nächstes bauen wollen, vieles davon mit KI, brauchten wir eine Basis, die wir in- und auswendig kennen. Deshalb ist Architrave so, wie unsere Themes schon immer waren: minimalistisch und nah an WordPress, mit den Core-Blöcken und dem Nötigsten, ohne Extras obendrauf. Neu ist die Zeit, die drinsteckt. So lange habe ich noch nie an den kleinen Details eines Themes gearbeitet.

Unser allererstes Theme war Ari, im Jahr 2010: ein kleines, ruhiges Theme für Blogs. Architrave ist dieselbe Idee, nur für die Zeit der KI. Mit Ari haben wir angefangen. Mit Architrave fangen wir noch einmal neu an.

Zum Lesen gemacht

Links siehst du eine ruhige Seitenleiste mit dem Namen der Website, dem Menü und der Suche. Der Artikel liegt auf einem eigenen Blatt, ein kleines bisschen von der Seite abgehoben. Die Zeilen sind nicht zu lang, dazwischen ist genug Luft, und die Überschriften folgen einer klaren Ordnung. Auf dem Handy wird die Seitenleiste zu einer einfachen Leiste mit Menü.

Was können deine Leser:innen einstellen?

• Schriftgröße. Größer oder kleiner, und so bleibt es dann auf jeder Seite.
• Hell oder dunkel. Beim ersten Besuch richtet sich die Seite nach dem Gerät. Danach entscheiden die Leser:innen selbst.
• Fokus. Alles andere tritt zurück und nur der Text bleibt.

Lange Beiträge bekommen ein Inhaltsverzeichnis aus ihren Überschriften. Es zeigt dir, wo du gerade bist, und du kannst damit direkt weiterspringen.

Die kleinen Dinge

Auf der Blogseite bekommt jedes Beitragsformat seine eigene Karte: Ein Link sieht aus wie ein Link, ein Zitat wie ein Zitat. Kommentare sind verschachtelt, Code ist gut lesbar und das Archiv listet alle Beiträge nach Jahren auf. Das Theme gibt es auf Deutsch und Englisch, und jedes Wort darin lässt sich übersetzen.

Und mit Vibetiles?

Für sich allein ist Architrave bewusst ruhig. Wenn du mehr möchtest, gibt es Vibetiles, unser kostenloses Design-Panel. Es bringt Stile, Schriften, Farben und ein kleines Panel für deine Leser:innen mit, und wenn du magst, verbindest du eine KI, die an denselben Reglern dreht. Vibetiles ist in Architrave groß geworden, funktioniert aber auch mit anderen Block-Themes. Alle Details findest du im Vibetiles-Beitrag.

Was wir planen: eine kleine Stil-Bibliothek hier auf elmastudio.de. Du teilst einen Stil, den du gemacht hast, und andere übernehmen ihn in ihr eigenes Vibetiles. Wahrscheinlich fangen wir mit einer einfachen Seite hier auf der Website an.

Neu: Architrave Extras

Manche Dinge sind zu viel für ein Theme. Die haben wir in ein kleines Plugin gepackt, Architrave Extras:

• Eine gesprochene Version deines Beitrags. Du hängst eine Audiodatei an und unter dem Datum erscheint ein kleiner Player, gekennzeichnet als mit KI erstellt.
• Als Markdown kopieren. Ein Knopf kopiert den Beitrag oder seine Kommentare als reinen Text.
• Jeder Beitrag als Markdown für KI-Tools, dazu eine llms.txt, die deine Beiträge auflistet.
• Link-Vorschauen und ein Aktualisierungsdatum für Suchmaschinen.

Architrave Extras gibt es jetzt kostenlos auf wordpress.org.

Wie installiere ich es?

Geh in WordPress auf Design → Themes → Neues Theme hinzufügen, such nach „Architrave“ und installiere es. Du kannst es auch direkt bei wordpress.org herunterladen. Es ist kostenlos, unter der GPL. Alle Links findest du auf der Architrave-Seite.

Ein Theme, an dem wir weiterarbeiten

Wir sind kein Theme-Shop mehr. Alle unsere Themes sind inzwischen kostenlos, und Architrave ist das, an dem wir weiterarbeiten. Ein paar Fehler gibt es noch, und wir beheben sie, sobald wir sie finden. Ich verspreche nicht, dass es unser letztes Theme ist. Aber es ist das, auf dem wir aufbauen, und wir werden uns lange darum kümmern.

Als Nächstes kommen weitere KI-Funktionen dazu, die nützliche Art, und wir halten es einfach. Wenn du Architrave ausprobierst, freuen wir uns sehr, von dir zu hören. Schreib uns in die Kommentare, was dir gefällt und was dir fehlt. Danke fürs Lesen!

Kostenlos und in der Beta, auf wordpress.org.

Vibetiles ist ein Design-Panel für WordPress. Es öffnet sich direkt auf deiner Website, und du änderst Farben, Schriften, Größen und Abstände, während du die echte Seite vor dir hast. Es ist kostenlos, Open Source und noch in der Beta.

Kurz gesagt

• Ein Panel für dich. Farbe, Schrift, Layout, Ecken, Buttons und Bilder, jeweils mit eigenen Reglern. Wenn dir ein Look gefällt, speicherst du ihn als Stil.
• Ein kleines Panel für deine Leser:innen. Schriftgröße, hell oder dunkel und die Stile, die du ihnen zeigen möchtest.
• Stile als Links. Kopier einen Stil als Link und füg ihn auf einer anderen Website in Vibetiles ein. Eine kleine Bibliothek zum Teilen von Stilen planen wir auch.
• KI, wenn du magst. Mit dem Vibetiles Connector kann ein Assistent wie Claude dieselben Regler lesen und bewegen, über MCP. Jede Änderung lässt sich zurücknehmen, und nichts geht live, solange du es nicht sagst.
• Nicht nur für WordPress. Es gibt auch eine Version für einfache HTML-Websites: ein Ordner, den deine KI zur Website hinzufügt.

Dein Theme bleibt, wie es ist. Solange niemand an einem Regler dreht, sieht deine Seite genauso aus wie vorher, und mit der Kachel Original kommst du jederzeit dorthin zurück. Auch dieser Blog läuft mit Vibetiles. Klick also ruhig auf das Regler-Symbol und probier es beim Lesen aus.

Warum Regler?

Eine KI baut dir in ein paar Minuten eine Website. Was ewig dauert, ist das Feintuning: „etwas wärmer“, „die Überschriften eine Spur kleiner“, „weniger Abstand oben“. Für die großen Schritte sind Worte super. Aber die letzten zehn Prozent entscheidet dein Auge, und jedes Mal, wenn die KI deinen Code neu schreibt, kann woanders etwas kaputtgehen.

Deshalb schreibt bei Vibetiles niemand Code um. Du drehst an den Reglern, und wenn du eine KI verbindest, dreht sie an denselben. Jede Änderung ist ein Schritt, den du zurücknehmen kannst.

Das Panel

Das Panel ist ein kleines Fenster auf deiner Seite. Links sind die Bereiche, rechts die Regler:

• Styles: deine Looks als Kacheln.
• Colour: Seite, Text und Akzent, getrennt für hell und dunkel.
• Type: über 80 frei lizenzierte Schriften, Größen und Zeilenabstand, mit Reglern für Überschriften, Lesetext, Zitate, Kleingedrucktes und die Bedienelemente.
• Layout: wie breit die Seite ist und wie lang die Zeilen sind.
• Corners & Lines: wie rund die Ecken sind und wo Linien hinkommen.
• Buttons: Farbe, Form und Stil, vom Haupt-Button bis zum ruhigen Text-Button.
• Pictures: wie deine Bilder gerahmt und gezeigt werden.

Du weißt nicht, wie etwas heißt? Kein Problem. Klick oben im Panel auf den Zeiger und dann auf eine Überschrift oder ein Datum auf deiner Seite, und das Panel öffnet genau den passenden Regler.

Stile

Ein Stil ist ein ganzer Look: Farben, Schriften, Größen und Abstände, zusammen gespeichert. Vibetiles bringt sechs davon mit. Original ist einfach dein Theme, so wie es ist, und dazu kommen fünf ruhige Lesestile: Soft, Still, Book, Essay und Clear.

Jeden Stand der Regler kannst du als eigenen Stil speichern. Wenn du bei Original an einem Regler drehst, legt Vibetiles für dich eine Kopie an, denn Original bleibt immer dein Theme.

Die Stile unter „Shown to Readers“ können deine Leser:innen auswählen. Die anderen siehst nur du. Zieh eine Kachel von einer Gruppe in die andere, um sie zu zeigen oder zu verstecken, und mach über das ••• Menü einen Stil zum Standard deiner Website.

Gut zu wissen: Ein Stil, den du zeigst, speichert sich selbst. Deine Leser:innen sehen deine Änderungen also einen Moment später. Wenn du in Ruhe ausprobieren möchtest, arbeite an einer Kopie, die du noch nicht zeigst.

Was bekommen deine Leser:innen?

Deine Leser:innen bekommen ein kleineres Panel: Schriftgröße, hell oder dunkel und die Stile, die du ihnen zeigst. Was sie auswählen, bleibt in ihrem eigenen Browser und wird nirgendwohin geschickt. Du entscheidest, wie viel sie davon sehen, oder du blendest ihren Button ganz aus.

Stile reisen als Links

Kopier einen Stil als Link, und alle, die Vibetiles haben, können ihn in ihr eigenes Panel einfügen. Der ganze Look kommt an, bereit zum Weiterbasteln, mit jedem Block-Theme. Es gibt kein Konto und keinen Marktplatz. Ein Link in einer E-Mail oder im Chat reicht. Und wenn du „Everyone can copy styles“ einschaltest, bekommen auch deine Besucher:innen einen Kopieren-Button.

Ein Stil enthält nur Design-Einstellungen, sonst nichts. Wenn du einen einfügst, gleicht Vibetiles ihn mit einer Liste erlaubter Einstellungen ab und wirft alles andere raus, auch alles, was Code enthalten könnte. Ein eingefügter Stil bleibt privat, bis du dich entscheidest, ihn zu zeigen.

Was wir planen: eine kleine Stil-Bibliothek hier auf elmastudio.de. Du teilst einen Stil, den du gemacht hast, und andere übernehmen ihn in ihr eigenes Vibetiles. Wahrscheinlich fangen wir mit einer einfachen Seite hier auf der Website an.

Wie fange ich an?

1. Das Plugin installieren

Vibetiles funktioniert mit Block-Themes. Es ist in Architrave groß geworden, und wir testen es auch mit Twenty Twenty-Five.

• Geh in WordPress auf Plugins → Neues Plugin hinzufügen, such nach „Vibetiles“, installiere und aktiviere es. Es ist auf wordpress.org, Updates kommen also wie bei jedem anderen Plugin.
• Lieber eine Datei? Dieselbe Version liegt auf GitHub: Code → Download ZIP, dann Plugins → Neues Plugin hinzufügen → Plugin hochladen.
• Öffne deine Website, während du eingeloggt bist. Klick auf den kleinen Button auf der Seite oder drück Alt+D, und das Panel geht auf.

Ein schöner Anfang: Klick dich unter Styles durch die sechs Kacheln und spiel dann unter Colour mit dem Akzent. Der Pfeil oben nimmt jeden Schritt zurück, du kannst also nichts kaputtmachen.

2. Deine KI verbinden

Der Vibetiles Connector funktioniert mit Assistenten, die MCP sprechen, zum Beispiel Claude Code oder Claude Desktop. Die KI öffnet deine Website in einem eigenen Chrome-Fenster, und du kannst zusehen, wie sie an den Reglern dreht.

Du brauchst eine Website mit Vibetiles und einen Admin-Zugang, Node.js 18 oder neuer und Google Chrome. Such dir einen Beitrag auf deiner Website aus: Die KI prüft an seinem Text, wie gut sich die Seite liest. In Claude Code ist es eine Zeile, mit der Adresse deines Beitrags am Ende:

claude mcp add vibetiles -e VIBETILES_URL=https://example.com/hello-world/ -- npx -y github:manuelesposito/vibetiles-connector

Für andere Apps stehen die Schritte auf GitHub. Beim ersten Mal öffnet sich ein Chrome-Fenster mit deinem Beitrag. Log dich dort einmal ein, der Login bleibt dann in einem eigenen Chrome-Profil. Danach sprichst du einfach mit ihr, zum Beispiel so:

• „Beschreib das Design meiner Seite und mach es dann ruhiger.“
• „Mach die Überschriften fetter und eine Stufe größer.“
• „Probier auf der dunklen Seite einen dunkleren Akzent und behalt ihn nur, wenn die Links gut lesbar bleiben.“
• „Nimm das zurück.“

Die KI kann jede Einstellung lesen und weiß, was sie bedeutet. Sie ändert Einstellungen Schritt für Schritt (jeder lässt sich zurücknehmen), probiert eine Änderung aus, bevor sie sie behält, schaut sich die Seite an und prüft Kontrast, Schriftgröße, Zeilenlänge und Zeilenabstand. Was sie nicht kann: von sich aus veröffentlichen. Erst wenn du „Publish my design“ sagst, wird der Look zu einem Stil, den deine Besucher:innen sehen. Sie kommt nur an die Design-Einstellungen heran und spricht nur mit deiner eigenen Website.

3. Ohne WordPress

Vibetiles läuft auch auf einer einfachen HTML-Website. Das ganze Panel ist ein Ordner: kein Server, kein Build-Schritt, kein Konto. Die Anleitung ist für deine KI geschrieben, du kopierst also nur einen Satz hinein.

Für eine neue Website:

Build my website with Vibetiles inside. Instructions: https://github.com/manuelesposito/vibetiles-html

Für eine Website, die du schon hast:

Add Vibetiles to my website. It must look exactly as before until someone turns a dial. Instructions: https://github.com/manuelesposito/vibetiles-html

Deine Website sieht danach genauso aus wie vorher. Öffne sie einmal mit ?design am Ende der Adresse, dann bekommst du das große Panel, deine Besucher:innen das kleine. Wenn du zufrieden bist, sag deiner KI „Publish my design“, und sie schreibt den Stil in vibetiles/site.js.

Und der Datenschutz?

Keine Statistik, keine Konten, nichts wird nach Hause geschickt. Die Schriften sind nicht im Plugin enthalten: Wenn du eine zum ersten Mal auswählst, holt dein Server sie einmal von jsDelivr und legt sie in deinen Uploads ab. Deine Besucher:innen verbinden sich also nie mit einem Schriftendienst. Vibetiles speichert nur die Stile, die du zeigst. Wenn du das Plugin löschst, verschwinden Schriften und Stile mit, und dein Theme ist genau wie vorher.

Noch in der Beta

Wir nutzen Vibetiles hier jeden Tag, und es wird laufend besser. Es ist kostenlos unter der GPL, auf wordpress.org und auf GitHub. Natürlich ist noch nicht alles perfekt. Wenn dir mit deinem Theme etwas komisch vorkommt, sag mir bitte auf GitHub Bescheid. Hinweise zu einem bestimmten Theme helfen am meisten. Alle Links findest du auf der Vibetiles-Seite.

Vibetiles ist in Architrave groß geworden, und das gibt es jetzt auch auf wordpress.org. Mehr dazu auf der Architrave-Seite und im Release-Beitrag. Danke fürs Ausprobieren, ich freue mich auf dein Feedback!

v0 ist das KI-Werkzeug von Vercel. Man beschreibt in einem Satz, was man bauen möchte, und bekommt eine fertige Weboberfläche zurück: React-Code mit Tailwind CSS und daneben eine Vorschau, die man sofort ausprobieren kann.

Interessant finde ich den Design Mode. Statt den nächsten Prompt zu formulieren, klickt man ein Element an und ändert Abstand, Farbe oder Schriftgröße direkt im Ergebnis. Dazu lassen sich eigene Designsysteme anlegen, also Farben, Typografie und Stile, die in allen Projekten gelten. Das ist der Punkt, an dem so ein Werkzeug für Designer:innen wirklich brauchbar wird.

Ollama holt offene Sprachmodelle auf den eigenen Rechner: ein Befehl im Terminal lädt ein Modell aus der Bibliothek und startet es, auf macOS, Windows oder Linux. Andere Programme sprechen das Modell über eine Schnittstelle an, die sie schon von OpenAI kennen, deshalb lässt sich zum Beispiel Hermes Agent direkt daran anschließen. Open Source unter MIT-Lizenz.

Nous Research nennt Hermes Agent „The Agent That Grows With You“: ein Open-Source-Agent unter MIT-Lizenz, der sich Projekte und einmal gefundene Lösungen merkt. Er ist über Telegram, Discord, Slack, WhatsApp, Signal, E-Mail oder das Terminal erreichbar, plant Aufgaben in normaler Sprache und gibt größere Arbeiten an eigene Unteragenten ab. Es gibt eine App für macOS und Windows, auf Linux läuft er im Terminal.

Das Sprachmodell dahinter ist frei wählbar: Nous Portal und andere Cloud-Anbieter, oder über Ollama ein Modell auf dem eigenen Rechner. Dann bleibt die KI lokal.

Es gibt nur sehr wenige Jobs, bei denen ich keine KI finde, die es schneller und günstiger erledigt als du, sobald ich aufschreiben kann, was du den ganzen Tag machst. Du willst also einen Job, bei dem ich nicht aufschreiben kann, was du den ganzen Tag machst.

Ich habe „The Knot“ noch nicht gelesen, aber es steht auf meiner Leseliste und ist gerade zu meinem nächsten Buch geworden. Der Satz ist eine so gute Erinnerung daran, dass wir uns nicht länger hinter Beschäftigtsein verstecken können, und ehrlich gesagt fühlt sich das wie ein Geschenk an: Es ist unsere Chance, endlich aufzutauchen und die Arbeit zu machen, von der wir immer geträumt haben.

Mit Moog haben wir uns etwas getraut, das wir lange vermieden haben: ein Theme, das nicht zurückhaltend sein will. Die Schriften sind groß und kräftig, die Farben satt, die Abstände großzügig. Moog ist für Blogs gedacht, die eine eigene Handschrift haben und sie auch zeigen wollen, egal ob es um Kunst, Musik, Reisen oder das eigene Leben geht.

Das Theme ist vollständig für den Site-Editor gebaut. Es gibt keine Theme-Optionen und keinen Customizer mehr, alles, was du an Moog veränderst, veränderst du direkt in WordPress: die Kopfzeile, die Fußzeile, die Vorlagen für Beiträge, Seiten und Archive. Was du siehst, ist auch das, was deine Leser:innen sehen.

Stilvarianten statt Optionen

Der Kern von Moog sind seine Stilvarianten. Jede Variante ist eine vollständige Gestaltung aus Farbpalette, Schriftpaar und Abständen. Du wählst sie mit einem Klick unter Stile im Site-Editor, und die gesamte Website zieht sich um, ohne dass du eine einzige Vorlage anfassen musst. Eine Variante ist hell und ruhig, eine dunkel, eine bunt und laut. Welche zu deinem Blog passt, siehst du sofort in der Vorschau.

Natürlich musst du nicht bei den Varianten bleiben. Jede lässt sich weiter anpassen, du kannst einzelne Farben tauschen, andere Schriften wählen oder deine eigene Palette anlegen. Die Varianten sind Startpunkte, keine Grenzen.

Vorlagen und Vorlagenteile

Moog bringt Vorlagen für die Startseite, einzelne Beiträge, Seiten, Archive, die Suche und die 404-Seite mit. Dazu kommen mehrere Vorlagenteile für Kopf- und Fußzeile, die du im Site-Editor austauschen und bearbeiten kannst. Beitragsbilder, ein eigenes Logo und ein Website-Icon werden wie gewohnt unterstützt.

Moog ist kostenlos und quelloffen. Du findest das Theme im Verzeichnis auf WordPress.org und den Code auf GitHub, wo wir uns über Fehlerberichte und Vorschläge freuen.

Mugistore ist ein Theme für Shops, die nicht wie ein Warenhaus aussehen wollen. Wir haben es für kleine Läden mit einer überschaubaren Auswahl gestaltet: eine Rösterei mit zwölf Kaffeesorten, ein Teeladen, ein Label für Naturkosmetik, eine kleine Modemarke. Das Design ist ruhig, modern und hält sich zurück, damit die Produktfotos den Ton angeben.

Das Theme setzt auf WooCommerce und die neuen WooCommerce-Blöcke. Shop-Seite, Produktseite, Warenkorb und Kasse sind Vorlagen im Site-Editor, die du wie jede andere Seite bearbeitest. Mugistore ist damit eines unserer ersten Themes, bei dem der komplette Shop ohne Theme-Optionen auskommt.

Für den Site-Editor gebaut

Alle Vorlagen und Vorlagenteile von Mugistore werden im Site-Editor bearbeitet. Kopfzeile mit Warenkorb-Symbol, Fußzeile mit Zahlungsinformationen, die Startseite mit Produktgruppen und einem Bereich für Aktionen, alles ist aus Blöcken gebaut und lässt sich verschieben, ersetzen oder entfernen. Farben und Schriften stellst du unter Stile ein und bekommst sofort eine Vorschau.

Mugistore bringt Muster für typische Shop-Bereiche mit: einen Hero mit Produktfoto, eine Reihe mit ausgewählten Produkten, eine Vorstellung des Ladens, einen Bereich für die Newsletter-Anmeldung. Die Muster fügst du auf jeder Seite ein und passt sie mit deinen Inhalten an.

Was du brauchst

Mugistore benötigt das WooCommerce-Plugin und unser Aino Blocks Plugin. Aino Blocks liefert einige Layout-Blöcke, auf denen die Muster des Themes aufbauen. Beide Plugins sind kostenlos.

Das Theme ist kostenlos und quelloffen. Du findest es auf WordPress.org und den Code auf GitHub, wo wir uns über Fehlerberichte und Vorschläge freuen.

SolarOne ist ein Theme für Agenturen, Studios und Freiberufler:innen, die ihre Arbeit und ihr Team vorstellen wollen. Es ist klar und hell gestaltet, mit viel Weißraum und großen Überschriften, und lässt sich in wenigen Schritten zu einer vollständigen Unternehmenswebsite ausbauen.

Das Besondere an SolarOne ist die Arbeitsweise. Statt fertiger Seitenvorlagen mit Optionen bringt das Theme eine Sammlung von Mustern mit, die du wie Bausteine zusammensetzt: ein Hero mit Aussage und Bild, eine Vorstellung der Leistungen, eine Galerie mit Projekten, ein Bereich mit dem Team, Kundenstimmen, ein Kontaktbereich. Jede Seite entsteht aus diesen Bausteinen im Editor.

Für den Site-Editor gebaut

Kopfzeile, Fußzeile und alle Vorlagen für Seiten, Beiträge und Archive werden im Site-Editor bearbeitet. Farben und Schriften stellst du unter Stile ein. SolarOne bringt eine helle und eine dunkle Palette mit, du kannst aber auch eigene Farben anlegen und die Schriften austauschen.

Die Muster von SolarOne bauen auf den Layout-Blöcken unseres Aino Blocks Plugins auf, vor allem auf dem Grid-Block und dem Advanced-Container-Block. Damit lassen sich Spalten, Abstände und Hintergründe genauer einstellen als mit den Standard-Blöcken.

Was du brauchst

SolarOne benötigt das kostenlose Aino Blocks Plugin. Ohne das Plugin werden die Muster des Themes nicht vollständig angezeigt.

Das Theme ist kostenlos und quelloffen. Du findest es auf WordPress.org und den Code auf GitHub, wo wir uns über Fehlerberichte und Vorschläge freuen.

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.

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.

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.

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.

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.

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

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

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. 

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. 

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

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.

Alle Bereiche einer WordPress-Webseite (also auch der Header, Footer, die Suche oder das Blog-Archiv) können jetzt in einem visuellen Editor bearbeitet werden und nicht nur wie bisher üblich Seiteninhalte und Blogbeiträge.

Bisher waren wir es schon gewohnt, Seiten und Blogbeiträge mit Blöcken zu bauen. Jetzt kannst du zusätzlich jeden Bereich deiner WordPress-Website im visuellen Block-Editor bearbeiten, ohne dass du dazu ein Page-Builder Plugin benötigst.

Full Site Editing

Um auf die neuen Bereiche zuzugreifen, kannst du in einem Block-Theme den Editor (Beta) unter Design in deinem WordPress Admin-Menü öffnen. Der neue Editor sieht genauso aus, wie der Block-Editor, den du von Seiten und Beiträgen gewohnt bist. Beim ersten Öffnen siehst du die Startseite, die du unter Einstellungen/Lesen angeben kannst. Wenn du keine statische Startseite nutzt, wird der Blog-Index angezeigt.

Du kannst auch eine Übersichtsliste aller zu bearbeitenden Bereiche (Templates und Template-Teile)  im Editor aufrufen. Dazu klickst du oben links auf das WordPress Logo oder auf das Logo deiner Webseite, solltest du ein Favicon auf deiner Webseite nutzen.

Templates und Template-Teile

Wenn die Editor-Sidebar geöffnet ist, kannst du die Listen aller Templates und Template-Teile eines Block-Themes öffnen. Du kannst auch eigene Templates und Template-Teile erstellen.

Stile

Stile sind ein weiterer neuer Bereich von Block-Themes. Stile ersetzt viele Bearbeitungsoptionen, die bei klassischen Themes im Customizer zu finden waren. Du kannst die Optionen unter Stile öffnen, indem du oben rechts im Editor das kleine halb helle und halb dunkle Kreis-Icon anklickst.

In den Stile-Einstellungen kannst du die Schriften und Farbpaletten des Themes und die Standard-Einstellungen aller aktiven Blöcke anpassen.

Derzeit ist Stile ebenfalls noch in der Beta-Version. Es wird meiner Ansicht mit weiteren Updates noch ein sehr hilfreiches und mächtiges WordPress-Tool werden. Zum Beispiel können eigene Stile-Einstellungen dann auch exportiert und in eine andere WordPress-Installation importiert werden.

Was ist der Unterschied zwischen Full Site Editing und WordPress Page Buildern?

Ein Block-Theme mit den neuen Full Site Editing Features zu nutzen, statt sich auf ein Page Builder-Plugin zu verlassen hat den großen Vorteil, dass man auf ein Core Feature von WordPress setzt. So macht man sich nicht von einem externen WordPress-Plugin abhängig. 

Viele Page Builder Plugins liefern außerdem sehr viel mehr Optionen, als eine WordPress-Webseite in den allermeisten Fällen benötigt. Das kann die Website-Performance verlangsamen und die vielen Optionen sind für Einsteiger meist unnötig kompliziert.

Bereit für die Zukunft von WordPress

Klar, derzeit sind die Optionen von Block-Themes und Full Site Editing noch reduziert. Aber das wird sich mit jedem WordPress-Update ändern. WordPress bietet mit Block-Themes erstmals eine eigene Core Lösung für viele der Probleme an, die WordPress-Nutzer in den letzten Jahren zum Straucheln gebracht haben. Meiner Ansicht nach ist es sinnvoll, gleich zu Beginn auf die neuste Technik zu setzen, die in WordPress zur Verfügung steht.

Wir arbeiten jetzt seit Mitte letzten Jahres mit Block-Themes, als diese erstmals und anfangs noch mithilfe des Gutenberg-Plugins entwickelt werden konnten. Seitdem hat sich schon so unendlich viel getan und es ist beeindruckend, wie viele er anfänglichen Probleme gelöst werden konnten und wie viel besser das Arbeiten mit Block-Themes geworden ist.

Fazit

In diesem Moment ist ein Block-Theme vielleicht noch nicht die geeignete Lösung für jede WordPress-Webseite. Ich würde im Moment zum Beispiel noch etwas warten, einen größeren WooCommerce-Shop auf ein Block-Theme umzuziehen.

Dennoch ist es sinnvoll, mit der Entwicklung mitzugehen und sich nicht vor neuem zu verschließen. So kann man Schritt für Schritt mehr über die neuen Features lernen. Für Business-Webseiten, Portfolios, Blogs und Magazin-Webseiten sind Block-Themes auf jeden Fall schon sehr gut geeignet.

Um Feedback zu geben, kannst du dem WordPress Community Slack-Kanal #fse-outrech-experiment folgen. Auf Learn WordPress und auf unserem YouTube-Kanal gibt es hilfreiche Tutorials und Workshops.

Wenn du Fragen zum Thema Block-Themes und FSE hast, schreib mir einen Kommentar oder melde dich auf Twitter. Ich freue mich, von dir zu hören.