Designsysteme reduzieren wiederholte Arbeit im Webdesign
Designsysteme verringern die wiederkehrende Arbeit in der Webseitengestaltung. Sie bieten eine vordefinierte Auswahl an Designentscheidungen für Farbpaletten, Abstände, Typografie und mehr.
Einführung von Designvariablen in Divi 5
Im April 2025 führte Divi 5 die Designvariablen ein, die es ermöglichen, diese Werte global festzulegen. Wenn du als Webdesigner arbeitest oder mehrere Websites betreibst, kennst du die Mühe, bei jedem neuen Projekt die Grundlagen einzurichten. Designvariablen sind besonders nützlich, wenn du sie über verschiedene Websites hinweg wiederverwenden kannst.
Import und Export von Designvariablen und Presets
Kürzlich haben wir Import und Export für Presets und Designvariablen eingeführt, sodass es einfach ist, dein Designsystem in wenigen Minuten zwischen Websites zu übertragen. Richte dein Designsystem einmal ein und nutze es dann in jedem Projekt. So funktioniert es.
Was sind Designvariablen in Divi 5?
Designvariablen speichern wiederverwendbare Werte, die du auf deiner gesamten Website anwenden kannst. Sie sind Abkürzungen für wiederholte Designentscheidungen. Verwalte alles durch den Variablenmanager in der linken Seitenleiste von Divi, während du den Visual Builder benutzt.
Klicke auf das Symbol, füge deine Werte hinzu, benenne sie eindeutig und beginne, sie auf Module und Voreinstellungen anzuwenden. Divi 5 unterstützt sechs Typen:
- Farben: Definiere deine Markenpalette und wende diese Farbtöne konsistent auf deiner Website an. Unterstützt auch relative Farben und HSL.
- Schriften: Speichere deine Typografie-Auswahl, damit du Überschriftstile oder Fließtext-Einstellungen sofort wiederverwenden kannst.
- Zahlen: Speichere Größenentscheidungen wie Eckradien, Abstände und Zeilenhöhen.
- Bilder: Einbeziehen von wiederkehrenden visuellen Elementen wie Logos oder Hintergrundgrafiken.
- Text: Speichere Inhalte, die an mehreren Stellen erscheinen, wie Firmenadressen oder Slogans.
- Links: Halte bedeutungsvolle URLs bereit zur Verwendung.
Um sie zu verwenden, klicke auf das Variablensymbol in einem unterstützten Feld und wähle die Variable, die du anwenden möchtest. Wenn du eine Variable aktualisierst, wird alles, was sie verwendet, automatisch auf deiner Website aktualisiert. Es ist nicht nötig, jede einzelne Seite zu durchsuchen oder jede Vorkommnis zu verfolgen.
Wie Importieren und Exportieren von Designvariablen hilft
Designvariablen sind auf einer einzelnen Seite nützlich, aber die meisten Designer und Agenturen führen mehrere Projekte gleichzeitig durch. Das erneute Erstellen von Farben, Schriften, Abständen und wiederkehrenden Inhalten von Grund auf verschwendet Stunden.
Divi 5 ermöglicht es dir, alle Designvariablen einer Website in eine einzelne JSON-Datei zu exportieren und diese Datei dann in ein anderes Divi 5-Projekt zu importieren. Es nützt jedem:
- Agenturen halten die Markeneigenschaften auf allen Websites konsistent.
- Freiberufler legen ein Starter-Framework in jedes neue Kundenprojekt und passen es dann an.
- Teams können ein Variableset teilen, sodass neue Mitglieder sofort mit den richtigen Werten beginnen können, ohne diese neu zu erstellen.
Gewöhnliche Anwendungsfälle
Die Tabelle unten zeigt gängige Szenarien auf, in denen der Import und Export von Designvariablen echte Zeitersparnis bietet. Jeder passt zu einem anderen Arbeitsablauf, wahrscheinlich findest du hier deinen:
Use Case | Wer es braucht | Wie es hilft
--- | --- | ---
Agentur-Starterkits | Agenturen mit einem Standard-Design-Framework | Exportiere deine Basisvariablen einmal und importiere sie in jedes neue Kundenprojekt
Markenkonsistenz über mehrere Websites | Unternehmen mit mehreren Webauftritten | Teile eine JSON-Datei über alle Websites, sodass Farben, Schriften und Abstände überall übereinstimmen
Kundenübergaben | Freiberufler, die fertige Seiten übergeben | Exportiere das vollständige Variableset und füge es deinen Lieferungen hinzu, damit Kunden oder zukünftige Entwickler das System auf einer anderen Seite wiederherstellen können
Teamausbildung | Designteams, die neue Mitglieder aufnehmen | Neue Designer importieren die Datei und bauen mit den richtigen Werten, anstatt sie manuell einzustellen
Designsystem-Backup | Jeder, der sein Setup schützen möchte | Exportiere deine Variablen als Sicherheitsnetz, bevor du große Änderungen vornimmst
Community-Sharing | Designer, die Ressourcen teilen oder Starterkits verkaufen | Verpacke dein Variableset als herunterladbare Datei, die andere in ihre eigenen Divi 5-Projekte importieren können
Die meisten dieser Anwendungsfälle führen auf einen Punkt zurück: nicht die gleiche Arbeit zweimal zu machen. Ob du ein Projekt übergibst, ein Teammitglied einarbeitest oder deine eigene Arbeit schützt – der JSON-Export gibt deinem Designsystem ein Leben über eine einzelne Website hinaus.
Wie exportiert man Designvariablen
- Öffne den Visual Builder und klicke auf das Variablenmanager-Symbol in der linken Seitenleiste.
- Du siehst das Import/Export-Symbol oben im Panel.
- Im Export-Tab siehst du ein Feld für deinen Export-Dateinamen. Gib ihm etwas Beschreibendes wie „KundeName Variablen“ oder „Agentur-Starterkit“, damit du es später wiedererkennst.
- Nachdem du es benannt hast, packt Divi 5 alle Designvariablen auf deiner Website in eine einzelne JSON-Datei. Farben, Schriften, Zahlen, Bilder, Text und Links sind alle zusammengefasst. Klicke auf den Export-Button, und dein Browser lädt die Datei herunter.
Diese exportierte JSON-Datei funktioniert mit jeder anderen Divi 5-Website. Du kannst sie in eine Staging-Umgebung, ein Kundenprojekt oder ein lokales Setup eines Teamkollegen einfügen. Die Datei enthält dein vollständiges Variableset, sodass die empfangende Website dein gesamtes Designsystem in einem einzigen Upload erhält.
Bestmögliche Nutzung deiner exportierten Dateien
Klare Variablennamen machen einen großen Unterschied, wenn jemand anderes deine JSON-Datei öffnet. Eine Variable, die „Blau“ heißt, sagt der nächsten Person nichts. Blau könnte der Hintergrund der Kopfzeile, eine Schaltflächenfüllung oder eine Rahmenfarbe sein. Aber „Header BG“ oder „Dunkler Hintergrund“ nimmt das Rätselraten weg.
Das Gleiche gilt für Zahlen. „Kartenradius“ ist sofort klar. „Radius 1“ zwingt jemanden, es anzuwenden, nur um herauszufinden, was es tut. Ein paar Minuten Namensbereinigung vor dem Export spart allen anderen später Zeit.
Die heruntergeladene JSON-Datei spiegelt keine Änderungen wider, die du nach dem Export machst. Das Hinzufügen eines Datums zu deinen Dateinamen hilft. Etwas wie „Design Kit – Februar 2026“ macht es einfach, Versionen auseinanderzuhalten, wenn du mehrere gespeichert hast.
Exporte können auch als Backups dienen. Bevor du die Farbpalette einer Website überarbeitest oder eine Abstands-Skala austauscht, speichert ein schneller Export den aktuellen Zustand. Wenn die neue Richtung nicht funktioniert, kannst du die alte Datei importieren und alles schnell wiederherstellen.
Divi 5s Preset Manager hat seinen eigenen separaten Import und Export. Der Preset Manager und der Variablenmanager handhaben Exporte separat. Das bedeutet, dass du normalerweise mit zwei JSON-Dateien endest: einer für Presets und eine für Designvariablen. Zusammen bilden sie dein vollständiges Designsystem und machen es einfacher zu verwalten.
Wie importiert man Designvariablen
Der Import von Designvariablen verwendet dasselbe Import/Export-Panel wie der Export, aber du wechselst zum Import-Tab und lädst eine JSON-Datei hoch.
- Öffne den Visual Builder und geh zum Variablenmanager in der linken Seitenleiste.
- Klicke auf das Import/Export-Symbol oben im Panel und navigiere zum Import-Tab.
- Sobald du es hochlädst, lädt Divi jede Variable aus dieser Datei in deine aktuelle Seite. Farben, Schriften, Zahlen, Bilder, Text und Links werden in einem Durchgang übernommen.
Vorbereitung deiner Seite vor dem Import von Variablen
Ein sauberer Import beginnt mit einem sauberen Variablenmanager. Bevor du eine JSON-Datei aus einem anderen Projekt lädst, nimm dir ein paar Minuten Zeit, um zu überprüfen, was bereits auf deiner Website vorhanden ist.
Wenn deine Seite bereits variablen eingerichtet hat, überprüfe deinen Variablenmanager nach dem Import und säubere alles, was du nicht benötigst, wie Duplikate, Platzhalter oder Testwerte. Du kannst auch Variablen umbenennen, um dein Set konsistent und leicht verständlich zu halten.
Blättere durch jeden der sechs Variablentypen und entferne alles, was du während des Testens erstellt, aber nie tatsächlich angewendet hast.
Auch plane eine Bereinigung nach dem Import. Ein vollständiges Designsystem-JSON könnte Werte enthalten, die nicht auf deine Seite zutreffen. Eine gespeicherte Textvariable wie eine spezifische Straßenadresse oder Telefonnummer ist etwas, das du möglicherweise nach dem Import löschen oder ersetzen möchtest.
Verwendung importierter Variablen mit deinem bestehenden Inhalt
Designvariablen funktionieren am besten, wenn du sie in deine Presets einbindest. Nach dem Import, binde deine neuen Variablen in die Optionsgruppen-Presets und Element-Presets ein.
Du könntest zum Beispiel eine Farbvariable als Hintergrundfarbe in einem Schaltflächen-Preset festlegen. Oder eine Zahlenvariable auf deinen Eckradius in allen Kartenmodulen anwenden. So gehst du von einem Set von Variablen zu einem funktionierenden Designsystem über.
Sowohl der Variablenmanager als auch der Preset Manager unterstützen Import und Export. Das bedeutet, dass du Variablen und Presets zusammen als portables Kit bewegen kannst. Importiere beide auf eine neue Seite, und dein Designframework ist einsatzbereit, ohne es von Grund auf neu zu erstellen.
Was, wenn deine Seite bereits Inhalte hat und diese Inhalte immer noch statische Werte verwendet, anstatt der gerade importierten Variablen? Divi 5 gibt dir drei Tools, um schneller umzuschalten.
Finden und Ersetzen lässt dich in einem beliebigen Feld mit der rechten Maustaste klicken, eine statische Farbe oder Schriftart durch eine Variable ersetzen und diese Änderung in Sekunden über die gesamte Seite hinweg schieben.
Attribute erweitern nimmt das Styling von einem Element, das du bereits mit deinen Variablen verbunden hast, und kopiert es auf andere Elemente über eine Zeile, Sektion oder ganze Seite hinweg.
Der Inspektor gibt dir einen Überblick über jede Farbe, Schriftart und Voreinstellung in einer Auswahl. Du kannst statische Werte, die noch umgeschaltet werden müssen, auf einen Blick erkennen.
Setze alle drei zusammen ein, und ein frisch importiertes Set von Variablen wird zu einem funktionierenden Designsystem auf deiner Website. Hier ist eine schnelle Übersicht über die Unterschiede zwischen all diesen Features und wann du sie verwenden solltest.
Mache dich noch heute mit Designvariablen in Divi 5 vertraut!
Der schwierigste Teil des Aufbauens eines Designsystems ist, es mehr als einmal zu tun. Divi 5 macht es einfacher, indem es dir ermöglicht, deine Farben, Schriften, Abstände und Inhaltsvariablen in eine JSON-Datei zu verpacken, die du wiederverwenden kannst. Baue das System einmal, exportiere es, und jede nachfolgende Seite startet mit deinem bereits vorhandenen Fundament.
Wenn Sie Unterstützung benötigen, können Sie sich jederzeit per E-Mail an hello@mikas.at wenden.
