Die Startseite von twentig.com

Versteckte Tricks mit »Twentig«

Veröffentlicht am

|

Aktualisiert am

Als ich kürzlich meine eigene Website mit Twenty Twenty neu gestaltete, entdeckte ich im Plugin Twentig ein paar nützliche verborgene Kniffe, die einem die Designarbeit erleichtern.

Für viele häufig auftretende Gestaltungswünsche bietet Twentig vorgefertigte Optionen, die einem das eigene Definieren zusätzlicher CSS-Anweisungen ersparen, auch wenn grundlegende CSS-Kenntnisse zum Teil hilfreich sind.

Inhaltsverzeichnis

Für gewöhnlich vergibt man im Customizer von Twenty Twenty unter Farben > Akzentfarbe die gewünschte Farbe für Links. Das schließt die Menü-Links in der Navigation mit ein.

Wenn aber der Hintergrund von Header und Footer dieselbe oder eine ähnliche Farbe hat wie die Links, würden Menülinks darauf nur schwer oder gar nicht sichtbar.

So war es zunächst auf meiner Websitebaustelle. Sowohl Header/Footer als auch Links waren im selben Blauton definiert.

Customizer von Twenty Twenty, Bereich Farben. sowohl die Heaerfarbe als auch die Akzentfarbe sind blau
Customizer > Farben

Dadurch erhält man blaue Links auf blauem Grund und die Links im Frontend werden dadurch unsichtbar.

Die Navigation auf annetteschwindt.digital mit blauen Links auf blauem Grund.
Blaue Links auf blauem Grund …

Um Abhilfe zu schaffen, könnte man im Bereich Zusätzliches CSS die Farbe der Menülinks anders definieren, aber dazu muss man natürlich ein bisschen CSS können.

Dank Twentig geht das aber auch komplett ohne CSS-Kenntnisse, denn etrwas versteckt gibt es eine eigene Option für dieses Problem: Unter Twentig Options > Header > Menu > Menu Link Color kann man statt der Akzentfarbe (im englischen Primary Color) einfach Secondary Color (oder auch die Text Color) aktivieren:

Customizer von Twenty Twenty, Bereich Twentig Options > Header > Menu Link Color > Secondary Eolor
Customizer > Twentig Options

Wählt man die Secondary Color, dann definiert Twentig automatisch eine Kontrastfarbe zum Hintergrund des Menüs. In meinem Fall hat das super funktioniert: Statt in Blau wird mein Menü nun in Weiß angezeigt:

Die Navigation auf annetteschwindt.digital mit weißen Links auf blauem Grund.
annetteschwindt.digital mit lesbaren Menü-Links

Falls die automatisch generierte Farbe nicht gefällt: Um eine eigene Secondary Color zu definieren, muss dann selbst Zusätzliches CSS schreiben.

Im Supportforum von Twentig gibt es dazu diesen Thread:

Dort gibt es auch ein konkretes Beispiel.

Praktisch: Die »CSS library«

Auch an anderer Stelle nehmen die Entwickler von Twentig einem das Schreiben eigener CSS-Anweisungen ab, aber auch diese Funktion zum weiteren Gestalten von Blöcken ist gut versteckt. Diesmal in den Block-Einstellungen in der rechten Seitenleiste, ganz unten unter Erweitert > ADDITIONAL CSS CLASS(ES) über das Symbol mit dem Pluszeichen:

Die Twentig CSS library in der rechten Seiteleiste bei den Block-Einstellungen ganz unten
Hier geht’s zur Twentig CSS library

In diesem CSS library genannten Bereich gibt es mehrere fertige CSS-Klassen, die man dem jeweils markierten Block nur noch zuweisen muss. Hier ein Ausschnitt aus der CSS-Bibliothek für Textblöcke:

CSS library in Twentig, Optionen für Text
Blick in die Twentig CSS-library für Text

Für Bilder stehen wieder andere Abkürzungen für häufig vorkommende Designwünsche zur Verfügung, die nicht schon durch die weiter oben stehenden Standard-Optionen (Stile etc.) abgedeckt werden:

CSS library in Twentig, Optionen für Bilder
CSS library für Bilder

Da haben die Entwickler von Twentig also super mitgedacht und einiges aus dem Design-Alltag vorhergesehen. Wer überhaupt kein CSS kann und nicht weiß nicht, wie Klassen funktionieren, kann versuchen, sich an den Beschreibungen der einzelnen Optionen zu orientieren. Wirklich Einsteiger-kompatibel ist diese Funktion aber vermutlich nicht. Probieren Sie es einfach mal aus. Viel Spaß dabei!

Avatar von Annette Schwindt

Kommentare

Eine Antwort zu „Versteckte Tricks mit »Twentig«“

  1. Vielen Dank für den Tipp! Das wusste ich noch gar nicht. Grüße Andreas

Schreibe einen Kommentar

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