Einführung in das neue Standard WordPress-Theme Twenty Twenty

WordPress 5.3 wurde vor ein paar Tagen veröffentlicht und zwar inklusive dem neuen Standard WordPress-Theme Twenty Twenty. WordPress 5.3 bringt etliche spannende neue Block-Features und Verbesserungenen im Editor allgemein mit sich. Ich werden noch einen extra Blogbeitrag machen, in dem ich über die wichtigsten Neuerungen berichte. Jetzt möchte ich aber erst einmal zeigen, was das neue Standard-Theme alles mit sich bringt.

Twenty Twenty ist nach der Vorlage des bereits existierenden Themes Chaplin von Anders Norén entstanden. Andres war auch der Teamleiter des Twenty Twenty Theme-Releases, was ich persönlich eine super Lösung finde. Es ist toll, dass ein Mitglied der WordPress-Community die Chance bekommen hat, das neue Standard-Theme zu gestalten. Ein bereits bestehendes Theme als Grundlage zu nehmen, macht außerdem Sinn. Das fertige neue Standard-Theme wirkt so sehr viel hochwertiger, obwohl der Zeitrahmen für die Entwicklung des Themes sehr knapp war.

Jetzt aber genug mit den Hintergrund-Infos. Lasst uns schauen, welche Theme-Features und Optionen das neue Standard-Theme hat:

Twenty Twenty und Gutenberg-Blöcke

Meiner Ansicht nach scheint der Hauptfokus des neuen Themes die saubere Integration aller WordPress Standard-Blöcke gewesen zu sein. Hier wurde harte Arbeit geleistet, das sieht man vor allem daran, dass auch die Style-Varianten der einzelnen Blöcke detailliert ausgearbeitet sind. Alle Blöcke sehen sowohl im Editor als im Frontend (also auf der Webseite) super sauber aus. Das macht das Schreiben im Editor mit Blöcken sehr viel spannender und man hat mehr kreative Möglichkeiten Inhalte zu gestalten. Du kannst zum Beispiel sehr schön mehrspaltige Blöcke, Zitate oder Bildergalerien anlegen.

Pullquotes im Twenty Twenty Theme.

3-spaltiger Spalten-Block mit Bild-, Paragraph- und Button-Block.

Für komplexere Seitenlayouts, z.B. für Business-Webseiten ist das Theme meiner Meinung nach noch nicht hundertprozentig geeignet. Ich denke aber, dass das derzeit auch nicht der Hauptfokus des Themes sein soll. Das Gutenberg-Projekt wird sich in den kommenden Monaten noch weiter entwickeln. Wenn dann eine komplette Seitenbearbeitung im Editor möglich ist (mit Header- und Footer-Element), wird eventuell das nächste Standard-Theme noch etwas besser für komplexere Designs geeignet sein.

Ich wollte auch ausprobieren, ob Twenty Twenty gut mit externen Blocks aus Plugins funktioniert. Dafür habe ich unseren Aino-Block „Hero“ im Theme eingesetzt und ich war ehrlich gesagt überrascht, wie gut das Ergebnis ohne jegliche Anpassung aussah.

Aino Hero-Block im Twenty Twenty Theme.

Seiten-Templates (Standard, Cover, gesamte Breite)

Eine der Highlights von Twenty Twenty sind die Seiten-Templates. Die Templates können für Seiten und Beiträge genutzt werden.

Das Standard-Template hat eine Inhaltsbreite von 580 Pixeln. Das Beitragsbild in diesem Seiten-Templates erscheint in der Breite von 1200 Pixeln unter dem Titel. Die Header-Hintergrundfarbe wird für den Hintergrund, der beim Seitenaufruf auf dem Bildschirm sichtbar ist. Darunter wird dann die allgemeine Hintergrundfarbe (oder das Hintergrundbild) genutzt.

Das Template „gesamte Breite“ funktioniert genau gleich, nur die Inhaltsbreite erweitert sich auf 1200 Pixel.

Es hat mich etwas verwundert, dass das Theme kein Seiten-Template bietet, das den Seitentitel verbirgt. So ist es schwierig komplett frei Seiten zu bauen, vor allem wenn man sich nicht mit CSS auskennt.

Das Cover-Template nutzt das Beitragsbild als Hintergrund. Es ist außerdem eine Overlay-Farbe sichtbar (diese kann im Customizer einmalig angepasst oder verborgen werden). Auch die Textfarbe des Titels, welcher sich jetzt auf dem Beitragsbild befindet, kann im Customizer unter „Cover Template“ angepasst werden.

Customizer Optionen

Twenty Twenty bieten einige hilfreiche Optionen im Customizer an. Ein schönes, neues Feature ist die Retina-Logo Option, um scharfe Logos im Header des Themes anzuzeigen. Du kannst dein Logobild doppelt so groß hochladen und dann über die Retina-Logo Option unter „Website-Informationen“ mit die gewünschte Größe einfügen.

Die Farb-Optionen sind überschaubar. Du kannst eine Hintergrundfarbe angeben, die standardmäßig weiße Header- und Footerfarbe ändern (ich hätte diese beiden Farben lieber separat ausgewählt) und eine eigene Primärfarbe auswählen.

Die Twenty Twenty Farboptionen im Customizer.

Beim Testen des Themes ist mir aufgefallen, dass es eventuell hilfreich wäre die Erklärung zur Primärfarbe standardmäßig anzuzeigen. So weiß man erstmal nicht für was die Primärfarbe eigentlich alles genutzt wird.

Unter Theme Optionen kannst du die Header-Suche verbergen. Zusätzlich kannst du Blogbeiträge auf dem Blog und auf Archivseiten nur mit einer Textvorschau anzuzeigen (statt des gesamten Textes).

Die nächste Option im Customizer ist für das Cover-Template.

Die Cover-Template Optionen im Customizer.

Hier kannst du wählen das Beitragsbild im Cover-Template zu fixieren, so dass es beim Scrollen stehenbleibt. Du kannst wie schon oben erwähnt auch die Farbe des Overlays und der Textfarbe, sowie die Deckkraft des Overlays wählen. Diese Auswahl kann allerdings nur einmalig gemacht werden und wird dann automatisch auf alle Cover-Templates verwendet.

Die nächste Customizer Option „Hintergrundbild“ kann meiner Ansicht nach besonders für WordPress-Einsteiger zu Verwirrung führen, da sie leicht mit dem Hintergrund-Bild des Cover-Templates verwechselt werden kann.

Die Option Hintergrundbild ist aber stattdessen für ein Bild im gesamten Webseiten-Hintergrund gedacht. Ich denke diese Option ist am ehesten für ein wiederholendes Musterbild geeignet.

Menüs im Theme

Da der Headerbereich momentan noch nicht mit Gutenberg-Blöcken gebaut werden kann, werden die Menüs noch im Customizer unter Menüs/Menü-Positionen ausgewählt. Twenty Twenty bietet ein Social-Media Menü (Position rechts oben im Footer), ein Footer-Menü (links oben im Footer, Untermenüs sind hier nicht möglich), ein mobiles Header-Menü und 2 Header-Menüs für große Screens an.

Die Unterteilung zwischen einem mobilen Header-Menü und zwei Desktop Header-Menüs empfinde ich persönlich eventuell etwas schwer verständlich. Vor allem da die übrigen Theme-Optionen sehr Einsteiger-freundlich gehalten ist.

Footer Optionen

Wie schon bei den Menü-Optionen erwähnt, befinden sich ein Footer- und ein Social Links-Menü im Footer. Darunter hat man noch zwei Widgetbereiche zur Auswahl. Der Zurück zum Anfang Button gefällt mir auch sehr gut.

Der Twenty Twenty Footer.

Bildgrößen

Beitragsbilder im Twenty Twenty Theme sind 1200 Pixel breit. Beitragsbilder im Cover-Template sollten mindestens 1980 Pixel breit sein. Die Bildmaße werden vom Theme automatisch erstellt, du solltest nur darauf achten, dass deine Beitragsbilder nicht zu klein sind, da sie sonst unscharf werden.

Fazit

Ich hoffe diese erste Übersicht über die Themeoptionen des neuen Standard-Themes hat dir gefallen. Gefällt dir das Design von Twenty Twenty? Welche Theme-Features gefallen dir besonders gut und was hättest du dir noch vom Theme gewünscht? Würdest du Twenty Twenty als Blog-Theme nutzen oder denkst du man kann mit dem Theme auch eine Business- oder Portfolio-Webseite erstellen? Ich würde mich sehr über dein Feedback freuen. Schreib mir doch einfach einen Kommentar!

8 Kommentare zu “Einführung in das neue Standard WordPress-Theme Twenty Twenty

  1. Vielen Dank für diesen ausführlichen Beitrag zu Twenty Twenty, der beim Kennenlernen des Themes wirklich mehr weiterhilft als die vielen „Hallo Twenty Twenty“-Artikel da draußen im Netz.

    Mal sehen, vielleicht stelle ich die Beispielsite zu meinem WP-Buch auch mal auf Twenty Twenty um. Besonders die Geschichte mit dem Cover-Template finde ich von der Umsetzung her auf den ersten Blick recht gelungen.

  2. Hallo Ellen,

    Das WordPress-Theme Twenty Twenty gefällt mir sehr. Ein tolles Theme für die Anwendung der Gutenberg-Blöcke. Und wie du schreibst, das Gutenberg-Projekt wird sich in den kommenden Monaten weiter entwickeln.

    Die «Handschrift» von Anders Norén ist unverkennbar. Toll. Ich habe erst kürzlich eine Website angelegt mit dem Theme «McLuhan» von Anders Norén. Auch hier, Gutenberg Support ist vollumfänglich gewährleistet.

    Kunst (Themes) und Technik (Gutenberg) – die Zukunft von WordPress ist vielversprechend.

    Danke für einen informativen und gelungenen Artikel.

    WordPress Standard-Blöcke

  3. Hallo Ellen,

    danke für deinen tollen Beitrag über das neue Standard-Theme von WordPress.

    Also ich finde das neue Twenty Twenty richtig gut gelungen. Ich hab es mir schon detailliert angesehen und ich muss gestehen, ich kann mir sogar vorstellen kleiner Business Seiten damit zu gestalten. Spannend ist auch, dass der Font als Variable-Font benutzt werden kann, was die Seite schneller laden lässt – was natürlich ein Argument für das Theme ist. Ich finde es wurden sich wirklich Gedanken gemacht! Ich werde es nutzen.

    Steffen

  4. Danke für die schöne Einführung ins neue Wp Standard-Theme. Ich habe es schon eine Weile eingesetzt und kam gleich gut damit klar. Für einfache Blogs wie meinen ist das Theme wirklich toll.

  5. Hallo Ellen,

    schön, dass Du Dich ausführlicher mit dem neuen WP-Standard-Theme „Twenty Twenty” befasstest und uns vor allem Deinen ersten Eindruck übermitteltest.

    Danke!

    LG, Bildermann

  6. Spricht eurer Meinung nach etwas dagegen, das Theme zu nutzen, wenn man eigentlich nie bisher und in Zukunft Gutenberg nutzen möchte?
    Danke für die Einschätzung :)
    Gruß Timo

  7. Hallo Ellen,
    danke für die Übersicht über das Theme, das ist wirklich hilfreich.

    Ehrlich gesagt, finde ich den Schieberegler für die Primary Color nicht gut. Nur die Hintergrundfarbe kann ich mit einem Hex Code einstellen;(
    Außerdem zerschießt mir das Theme einen langen Beitrag, zeigt nur noch die Foto-Blöcke an und nicht den Text dazwischen. Das war jetzt nicht so das Erlebnis, was mich motiviert dieses Theme zu verwenden. Bislang bin ich bei Dorayaki, wollte das aber in der nächsten Zeit ändern.

    Alles andere, was schon genannt wurde, ist großartig!

    Gruß, Irene

  8. Twenty Twenty ist mehr als ein voll ausgestattetes Theme und markiert einen wichtigen neuen Schritt in Richtung der zukünftigen Entwicklung der WordPress Editieroberfläche. Twenty Twenty verlässt sich im Wesentlichen auf den Blockeditor zur Bearbeitung und zum Layout des Inhalts und auf den Theme Customizer für die Kopf- und Fußzeile und zusätzliche Anpassungen.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *