Kategorien
Plugins Themes

Twentig – der perfekte Partner für Twenty Twenty

Das Plugin Twentig erweitert das Standardtheme Twenty Twenty um zahlreiche Optionen im Customizer: Farben, Schriften, Blogbeiträge im Rasterlayout und vieles mehr. Dadurch wird das Theme richtig praxistauglich.

Mit dem Release von WordPress 5.5 bietet das Plugin ein Update an, das die Standardblöcke um neue Optionen erweitert und hunderte von Block-Vorlagen zur Verfügung stellt, die mit einem Klick eingefügt werden können.

Das Plugin Twentig

Das Plugin Twentig ist kostenlos im Pluginverzeichnis auf WordPress.org:

Das Plugin bietet zahlreiche Optionen im Customizer

Zum Ausprobieren: Twenty Twenty als Theme aktivieren, und dann Twentig installieren. Am besten in einer lokalen Test-Installation, z. B. mit Local.

Getrennte Farben für Header und Footer

In Ihrer Einführung zu Twenty Twenty schrieb Ellen Bauer vom Themehersteller 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.

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

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

4. Optionen für den »Footer«

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

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) sowie die Auswahl einer eigenen Seite für 404-Fehler.


6. »Blog« – Beitragsseite und Einzelansicht gestalten

Die Optionen im Bereich Blog sind der Hammer! Getrennt für die Beitragsseite (Posts Page & Archives) und die Einzelansicht für Beiträge (Single Post) kann man den Blog sehr unterschiedlich gestalten.

Mit wenigen Klicks arrangieren Sie so die Beiträge als mehrspaltiges Grid.


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.

Die Website hobbehollands.nl basiert auf WordPress mit Twenty Twenty, diversen Optionen von Twentig zur Anpassung des Themes und dem Block Mason Gallery von den CoBlocks für die Bildergalerien. Die unterschiedlichen Farben für das Dropdown-Menü im Header macht Twenty Twenty automatisch.

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 ein gut Ding.


Update vom August 2020

Nach der Aktualisierung auf WordPress 5.5 bot Twentig ein Update auf Version 1.1 an. Gesagt, getan, und wow, das Update ist der Hammer! Ein kleiner Schritt in der Versionsnummer, ein großer im Funktionsumfang.

Das Plugin hat jetzt im WP-Admin ein eigenes Menü mit zwei Unterpunkten:

  • »Overview« zeigt auf einen Blick, was Twentig inzwischen so alles kann.
  • »Settings« erlaubt es, in der Block-Bibliothek von WP 5.5 die mitgelieferten »Block-Vorlagen« und das Durchsuchen des »Block-Verzeichnis« zu deaktivieren.

Warum sollte man diese in WP 5.5 neuen Funktionen deaktivieren? Weil man sie wahrscheinlich nicht benötigt:

  • Twentig erweitert die Standardblöcke von WordPress um zahlreiche neue Optionen.
  • Twentig bringt eine eigene Vorlagen-Bibliothek mit, die grob geschätzt Hunderte von auf den ersten Blick sehr brauchbaren Vorlagen enthält.

Somit gibt es also insgesamt drei Gebiete, auf denen Twentig das Twenty Twenty Theme erweitert:

  1. Zusätzliche Optionen im Customizer
  2. Zusätzliche Optionen bei vielen Standardblöcken
  3. Die Twentig Library mit vielen fertigen Vorlagen

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


Interessante Links:

Von Peter Müller

Sie kennen mich vielleicht von meinen Büchern und Videokursen. Meine Spezialität ist es, trockene und komplizierte Sachverhalte auf einfache und unterhaltsame Weise darzustellen. Website: pmueller.de

3 Antworten auf „Twentig – der perfekte Partner für Twenty Twenty“

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.

Schreibe einen Kommentar

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