hobbehollands.nl - eine Fotogalerie

Twentig – der perfekte Partner für Twenty Twenty

Geschrieben

in ,

| 13 Kommentare

Veröffentlicht am

|

Aktualisiert am

Das Plugin Twentig erweitert die klassischen Standardthemes Twenty Twenty und Twenty Twenty-One um zahlreiche Optionen, die in diesem Beitrag beschrieben werden.

Twentig wird ständig weiter entwickelt und so gibt es inzwischen noch viele weitere Optionen und hunderte von Block-Vorlagen, die in diesem Beitrag nicht oder nur teilweise erwähnt werden.

Inhaltsverzeichnis

Das Plugin Twentig

Das Plugin Twentig gibt es kostenlos im Pluginverzeichnis:

Hier klicken, um den Inhalt von WordPress.org anzuzeigen.
Erfahre mehr in der Datenschutzerklärung von WordPress.org.

Das Plugin erweitert WordPress um zahlreiche Optionen und Blockvorlagen

Zum Ausprobieren dieses Beitrags sollten Sie Twenty Twenty als Theme aktivieren, und dann Twentig installieren. Am besten in einer Test-Installation mit TasteWP oder Local.

Twentig und Block-Themes

Dieser Beitrag schildert den Einsatz von Twentig im klassischen Standardtheme Twenty Twenty.

Twentig arbeitet auch sehr gut mit Block-Themes wie Twenty Twenty-Three zusammen, bietet dabei aber andere Möglichkeiten als in diesem Beitrag beschrieben.

In Ihrer Einführung zu Twenty Twenty schrieb Ellen Bauer von Elmastudio zu den Farb-Optionen von Twenty Twenty im Customizer:

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.

Einführung in das neue Standardtheme Twenty Twenty von Elmastudio.de

Twentig ermöglicht das. Im Bereich Farben gibt es im Bereich Twentig Colors zwei neue Optionen:

  • Die erste Option erweitert die Hintergrundfarbe, sodass der Titel der Seite oder des Beitrags optisch nicht mehr zum Header, sondern zum Inhaltsbereich gehört. Dabei wird auch gleich das Padding entsprechend angepasst.
  • Die zweite Option, Footer Background Color, ermöglicht es, dem Footer eine eigene Hintergrundfarbe zu geben.

Die folgenden Abbildungen zeigen Twenty Twenty ohne und mit diesen Optionen.

Anpassungen für das Cover Template

In meinem Beitrag »Gestatten: Twenty Twenty« habe ich beschrieben, wie man mit der Option Cover Template das Beitragsbild bildschirmfüllend darstellen kann. In den Kommentaren unter dem Beitrag gab es dazu folgenden Kommentar:

Hallo Peter,
wie bekommt man bekommt den „doofen“, nach unten zeigenden Pfeil noch weg?

Kommentar von Ester Phalcard

Dieser »doofe Pfeil« nennt sich »scroll indicator«, und mit Twentig ist das kein Problem, denn im Customizer-Bereich Cover Template gibt es jetzt die Twentig Settings:

  • Content Vertical Alignment ändert die vertikale Ausrichtung des Inhalts auf Wunsch von bottom nach middle.
  • Page bzw. Post Cover Height steht normalerweise auf Full. Der Scroll Indicator zeigt dabei an, dass unter dem Bild noch Inhalt kommt.
  • Die Option Display scroll indicator on page cover template entfernt auf Wunsch den »doofen Pfeil«.
  • Die Option Medium verkleinert das Cover-Bild, sodass der darunterstehende Inhalt im Viewport sichtbar wird. Der Pfeil wird dabei automatisch entfernt.

Die »Twentig Theme Options«

Im Bereich Twentig Theme Options verbergen sich die leicht zu übersehenden Highlights von Twentig. Die folgende Abbildungen zeigt die Bereiche im Überblick, unter dem Bild werden diese Optionen detaillierter vorgestellt.

Customizer - Twentig Theme Options - Übersicht
Die Bereiche der Twentig Theme Options auf einen Blick

1. Optionen für das »Site Layout«

Der Inhaltsbereich von Twenty Twenty hat standardmäßig eine Breite von 580px, was viele Webdesigner schlicht und einfach zu schmal finden.

Klicken Sie auf diesen Platzhalter, um den Inhalt von Twitter anzuzeigen.
Erfahre mehr in der Datenschutzerklärung von Twitter.

In den Twentig Theme Options ist das kein Problem. Im Bereich Site Layout gibt es dazu drei einfache Optionen:

  • Narrow (Default) sind 580px (definiert als 58rem)
  • Medium sind maximal 700px (70rem)
  • Wide setzt die maximale Breite auf 800px (80rem)

Das spart schon mal eine Menge zusätzliches CSS.


2. »Fonts« – Optionen zur Schriftgestaltung

Die Überschriften finde ich in Twenty Twenty noch okay, aber die Serif-Schriftart für den Fließtext – da kann ich mich nicht mit anfreunden.

Twentig bietet im Bereich Fonts ganz bescheiden und fast versteckt phantastische Optionen an, die in verschiedenen Gruppen aufgeteilt sind:

  • Presets
  • Body
  • Headings
  • Secondary Elements (meta, footer, button, caption, input …)
  • Site Title
  • Menu

In jeder Gruppe gibt es diverse Optionen für Schriftart, Schriftgröße, Zeilenhöhe und mehr.

Die Presets sind diverse Kombinationen aus Schriftarten für Überschriften und Fließtext, aber so toll diese Kombinationen sind – für den Fließtext bin ich bin Fan von System UI, also der Idee, auf jedem Gerät die Systemschriftart zu benutzen, und selbst das ermöglicht Twentig in seine Font-Optionen.

Customizer - Twentig Theme Options - Fonts
Die Font-Gestaltung mit den Optionen von Twentig

Update. Google Fonts lokal hosten

Inzwischen kann man die von Twentig verwendeten Google Fonts auch auf dem eigenen Webspace (= lokal) hosten. Damit hat man das die phantastische Auswahl der Google Fonts und erfüllt gleichzeitig die Bedingungen der DSGVO.


3. Optionen für den »Header«

Für den Kopfbereich gruppiert Twentig seine zahlreichen Optionen wie folgt

  • Layout
    • Header Layout ermöglicht es, die Header-Ausrichtung zu ändern.
    • Header Width (mit einer Option für einen Sticky Header)
    • Header Decoration kümmert sich um den unteren Abschluss des Headers und bietet die Optionen border und shadow.
  • Menu
    • Menu Item Spacing definiert den Abstand zwischen den Menüpunkten.
    • Menu Link Color ermöglicht die Auswahl von Primary, Secondary oder Text Color für die Links im Menü.
    • Menu Hover/Active Link definiert die Hervorhebung des aktiven Links.
  • Toggle Buttons kann die drei dicken Menüpunkte durch einen klassischen Dreistrich-Hamburger ersetzen und auf Wunsch die Beschriftungen Menü und Suche ausblenden.
Customizer - Twentig Theme Options - Header
Die Optionen von Twentig für den Header

Auch für den Footer gibt es zahlreiche Optionen, und Twentig ermöglich sogar die individuelle Anpassung des Copyright-Hinweises.

  • Layout
    • Bottom Footer Layout ermöglicht es, dass Footer-Menü in die Fußzeile unter die Widgets zu holen.
    • Widgets Layout kann die beiden Widgetbereiche übereinander darstellen
    • Footer Width definiert die Breite des Fußbereiches.
  • Styles hat zwei selbst erklärende Optionen:
    • Footer Text Scale
    • Footer Link Color
  • Credit ermöglicht die Anpassung des Copyright-Hinweises.

Mit der Option Credit > Custom kann man sogar einen komplette eigenen Inhalt hinterlegen, inklusive Links zu Datenschutz und Impressum (was eventuell sogar den Einsatz eines Child-Themes überflüssig machen würde).

Customizer - Twentig Theme Options - Footer
Die Optionen von Twentig für den Footer

Update. Neue Optionen für Footer-Layouts.

Twentig hat inzwischen diverse neue Footer-Layouts im Angebot, sodass man Links wie Datenschutz und Impressum ganz komfortabel als eigenes Menü einbauen kann und nicht mehr manuell den Code im Custom Footer Credit anpassen muss.


5. Die Theme-Options für »Page«

Der Bereich Page ermöglicht Anpassungen für die Darstellung der Beitragsbilder (Featured Image Layout) und der Suchergebnisseite (Search Results Layout).

Außerdem können Sie eine selbst erstellte Seite auswählen, die WordPress für den bekannten 404-Fehler nutzt, wenn ein Beitrag oder eine Seite nicht gefunden werden konnte.


6. Die »Blog«-Optionen sind der Hammer!

Die Optionen im Bereich Blog ermöglichen es, die Beitragsseite (Posts Page & Archives) und die Einzelansicht für Beiträge (Single Post) sehr unterschiedlich zu gestalten.

Mit wenigen Klicks arrangieren Sie so die Beiträge auf der Beitragsseite z. B. als mehrspaltiges Grid im Kartenlayout.


7. »Additional Settings«: Trennlinien, Buttons und Icons

Der letzte Bereich nennt sich Additional Settings und enthält zwei Gruppen:

  • Elements Styles
    • Separator Style für die Trennlinien
    • Button Shape für den Block Buttons
    • Button Hover Style
    • Button Uppercase
  • Socials Icons
    • Social Icons Locations
    • Social Icons Style

Ich mag die Trennlinien (Separator), die Buttons und die Social Icons von Twenty Twenty, aber wer will, kann deren Layout hier anpassen.

Fazit: Twentig macht Twenty Twenty perfekt

Die Customizer-Optionen von Twentig erweitern Twenty Twenty so, dass es für kleinere Websites zu einem wirklich praxistauglichen Theme wird.

Twentig wird regelmäßig aktualsiert und hat inzwischen noch viele weitere Features, sodass es inzwischen insgesamt drei Gebiete, auf denen Twentig die Twenty-Standard-Themes erweitert:

  1. Zusätzliche Optionen im Customizer
  2. Zusätzliche Optionen bei vielen Standardblöcken
  3. Viele gute fertige Blockvorlagen zum Einfügen im Block-Editor

Das geniale dabei ist, dass Twentig für die Blockvorlagen nur die Standardblöcke von WordPress verwendet. Damit sind die Vorlage absolut zukunftssicher und funktionieren nach dem Einfügen auch ohne Twentig.

Und ganz nebenbei: Die Arbeit mit dem Block-Editor an diesem Beitrag hat wirklich Spaß gemacht. Blöcke beim Schreiben einfügen mit /blockname, mehrere Blöcke markieren (z. B. Trennlinie, Überschrift und Absatz), duplizieren und dann einfach die Kopie ändern und vieles mehr. Gut Ding will echt Weile haben, aber dieser Block-Editor wird langsam ist inzwischen ein gut Ding.

Die Macher von Twentig

Wer steckt hinter Twentig? Das Plugin ist immer noch gratis, und nirgendwo eine Premium-Version in Sicht. Beinah zu schön, um wahr zu sein.

Auf der Website twentig.com gibt es eine About-Seite, auf der die beiden Macher von Twentig sich kurz vorstellen:

Started in 2020, Twentig is the brainchild of sibling co-founders Diane and Yann Collet. We are based in Paris. When we are not at our desks, you can find us at the terrace of a café or cycling across the city.

About Twentig

Und falls Sie Twentig auf Ihrer Website einsetzen: unten im Footer von Twentig.com gibt es den Link Donate, mit dem Sie Diane und Yann Collet via Paypal eine Spende zukommen lassen können. Einmalig oder monatlich.

Für Twentig gilt leicht abgewandelt der schöne Satz aus einer uralten Werbung: Wenn einem so viel Gutes widerfährt, das ist schon eine Spende wert.

Avatar von Peter Müller

Kommentare

13 Antworten zu „Twentig – der perfekte Partner für Twenty Twenty“

  1. Hallo Peter, vielen Dank für diesen nützlichen Überblick!
    Wäre ja wirklich spannend zu erfahren, wer dahinter steckt. Der/die Plugin-Author*in hält sich ja ein wenig bedeckt…

  2. Hallo,
    mich stört die Lupe für die Suche im Header, wo kann ich diese entfernen?

    Grüße

    1. Die Suchfunktion kann Twenty Twenty schon von Haus aus deaktivieren:

      Gestatten: Twenty Twenty – Theme-Optionen

      Dort gibt es die Option »Suchfeld im Header anzeigen«. Wenn Sie die Option ausstellen, ist die Suchfunktion und somit auch die Lupe weg.

      Falls Sie die Suchfunktion behalten und nur die Lupe entfernen, wird die Sache komplizierter, aber die erste Frage wäre dann, was Sie denn anstelle der Lupe gerne hätten.

  3. […] sondern von Themes oder dazugehörigen Block-Sammlungen. Da suche ich dann auch öfter mal was aus Twentig in GenerateBlocks oder umgekehrt. Aber ich bin weit davon entfernt, schon alles zu nutzen, was […]

  4. Servus zusammen!

    Ich hoffe ich bin nicht zwei Jahre zu spät mit (m)einer Frage? 😉

    Nachdem ich mittlerweile weitgehend alles an meiner Seite zurecht gebastelt habe, wie ich es mir vorstelle, gibt es leider noch ein Problem, für das ich einfach keine Lösung finde. Und zwar habe ich auf allen Seiten das „Cover-Template“ aktiviert. Am Desktop-Rechner sieht alles so aus, wie es sein soll. Auf dem Mobiltelefon allerdings nicht, zumindest nicht in Browser 1 (Safari) und Browser 2 (Chrome). Das Problem, dass das Hintergrundbild, bzw. das Cover-Template seitlich zu breit ist und nicht automatisch angepasst wird, habe ich mit „width: 100dvw“ und „height: 100dvh“ gelöst. Leider werden jedoch der „entry-title“ und der „scroll indicator“ weiterhin nicht im „viewport“ angezeigt, sondern unterhalb des sichtbaren Bereichs. Bei zweizeiligen Titeln sieht man wenigstens vom oberen Teil ein wenig, bei einzeiligen Überschriften gar nichts. In Browser 3 (Firefox) und Browser 4 (Edge) passt alles… das Bild wird komplett angezeigt, genauso wie der Titel und der Pfeil. Was kann ich hier machen?

    Ich würde mich sehr über eine Lösung freuen! Vielen Dank schon mal.

    1. Nein, du bist nicht spät. Twenty Twenty ist alive and kicking und auch heute noch eine gute Theme-Wahl 😉

      Ich vermute mal, dass das ein Webkit-Bug bezüglich der Angabe von 100vh ist: der Viewport (100vh) ist höher als der sichtbare Bereich, und Bedienelemente des Browsers überlagern einen Teil der Seite.

      Falls diese Beschreibung passt, google mal nach „webkit bug 100vh“ und schau dir die Beiträge mit möglichen Lösungen an.

      Ein gezieltes -webkit-fill-available- für die height oder min-height für bestimmte Elemente wie html oder body könnte helfen.

  5. Hallo Peter!

    Vielen Dank für deine Beiträge, es gibt gar nicht so viele gute in deutscher Sprache für Twentig. Ich teste es gerade für zwei neue Blogs gleichzeitig aus und habe sie mit Twentig recht rasch in zwei verschiedenen Designs erstellen können. Ich überlege auch GeneratePress einmal auszuprobieren. Darauf bin ich erst in deinem Blogartikel aufmerksam geworden. Da du beide kennst, würde mich brennend interessieren wie du sie im Vergleich bewerten würdest:

    Welches ist in der Mobilen Ansicht schneller – TwentTwenty One mit Twentig oder GeneratePress?

    Dies interessiert mich, weil ich eine Avada-Seite betreibe die ich in der wichtigen mobilen Ansicht trotz WP Rocket nicht mehr wirklich schnell hinbekomme. Daher möchte ich für künftige Seiten von vorneherein auf ein Theme mit einer schnellen Ladezeit in der Mobilansicht setzen.

    Was erwartest du für die Zukunft von TwentTwenty One plus Twentig im Vergleich zu GeneratePress? Kann es sein dass das kostenlose Plugin nach drei bis vier Jahren nicht mehr funktioniert?

    Und würdest du es als aufwendig einschätzen, von Twentig zu GeneratePress zu wechseln, falls man erstmal für 20 bis 30 Beiträge auf das kostenlose Theme setzt?

    Ich freue mich sehr über deine Meinung dazu,
    viele Grüße 🙂
    Tom

    1. Freut mich, dass dir der Beitrag gefällt. Zu deinen Fragen:


      1. Welches ist in der Mobilen Ansicht schneller – TwentTwenty One mit Twentig oder GeneratePress?

      GeneratePress ist eines der wohl schnellsten WP-Themes überhaupt, aber im Vergleich zu Avada dürfte auch TT1/Twentig deutlich schneller sein. Wobei es natürlich nicht nur auf das Theme, sondern auch auf Dinge wie Hosting und Inhalte ankommt.


      2. Kann es sein dass das kostenlose Plugin [Twentig] nach drei bis vier Jahren nicht mehr funktioniert?

      Natürlich kann das sein. Aber das gilt für jedes Plugin und für jedes Theme, egal ob kostenlos oder nicht.

      Für Twentig kann man aber z. B. mit einer Spende seinen Teil dazu beitragen, dass es weiter besteht. Einfach auf twentig.com unten im Footer auf Donate klicken.


      3. Und würdest du es als aufwendig einschätzen, von Twentig zu GeneratePress zu wechseln, falls man erstmal für 20 bis 30 Beiträge auf das kostenlose Theme setzt?

      Twentig nutzt ja nur Standardblöcke von WordPress, aber du wirst die 20 bis 30 Beiträge auf jeden Fall checken und wahrscheinlich neu durchgestalten müssen. Wie aufwändig das ist, kommt auf die Inhalte an.

      1. Super, vielen Dank für die Antwort!

        Gibt es denn vielleicht ein kostenloses Caching Plugin, mit dem sich TT1 + Twentig beschleunigen ließe? Ich weiß, dass es da mehrere gibt, aber nicht alle helfen für gewöhnlich bei jedem Theme. Ich mag den supereinfachen Aufbau von Twentig, mit etwas mehr Speed wäre es (für meine einfachen Blog-Zwecke) wirklich nicht zu schlagen!

        1. Cache-Plugins helfen unabhängig vom Theme, also auch bei TT/TT1 und Twentig.

          Wir haben hier auf der Website lange Zeit Autoptimize & Cache Enabler eingesetzt.

          Diese Kombination wurde irgendwann von WP Fastest Cache abgelöst.

          Aktuell ist hier WP Optimize aktiv. Die Benutzeroberfläche ist deutlich einsteigerfreundlicher als z. B. bei Autoptimize oder WP Fastest Cache, die Cache-Funktion ist okay und das Plugin hat auch noch andere Funktion wie Datenbankbereinigung und Bildkomprimierung.

          Beim Ausprobieren von Cache-Plugins achte unbedingt darauf, dass immer nur eins zur Zeit aktiviert ist.

  6. Avatar von Babette Sponheuer
    Babette Sponheuer

    Hallo Peter,
    über Dein Buch „Einstieg in WordPress 6“ bin ich auf diese Webseite gekommen. Ich gestalte aktuell meine erste eigene Webseite, bin also absolute Anfängerin. Ich nutze dafür das 2020 Theme, wie diese Website hier und habe ebenfalls die Systemschrift U1 von Twentig für den Fließtext übernommen, da mir ebenfalls die Standardschrift mit Serifen nicht gefiel.
    Meine Frage ist nun, ob es sich hier um Google-Fonts handelt und wenn ja, wie ich die Fonts datenschutzkonform einbinde, damit ich keine Abmahnungen erhalte?
    Herzlichen Dank und viele Grüße
    Babette

    1. Hallo Babette,
      »System UI« heißt die Schrift, mit einem „i“, und das UI steht für »User Interface« (Benutzerschnittstelle). Das bedeutet, dass jedes Gerät seine Systemschrift nimmt, die es sowieso an Bord hat.

      Das ist eine sehr gute Option, denn es ist nicht nur datenschutzkonform, sondern auch sehr schnell, weil die Schriftart nicht erst aus dem Internet geholt werden muss.

Schreibe einen Kommentar

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