Divi5 – Variablen

Variablen sind eine wesentliche Verbesserung in Divi5. In Variablen können

• Farben
• Schriftarten
• Bilder
• Links
• Zahlen
• und Text

festgelegt werden, um sie an verschiedenen Stellen der Webseite verwenden zu können.

Variablen haben den großen Vorteil, dass man Änderungen nur an einer Stelle vornehmen muss und die Änderung sofort überall erscheint.

Unter Farben können alle auf der Webseite verwendeten Farben festgelegt werden. Diese können z.B.

• eine primäre Farbe
• eine sekundäre Farbe
• eine Farbe für die Überschriften
• eine Farbe für den Text
• eine oder mehrere Farben für den Hintergrund

sein.

Du gibst der Farbe einen Namen (z.B. Überschrift) und gibst den gewünschten Farbwert als Hex-Code ein.

Unter Schriftarten kannst du die Schriften festlegen, die du auf deiner Webseite verwenden möchtest. In der Regel ist es sinnvoll zwei Schriften zu verwenden: eine für die Überschriften und eine für den Text.

Die Verwendung von Google-Fonts bringt Probleme mit der DSGVO (Datenschutzgrundverordnung) mit sich, wenn sie nicht lokal gespeichert und eingebunden werden.

Daher empfehle ich dringend, Google-Fonts in den Divi Theme Optionen zu deaktiveren und die gewünschen Schriften in den Variablen hochzuladen und zu zu ordnen.

Hierzu vergibst du einen Namen (z.B. Überschrift) und klickst dann in das Schriftarten-Feld. Dort klickst du dann auf "hochladen" und lädst die Schrift gewünschte Schrift hoch (Google Fonts kannst du im Netz suchen und auf deinen Rechner speichern, die Benutzung ist kostenlos).

Die Definition von Bildern bietet sich in erster Linie für dein Logo an oder wenn du ein bestimmtes Bild mehrfach auf deiner Webseite verwendest.

Du vergibst einen Namen und wählst das entsprechende Bild aus der Mediathek aus.

Link-Variablen kannst du verwenden, um externe Links an einer Stelle zu definieren und an verschiedenen Stellen deiner Webseite zu verwenden.

Zahlen sind sehr mächtige Variablen und sehr vielseitig einsetzbar.

So kannst du hier die Schriftgrößen für die Überschriften von H1 bis H6 festlegen oder auch verschiedene Schriftgrößen für den Text.

Ausserdem kannst du verschiedene Abstände (innen oder aussen, Margin oder Padding) definieren und mit einem sprechenden Namen versehen.

Ebenso kannst du den Radius von gerundeten Ecken definieren.

Auch für die standardisierte Breite von Rändern bieten sich diese Variablen an.

In diesem Abschnitt kannst du Text-Variablen definieren, die du an verschiedenen Stellen deiner Webseite verwendest, zum Beispiel deine Rufnummer oder deine Adresse. Wenn du umziehen solltest, brauchst du diese Daten nur an einer Stelle zu ändern und die Änderungen werden automatisch auf der gesamten Webseite übernommen.

Variablen sind ein fantastisches Tool, um einer Webseite hinsichtlich Farben, Schriften, Abständen und vielem mehr ein konsistentes Aussehen zu geben.

Die Verwendung erfordert einmal ein paar Grundeinstellungen, der Rest erledigt sich dann fast von selbst.