page.php
template parts entry-header

JADE Demo

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

Im Vergleich zu den traditionellen Editoren der Content Management Systeme bringt der Gutenberg-Editor eine große Vielfalt an Layout-Elementen und erweitert die kreative Freiheit der Autoren.

Im Vergleich zu den Page Builder-Editoren wie Visual Composer, Bakery, Elementar, WP Page Builder oder Live Composer allerdings sind die Gestaltungselemente von Gutenberg eingeschränkt.

Diese Einschränkungen helfen Autoren, das Branding – den Wiedererkennungswert der Seiten und Beiträge – einzuhalten. Ein professionelles Design ist auch immer eine Reduzierung der Elemente, um die Konsistenz der Seiten aufrecht zu erhalten.


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.

[ / ] Widgets Shortcode Archive Kalender Kategorien Neuste Kommentare Neuste Beiträge RSS Suchen Social Icons

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 einfache Breite

Spalte 1

Nam malesuada porta quam sit

Spalte 2

Maecenas sit amet turpis

Spalte 3

Donec eleifend erat erat

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.

Seitenumbruch Buttons Spalten Gruppe Medien und Text Mehr Trennzeicen Abstandhalter Layout-Elemente

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:

shadow-box
Ut iaculis justo et tempor

Spalten mit weißem Hintergrund und leichtem Schatten

sollicitudin pretium

Spalten unterstützen nur Bilder und einfachen Text

In auctor congue molestie

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. 

Ut iaculis justo et tempor

Spalten gleicher Höhe

Spalten mit weißem Hintergrund und leichtem Schatten

sollicitudin pretium

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

Spalten unterstützen nur Bilder und einfachen Text

In auctor congue molestie

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

Orchid

Ton

Petrol

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 Textauszug und kleines SEO-Brevier
    Das WordPress Theme SAND! nutzt den Textauszug als Teaser in der Blog-Übersicht und als Meta-Description.
  • JADE Menü-Positionen
    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. […]
  • WordPress einrichten für Gutenberg / JADE
    Die Einstellungen für Medien bestimmen die Größe von Thumbnails, die mittlere und die höchste Bildgröße.
  • Farben
    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 WordPress
    Individuelle Felder oder Custom Fields (manchmal auch als Post Metadata bezeichnet) erweitern die Eingabemaske von WordPress.
  • Kleine Bilder für die Navigation oben
    Die Navigation oben hat eine zweite Ebene, die beim Aufklappen mit kleinen Bildern unterlegt ist. Die Bilder für die zweite Ebene der Navigation sind quadratisch, vorzugsweise 175 x 175 px groß.