Tricks & Kniffe für DIVI-Webseiten

Autor: 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!

Aufbau & Arbeitsweise DIVI

Etwas, das für mich selbstverständlich war, für Menschen ohne gute räumliche Vorstellungskraft ist das nicht so:

DIVI arbeitet mit Ebenen. Das heißt, ganz unten ist der Abschnitt, darauf/darin die Zeile und im Innersten das Modul.

Im Abschnitt können natürlich mehrere Zeilen nebenbeinander und darin wiederum mehrere Module enthalten sein. Dank diesen Ebenen hast du extrem viele Möglichkeiten, mit Hintergründen, Farben und Bildern zu arbeiten, um Effekte zu erzeugen.

Ebenen DIVI

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

Classic Editor statt Gutenberg für Beiträge aktivieren

Du findest den Classic Editor viel besser für deine Beiträge als den Gutenberg-Editor? Dafür brauchst du bei DIVI kein extra Plugin.

Wechsel in die DIVI-Optionen, geh zum Reiter Builder und Fortgeschritten.

Jetzt kannst du einfach den klassischen Editor aktivieren.

DIVI Classic Editor

Mit 3 Klicks die Mobilansicht verbessern

Am Desktop sieht alles toll aus, aber Mobile klebt der Text am Bildschirmrand? Ich persönlich mag das überhaupt nicht und hab lieber einen kleinen Abstand zwischen Rand und Modul.

  1. Geh im visuellen Builder in eine beliebige Zeile (grün).
  2. Öffne das Preset und bearbeite das Standardpreset. Das Modul wird nun grau. Weiter oben in diesem Artikel habe ich die Presets erklärt.
  3. Wechsel in den Reiter Design und öffne Größe.
  4. Jetzt stellst du die Breite für Tablet und Mobil auf ein paar % weniger. So, dass es dir gefällt. Speichern.
  5. Die Zeilen werden nun auf der ganzen Website in der mobilen Ansicht etwas eingerückt und du hast einen gleichmäßigen Rand. Da, wo du das nicht haben möchtest, gehst du einfach in die normalen Einstellungen der Zeile und stellst es auf 100% zurück.
  6. Alternativ: Statt der Größe gibst du bei Zwischenraum einen Abstand von 1% oder 10 px rechts und links an.

DIVI mobiler Abstand zum Rand

DIVI Infomodule linksbündig anzeigen lassen

Standardmäßig sind die Infomodule mittig platziert. Wenn du versucht hast, das über den Text mittig zu stellen, bist du sicher verzweifelt.

So gehts ganz einfach:

Öffne das Informationsmodul, wechsel in den Reiter Design, dann zu Größe und setze den Inhalt auf 100%. Voilá.

DIVI Informationsmodul linksbündig

 

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

Autor: Nadin

23. März 2022

Sag mal, was taugt deine Website eigentlich?

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

Einwilligung
Marketing von
Nadin Schmidt

Hi, ich bin Nadin.

Die Technik ist meine Welt. Was für andere super nervig ist, macht mir Spaß!

In meinem Toolkoffer habe ich DIVI, WordPress & Active Campaign für deinen Erfolg.

Mit mir bremst dich die Technik nie wieder aus und beim Wort „Funnel“ kannst du dich entspannt zurücklehnen!

Fragen? Schrei(b).



ALL-INKL.COM - Webhosting Server Hosting Domain Provider

*Meine Website wird gehostet bei AllInkl. 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…