Tricks & Kniffe für DIVI-Webseiten

Autor: VA Nadin

23. März 2022

Hier bekommst du meine Tricks & Kniffe, die ich in meiner täglichen Arbeit mit DIVI anwende.

Seit März 2021 gibt es kaum Tage, an denen ich nicht die blau/grün/grauen DIVI-Linien einer Website vor mir sehe. Und genauso viele Fehler sind mir mittlerweile aufgefallen, die viele weniger routinierte Anwender nicht so im Blick haben.

Also zähle ich dir hier nach und nach auf, was mir so auffällt und was dir das Leben mit deiner DIVI-Website erleichtern kann!

Hover- & Mobiloptimierung in allen DIVI-Einstellungen

Du kannst so gut wie ALLES in DIVI an Hover und Mobil anpassen. Das knifflige dabei: die Funktion ist erstmal versteckt. Erst wenn du immer darauf achtest, findest du sie.

So kannst du für jede einzelne, noch so kleine Einstellung eine separate Einstellung für Mobil und Tablet hinterlegen und tolle Hovereffekte machen.

Du willst zB, dass ein Bild beim drüberhovern dunkler, heller oder farbig wird? Dann machst du das mit der Hover-Einstellung von DIVI.

Du willst, dass Mobil ein anderes Bild angezeigt wird als am Desktop? Oder dass die Trennlinie mobil kleiner ist als am Desktop?

So gehts:

Öffne die Einstellungen eines Moduls/Zeile/Abschnitts und hovere mit der Maus über den weißen, freien Bereich rechts von der Überschrift. Manchmal musst du auch einfach ins weiße klicken. Dann tauchen die Symbole auf, du kannst auf das kleine Handy für Mobileinstellung und auf den Mauszeiger für Hovereffekte klicken und den Inhalt/Design darunter anpassen.

Hover und Mobiloptimierung deiner DIVI Website

Vorsicht: beachte, dass diese EInstellung jetzt geöffnet ist und du sie wieder deaktivieren musst (wieder draufklicken) wenn du eine allgemeine Einstellung vornehmen willst. Ansonsten werden alle Änderungen nur für das ausgewählte Gerät oder den Hover vorgenommen.

Presets für globale Änderungen richtig verwenden

DIVI bietet dir die geniale Möglichkeit, für jedes Modul das Standard-Preset anzupassen und weitere Presets zu erstellen.

Im Theme Customizer nimmst du die absoluten Basiseinstellungen vor. Schriftgröße, Farbe, Links, Button,…

In den Presets kannst du jedes Modul nochmal ganz explizit designen. Entweder änderst du dafür das Standard-Preset oder du legst aus deinem aktuellen Design ein neues Preset an.

Presets DIVI

Wenn du dann ein neues Modul verwendest, erscheint es entweder direkt im geänderten Standard-Preset oder du wählst einfach das passende Preset aus.

Wenn du das mit den Presets sauber und ordentlich machst, kannst du so mit wenigen Klicks deine ganze Website bearbeiten.

Ein Beispiel: du hast zwei unterschiedliche Buttons. Das Standardpreset enthält einen roten Button, das Preset Buttons blau einen blauen. Wenn du jetzt den blauen Button auf deiner gesamten Website in einen grünen verwandeln möchtest, gehst du in die Preseteinstellungen und änderst sie hier ab (das Modulfenster ist grau). Schon sind alle blauen Buttons grün.

DIVI Bibliothek sinnvoll nutzen

In der DIVI Bibliothek kannst du ganze Abschnitte, Zeilen und Module speichern. Das macht Sinn, wenn du bestimmte Elemente auf mehreren Seiten einfügen willst, zum Beispiel Kontaktformulare.

Wenn du den Haken bei „als globales Element speichern“ setzt, kannst du das Element auf mehreren Seiten einsetzen und Änderungen werden auf allen Seiten umgesetzt. Beispiel: du hast auf jeder Seite ein Kontaktformular als globales Element. Nun fügst du den Datenschutzhinweis hinzu. Dieser wird dann in jedes globale Kontaktformular eingefügt.

DIVI Bibliothek globales Element

Globale Elemente erkennst du an einem knallgrünen Rahmen. Beachte: wenn du einen ganzen Abschnitt als globales Element deklariert hast und ein Modul entfernst, wird es auch in der Bibliothek aus dem Abschnitt entfernt.

Ein Element aus der Bibliothek fügst du ein, indem du auf das Plus drückst und dann auf den Reiter DIVI Bibliothek wechselst. Du musst dazu natürlich entsprechend im Abschnitt, der Zeile oder im Modul sein, d.h. du kannst bei einer Modulauswahl keinen Abschnitt aus der Bibliothek laden.

DIVI Bibliothek

Elemente mobil ausblenden

Du kannst mit wenigen Klicks die Darstellung für Mobil und Tablet anders gestalten. Blende zum Beispiel unwichtige Elemente in der Mobilansicht ganz aus oder erstelle sie neu und blende das entsprechende für Desktop/Mobil aus.

Dazu gehst du einfach im Abschnitt/Zeile/Modul auf Erweitert → Sichtbarkeit und setze deine Auswahl.

Elemente mobil ausblenden

Was bereitet dir bei DIVI Kopfschmerzen? Sag es mir und ich nehme es mit auf!

Autor: VA Nadin

23. März 2022

Wie gut ist deine Website wirklich?

Trag dich für den Newsletter ein und erhalte die Checkliste!

Einwilligung
Virtuelle Assistentin Website DIVI Blog

Hi, ich bin Nadin.

Technik & Psychologie sind meine Welt.

In meinem Toolkoffer habe ich DIVI & WordPress, Active Campaign, Google & Social Media und Impulsgespräche für deinen authentischen Online-Auftritt.

Fragen? Schrei(b).

Join News zum Glanzauftritt – der etwas andere Newsletter.

Meine Website wird gehostet bei AllInkl*.



ALL-INKL.COM - Webhosting Server Hosting Domain Provider

*Hierbei handelt es sich um einen Affiliate-Link. Wenn du darüber kaufst, erhalte ich eine kleine Provision – du zahlst dafür nicht mehr.

Lies doch auch mal…