DIVI Tipps – Hilfe, Warum und Aha

Hilfe!

Wie mache ich in DIVI Bearbeitungsschritte rückgängig?

In DIVI können sämtliche Änderungen seit dem letzten speichern schrittweise zurückgenommen werden. Die Funktion ‚versteckt‘ sich in der oberen Seitenliste hinter dem Uhr-Symbol. Nach einem Klick darauf erscheint eine Liste, in der sämtliche Bearbeitungsschritte aufgeführt sind. Nach einem Klick auf solch einen Bearbeitungsschritt erscheint der jeweilige zurückliegende Zustand sofort im Editor.

Die DIVI-Seitenleiste

Weiter zurückliegende Änderungen vor dem letzten Speichern können unabhängig von DIVI wie unter WordPress üblich mit der History zurückgesetzt werden – leider nicht schrittweise sondern jeweils die einzelnen Speichern-Zeitpunkte.

Wie ändere ich in DIVI die Abstände von Zeilen / Sektionen in der mobiler Ansicht

Die Abstände von Zeilen bzw. Sektionen zueinander lässt sich über ‚Wordpress Menü Divi / Designmodifikator / Mobile Designs‘ generall getrennt für Tablet- und Handyansicht ändern

Wie stelle ich Text auf Bildern lesbarer dar, z.B. auf einem Slider

Mehrere Möglichkeiten führen dazu, das Text auf Bildern besser lesbar ist. Manchmal reicht schon eine der Möglichkeiten, hilfreich ist oft eine Kombination:

  • Bild weichzeichnen: Ein weichgezeichnetes Bild ohne harte Kanten darin lässt die Kanten eines darüber liegenden Textes besser hervortreten.
  • Drop-Shadow: Ein Schatten hinter dem Text sorgt für natürlichen Kontrast. Auch an Stellen an denen mangels Kontrast zwischen Textfarbe und Hintergrund der Text verschwimmt, sorgt die komplementäre Farbe des Schattens doch für nötigen Kontrast.
  • Bild aufhellen / abdunkeln: Das Bild entweder in einem Grafikprogramm entsprechend bearbeiten. Oder z.B. in DIVI zusätzlich zum Bild eine Hintergrundfarbe oder einen Hintergrundverlauf definieren und dann in den DVI-Moduleinstellungen ‚Füllung des Hintergrundbilds‘ von ‚Normal‘ z.B. auf ‚aufhellen‘ oder ‚abdunkeln‘ ändern. Auch andere Filter können gute Effekte erzeugen.
  • Block um Text: Indem man nicht das ganze Bild aufhellt / abdunkelt, sondern nur den Block der den Text enthält, wird die Brillianz des Bildes bewahrt.

Wie blende ich von Woocommerce das Warenkorb-Icon im Menü aus

Folgernder CSS-Anweisung (z.B. bei DIVI / Theme-Optionen / Allgemein / Eigene CSS) erledigt das:

.header-cart { display: none !important; }

WordPress lässt sich nicht mehr von Englisch auf Deutsch wechseln

Wenn WordPress unter Einstellungen / Allgemein / Sprache der Webseite zwar Deutsch auswählen, aber nach einem Reload wieder Englisch voreingestellt ist, dann ist möglicherweise DIVI schuld. Im WordPress-Menü muss der Schalter unter DIVI / Theme-Optionen / Übersetzungen Deaktivieren auf ‚deaktivieren‘ (ausgegraut) stehen.

Wie verändere ich die Reihenfolge von Spalten in der mobilen Ansicht

Mehrspaltige Layouts werden in der Mobilen und der Tablet-Ansicht statt von links nach rechts stumpf von oben nach unten dargestellt. Als erstes kommt die erste Spalte, dann die Zweite usw., was meistens auch Sinn macht. Bei etwas individuelleren Layouts ist das jedoch oft nicht erwünscht: Ein Bild in der ersten Spalte (also am PC links) soll dem Text in der zweiten Spalte (am PC rechts) in der mobilen Ansicht erst nach dem Text folgen. Eine Anleitung dazu gibt Elegant Themes. Während ich Methode 1 (jeden Inhalt verdoppeln und dann ausblenden) einfach nur schlecht finde, ist Methode 2 (mit CSS) eindeutig die bessere Wahl.

Warum?

Was ist der Unterschied in DIVI zwischen Transform und Ränder

Die Transform-Möglichkeit eines Moduls (im Design-Tab) verschiebt die Darstellung das Objektes, der ursprüngliche Platz des Moduls bleibt aber erhalten. Anders bei Änderungen per ‚Margin‘: Dieses verschiebt das Objekt komplett.

Ein Transform ändert jedoch nachträglich das Layout der Seite, was sich eventuell in einem Layout-Shift bemerkbar macht, und dies mag weder Google noch die Seitenbesucher. Ich empfehle daher sofern es möglich ist auf transform zu verzichten.

Wozu ist in DIVI das Code-Module da?

Einfach gesagt, kann man in das Code-Module jeglichen Inhalt ohne Restriktionen eingeben.

var footerInfo = document.getElementById('footer-info');
footerInfo.innerHTML = 'Bereitgestellt durch <a href="#">protoSTERN</a>';

ändert z.B. einfach den Inhalt des Footers.

Oder mit

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/daneden/animate.css/master/animate.min.css" />

lassen sich für einzelne Seiten gezielt externe styles oder libraries nachladen

Aha!

wp-content/themes/Divi/core/admin/fonts/modules.ttf verlangsamt die Webseite

Google Page Speed, GTmetrix oder ähnliche Tools beschweren sich, dass die Datei ‚wp-content/themes/Divi/core/admin/fonts/modules.ttf‘ die Seitenladezeit verlangsamt. Ändern lässt sich dies, indem der Zeichensatz vorgeladen wird.

Gehen sie dazu im WordPress-Backend auf DIVI / Theme-Optionen / Integration und fügen sie im ‚Code dem < head > Ihres Blogs hinzufügen‘ folgende Zeile zu:

<link rel="preload" as="font" href="https://IHRESEITE.DE/wp-content/themes/Divi/core/admin/fonts/modules.ttf" type="font/ttf" crossorigin="anonymous">

IHRESEITE.DE müssen sie dabei durch ihre URL ersetzen.

Und warum Elegant Themes statt ttf nicht mal endlich das viel fortschrittlichere woff2 als format nimmt, verstehe ich einfach nicht.

DIVI Rolleneditor

Vor der Übergabe der Seite an den Kunden sollten sie im Dashboard bei Divi / Rolleneditor die einzelnen Berechtigungen anpassen. So kann man z.B. dem Kunden die Rechte nehmen die Divi-Library zu verändern. Oder praktisch bei Woocommerce-Shops der Rolle ‚Shop Manager‘ alle Rechte zu nehmen außer Texte zu bearbeiten.

jquery function generator

Bei divi-space gibt es ein Tool zum erstellen einer Rumpffunktion für einen jquery-Aufruf. Mit zwei Auswahlfeldern wählt man aus was passieren soll, z. B. zeige ein Element wenn der Nutzer auf ein Element klickt, und der Generator erstellt daraufhin die dazu passende jquery-Funktion

Passwortgeschützte Seite mit DIVI

Im visuellen Builder darauf achten, das man in die Seite ‚eingeloggt‘ ist, also das Cookie für das Passwort gesetzt ist. Ohne Cookie sieht ansonsten die Seite im visuellen Builder seltsam aus. Ändern lässt sich das ganze einfach indem man im selben Browser auf einem neuen Tab die Seite lädt und dort das Passwort eingibt

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert