Websites schnell erstellen mit Divi 5

Deine Wissensquelle für WebDesign, WordPress, WebHosting, SEO & KI – MIKAS ISP seit 22+ Jahren in Eugendorf bei Salzburg, Österreich

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

Was an Divi 5 neu ist

Divi 5 ist ein kompletter Neubau von Divi. Der Builder läuft schneller, und das Design lässt sich zentral steuern. Wer mehrere Seiten mit einheitlichem Aussehen baut, spart damit am meisten Zeit.

Design-Variablen

Variablen speichern Farben, Schriften, Zahlen, Bilder, Texte und URLs an einer Stelle. Technisch entsprechen sie CSS-Custom-Properties, nur ohne Code. Du legst sie einmal im Variablen-Manager an und verwendest sie auf der ganzen Seite. Änderst du später die Hauptfarbe, ändert sie sich überall.

Presets

Ein Preset ist ein gespeicherter Stil für ein Modul oder eine Gruppe von Einstellungen. Du stellst eine Schaltfläche einmal ein und verwendest diesen Stil überall wieder. Divi 5 macht daraus im Hintergrund saubere CSS-Klassen.

Block, Flex und Grid

Im Design-Tab findest du die Einstellung für den Layout-Stil. Dort wählst du zwischen Block, Flex und Grid, und zwar für Bereiche, Zeilen, Spalten und einzelne Module. Damit lassen sich Anordnungen bauen, für die du in Divi 4 eigenes CSS gebraucht hättest.

Das Design-System von Divi 5 einrichten

Elegant Themes bietet ein kostenloses Design-System als Startpaket an. Es besteht aus mehreren JSON-Dateien, je eine für jede Ebene. Importiert wird in dieser Reihenfolge:

  1. Einstellungen des Divi Theme Customizers
  2. Design-Variablen
  3. Presets
  4. Vorlagen für den Theme Builder
  5. Elemente der Divi-Bibliothek

So gehst du ein neues Projekt an

Am meisten bringt das Design-System, wenn du jedes Projekt gleich aufbaust. Bei uns sieht das so aus:

  1. Zuerst das Design-System anlegen: Farben, Schriften, Abstände als Variablen, dazu die Presets.
  2. Dann die Struktur bauen: Seiten, Bereiche und Zeilen, noch ohne Feinschliff.
  3. Danach die Stile anpassen. Weil alles an Variablen und Presets hängt, änderst du an einer Stelle statt auf jeder Seite.
  4. Zum Schluss Ladezeit und Darstellung am Handy prüfen und die Seite online stellen.

Wer Divi 5 noch nicht kennt, lernt am schnellsten, wenn er das kostenlose Design-System importiert und sich ansieht, wie Variablen und Presets zusammenhängen.

Wenn du Unterstützung brauchst, schreib uns an hello@mikas.at.