Zusammen mit der offiziellen Veröffentlichung der neuen Version Divi5 hat Elegantthemes das Divi Design-System veröffentlicht.
Dieses Design-System kann einem beim Arbeiten mit Divi5 tatsächlich eine Menge Arbeit abnehmen und Inspirationen liefern.
Was ist das und wie funktioniert es?
Die Firma Elegantthemes stellt unter der Bezeichnung Design System eine Sammlung von Voreinstellungen, Presets und vorgefertigten Abschnitten zur Verfügung.
Das Design System wird HIER (auf Englisch) beschrieben und du kannst es dir unter Angabe deiner Mail-Adresse kostenlos herunter laden. Es kommt in Form einer Sammlung von Javascript-Dateien, welche du in die Divi-Bibliothek, den Theme Builder und den Customizer hochladen kannst.
Neben vorgefertigten Variablen und Presets für die Gestaltung deiner Inhalte gibt es auch eine große Anzahl an vorgefertigten Abschnitten. So gibt es Hero-Sektionen oder vorgefertigte Blog-Sektionen, die den neuen Looper verwenden.
Eine Übersicht über das Design-System hat Elegantthemes HIER veröffentlicht, wobei die Veröffentlichung bereits im vergangenen Herbst (Black Friday) erfolgt ist.
Insgesamt bietet das Design System eine umfangreiche Basis, die du entsprechend deinen Vorstellungen anpassen und verwenden kannst, um deine Webseite zu gestalten.
Vorteile
Für mich ist die Nutzung (und Anpassung) des Design-Systems hoch interessant.
Vorallem die vordefinierten Schrift-Größen für die Überschriften und den Body-Text können leicht angepasst werden. Die bereits hinterlegten Werte ersparen einen Haufen Arbeit, vorallem auch bezüglich der mobilen Ansichten.
Wichtig zu wissen!
Nach meinen bisherigen Erfahrungen kannst du das Design-System auch auf einer bereits bestehenden Webseite installieren. Es wird deine bisherigen Einstellungen nicht zerstören.
Dieser Hinweis erfolgt aber OHNE GARTANTIE, bitte erstelle vorher unbedingt eine Sicherungs-Kopie deiner Webseite!
Vorgehensweise
Nach dem Download entpackst du die Zip-Datei. Die Dateien befinden sich anschließend in einem Ordner, der den gleichen Namen wir die Zip-Datei trägt.
Die Divi-Bibliothek
Presets & Variablen
In der Divi-Bibliothek kannst du ganz oben "Import & Export" anklicken. Dann wählst du "Importieren" und anschließend "Dateien auswählen".
Zuerst importierst du die Presets:
Du suchst das Verzeichnis mit dem Design System und wählst dort die Datei "Divi-5-Launch-Freebie_Presets.json" aus. Anschließend setzt du das Häkchen bei "Voreinstellungen importieren" und klickst auf "Importieren".
Anschließend importierst du die Variablen: die Datei heisst "Divi-5-Launch-Global-Variables.json".
Jetzt hast du die Voreinstellungen für Presets und Variablen importiert.
Sektionen & Seiten
Ich empfehle auch die "Divi-5-Launch-Freebie_All_Sections_Layouts.json" zu installieren. Diese Datei enthält eine große Anzahl an vorgefertigten Sektionen als Vorlagen, die ich gerne als Inspiration nutze.
Wenn du auch komplett vorgefertigte Seiten verwenden möchtest, kannst du ausserdem auch noch die Datei "Divi-5-Launch-Freebie_Pages.json" installieren.
Der Divi Theme Builder
Auch für den Divi Theme Builder gibt es vorgefertigte Templates. Um diese zu installieren wechselst du in den Divi Theme Builder.
In der oberen rechten Ecke klickst du auf das Symbol mit den beiden Pfeilen nach oben und unten, wählst "Importieren" und lädst die Datei "Divi-5-Launch-Freebie_Theme-Builder-Templates.json" hoch.
Die Templates werden geladen und du klickst oben links noch den Button um die Vorlagen zu speichern.
Der Customizer
Um die Voreinstellungen für den Customizer zu importieren, wechselst du in den Customizer und gehst dort genauso vor wie im Theme Builder. Die Datei heisst "Divi-5-Launch-Freebie_Theme-Customizer.json".
Nach dem Upload werden die Änderungen direkt gespeichert.
Und jetzt?
Du hast jetzt Basis-Einstellungen auf deiner Webseite eingerichtet und Vorlagen für Sektionen installiert.
Natürlich kannst du dir jetzt ganz einfach eine Webseite aus den vorhandenen Modulen bzw. vorgefertigten Seiten zusammen klicken.
Das kann ich aber ausdrücklich nicht empfehlen!
Vielmehr solltest du die Variablen und Voreinstellungen nach deinen Vorstellungen anpassen und die vorgefertigten Sektionen als Inspiration nutzen, die du ebenfalls individuell modifizieren solltest.
Sonderfall Buttons
Ich verstehe nicht warum, aber die vordefinierten Buttons lassen sich in der aktuellen Ausführung des Desing-Systems nicht anpassen bzw. die Presets für die Buttons lassen sich nicht verändern.
Für Buttons musst du also bei Bedarf eigene Presets anlegen und kannst die vorhandenen Presets nicht verändern.
