Grundlagen

Variablen: Werte, die überall wirken

Farben, Schriften, Abstände, Ecken und Schatten als gemeinsame Werte – wo du sie änderst und was der Reiter Variablen ist.

Stell dir die Theme-Werte als Farbtöpfe und Maßbänder vor, aus denen sich alle Blöcke bedienen. Ein Button malt sich nicht selbst rot an, sondern nimmt „die Primärfarbe“. Eine Sektion misst ihren Abstand nicht selbst ab, sondern nimmt „Abstand Mittel“. Änderst du den Inhalt eines Topfes, ändert sich alles, was daraus schöpft – auf einen Schlag.

Diese gemeinsamen Werte heißen in bloqy Variablen oder Theme-Werte. Du musst dafür nichts programmieren: Du stellst sie in der Oberfläche ein, die Blöcke nutzen sie automatisch.

Eine Änderung an der Primärfarbe erreicht alle Stellen, die sie verwenden.

Welche Werte es gibt und wo du sie änderst

Werte	Beispiele	Hier änderst du sie
Farben	Primär, Sekundär, Akzent, Hell, Dunkel, Text, Hintergrund, Fläche, Rahmen, Erfolg/Warnung/Fehler, eigene Farben	Theme → Farben
Schriften und Schriftgrößen	Schrift für Fließtext und Überschriften, Stärke, Laufweite; Grundgröße und Größe jeder Überschriftenebene	Theme → Typografie, Schriftgrößen
Abstände und Bildschirmgrößen	Abstand Klein, Mittel, Groß; ab welcher Breite „Tablet“ oder „Desktop“ beginnt	Theme → Design-System, Abstände
Ecken und Schatten	wie rund „Abgerundet“ ist, wie stark „Schatten leicht“ ist; Standard für Buttons, Bilder, Karten, Formularfelder	Blöcke → Stile → Ecken / Schatten
Bildformate	Seitenverhältnisse wie 16:9 oder 1:1 für den Zuschnitt	Theme → Bildformate

Alle diese Seiten zeigen dir die Werte mit Namen, Farbfeldern, Vorschau und Auswahllisten. Du siehst sofort, was du einstellst.

Wie Blöcke die Werte nutzen

Alle mitgelieferten Blöcke sind so gebaut, dass sie ihre Farben, Schriften, Abstände und Rundungen aus diesen Werten holen. Das hat drei Vorteile:

Einheitlich: Ein Rot ist überall dasselbe Rot, ein „großer Abstand“ überall gleich groß.
Schnell: Für einen neuen Kunden reicht es oft, Farben, Schriften und Ecken zu ändern – die Website sieht danach aus wie aus einem Guss.
Sicher: Redakteure wählen nur Stile wie „Primär“ oder „Groß“. Sie können keine beliebigen Farben oder Größen eintragen, die nicht zur Marke passen.

Tipp

Öffne nach einer Änderung eine Seite mit vielen verschiedenen Blöcken im Editor und prüfe sie auf Desktop, Tablet und Smartphone – siehe Auf allen Bildschirmgrößen prüfen.

Der Reiter „Variablen“

Unter Gestaltung → Theme gibt es zusätzlich den Reiter Variablen. Er ist für eigene, zusätzliche Werte gedacht, die es auf den anderen Seiten nicht gibt – etwa die Hintergrundfarbe hinter einer vergrößerten Bildansicht (Lightbox) oder ein besonderer Abstand für ein eigenes Design.

Die Werte sind in Kategorien sortiert, z. B. „Schriften“, „Abstände“ oder „Lightbox“. Jede Kategorie hat eine Art: Farbe, Größe oder Text.
Jede Zeile hat einen Namen, einen Wert und eine Beschreibung, die erklärt, wofür der Wert da ist.
Bei Farben öffnet ein Klick auf das Farbfeld die Farbauswahl – wie unter Farben.
Viele Kategorien sind leer. Das ist richtig so: Die wichtigsten Werte pflegst du auf den Seiten Farben, Typografie und Design-System.

Theme, Reiter Variablen mit Kategorien wie Schriften, Schriftgrößen, Abstände, Radien und Lightbox — Der Reiter Variablen mit seinen Kategorien

Die Spalte Verwendung zeigt technische Namen – so sprechen Administratoren die Werte in ihren Designs an. Neue Variablen legt meist dein Administrator an, wenn er ein Design baut, das einen eigenen Wert braucht. Du darfst die Werte dort aber ändern, etwa eine Farbe anpassen: Die Beschreibung sagt dir, wofür sie gilt.

Gut zu wissen

Jede Seite des Themes speicherst du mit dem Button Speichern unten rechts oder mit Strg+S. Erst dann gilt der neue Wert auf der Website.
Besucher sehen die Änderung sofort – bloqy erneuert den Zwischenspeicher der Seiten automatisch.
Was ein Block, ein Design und ein Stil ist und wie sie mit den Werten zusammenspielen, zeigt Wie Blöcke, Designs und Stile zusammenspielen.