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!

17 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.

  9. Einfach super erklärt, hat mir einige Arbeit und Einfindugszeit abgenommen danke.

    • Hallo Florian,

      vielen herzlichen Dank für dein tolles Feedback, es freut mich sehr, das die Übersicht hilfreich für dich war.

      Viele Grüße,
      Ellen

  10. Danke für die ausführliche Beschreibung des Themes. Ich bin auf der Suche nach einem sauberen, technischen einwandfreien Theme ohne großes Schicki-Micki oder optische Features. Solche Basic Themes gefallen mir eigentlich gut, sahen aber selbst beim simplen Aufsetzen noch verbesserungsbedürftig aus. Aber ich schau mir die Vorlage mal genauer an.

  11. Hallo Ellen, danke für die schöne Einführung.

    „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.“

    Da bin ich derselben Meinung! Ich habe die neuen Gestaltungsmöglichkeiten jetzt zum ersten Mal kennengelernt (Gutenberg?) und bin durchaus beeindruckt (nach x Jahren – als Laie- mit WordPress; das ist doch ein ziemlicher Fortschritt, der den Nutzern sehr entgegen kommt). Aber auch mich irritiert dieser Widerspruch, wie flexibel, modern, schick, nutzerfreundlich diese ganzen Blöcke und Layout-Techniken sind, während die Theme an und für sich zwar von vornherein zwar irgendwie gut aussieht, aber in ihren elementaren Parametern total steif ist: Ränder ändern? Einseitige Startseite ohne Scrollen? Auf der statischen Startseite freien Elemente mittig platzieren? Überschriften anders formatieren? Fußnoten platzsparender einrichten? – Alles unmöglich.

    Eigentlich absurd, dass diese sehr flexible und wandelbare Theme bei diesen Grundlagen so „unberührbar“ ist. Und für mich („vor allem wenn man sich nicht mit CSS auskennt“, wie du oben schon sagst) reichlich mühsam.

    Stefan (der für sein Kunstprojekt Moka verwendet)

    • Hallo Stefan,

      herzlichen Dank für deinen Kommentar, ich freue mich über dein positives Feedback zu Gutenberg. Eventuell kannst du dein paar der angesprochenen Funktionen über Block-Plugins oder das Editor Kit Plugin umsetzen.

      Ich deine das 2020 Theme war nur ein Anfang, in den kommenden Monaten wird es mit den Block-Themes erst so richtig los gehen und wir werden immer mehr spannende neue Gestaltungsmöglichkeiten bekommen.

      Der Umstieg von bisherigen Themes zu neuen Block-Themes ist für Theme-Entwickler doch sehr groß und viele Optionen des Editors sind noch neu oder in der Entwicklung (also noch nicht 100% stabil). Daher geht alles etwas langsam voran und wir befinden uns mit Themes in einer großen Übergangsphase. Wir sind aber super gespannt, wie sich Themes und die Möglichkeiten der Gestaltung in WordPress in der kommenden Zeit ändern wird. Ich werde auf jeden Fall so viel ich kann über neue Features und Optionen hier auf dem Blog und auf meinem YouTube-Kanal berichten :)

      Viele Grüße,
      Ellen

  12. Wenn ich was zu WordPress wissen will finde ich die Antwort meistens auf eurer Seite. Ich lese seit Jahren immer wieder Artikel und habe auch schon Themes gekauft. Jetzt wollte ich einfach mal Danke sagen! Liebe Grüße André

  13. Ich bin ein Fan des Twenty-Twenty Themes. Als Blog ist das schon genial, aber ich habe das letztens auch im Einsatz für ein Informationsportal gesehen. Wenn man es denn vernünftig umsetzt und mit den Blöcken umgehen kann, ist das schon fein: lightweight, easy zu bedienen und schick.

  14. Danke für die detaillierte Beschreibung. Seit ein paar Jahren führe ich einen kleinen Blog und habe mir gerade entschieden „WordPress persönlich“ zu investieren. Seit meinen Anfängen nutze ich das Theme Button und habe mir Schrecken gesehen, dass das gar nicht mehr angeboten wird … Einen „Umzug“ auf Twenty Twenty … traue ich mir irgendwie nicht zu. Was ist, wenn dann alles, was ich bisher gestaltet habe weg ist … Ihr seht ich bin Laie … alles was dahinter steckt, ist Bahnhof für mich … Ich schaffe es nicht mal ein Backup zu machen, damit ich, falls was daneben geht, wieder zurück kann … Ich hätte das Layout schon gerne ähnlich behalten … und meine Frage ist, was passiert eigentlich, wenn ich Button weiter nutze?

Schreibe einen Kommentar zu Khoa Nguyen Antworten abbrechen

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