Gestaltung und Individualisierung mit Divi – So passen Sie Ihre Website an

Feb. 8, 2025 | Tools

Monitor
Das WordPress-Theme Divi bietet umfangreiche Möglichkeiten, um das Design einer Website individuell zu gestalten. Besonders nützlich sind der Theme Builder, globale Farben und die Option, eigene Schriftarten hochzuladen. In diesem Beitrag erfahren Sie, wie Sie mit Divi ein einzigartiges Design für Ihre Website erstellen.

Individuelle Header- und Footer-Designs mit dem Theme Builder

Mit dem Divi Theme Builder können Sie Kopf- und Fußzeilen genau nach Ihren Wünschen anpassen. Diese individuellen Designs können für die gesamte Website oder nur für bestimmte Seiten verwendet werden.

So funktioniert es:

  1. Gehen Sie zu Divi → Theme Builder.
  2. Klicken Sie auf „Neues Template hinzufügen“ und legen Sie fest, wo der Header oder Footer erscheinen soll.
  3. Erstellen Sie mit dem Divi Builder ein eigenes Layout.
  4. Fügen Sie Navigationselemente, Logos oder Call-to-Actions hinzu.
  5. Speichern und veröffentlichen Sie das Design.

Sticky Navigation oder Sticky Header aktivieren

Eine Sticky Navigation oder ein Sticky Header bleibt beim Scrollen sichtbar und verbessert die Benutzerfreundlichkeit.

So aktivieren Sie diese Funktion:

  1. Öffnen Sie den Theme Builder und bearbeiten Sie den Header.
  2. Wählen Sie das Modul oder die Zeile, die fixiert bleiben soll.
  3. Unter Erweiterte Einstellungen → Scroll-Effekte aktivieren Sie „Stick to Top“.
  4. Speichern und testen Sie das Verhalten auf der Website.

Eigene CSS-Styles in Divi hinzufügen

Falls die Designoptionen nicht ausreichen, können Sie mit eigenem CSS noch präzisere Anpassungen vornehmen.

Möglichkeiten für benutzerdefiniertes CSS:

  • In den Theme-Optionen unter Divi → Theme-Optionen → Custom CSS
  • Direkt in den Modul-Einstellungen unter Erweitert → Benutzerdefiniertes CSS

Dadurch können Sie beispielsweise Schriftgrößen, Abstände oder Animationen nach Ihren Wünschen anpassen.

Globale Farben in Divi nutzen

Divi bietet die Möglichkeit, globale Farben festzulegen. So bleibt das Farbschema Ihrer Website einheitlich, und Änderungen lassen sich mit nur wenigen Klicks umsetzen.

So definieren Sie globale Farben:

  1. Öffnen Sie den Divi Builder und klicken Sie auf eine Farbe.
  2. Wählen Sie „Farbe als global definieren“.
  3. Diese Farbe wird nun automatisch auf alle verknüpften Elemente angewendet.

Eigene Schriftarten in Divi hochladen

Falls Sie eine individuelle Typografie nutzen möchten, können Sie in Divi eigene Schriftarten hochladen.

Schritt-für-Schritt-Anleitung:

  1. Öffnen Sie den Theme Customizer → Schriftarten-Einstellungen.
  2. Wählen Sie „Eigene Schriftart hochladen“ und laden Sie eine TTF-, OTF- oder WOFF-Datei hoch.
  3. Wenden Sie die Schriftart auf Textelemente an und speichern Sie die Einstellungen.
  4. Alternativ können Schriftarten auch direkt in den Moduleinstellungen des Divi Builders hochgeladen werden.

Individuelle Gestaltung mit Divi

Mit den Funktionen von Divi können Sie Ihre Website ganz individuell gestalten. Der Theme Builder, die Verwendung von globalen Farben und die Möglichkeit, eigene CSS-Anpassungen vorzunehmen, bieten maximale Flexibilität. Nutzen Sie diese Funktionen, um ein einzigartiges und professionelles Design für Ihre WordPress-Website zu erstellen.

Bei Fragen oder Tipps zur Umsetzung können Sie sich jeder Zeit gerne bei uns melden.

Kontakt aufnehmen