Section Styles

0:00
Hallo zusammen, ich möchte euch zeigen, wie wir mit Section Styles im Design System arbeiten können und Section Styles sind in wordpress vorbereitete globale Stile, die dann auf verschiedene Elemente oder Elementgruppen angewendet werden können, mit dem Ziel, dass wir sie per Klick, ich sag mal sehr unkompliziert, sprich zeitsparend anwenden können, aber vor allem, dass wir sie später global umgestalten können. Es macht also sehr viel Sinn.

0:27
Viel mit Section Styles zu arbeiten, damit, wenn zum Beispiel das gesamte Projekt mit 100 Unterseiten aufgebaut ist, ich nicht plötzlich, wenn der Kunde sagt, ich hätte gerne, dass diese Box überall eine andere Eckenabrundung bekommt oder eine andere Farbe, dass ich nicht in alle Unterseiten reingehen muss und das da manuell anpasse, sondern dass ich im Idealfall das über den globalen Stil anpassen kann. Dafür muss ich natürlich so ein bisschen.

0:50
Erfahrung mitbringen, dass ich früh bemerke, wann denn wohl etwas ein Stil sein sollte. Und wir haben ein bisschen was vorbereitet, was wir eigentlich so in jedem Projekt brauchen und dann wird das normalerweise entweder auf das jeweilige Praxisprojekt angepasst. Das möchte ich gleich zeigen oder natürlich erweitert, indem weitere Styles hinzugefügt werden.

1:11
Schauen wir uns einmal kurz an, wo wordpress die Section Styles organisiert. Ich gehe einmal kurz hier in den Administrationsbereich und dann in den Theme Datei Editor. Ich bin jetzt im Child Theme im Parent Theme gibt es auch Styles, aber im Child Theme haben wir eben etwas mehr vorbereitet, damit wir das besser customizen können und hier liegt das Ganze dann im Ordner Styles und hier sehen wir zum Beispiel Box 1 und 2.

1:38
Das sind hier diese Boxen. Box 1 ist in unserem Fall jetzt weiß und Box 2 wäre diese graue Box hier und wenn ich mir jetzt mal den Faction Style Box 2 einfach schnappe, das ist hier Box hellgrau oder ich nehme mal lieber die 1 so das ist Box weiß dann seht ihr der Titel ist Box weiß das hat damit zu tun ich gehe mal hier rüber und bearbeite diese Seite, dass wir das dann hier.

2:07
Auswählen können, das ist jetzt voreingestellt, also da könnte ich jetzt eben auch sagen, das soll Box hellgrau werden, das ist also die Beschriftung im Administrationsbereich und da haben wir eben entschieden, wir wollen, dass das eher darstellungsbezogen beschriftet ist, weil Kunden sich damit dann besser zurechtfinden. Im Code haben wir es allerdings natürlich nicht darstellungsbezogen benannt.

2:29
Sondern so, dass wir am Ende auch Box 1 in Blau zum Beispiel darstellen könnten. Wir müssten dann eben nur die Werte ändern, dass eben ein anderes Styling angewendet wird und wir müssten die Beschriftung ändern, aber im Code ändert sich nicht diese Thematik, die ist einfach durchnummeriert, damit wir da flexibel sind, dann ist es so, dass diese Section Styles immer.

2:51
Auf verschiedene Blocktypen angewendet werden können. In unserem Fall wirkt dieser Section Style für Gruppen Columns und Column und dann kommen eben die ganzen Eigenschaften, die zugewiesen sind. Also es gibt eine Farbe Borderradios und Innenabstände.

3:05
So der einfachste Weg, das jetzt hier zu verändern, wäre tatsächlich hier zentral an dieser Stelle. Wenn ich jetzt also möchte, dass Box 1 nicht mehr weiß ist, sondern zum Beispiel blau, dann könnte ich hingehen und könnte sagen, Background ist zum Beispiel Blue. Ich mache jetzt einfach mal Blue 800 und die Farbe ist weiß vom Text und dann nenne ich das Box blau und aktualisiere die Datei.

3:33
So, da die im Code weiterhin Box 1 heißt, kann ich jetzt auch einfach hier neu laden und alle Boxen, die sozusagen mit Box 1 versehen worden sind, haben sich jetzt automatisch geändert. Wenn ich jetzt also hier zum Beispiel hingehe und diesem Element hier machen wir einfach mal diese Box hier, der jetzt ebenfalls sagen würde, sie soll Box weiß, ich habe noch gar nicht neu geladen hier sein und ich speichere dann.

4:02
Wäre diese Box natürlich ebenfalls blau mit weißem Text. Sobald ich den Administrationsbereich neu lade, ist das natürlich auch hier aktualisiert und wenn ich jetzt hier klicke, dann steht da eben auch Box blau so, das ist also sehr sehr einfach dieses Styling anzupassen und wir haben eben verschiedene Dinge vorbereitet, damit wir davon gut weg arbeiten können, aber wie ich gerade gezeigt habe, die Anpassung.

4:27
Wenn sie wirklich komplett global stattfinden soll, muss sie in der JSON Datei vorgenommen werden. Wenn ich es über den Administrationsbereich von wordpress machen möchte, dann muss ich an verschiedenen Stellen gucken und ich möchte euch das einmal kurz zeigen, was ihr da beachten müsst. Ich gehe nochmal hier auf die json Datei, also die blaue Box, die ist aktuell gültig für Gruppen für Coloms und für Colom und wenn ich das jetzt über den Editor einstellen möchte, das kann ich auch machen.

4:57
Ich gehe hier in den Zeit Editor rein und in die Ziele. So und jetzt suche ich hier diesen Section Style und den finde ich innerhalb der Blöcke immer auf den Blöcken, die gerade in dieser Datei angegeben wurden, also zum Beispiel auf der Gruppe so und hier würde ich das jetzt finden, da gibt es jetzt Box blau und wenn ich das anklicke kann ich Box blau auch.

5:19
Umkonfigurieren, das könnte ich also zum Beispiel machen und könnte sagen, Box blau soll jetzt aber nicht mehr diesen blau 800 Wert bekommen, sondern so ein bisschen heller, so und dann werdet ihr merken, jetzt hat sich aber nur diese Box geändert. Warum hat sich denn die nicht geändert, weil ich halt gerade nicht global diesen Section Style angepasst habe für alle Blöcke die damit verknüpft sind, sondern sozusagen nur im Kontext der Gruppe und.

5:46
Und hier in diesen Pattern ist diese Box eben auf eine Gruppe angewendet. Ich speichere das mal ganz kurz, dass ich euch das besser zeigen kann, wenn ich das mal hier eben noch mal neu lade. So, hier sitzt dieser Style auf dem Element Gruppe so und hier oben sitzt er eben auf dem Element Spalte und das habe ich gerade nicht bearbeitet und deswegen kann ich das dann auch.

6:14
Im Zeit Editor sogar noch mal sehr sehr filigran einstellen, wenn ich das denn möchte. Wenn ich es jetzt aber eben nicht unterschiedlich gestalten möchte, sondern ich wollte eigentlich wirklich, dass alle Boxen die Farbe verändern, dann bleibt mir eigentlich nichts anderes übrig, als entweder alle Elemente einzeln zu bearbeiten, über den No Code Ansatz, also in diesem Fall über den Zeit Editor, dass ich hier sage ich suche noch die Spalte.

6:40
Gehe da ebenfalls ebenfalls Inbox Blau rein. Wähle die Farbe und wähle dann hier ebenfalls den helleren Farbton, dann würde ich das eben anpassen. So und dann müsste ich es auch noch für die Spalten machen, es waren hier 3 Blöcke mit diesem Stil verknüpft oder ich entscheide mich eben dafür, es nicht hier über den Editor zu machen, sondern in der JSON Datei, dann kann ich es an einer zentralen Stelle machen, das wäre dann wahrscheinlich die Zeit sparen Version, aber ich muss es eben im Code machen.

7:08
Ja, dann schauen wir mal ganz kurz, was ich insgesamt hier im Design System vorbereitet habe. Ich gehe noch mal kurz zurück in die in die allgemeinen Stile und hier in die Übersicht im Editor hier in dem Child Theme. Also was gab es, es gibt eben Boxen 1 und 2 damit man ein bisschen Varianz hat, das kann dann natürlich erweitert werden um Box 345, dann haben wir einen Infobox Style vorbereitet der verwendet.

7:37
Dann zum Beispiel eine gelbe Hintergrundfarbe. Dann haben wir verschiedene Arten von Listen mit Checkbox oder Pro und contra Listen vorbereitet und wir haben die Stile für die Sektionen vorbereitet. Das sind dann also hier diese gesamten Sinnabschnitte, also hier einmal das komplett oder eben das komplett, da gibt es genauso wie bei den Boxen weiß und grau als vorbereitete Section Styles.

8:05
Es geht bei den Sektionen eher um die Außenabstände, dass die einheitlich sind, oben und unten und rechts und links. Also wenn ich möchte, dass das alles ein bisschen kompakter ist, dann würde ich global diesen Section Style mir nehmen und da die Innenabstände ein bisschen anpassen.