Das Plugin Twentig rockt WordPress

Twentig rockt WordPress. Dieses geniale Plugin hab ich erst vor Kurzem entdeckt und gleich installiert: Twentig. Twentig verschönert Block-Themes mit erweiterten Block-Features, Patterns und Templates. Twentig rockt WordPress – und am besten rockt WordPress die Standardthemes!

Das Plugin Twentig

Was ist Twentig? Eine Ausnahme unter den Plugins. Normalerweise erweitern Plugins die Funktionen von WordPress. Twentig verbessert die Design-Optionen, und das ohne Risiko. Es gilt:

Wenn du Twentig deaktivierst, greift WordPress wieder auf die Standardeinstellungen zurück. Das Deaktivieren von Twentig verursacht keine kaputten Blöcke in WordPress! Ein großer Vorteil im Vergleich mit Elementor.

Twentig erweitert deine Blöcke mit Konfigurationsmöglichkeiten, liefert aber keine neuen Blöcke.
Twentig ergänzt dein Standardtheme mit neuen Patterns.
Twentig ergänzt dein Standardtheme mit neuen Starter-Templates.

Blöcke verschönern

Ein Beispiel für den Eingriff von Twentig: der Listenblock. Für eine nicht nummerierte Liste hat WordPress nur zwei Stil-Auswahlmöglichkeiten: Standard (Punkte) und Häkchen. Mit Twentig wächst die Auswahl auf zehn Stil-Optionen.

Twentig bietet für die Darstellung einer Liste neue Möglichkeiten. Ich habe Arrow ausgewählt. Die Pfeile lassen sich sehr gut für Linklisten verwenden.

Blöcke ausblenden

Vielleicht kennst du dieses Problem. Ein Block soll für die mobile Ansicht ausgeblendet werden. Beispiel: Ein Wochenplan mit Tagen von Montag bis Sonntag soll erstellt werden. In der Desktop-Ansicht sieht so ein Plan gut aus, aber auf dem Handy hat eine Tabelle mit sieben Spalten beim besten Willen keinen Platz, auch nicht mit gestapelten Tagen. Was tun?

Eine ausführliche Tabelle für die Desktop- und Tabletansicht erstellen
Eine kompakte Tabelle für die Handyansicht erstellen.

Aber natürlich soll kein Besucher der Website zwei Tabellen sehen. Je nach Endgerät muss WordPress die passende Tabelle einblenden – und die nicht passende Tabelle ausblenden. Mit den Bordmitteln von WordPress funktioniert das nicht, aber Twentig kann es mit wenigen Klicks.

Du hast Twentig installiert? Mit diesen Schritten kannst du einen Block ausblenden:

Klicke den entprechenden Block in der Hauptspalte an. Im Beispiel ist es der Wochenplan.
Klicke in der rechten Spalte auf Block und dann auf das Icon mit dem Zahnrad.
Wenn du Twentig installiert hast, erscheint in der rechten Spalte unten den Menüpunkt Visibility. Klicke Visibility auf, um die Sichtbarkeit des Blocks zu definieren.

Jetzt hast du folgende Sichtbarkeits-Optionen:

Hide on Desktop – Block für User verbergen, die einen Desktop-PC oder einen Laptop verwenden.
Hide on Tablet – Block für User verbergen, die ein Tablet verwenden.
Hide on Mobile – Block für User verbergen, die ein Handy verwenden.

Lösung des Problems:

Die breite, ausführliche Tabelle wird in der Mobilansicht ausgeblendet. Anschließend wird eine kompaktere Tabelle ausschließlich für die Mobilansicht erstellt, zum Beispiel zweispaltig (Mo-Fr & Sa-So). Darunter könnte noch ein ergänzender Textblock für die Informationen nötig sein, die nicht in die kompakte Tabelle gepasst haben. Die kompakte Tabelle und der ergänzende Textblock müssen dann natürlich für alle ausgeblendet werden, die nicht mit dem Smartphone unterwegs sind. Das folgende Bild zeigt die richtige Einstellung:

PS: Die Sichtbarkeits-Einstellungen kannst du nur in der Live-Ansicht überprüfen. Gehe ins Frontend, um die Funktion zu überprüfen.

Blöcke animieren

Twentig kann Blöcke auch animieren. Folgende Effekte stehen zur Verfügung:

Fade in – Block einblenden.
Fade in up – Block von unten einblenden.
Scale in – Block wird von der Mitte aus eingeblendet.

Tipp: Verwende den Animations-Effekt nur sparsam und nur bei geeigneten Blöcken. Texte und Tabellen sind dafür nicht geeignet, im Gegenteil. Manch User vermutet beim Einblenden lange Ladezeiten.

Ganz gut kann ich mir den Scale-in-Effekt bei Bildblöcken im Bereich Fotografie und Kunst vorstellen. Das Einblenden von der Mitte erzeugt eine gewisse Spannung.

Hover-Effekt für die Navigation

Mit Twentig kannst du einen Hover-Effekt erzeugen und so die Benutzerfreundlichkeit deiner Navigation verbessern: Beim Überfahren mit der Maus wird der Menüpunkt optisch hervorgehoben. Denn Effekt kannst du in der Navigation von standardthemes testen.
Den Hover-Effekt richtest du über Website bearbeiten ein.

Klicke links oben auf das Icon mit der „Treppe“, um die Listenansicht zu öffnen.
Klicke in der linken Seitenleiste auf den Block Navigation.

Anschließend wechselst du von der linken in die rechte Seitenleiste

Wenn du in der rechten Seitenleistenach unten scrollst, findest du den Punkt Link style, dahinter ist ein dezentes tw-Icon zu sehen, das Kürzel steht für Twentig.
Wähle aus dem Drop-down-Menü deinen bevorzugten Hover-Style. Der Hover-Style, den ich für Standradthemes.de eingesetzt habe, nennt sich Box.

Twentig liefert neue Patterns

Twentig versorgt dein WordPress mit neuen Patterns. Das Plugin arbeitet aber nicht mit jedem Theme zusammen, es ist für Block-Themes konzipiert. Geeignete Themes sind zum Beispiel:

Twenty Twenty-Two (TT2)
Twenty Twenty-Three (TT3)
Twenty Twenty-Four (TT4)
Twenty Twenty-Five (TT5)

Twentig liefert neue Starter-Templates

Twentig hat, ähnlich wie das Bezahltheme Blocksy, Starter-Templates an Bord. Die sind teilweise neu, teilweise aber nur minimal verändere Versionen der schon im Theme mitgelieferten Templates.

Starter-Templates für TT5

Business-Starter-Template für TT5

Beim Business Starter Template für TT5 gefallen mir die sich überlagernden Bilder sehr gut.

Photo-Blog-Template für TT5

Schnelleinstieg für Fotografinnen und Fotografen: Das Photo-Blog-Template.

News-Blog-Template für TT5

Das News-Blog-Template für TT5 ist eine kleine Variation eines bereits in TT5 enthaltenen News-Templates.

Personal-Blog-Template für TT5

Das Personal-Blog-Template für TT5 überzeugt mich nicht. Ich liste es der Vollständigkeit halber hier auf.

Starter-Templates für TT4

Portfolio-Starter-Template für TT4

Dieses übersichtliche Portfolio-Starter-Template für TT4 eignet gut für alle, die eine starke Bildsprache wünschen.

Blog-Starter-Template für TT4

Blog Starter Template von Twentig: Ein klares, übersichtliches Blog-Template für TT4.

Business-Starter-Template für TT4

Das Business Starter Template für TT4 unterscheidet sich kaum von der bereits mitgelieferten Startseite. Es ist etwas aufgeräumter und die Portfolio-Gruppe ist nach oben gerutscht.

Personal-Starter-Template

Außerdem stellt Twentig für Blogger noch ein Personal Starter Template zur Verfügung.

Weitere Starter-Templates in der Entwicklung

Jetzt bin ich gespannt, wie es mit den Twentig-Starter-Templates weiter geht. Bis jetzt sind es vier Templates pro Theme. Vielleicht bekommen wir für das Theme Twenty Twenty-Six eine etwas größere Auswahl?

Was sind Starter-Templates?

Starter-Templates erleichtern das Erstellen einer WordPress-Website für einen bestimmten Zweck, zum Beispiel für ein Yogastudio, einen Fotoblog oder einen WooCommerce-Shop. An die Qualität von Blocksy kommt Twentig zwar noch nicht ran, aber dafür kommt man als WordPress-Admin bei Twentig erst gar nicht auf die Idee, einen externen Pagebuilder einzusetzen, den man ohne Komplikationen nie wieder los wird.
Die Kombination aus Twentig und Gutenberg, also dem hauseigenen WordPress-Pagebuilder ist mein Favorit. Einen externen Pagebuilder will ich für langfristige und stabile WordPress-Projekte nicht einsetzen. Die Betriebssicherheit von WordPress ist mir wichtiger als der letzte Kick beim Design.

Die Twentig CSS-Library

Etwas versteckt ist Twentigs CSS-Library. Die Twentig-CSS-Library enthält zusätzliche CSS-Klassen, mir denen du deinen Blöcke noch mit speziellen Effekten anreichern kannst. Dazu musst du kein CSS programmieren, du kannst die Klassen einfach ausprobieren.

Um die Twentig-CSS-Library aufzurufen, klickst du in der rechten Seitenleiste auf Block und anschließend auf Erweitert.

Im Menü Erweitert findest du unten den Button CSS Library.

Jetzt stehen dir für den jeweiligen Block verschiedene CSS-KLassen zur Verfügung. Für diesen Block habe ich die Klasse tw-text-shadow ausgewählt.

Twentig-Alternativen: Andere Block-Plugins

Wie immer bei WordPress gibt es nicht nur ein einziges Plugin zur Lösung eines Problems. Hier sind weitere Plugins zur Verschönerung von WordPress-Blöcken:

Achtung: Die fünf Twentig-Alternativen haben Pagebuilder-Funktionen und liefern zusätzliche Blöcke. Du kannst sie also im Gegensatz zu Twentig nicht einfach wieder abschalten, ohne einen Schaden an deiner Website zu hinterlassen.

Ist Twentig der neue Elementor?

Der Pagebuilder Elementor verschönert keine Blöcke, er bohrt WordPress auf und bietet viel mehr Funktionen als Twentig. Ich stelle trotzdem mal die kühne Frage: Ist Twentig der neue Elementor? Was die Statistik sagt (Stand Dezember 2024):

Twentig: 20.000+ Installationen / 4,9 von 5 Sternen
Elementor: 10.000.000+ Installationen / 4.6 von 5 Sternen

Okay, bei Elementor sind es ein paar User mehr. Aber:

Twentig ist relativ neu und auf die Standardthemes 2022 bis 2025 zugeschnitten. Elementor ist für alle Themes konzipiert.
Twentig hält sich an den Coding-Standard von WordPress. Twentig kann ich auch wieder abschalten, ohne meine Website zu zerstören. Bei Elementor sieht die Sache anders aus. Und wer weiß schon, wo der Elementor in zehn Jahren steht. Erinnert sich noch jemand an den Visual Composer? Das war auch mal ein populärer Pagebuilder. Heute erinnert sich niemand mehr daran.

Warten wir mal ab, was die Zukunft so bringt … ich bin Team Twentig!
PS: Hier ist ein Tutorial zum Dreamteam Twenty Twenty-Five plus Twentig.

Neue Beiträge auf Standardthemes.de

Bist du auch Twentig-Fan? Mein Name ist Bernd Schmitt und ich betreibe standardthemes.de.
Wenn du eine Frage hast, schreib einfach einen Kommentar.

Das Plugin Twentig rockt WordPress

WordPress plus Twentig