Grundlagen
Wie Blöcke, Designs und Stile zusammenspielen
Block, Design, Stil und Theme-Werte an einem durchgehenden Beispiel – und wo eine Änderung wirkt.
In bloqy greifen vier Dinge ineinander: der Block, sein Design, die Stile und die Theme-Werte. Wer verstanden hat, wer was festlegt, findet jede Einstellung auf Anhieb – und weiß vorher, wie weit eine Änderung reicht.
Die vier Ebenen auf einen Blick
| Ebene | Beantwortet die Frage | Beispiel | Wer legt es fest? |
|---|---|---|---|
| Block | Was steht auf der Seite? | ein Button mit Text und Ziel | Der Redakteur fügt ihn ein und füllt den Inhalt. |
| Design | Wie ist der Block aufgebaut? | Button-Design „Standard“: Text in einer farbigen Fläche, auf Wunsch mit Icon | Du – im Block-Studio. |
| Stil | Welche Variante soll es hier sein? | Button-Stil „Primär“, „Sekundär“ oder „Umriss“; Button-Größe S, M, L | Du legst die Auswahl fest, der Redakteur wählt je Block. |
| Theme-Werte | Welche Farben, Schriften, Abstände gelten? | Primärfarbe Rot, Schrift „Inter“, Ecken „weich“ | Du – unter Theme und bei den Stilen Ecken und Schatten. |
Ein Beispiel von vorne bis hinten: der Button
- Block: Ein Redakteur fügt auf der Startseite einen Button ein und schreibt „Jetzt anfragen“ hinein. Mehr muss er nicht tun.
- Design: Der Button hat das Design Standard. Es legt fest, dass der Text in einer Fläche mit etwas Luft rundherum steht und ein Icon links oder rechts haben kann. Dieses Design hast du (oder bloqy) einmal festgelegt – es gilt für jeden Button mit diesem Design.
- Stil: In der Seitenleiste unter Stil steht beim Redakteur Button-Stil: Primär. Er könnte auch „Sekundär“, „Umriss“ oder „Text-Button“ wählen. Welche Werte es gibt und wie sie heißen, bestimmst du unter
Gestaltung → Blöcke → Stile. - Theme-Wert: „Primär“ heißt: Die Fläche bekommt die Primärfarbe aus
Theme → Farben, die Schrift darauf die passende helle oder dunkle Farbe aus der Spalte Schrift darauf. Die Rundung der Ecken kommt aus dem Stil Ecken, die Schrift aus der Typografie.
Was passiert, wenn du etwas änderst?
| Du änderst … | Wirkung |
|---|---|
| die Primärfarbe von Rot auf Blau | Alle Buttons mit „Primär“ werden blau – auf allen Seiten, in allen Sprachen. Ebenso Links, Sektionen mit Hintergrund „Primär“ und alles andere, was diese Farbe nutzt. |
| das Design „Standard“ des Buttons (z. B. mehr Innenabstand) | Alle Buttons mit diesem Design ändern sich – gleich welchen Stil der Redakteur gewählt hat. |
| den Namen eines Stil-Werts, z. B. „Primär“ → „Markenfarbe“ | Nur die Bezeichnung in der Auswahl ändert sich. Auf den Seiten bleibt alles, wie es ist. |
| den Standardwert des Button-Stils von „Primär“ auf „Umriss“ | Alle Buttons, bei denen der Redakteur nichts gewählt hat, zeigen nun den Umriss. Buttons, bei denen er ausdrücklich „Primär“ gewählt hat, bleiben gefüllt. |
Drei Regeln, die du dir merken kannst
- Designs wirken überall. Seiten merken sich nur, welches Design ein Block hat. Änderst du das Design, sieht jede Seite mit diesem Design sofort anders aus. Vorher hilft der Reiter Verwendung im Block-Studio.
- Stile wirken nur dort, wo sie gewählt sind. Ein Stil ist eine Auswahl am einzelnen Block. Wählt ein Redakteur bei einer Sektion „Hintergrund: Dunkel“, betrifft das genau diese Sektion. Was „Dunkel“ bedeutet, legst du dagegen einmal für alle fest.
- Theme-Werte sind die gemeinsame Grundlage. Designs und Stile verweisen auf Farben, Schriften und Abstände des Themes, statt eigene Werte mitzubringen. Darum reicht oft eine einzige Änderung im Theme, um die ganze Website anzupassen. Mehr dazu unter Variablen: Werte, die überall wirken.
Der Standardwert eines Stils
Jeder Stil hat einen Standard: den Wert, der gilt, solange ein Redakteur nichts anderes wählt. Beim Button-Stil ist das „Primär“, beim Abstand oben/unten „Mittel“, beim Hintergrund „Keiner“. Im Editor sieht der Redakteur den Standard bereits vorausgewählt.
- Den Standard für die ganze Website legst du in der Stil-Liste fest (Spalte Standard).
- Für ein einzelnes Design kannst du im Block-Studio einen anderen Startwert wählen – siehe Aussehen eines Designs. Dort bedeutet Wie Stil (…): „nimm den Standard aus der Stil-Liste“.
Was ist was – Entscheidungshilfe
| Du möchtest … | Dann änderst du … |
|---|---|
| dass alle Buttons runder werden | den Stil Ecken (Standard für Buttons) |
| eine neue Markenfarbe überall | Theme → Farben |
| dass Redakteure zusätzlich einen „Akzent“-Button wählen können | einen neuen Wert im Stil Button-Stil (mit Hilfe deines Administrators) |
| eine Box, die völlig anders aufgebaut ist (z. B. als Preis-Karte) | ein neues Design des Blocks Box |
| dass eine bestimmte Karte standardmäßig einen Schatten hat | den Startwert „Schatten“ in genau diesem Design |