Maximale Kreativität mit Divi

Mit Divi von Elegant Themes baust du WordPress-Seiten ohne eine Zeile Code. Richtig eigenständig wird eine Divi-Seite aber erst, wenn du über die fertigen Layouts hinausgehst. Hier sind die Handgriffe, die wir in Kundenprojekten am häufigsten einsetzen: Gestaltung, globale Elemente, eigener Code, Ladezeit und SEO.

1. Eigene Gestaltung statt Standardlayout

Die mitgelieferten Layouts sind ein guter Start. Nach Standard sieht eine Seite dann aus, wenn sie niemand anpasst. Diese Stellschrauben machen den größten Unterschied:

• Schriften und Farben: Lade die Schriften deines Corporate Designs hoch und leg die Firmenfarben einmal zentral fest.
• CSS-Animationen: Eine dezente Bewegung lenkt den Blick auf das, was wichtig ist. Sparsam eingesetzt wirkt sie am besten.
• Verläufe und Schatten: Farbverläufe und weiche Schatten geben flachen Flächen etwas Tiefe.

Beispiel: einfache CSS-Animation in Divi

.et_pb_text {
  animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Den Code fügst du in den Theme-Optionen unter „Benutzerdefiniertes CSS“ ein oder direkt im Modul unter „Erweitert > Benutzerdefiniertes CSS“.

2. Globale Elemente und Voreinstellungen nutzen

Mit den globalen Funktionen von Divi sparst du Zeit, und die Seite bleibt einheitlich.

• Globale Module: Ein Inhaltsblock, den du einmal änderst, ändert sich auf allen Seiten, auf denen er vorkommt.
• Globale Voreinstellungen (Presets): Gestaltung für Buttons, Texte oder Bilder einmal speichern und überall verwenden.
• Theme Builder: Eigene Header, Footer und Vorlagen für Blogbeiträge für die ganze Website.

Das lohnt sich vor allem, wenn eine Website viele Seiten im selben Stil hat oder ein Corporate Design genau eingehalten werden muss.

3. Eigene Module mit einem Shortcode

Wer programmiert, kann Divi um eigene Funktionen erweitern. Der einfachste Weg ist ein Shortcode:

function custom_divi_module() {
  return '<div class="custom-module">Mein benutzerdefiniertes Modul</div>';
}
add_shortcode('mein_modul', 'custom_divi_module');

Füge den Code in die functions.php deines Child-Themes ein und setz auf einer Seite [mein_modul] ein. Wichtig ist das return: Mit echo würde die Ausgabe an der falschen Stelle der Seite landen, meist ganz oben. So baust du wiederverwendbare Elemente oder dynamische Inhalte ein.

4. Ladezeit und SEO

Eine schöne Seite, die langsam lädt oder in Google nicht auftaucht, bringt wenig. Divi arbeitet gut mit diesen Werkzeugen zusammen:

• Bilder: Komprimierte WebP-Dateien verwenden, etwa mit dem EWWW Image Optimizer.
• Caching: Ein Caching-Plugin wie WP Rocket verkürzt die Ladezeit.
• SEO: Mit Rank Math pflegst du Titel, Beschreibung und strukturierte Daten direkt im Divi-Editor.

Die Grundlagen zur Suchmaschinenoptimierung findest du in unserem Beitrag SEO-Optimierung: die wichtigsten Grundlagen.

5. Bewegung und Interaktion

Bewegte Elemente ziehen den Blick an, wenn sie gezielt eingesetzt werden. In Divi geht das ohne Zusatzaufwand:

• Animationen: Lottie-Animationen oder SVG-Grafiken lassen sich direkt im Builder einbinden.
• Scroll- und Parallax-Effekte: Divi hat eigene Bewegungsoptionen eingebaut.
• Formulare und Live-Chat: Plugins wie WPForms oder Tidio lassen sich mit Divi kombinieren.

6. Divi und SEO gemeinsam planen

Am meisten bringt eine Divi-Seite, wenn Gestaltung und Suchmaschinenoptimierung von Anfang an zusammen geplant werden. Was das kostet und wie wir dabei vorgehen, steht auf unserer Seite zur SEO-Optimierung.

Fazit: Divi kann mehr als die fertigen Layouts

Mit eigenen Schriften und Farben, globalen Elementen und ein wenig Code wird aus einer Divi-Seite eine eigenständige Website. Achte dabei auf die Ladezeit, dann passt es auch für Google.

Zu Elegant Themes und Divi