JADE Demo

Diese Seite ist das Handbuch für das Gutenberg-Theme JADE! von Colofon Webdesign.

JADE! unterstützt keine Seitenleisten. Stattdessen bringt das JADE! Gutenberg-Theme Widgets in eine Seite. So zeigt diese Startseite der JADE! Demo die neusten Beiträge des Blogs.

Give me five!

Per Vorgabe bietet Gutenberg vier Schriftgrößen für Texte, aber auch die individuelle Einstellung einer Schriftgröße. Sicher gibt es immer wieder gute Gründe für eine individuelle Schriftgröße, aber der Einsatz sollte auf wenige Schriftgrößen innerhalb einer Seite beschränkt bleiben, um ein unruhiges Schriftbild zu vermeiden.

JADE! bringt 5 Farben für Text und Hintergrund mit, dazu ein Schwarz, Weiß sowie einen Grauton. Gutenberg steuert von sich aus zwei Blautöne dazu. Auch hier bietet Gutenberg individuelle Farben, und wieder gilt, dass individuelle Farben am besten auf wenige Elemente beschränkt bleiben.

Gutenberg Layout-Elemente

Spalten, Gruppen, Medien und Text, Cover und Abstandhalter sind die Layout-Elemente von Gutenberg.

Die Formatierung in Spalten oder Columns setzt mehrere Blöcke auf großen Monitoren nebeneinander, während die Blöcke auf kleinen Monitoren untereinander erscheinen.

Spalten breite Breite

Nam malesuada porta quam sit

Maecenas sit amet turpis

Donec eleifend erat erat

Spalten volle Breite

Nam malesuada porta quam sit

Maecenas sit amet turpis

Donec eleifend erat erat

Spalten können in unterschiedlichen Breiten gesetzt werden. Normal, weite Breite, volle Breite.

Zwei Spalten mit Bild und Text

Hier haben wir den Block Spalten mit einem Text auf der linken Seite und einem Bild auf der rechten Seite. Der Spalten-Block hat die vorgegebene Breite – so breit wie der Text läuft.

Spalten mit Medien und Text

Alternativ zu Spalten mit Text und Bild bietet das Gutenberg-Theme SAND! den Block „Medien und Text„. Das Besondere an Medien und Text ist, dass wir nicht nur einen Text neben ein Bild setzen können, sondern dass die beiden Spalten von Medien und Text abwechselnd Text links, Text rechts haben können, die aber auf kleinen Monitoren als Bild, Text, Bild, Text laufen.

Hier im Gutenberg-Theme SAND! ist der Block Medien und Text gleichzeitig ein Hero-Block: Zwei Blöcke Medien und Text nacheinander können ohne Abstand gesetzt werden.

Das ist ein Block Medien und Text.

Ein weiterer Block Medien und Text

Spalten in einer Gruppe mit farbigem Hintergrund

Für den Spalten-Block (nicht die einzelnen Spalten) unter Erweitert auf der rechten Seite des Editors in das Feld Zusätzliche CSS-Klasse(n) eintragen:

box-shadow

Spalten mit weißem Hintergrund und leichtem Schatten

Spalten unterstützen nur Bilder und einfachen Text

Für den Text Schriftgröße und Farbe wählen

Kakteen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec dignissim leo, in cursus turpis. Proin gravida interdum orci. Donec mollis libero feugiat ante ultrices efficitur. 

Seegras

Aenean id nulla non nisl viverra suscipit vel vitae dolor. Etiam aliquet aliquam maximus.

Sukkulenten

Aliquam egestas nunc eu porttitor maximus. Donec hendrerit, ligula ut dictum facilisis, neque nibh laoreet nibh, vel tempus lectus mi a metus. 

Dekorative Zweige

Donec consequat, augue a euismod commodo, purus lectus imperdiet orci, et mattis sem erat ut nibh. 

Spalten gleicher Höhe

Spalten mit weißem Hintergrund und leichtem Schatten

Auch wenn der Inhalt der Spalten mal mehr und mal weniger Zeilen umfasst

Spalten unterstützen nur Bilder und einfachen Text

Eine letzte Zeile mit farbigem Hintergrund immer an das Ende der Spalten setzen, damit alle Spalten dieselbe Höhe zeigen.

Für den Text Schriftgröße und Farbe wählen

Farben für Text und Hintergrund

Für Texte und Hintergrund von Texten, Gruppen, als Überlagerung von Cover-Blöcken haben einige Gutenberg-Böcke Farbeinstellungen (auf der rechten Seite des Editors). Die Farbauswahl hier kann auf die Farbpalette eines Kunden programmiert werden.

Welche Farben unter den Farbeinstellungen angeboten werden, hängt von eine Absprache ab: Vor der Auslieferung des Themes sucht man sich die passenden Farben für Hintergrund und Vordergrund aus.

Text-Größen

Für Text gibt es auf der rechten Seite des Gutenberg-Editors in den Text-Einstellungen verschiedene Größen von sehr klein bis sehr groß.

Cover

Ein Coverblock ist ein Bild, über das ein Text gelegt werden kann. Zusätzlich kann das Bild in einem Cover fixiert werden, so dass es nicht mitsrollt, sondern der Benutzer beim Scrollen die gesamte Höhe des Bildes Stück für Stück zu sehen bekommt. Cover eigenen sich gut als auffallendes Trennelement.

Überraschung mit Überroll-Effekt: Paralaxe bringt Tiefe und Räumlichkeit und erhascht die volle Aufmerksamkeit für einen Aufruf.

SAND! WooCommerce Unterstützung

SAND! unterstützt WooCommerce.

Colofon Webdesign: Der Sand-Blog

• 
  WordPress-Tipps6. November 2022
  Telefonnummer klickbar machen. So können Benutzer mit dem Handy die Telefonnummer durch antippen direkt wählen.
• 
  WordPress Textauszug und kleines SEO-Brevier10. Juli 2022
  Das WordPress Theme SAND! nutzt den Textauszug als Teaser in der Blog-Übersicht und als Meta-Description.
• 
  JADE Menü-Positionen18. Mai 2022
  JADE bietet drei Menü-Positionen: over the top – Primary Over MenuDas oberste Menü hat Platz für zwei, maximal drei kurze Menünamen und zeigt ansonsten die Suchlupe sowie bei aktivem WooCommerce den Link zum Account („Mein Konto“) topmenu – PrimaryDas zweite Menü hat Platz für 4 bis 5 Menüpunkte, die jeweils wieder ein Untermenü tragen können.  … Weiterlesen
• 
  WordPress einrichten für Gutenberg / JADE28. April 2022
  Die Einstellungen für Medien bestimmen die Größe von Thumbnails, die mittlere und die höchste Bildgröße.
• 
  Farben19. März 2022
  Farben sind als CSS-Variablen global in der CSS-Datei definiert. Um dieselben Farben im Gutenberg-Editor als voreingestellte Auswahl zu aktivieren, müssen sie ebenfalls in der Datei functions.php angepasst werden.
• 
  Custom Fields – eigene Felder in WordPress25. Juni 2021
  Individuelle Felder oder Custom Fields (manchmal auch als Post Metadata bezeichnet) erweitern die Eingabemaske von WordPress.