Schatten

Mit Schatten können wir unserem Layout Haptik geben und wir können auch den Klickreiz erhöhen, dass wir beispielsweise besser erkennen können, ob Elemente klickbar sind. Wir können die visuelle Hierarchie verstärken, indem Elemente, die zum Beispiel auf Sticky gesetzt worden sind, mit einer höheren Schattenhierarchie ausgestattet werden, sodass das alles insgesamt ein bisschen, ich sag mal mehr der Physik entspricht und dementsprechend möglicherweise auch als insgesamt etwas logischer und vielleicht auch ein bisschen feiner ausgearbeitet. Filigraner wirkt ein bisschen hochwertiger vielleicht, es kommt sehr stark auf die Designsprache insgesamt an, ja, und WORDPRESS bietet eben die Möglichkeit, Schatten als Designsystematik zu konfigurieren. Wir haben 3 Schatten vorbereitet, ich möchte einmal kurz zeigen, wo wir das anwenden können und ich möchte zum Beispiel hier dieser Box einfach einen Schatten geben und.

Dafür wähle ich diese Box aus. Wenn alle Boxen dieses Typs auf der gesamten Website einen Schatten bekommen sollen, dann würde ich das global einstellen. Ich möchte das jetzt wirklich nur an dieser Stelle zeigen und deswegen klicke ich wirklich diese Box im Editor an und wähle dann jetzt hier unten im Abschnitt Ränder und Schatten, da muss ich noch diese Pünktchen hier wählen und dann die Schatten aktivieren, das ist ein bisschen versteckt und anschließend habe ich hier verschiedene Schatten zur Auswahl, so, da könnte ich jetzt zum Beispiel Schatten 1 und 2 oder 3 wählen. Wir haben eben 3 verschiedene Level, also 3 Hierarchie Ebenen für sozusagen Klickbar fixiert beispielsweise und vielleicht modal oder so etwas. Wenn ich das auf semantische Werte übertragen wollte vorbereitet gut, wenn ich jetzt also diesen Schatten hier wähle, dann hat meine Box anschließend natürlich einen Schatten, wenn mir den nicht gefällt, kann ich den global anpassen.

Ich gehe also in den Side Editor rein unter Design Editor in die Stile und bei Schatten bietet wordpress eben die Möglichkeit, diese Schatten über das Backend zu konfigurieren, wie das bei Farben und Schriften auch der Fall ist. Ich kann hier individuelle Schatten hinzufügen aus Gründen, die hauptsächlich mit der Code Qualität zu tun haben, würde ich das ähnlich wie bei Farben nicht empfehlen. WordPress erzeugt dann eben CSS Variablen, die etwas lästig später wieder auf die Codebasis zurückzuführen sind.

Ich persönlich würde entweder die bestehende Systematik überschreiben oder, wenn sie ergänzt werden soll, diese Ergänzung eben nicht hier nur in der Datenbank vornehmen, indem ich einfach im Backend auf das Plus klicke, sondern ich würde hier oben ein Level 4 oder was auch immer hinzufügen und das passiert dann eben in der 7. Json okay.

Gut, ich möchte Level 1 anpassen, da gehe ich dann rein und dann sehe ich hier sind schon 2 Schatten vorbereitet und diese 2 Schatten die existieren jetzt hier eben weil wir diese Schatten mit sozusagen multiple Box Shadows erzeugt haben, damit eben genau dieser Effekt entsteht und.

Und wenn ich jetzt hier rein klicke, dann sieht man auch, dass diese Werte alle auf 0 stehen und der Farbwert auf 0, weil wir in der Theme JSON mit Mix Color gearbeitet haben, um den Schatten besser mit der Hintergrundfarbe verrechnen zu können. Das ist einfach ein bisschen schöner aussieht, ich zeig mal ganz kurz wie das aussieht, indem ich in den Theme Editor rein gehe und das in der Theme Json einmal kurz zeige Shadow so und.

Und dann sehen wir eben hier, da sind unsere Schatten. Hoppla, hier sind unsere Schatten. Level 1 Level 2, Level 3 und dann sehe ich eben hier sind die Schatten angewendet worden, die greifen auch auf die Farbvariablen zurück und das ist eben hier mit Color Mix in OK LC umgewandelt, damit das einfach ein bisschen harmonischer aussieht. So und hier könnte ich jetzt natürlich dann erstmal die Beschriftung anpassen oder natürlich auch noch weitere Schatten hinzufügen.

Wenn ich diese Thematik also ergänzen möchte, dann wäre das der von mir jetzt erstmal bevorzugte weg. Ich gehe hier wieder raus in den Editor, wieder in die Stile, wieder in die Schatten, in den Schatten 1 und lösche einfach mal den einen Schatten hier weg und den anderen passe ich an, indem ich jetzt eben hier hingehe und einfach mal sage, so, ich möchte zum Beispiel, dass der einfach nur nach unten, so ein bisschen verschoben wird, aber kleiner wird als das Objekt selbst. Das kann ich dann mit einer negativen Ausdehnung hier zum Beispiel machen, dass ich dann so einen Eindruck hier bekomme. Und wenn ich dann natürlich speichere, dann ist anschließend hier meine Startseite auch entsprechend angepasst.