tl;dr: Wer mit WordPress arbeitet sollte die Grundlagen des Blockeditors verstehen, auch wenn man mit anderen PageBuildern arbeitet. WordPress kennt sog. Standard-Blöcke, die immer vorhanden sind und Theme-Blöcke, die je nach Theme nutzbar sind. Leider sind sind auch bei den Standard-Blöcken manchmal Theme-abhängige Unterschiede. In dieser Artikelreihe wurde WP 6.4.2 mit dem Theme Twenty Twenty-Four 1.0 benutzt.
Spalten
Vorsicht: Obwohl alle Blockthemes die selben Standard-Blöcke anbieten geht trotzdem der ev. Stil verloren, sobald man das Theme wechselt! Der Inhalt selber bleibt aber erhalten.
Um mehrspaltiges Layout umzusetzen gibt es die Blöcke Spalten und Spalte, legt man eine neue Einheit mit Spalten an kann man aus einer Vorauswahl eine Aufteilung auswählen; überspringt man diesen Schritt werden 2 Spalten angelegt. Welchen Weg man auch wählt, man kann jederzeit die Anzahl und auch die Breite der einzelnen Spalten ändern.
Bei der Layoutarbeit empfiehlt es sich immer die Funktion Dokumentübersicht zu aktivieren (das 5. Icon links oben, das mit den 3 Linien). Hiermit kann man genau steuern und sehen, welche Spalte oder übergeordnete Konstruktion gerade bearbeitet wird. Wählt man eine der Voreinstellungen aus landet man automatisch in der ersten, neu angelegten Spalte.
Bei aktiver Spalte lässt sich nun im Toolbar die Ausrichtung einstellen. Man kann zwischen Keine, Weite Breite und Gesamte Breite wählen. Die hier angezeigten Breitenwerte in Pixel (620px bzw 1280px) stammen aus den Grundeinstellungen des verwendeten Stils und lassen sich auch dort ändern.
Dashbord > Website-Editor > Stile > Stil bearbeiten (Icon) > Layout
Keine bedeutet hier, dass die Voreinstellung von 620px wirkt.
Weite Breite entspricht dem Wert von 1280 px.
Gesamte Breite bedeutet, dass der gesamte Viewport (die Fensterbreite) verwendet wird, das ist also eine relative Angabe.
Das Icon rechts daneben ist für die Vertikale Ausrichtung zuständig. Damit kann festgelegt werden, ob die Inhalte in den einzelnen Spalten Oben ausrichten (Voreinstellung) , Mittig ausrichten oder Unten ausrichten sollen.
Diese Ausrichtung ist nur dann wirksam, wenn die Inhalte in den einzelnen Spalten der Konstruktion unterschiedlich hoch sind. Grundsätzlich ist diese so hoch wie sie eben sein muss um alles anzuzeigen, so ferne nichts anders eingestellt wurde.
Auch im Blockeditor ist endlich eine saubere Trennung zwischen Einstellungen und Stil angekommen. Das ist bei allen Blöcken gleich (oder sollte so werden). Links das Zahnrad-Icon bringt die Einstellungen, das Stile-Icon rechts listet alle Optionen auf, die mit dem Aussehen zu tun haben.
Der Schieberegler Spalten ist für die Anzahl der der Spalte-Blöcke innerhalb des übergeordnete Spalten-Block zuständig.
Man kann aber auch durch hinzufügen oder löschen einzelner Spalte-Blöcke diesen Wert indirekt verändern.
Auf Mobilgeräten stapeln ist jene Option, die dafür sorgt, das bei schmalen Viewport wie Handys die Spalten nicht nebeneinander sondern untereinander angezeigt werden. Links wird oben.
Blockname. Hier konnte ich noch keine sinnvolle Anwendung erkennen (wer mehr weiss bitte in den Kommentaren posten!)
HTML-Anker. Setzt eine eindeutige ID für den Block Spalten. Damit kann er als Zielpunkt für jeden Link dienen, der dann eben den Link nach …#html-anker-name gesetzt werden muss.
Zusätzliche CSS-Klassen gibt die Möglichkeit, an anderen Stellen definiertes CSS auf den Block anzuwenden.
Farbe lässt Einstellungen für Text und Hintergrund zu. Über das 3-Punkte-Icon rechts daneben lassen sich weitere Inhalte zur Farbdefinition hinzufügen. Die Farbauswahl kann aus den voreingestellten Farben des Stils erfolgen oder neu getroffen werden.
Typographie. Lässt die 5 Grundeinstellungen S, M, L, XL und XXL zu und auch numerische Eingabe über das Regler-Icon in px, em und rem. Zusätzliche typographische Einstellungen wie Schriftfamile, Design, Zeilenhöhe, Zeichenabstand, Text-Dekoration und Schreibweise können über das 3-Punkte-Icon eingeblendet werden.
Größe. Es gibt 3 Wertegruppen, die im Handling gleich funktionieren. Die Werte können immer getrennt oder für alle 4 Seiten gleich gesetzt werden. Je nach Wahl werden mehr oder weniger Regler angezeigt. Die Werte die eingegeben werden können sind am Schieberegler von 1-6 oder aber genau in den Einheiten px, %, em, rem, vh und vw anzugeben.
Innenabstand
Ein Abstand innerhalb des Konstruktes zu den darin befindlichen Blöcken (Padding) führt dazu, dass weniger (horzizontaler) Platz für die Blöcke über bleibt. Die Spalte-Blöcke innerhalb der Spalten werden schmäler, aber auch Texte, Überschriften etc. sind betroffen, da ein Innenabstand die Breite des Konstruktes nicht verändert.
Aussenabstand
Der Aussenabstand wird zur Konstruktbreite addiert. Daher werden bei den Beispielen hier die Abstandsflächen (blau) auch um den Spalten-Block gezeigt. Wen beide angrenzenden Blöcke einen Aussenabstand von 0 haben stossen sie zusammen. Aussenabstände können negativ gesetzt werden, wodurch es zu Überlappungen kommen kann.
Blockabstand
Der Blockabstand wirkt zwischen den einzelnen Blöcken der Konstruktion. Auch hier sind Einheiten 1-6 oder Werte in den üblichen Einheiten (absolut in px oder relativ in %, rem, em. vh, vw) möglich.
Ränder und Radius betreffen die Umrandung des Spalten-Blocks. Für einen Rand (Border) sind immer 3 Angaben notwendig: Farbe, Stil und Stärke (Dicke).
Beim Radius sind wieder die üblichen Einheiten als Angabe möglich.
Beide Angaben können für alle 4 Seiten gleich oder auch Individuell gesetzt werden. Dafür muss man die Verbindung der Werte lösen, dann kann man auch asymetrische Ränder und Abrundungen setzen.
Die Arbeitsweise bzw. die Bedienfelder sind natürlich auch für die anderen Layout-Blöcke analog zu den hier beschriebenen gleich. Vorsicht ist jedoch beim Umwandeln von einer Art von Block zu einem anderen gegeben: die individuell eingetragenen Werte gehen verloren, wenn die neue Blockart diese Werte nicht kennt.
Der Block Spalte
Spalte - Einstellungen
Die Einstellungs-Option Layout ist zuständig für die Breite des Inhalts innerhalb der einzelnen Spalte-Blöcke. Voreingestellt ist die logische Option, dass die Inhalte die innere Spalte-Breite voll ausnutzen. Durch setzen des Schalters Die inneren Blöcke verwenden die Breite des Inhaltes (sic!) kann man eigene Werte für die Breite eintragen.
Um die Breiten der einzelnen Spalte-Blöcke einzustellen ist bei aktivierter Spalte unter Spalteneinstellungen die Option Breite zu finden. Voreingestellt sind hier relative Angaben in %, andere möglichen Einheiten sind px, em, rem, vw und vh.
Ob die hier eingetragenen Werte auch funktionieren hängt auch von der mathematischen Möglichkeit ab diese umzusetzen. So kann eine Gesamtbreite von 120% für alle Spalten nicht wirklich funktionieren, umgekehrt kann es schon funktionieren wenn die Summe aller Spaltenbreiten kleiner als die des Spalten-Blocks ist, dann bleibt rechts der letzten Spalte freier Raum über.
Farbe. Erlaubt wie auch bei der übergeordneten Struktur Spalten die Eingabe von Text- und Hintergrundgfarben.
Typographie. Die Optionen für die Schriften. Durchaus mit Vorsicht zu genießen, weil ja sowohl eine Ebene höher (Block Spalten) also auch eine Ebene tiefer (zB. bei in der Spalte platzierten Blöcke Überschrift oder Absatz) Einstellungen zur Typographie vorgenommen werden können.
Größe. Hier sind analog zu oben beschrieben Einstellungen für den Innenabstand (padding) und die Block-Abstände möglich. Aussenabstände (margin) können nicht verändert werden.
Ränder (Border). Können auch für jede einzelne Spalte gleich oder ungleich für alle vier Seiten gesetzt werden.
