DIVI Tipps – Hilfe, Warum und Aha

Hilfe!

Wie ändere ich 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.

Warum?

Was ist der Unterschied 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.

Wozu ist 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!

DIVI Rolleneditor

Vor der Übergabe der Seite an den Kunden sollten 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.

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

Kommentar hinterlassen

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