page.php

Diese Seite ist das Handbuch für das Gutenberg-Theme SAND! 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, WP Page Builder oder Live Composer allerdings sind die Gestaltungselemente von Gutenberg eingeschränkter.

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.

SAND! unterstützt keine Seitenleisten. Aber SAND! Gutenberg bringt anstelle dessen Widgets in eine Seite. So zeigt diese Startseite der SAND! 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 bis zu fünf 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.

SAND! 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.

Spalte 1

Nam malesuada porta quam sit

Spalte 2

Maecenas sit amet turpis

Spalte 3

Donec eleifend erat erat

Nam malesuada porta quam sit

Maecenas sit amet turpis

Donec eleifend erat erat

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

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

Farben für Text und Hintergrund

Blau 1

Blau 2

Dunkelgrau

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.

Ein optischer Trenner mit einer kleinen Überraschung

SAND! WooCommerce Unterstützung

SAND! unterstützt WooCommerce.

Colofon Webdesign: Der Sand-Blog

  • Spalten mit Zeilen gleicher Höhe
    Um die Zeilen von nebeneinander liegenden Spalten auf dieselbe Höhe zu ziehen, müssen einige Vorbereitungen getroffen werden: Die Zeilen brauche zusätzliche CSS-Klassen unter Erweitert. cheader für einen Spaltenkopf cimage für das Bild cprice für einen herausgestellten Textblock ctext für einen weiteren Textblock Der Spaltenblock braucht eine zusätzliche Klasse mirror.
  • Sand Child Theme
    Ein WordPress-Child-Theme passt Design-Merkmale individuell auf einen Internet-Auftritt an. So überschreiben Updates des Themes die Änderungen nicht.
  • Gutenberg Blöcke
    Übersicht über die Gutenberg-Blöcke und Ihre Informationen: von allgemeinen Blöcken über Layout-Elemente bis zu Widgets.
  • WordPress einrichten für Gutenberg / SAND
    Die Einstellungen für Medien bestimmen die Größe von Thumbnails, die mittlere und die höchste Bildgröße.
  • Gutenberg-Spalten-Layout
    Die Anordnung von Text und Bildern mit Spalten auf großen Monitoren spart Platz und Vergleiche sind besser verständlich.
  • Kategorien und Schlagwörter
    SAND! unterstützt Schlagwörter auch für Seiten. Wer jetzt allerdings an das alte Meta-Keywords für Suchmaschinen denkt, liegt schief.