Designsysteme sparen Wiederholungsarbeit
Ein Designsystem legt die Grundentscheidungen einer Website einmal fest: Farben, Abstände, Schriften und einiges mehr. Danach musst du sie nicht bei jeder Seite neu treffen.
Designvariablen in Divi 5
Im April 2025 kamen mit Divi 5 die Designvariablen dazu. Damit legst du diese Werte global fest. Wer als Webdesigner arbeitet oder mehrere Websites betreut, kennt das: Bei jedem neuen Projekt fängt man mit den Grundlagen wieder von vorne an. Richtig nützlich werden die Variablen deshalb erst, wenn du sie auf mehreren Websites verwenden kannst.
Designvariablen und Presets importieren und exportieren
Elegant Themes hat inzwischen Import und Export für Presets und Designvariablen eingeführt. Dein Designsystem ist damit in wenigen Minuten auf eine andere Website übertragen. Du richtest es einmal ein und verwendest es in jedem Projekt. So geht es.
Was sind Designvariablen in Divi 5?
Designvariablen speichern Werte, die du auf der ganzen Website wiederverwendest. Du verwaltest sie im Variablenmanager in der linken Seitenleiste des Visual Builders.
Klick auf das Symbol, trag deine Werte ein, gib ihnen eindeutige Namen und wende sie auf Module und Presets an. Divi 5 kennt sechs Typen:
- Farben: Lege deine Markenfarben fest und verwende sie überall gleich. Relative Farben und HSL gehen auch.
- Schriften: Speichere deine Schriftwahl, damit du Einstellungen für Überschriften oder Fließtext sofort wiederverwenden kannst.
- Zahlen: Speichere Größen wie Eckradien, Abstände und Zeilenhöhen.
- Bilder: Speichere wiederkehrende Bildelemente wie Logos oder Hintergrundgrafiken.
- Text: Speichere Inhalte, die an mehreren Stellen stehen, etwa die Firmenadresse oder einen Slogan.
- Links: Halte oft gebrauchte URLs bereit.
Zum Verwenden klickst du in einem unterstützten Feld auf das Variablensymbol und wählst die passende Variable. Änderst du eine Variable, ändert sich alles mit, was sie verwendet. Du musst also nicht jede Seite einzeln durchgehen und jedes Vorkommen suchen.
Wozu der Import und Export gut ist
Auf einer einzelnen Website sind Variablen schon praktisch. Die meisten Designer und Agenturen arbeiten aber an mehreren Projekten gleichzeitig, und Farben, Schriften und Abstände jedes Mal neu anzulegen, kostet Stunden.
In Divi 5 exportierst du alle Designvariablen einer Website in eine JSON-Datei und importierst sie in ein anderes Divi-5-Projekt. Das hilft zum Beispiel so:
- Agenturen halten die Markenwerte auf allen Kundenseiten gleich.
- Freiberufler starten jedes neue Projekt mit ihrem Grundgerüst und passen es dann an.
- Teams teilen ein Variablenset, und neue Kolleginnen und Kollegen arbeiten gleich mit den richtigen Werten.
Häufige Anwendungsfälle
Die Tabelle zeigt, wo der Import und Export von Designvariablen im Alltag Zeit spart:
| Anwendungsfall | Für wen | Was es bringt |
|---|---|---|
| Starterkit für Agenturen | Agenturen mit einem festen Grundgerüst | Basisvariablen einmal exportieren und in jedes neue Kundenprojekt importieren |
| Einheitliche Marke auf mehreren Websites | Unternehmen mit mehreren Webauftritten | Eine JSON-Datei für alle Websites, damit Farben, Schriften und Abstände überall übereinstimmen |
| Übergabe an Kunden | Freiberufler, die fertige Seiten übergeben | Das Variablenset mitliefern, damit Kunden oder spätere Entwickler das System auf einer anderen Seite wiederherstellen können |
| Einarbeitung im Team | Designteams mit neuen Mitgliedern | Neue Designer importieren die Datei und arbeiten gleich mit den richtigen Werten |
| Sicherung des Designsystems | Alle, die ihr Setup absichern wollen | Variablen vor großen Änderungen exportieren |
| Weitergabe an andere | Designer, die Ressourcen teilen oder Starterkits verkaufen | Das Variablenset als Datei anbieten, die andere in ihre Divi-5-Projekte importieren |
Fast alle Fälle laufen auf dasselbe hinaus: Du machst die gleiche Arbeit nicht zweimal. Mit dem JSON-Export kannst du dein Designsystem auch auf anderen Websites verwenden, egal ob du ein Projekt übergibst, jemanden einarbeitest oder einfach eine Sicherung willst.
So exportierst du Designvariablen
- Öffne den Visual Builder und klick in der linken Seitenleiste auf das Symbol des Variablenmanagers.
- Oben im Panel siehst du das Import/Export-Symbol.
- Im Export-Tab gibt es ein Feld für den Dateinamen. Wähl einen Namen, den du später wiedererkennst, etwa „Kundenname Variablen“ oder „Agentur-Starterkit“.
- Divi 5 packt alle Designvariablen der Website in eine JSON-Datei: Farben, Schriften, Zahlen, Bilder, Text und Links. Klick auf den Export-Button, dein Browser lädt die Datei herunter.
Die Datei funktioniert auf jeder anderen Divi-5-Website, ob Staging-Umgebung, Kundenprojekt oder lokale Installation im Team. Darin steckt das ganze Variablenset, die Zielseite bekommt dein Designsystem also mit einem einzigen Upload.
Tipps für exportierte Dateien
Klare Namen helfen, sobald jemand anderes deine Datei öffnet. Eine Variable namens „Blau“ sagt nichts: Ist das der Hintergrund der Kopfzeile, die Füllung eines Buttons oder eine Rahmenfarbe? „Header BG“ oder „Dunkler Hintergrund“ ist eindeutig.
Bei Zahlen genauso. „Kartenradius“ versteht jeder, bei „Radius 1“ muss man es erst ausprobieren. Ein paar Minuten Aufräumen vor dem Export sparen später allen Zeit.
Die Datei ist ein Schnappschuss. Was du nach dem Export änderst, steht nicht drin. Setz deshalb ein Datum in den Dateinamen, etwa „Design Kit Februar 2026“, dann hältst du mehrere Versionen leicht auseinander.
Ein Export ist auch eine gute Sicherung. Bevor du die Farbpalette einer Website überarbeitest oder die Abstände umstellst, exportierst du den aktuellen Stand. Gefällt dir das Neue nicht, importierst du die alte Datei und bist wieder dort, wo du angefangen hast.
Der Preset Manager von Divi 5 hat einen eigenen Import und Export. Du hast am Ende also meist zwei JSON-Dateien: eine für Presets und eine für Designvariablen. Zusammen ergeben sie dein komplettes Designsystem.
So importierst du Designvariablen
Du verwendest dasselbe Panel wie beim Export, wechselst aber in den Import-Tab und lädst eine JSON-Datei hoch.
- Öffne den Visual Builder und geh zum Variablenmanager in der linken Seitenleiste.
- Klick oben im Panel auf das Import/Export-Symbol und wechsle in den Import-Tab.
- Wähl die JSON-Datei aus und lade sie hoch. Divi übernimmt jede Variable aus der Datei in deine Website: Farben, Schriften, Zahlen, Bilder, Text und Links in einem Durchgang.
Die Website auf den Import vorbereiten
Ein sauberer Import beginnt mit einem aufgeräumten Variablenmanager. Schau dir vor dem Import an, was auf der Website schon vorhanden ist.
Wenn deine Seite bereits Variablen hat, geh den Variablenmanager nach dem Import durch und entferne, was du nicht brauchst, etwa Duplikate, Platzhalter oder Testwerte. Mit dem Umbenennen von Variablen hältst du das Set einheitlich und verständlich.
Geh jeden der sechs Variablentypen durch und lösch alles, was du beim Ausprobieren angelegt und nie verwendet hast.
Plane auch eine Bereinigung nach dem Import ein. Ein komplettes Designsystem kann Werte enthalten, die zu deiner Seite nicht passen, zum Beispiel eine Textvariable mit der Adresse oder Telefonnummer des vorigen Projekts. Die löschst oder ersetzt du.
Importierte Variablen in bestehenden Inhalten verwenden
Am meisten bringen Designvariablen, wenn du sie in deine Presets einbindest. Verknüpfe die neuen Variablen nach dem Import mit den Optionsgruppen-Presets und Element-Presets.
Du kannst zum Beispiel eine Farbvariable als Hintergrund in einem Button-Preset hinterlegen oder eine Zahlenvariable als Eckradius für alle Kartenmodule. Erst so wird aus einer Sammlung von Variablen ein Designsystem.
Variablenmanager und Preset Manager können beide importieren und exportieren. Du kannst Variablen und Presets also gemeinsam als Paket mitnehmen. Importierst du beide auf einer neuen Seite, steht dein Grundgerüst sofort bereit.
Und wenn deine Seite schon Inhalte hat, die noch feste Werte statt der importierten Variablen verwenden? Für die Umstellung hat Divi 5 drei Werkzeuge.
Mit „Suchen und Ersetzen“ klickst du mit der rechten Maustaste in ein Feld, ersetzt eine feste Farbe oder Schrift durch eine Variable und überträgst das in Sekunden auf die ganze Seite.
„Attribute erweitern“ übernimmt das Styling eines Elements, das schon mit deinen Variablen verknüpft ist, und kopiert es auf andere Elemente in einer Zeile, einem Abschnitt oder der ganzen Seite.
Der Inspektor listet alle Farben, Schriften und Presets einer Auswahl auf. Feste Werte, die noch umgestellt werden müssen, siehst du so auf einen Blick.
Mit diesen drei Werkzeugen ist ein frisch importiertes Variablenset schnell auf der ganzen Website im Einsatz.
Fazit: einmal aufbauen, überall verwenden
Ein Designsystem aufzubauen ist Arbeit. Mühsam wird es, wenn du es für jedes Projekt wiederholst. Mit Divi 5 packst du Farben, Schriften, Abstände und Inhaltsvariablen in eine JSON-Datei, die du wiederverwenden kannst. Einmal aufbauen, exportieren, und jede weitere Website startet mit deinem Grundgerüst.
Wenn du Unterstützung brauchst, schreib uns an hello@mikas.at.
Dieser Ratgeber stammt von MIKAS ISP aus Eugendorf bei Salzburg. Passend dazu: Webdesign für Unternehmen in Salzburg.
