divi-tipp.de

Divi-Tipps aus der Praxis

Ein Tipp.
Ein Aha.
Besser bauen mit Divi.

Divi kann viel mehr, als die meisten nutzen. Nicht, weil es kompliziert wäre – sondern weil niemand die Handgriffe zeigt, die im Alltag den Unterschied machen. Wir bauen seit Jahren Kundenseiten mit Divi. Das hier sind die Tipps, die wir unseren Academy-Mitgliedern zuerst beibringen.

Zu den 7 Tipps ↓ Alle Tipps in der Academy →

// Divi 4 & Divi 5 · auf Deutsch · aus dem Agenturalltag

Sieben Divi-Tipps, die wirklich etwas ändern

Keine Tricks, keine Spielereien – Handwerk. Jeder Tipp spart dir Zeit, macht die Seite schneller oder erspart dir das große Nacharbeiten. Klapp „So geht's" auf, wenn du es gleich ausprobieren willst.

  1. Tipp 01Divi 5Divi 4

    Farben und Abstände einmal festlegen – nie wieder suchen

    Der häufigste Fehler auf Divi-Seiten: dieselbe Farbe 30-mal per Hand eingetragen, in drei leicht verschiedenen Tönen. Divi 5 hat dafür globale Variablen – für Farben, Schriften und Abstände. Eine Variable ändern, und jede Seite zieht mit.

    So geht's
    1. Im Builder die globalen Variablen öffnen und dein Farbset anlegen: Primär, Akzent, Text, Hintergrund – mehr braucht eine Seite selten.
    2. Abstände als Variablen definieren (z. B. space-s, space-m, space-l) und in Sektionen und Reihen nur noch diese nutzen.
    3. Divi 4: das Gleiche im Kleinen mit den globalen Farben in den Theme-Optionen – und Werte konsequent aus der Palette wählen, nie per Hand tippen.
  2. Tipp 02Divi 5Divi 4

    Presets statt Copy & Paste

    Ein Button, der auf 40 Seiten gleich aussehen soll, wird nicht 40-mal gestaltet. Er bekommt ein Preset. Änderst du das Preset, ändern sich alle 40. Divi 5 verwaltet das zentral im Preset-Manager – inklusive Presets für Sektionen und Reihen.

    So geht's
    1. Modul gestalten, dann oben im Modul-Fenster „Als Preset speichern" – Name vergeben, das sprechend ist („CTA Primär", „Karte hell").
    2. Neue Module bekommen das Preset per Klick. Beim Anlegen kannst du ein Preset als Standard setzen – dann sieht jeder neue Button sofort richtig aus.
    3. Faustregel: Wenn du eine Einstellung zum dritten Mal von Hand machst, ist es Zeit für ein Preset.
  3. Tipp 03Divi 5

    Gruppieren statt Spalten-Tricks

    Icon links, Text rechts, drei Karten in einer Reihe: In Divi 4 brauchte das Spalten-Akrobatik oder ein Addon. Divi 5 hat das Gruppen-Modul und echtes Flexbox-Layout. Elemente gruppieren, Richtung und Abstand einstellen – fertig. Das Layout bleibt auch auf dem Handy stabil.

    So geht's
    1. Module, die zusammengehören, in eine Gruppe ziehen (z. B. Icon + Überschrift + Text einer Karte).
    2. In der Gruppe das Layout auf Flex stellen: Richtung Zeile oder Spalte, Abstand über deine Abstands-Variable, Ausrichtung nach Bedarf.
    3. Der Gruppe ein Preset geben – und die Karte ist ab jetzt ein wiederverwendbarer Baustein.
  4. Tipp 04Divi 5Divi 4

    Mobil zuerst prüfen, nicht zuletzt

    Die meisten Besucher kommen mit dem Handy. Trotzdem wird die Handy-Ansicht oft erst ganz am Schluss angesehen – und dann hängt die Hälfte der Abstände. Besser: jede Sektion sofort in allen drei Ansichten prüfen, bevor die nächste gebaut wird.

    So geht's
    1. Nach jeder fertigen Sektion unten im Builder auf Tablet und Handy umschalten. Abstände, Schriftgrößen und Bildhöhen kontrollieren.
    2. Responsive Werte setzen, wo nötig: Divi merkt sich pro Ansicht eigene Werte (das kleine Handy-Symbol neben dem Feld). Divi 5 erlaubt zusätzlich eigene Breakpoints.
    3. Überschriften mobil kleiner, Abstände enger – und Sektionen, die auf dem Handy nichts bringen, dort ausblenden statt zu stapeln.
  5. Tipp 05Divi 5Divi 4

    Bilder: das richtige Format vor dem Upload

    Divi lädt, was du hochlädst. Ein 6-MB-Foto vom Handy bleibt ein 6-MB-Foto – und die Seite wird zäh. Der wirksamste Performance-Tipp ist deshalb kein Plugin, sondern Disziplin beim Upload: passende Größe, WebP, Alt-Text.

    So geht's
    1. Vor dem Upload verkleinern: Hero-Bilder maximal 1920 px breit, Inhaltsbilder 1200 px, Vorschaubilder 600 px. Als WebP speichern.
    2. Jedem Bild einen Alt-Text geben – für Barrierefreiheit und Suchmaschinen. Dateiname sprechend („divi-tipps-praxis.webp", nicht „IMG_4711").
    3. Sicherheitsnetz: eine automatische Upload-Verkleinerung in WordPress, damit auch die Kollegin nichts Riesiges hochlädt.
  6. Tipp 06Divi 5Divi 4

    Bewegung nur mit Zweck

    Divi kann alles animieren – und genau das ist die Falle. Eine Seite, auf der alles einfliegt, wirkt unruhig und billig. Eine Animation pro Sektion, die eine Aussage unterstützt, wirkt hochwertig. Divi 5 bringt dafür Interaktionen mit: Hover-Effekte und Aktionen ohne Zusatz-Code.

    So geht's
    1. Frag bei jeder Animation: Was soll der Besucher dadurch verstehen? Keine Antwort – keine Animation.
    2. Divi 5: Interaktionen am Modul nutzen (z. B. Karte hebt sich beim Hover) statt Scroll-Effekte über die ganze Seite. Divi 4: Scroll-Effekte sparsam, nur auf Hero und Kernaussage.
    3. Immer testen, wie es sich mit „Bewegung reduzieren" im Betriebssystem verhält – gute Seiten bleiben auch ohne Animation vollständig.
  7. Tipp 07Divi 5Divi 4

    Der Builder ist schneller, als du denkst

    Wer nur mit der Maus baut, baut langsam. Divi hat Tastenkürzel für fast alles, ein Ebenen-Panel für die Struktur – und in Divi 5 Workspaces, mit denen du dir den Builder so einrichtest, wie du arbeitest.

    So geht's
    1. Im Builder ? drücken: die Liste aller Tastenkürzel. Die fünf wichtigsten merken – Speichern, Kopieren, Einfügen, Rückgängig, Ebenen.
    2. Ebenen-Panel offen lassen: Sektionen und Reihen umbenennen („Hero", „Angebot", „FAQ"), dann findest du dich auch auf langen Seiten sofort zurecht.
    3. Divi 5: einen Workspace mit deinen Panels und Einstellungen speichern. Beim nächsten Öffnen ist alles da, wo du es gelassen hast.

Was sich mit Divi 5 wirklich ändert

Divi 5 ist kein Update, sondern ein neuer Builder. Fünf Punkte, die du im Alltag sofort merkst – ehrlich eingeordnet.

ThemaDivi 4Divi 5
AufbauSektion › Reihe › Spalte, feste RasterGruppen und Flexbox – Elemente frei anordnen, auch ohne Spalten
Design-SystemGlobale FarbenGlobale Variablen für Farben, Schriften und Abstände
PresetsPro ModulZentraler Preset-Manager, auch für Sektionen und Reihen
TechnikShortcodes im InhaltBlockbasiert, spürbar schnelleres Frontend
OberflächeEin Builder-LayoutWorkspaces, Ebenen-Panel, Interaktionen

Ehrlicher Zusatz: Der Umstieg lohnt sich – aber nicht blind. Divi-Addons, eigenes CSS im Child-Theme und ältere Layouts können haken. Wir stellen Kundenseiten deshalb immer erst auf einer Kopie um. Wie das geht, zeigen wir in der Academy Schritt für Schritt.

So lernst du Divi richtig

Ganz ehrlich: Eine Website, die professionell aussieht, schnell lädt und sauber gebaut ist, ist Handwerk – dafür gibt es Agenturen wie uns. Aber wenn du selbst ranwillst, ist Divi das beste Werkzeug, das wir kennen.

In der Cord Media Academy zeigen wir dir, wie wir Divi im Agenturalltag einsetzen: kurze Video-Lektionen, auf Deutsch, an echten Beispielen. Von den Grundlagen bis zu Divi 5 – mit genau den Tipps, die auf dieser Seite nur der Anfang sind. Du investierst Zeit statt Geld, und wir begleiten dich dabei.

Divi in der Academy lernen →

Video-Kurse für WordPress & Divi · von Web-Profis aus der Praxis

Häufige Fragen zu Divi

Divi 4 oder Divi 5 – womit soll ich anfangen?

Neue Projekte bauen wir mit Divi 5: schnelleres Frontend, globale Variablen, Gruppen und Flexbox, Workspaces. Bestehende Divi-4-Seiten laufen weiter und müssen nicht sofort umziehen. Wichtig vor dem Umstieg: Addons und Child-Theme prüfen und immer auf einer Kopie testen – nie direkt auf der Live-Seite.

Brauche ich Divi-Addons oder Erweiterungen?

Seltener, als die Werbung behauptet. Die meisten Dinge, für die früher ein Addon nötig war – Karten-Layouts, Hover-Effekte, Abstände – löst Divi 5 mit Bordmitteln: Gruppen, Flexbox, Presets, Interaktionen. Jedes Addon ist ein Update mehr, das brechen kann. Erst ausreizen, was Divi kann, dann ergänzen.

Ist Divi noch zeitgemäß?

Mit Divi 5 ja. Der Builder wurde von Grund auf neu gebaut: keine Shortcodes mehr, deutlich schnelleres Rendering, ein echtes Design-System mit Variablen und Presets. Divi ist damit ein visueller Builder, der sauberen Code liefert – wenn man ihn richtig einsetzt. Genau das lernst du hier.

Was kostet Divi?

Divi wird direkt bei Elegant Themes lizenziert, als Jahresabo oder als Lifetime-Lizenz für unbegrenzt viele Websites. Divi 5 ist im Lizenzpreis enthalten. Dazu kommen nur noch Domain und Hosting – WordPress selbst ist kostenlos.

Wo finde ich regelmäßig neue Divi-Tipps?

In der Cord Media Academy. Dort erscheinen unsere Divi-Tipps als kurze, praxisnahe Video-Lektionen – für Divi 4 und Divi 5, auf Deutsch, aus dem Agenturalltag. Diese Seite zeigt sieben davon als Vorgeschmack.

Kann ich meine bestehende Divi-Seite auf Divi 5 umstellen?

Ja, Divi 5 bringt eine Migration für bestehende Layouts mit. Der ehrliche Rat aus der Praxis: erst eine Kopie der Seite umstellen, Addons und eigenes CSS prüfen, alle Seiten durchklicken – und erst dann live schalten. Bei komplexen Seiten ist das eine Aufgabe für Profis, die wir gern übernehmen.

Der nächste Tipp wartet in der Academy

Sieben Tipps hast du jetzt. Die anderen zeigen wir dir im Video – Schritt für Schritt, an echten Seiten. Und falls du deine Website lieber in Profihände geben willst: Du weißt ja, wo du uns findest.

Jetzt in der Cord Media Academy starten →