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.
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
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.
-
Vase Tulpus Tiefrot€9,20
-
Ranunculaceae€12,50
-
Tonvase Milos€7,50
Colofon Webdesign: Der Sand-Blog
- WordPress-TippsTelefonnummer klickbar machen. So können Benutzer mit dem Handy die Telefonnummer durch antippen direkt wählen.
- WordPress Textauszug und kleines SEO-BrevierDas WordPress Theme SAND! nutzt den Textauszug als Teaser in der Blog-Übersicht und als Meta-Description.
- JADE Menü-PositionenJADE 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 / JADEDie Einstellungen für Medien bestimmen die Größe von Thumbnails, die mittlere und die höchste Bildgröße.
- FarbenFarben 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 WordPressIndividuelle Felder oder Custom Fields (manchmal auch als Post Metadata bezeichnet) erweitern die Eingabemaske von WordPress.