Am 30. August 2018 ist es endlich da. Die Rede ist vom neuen Spaltenlayout bei Divi, welches 14 neue Spaltentypen mit sich bringt. Damit es nun möglich 5 und 6 Spalten Layouts anzulegen. Das bringt noch mehr Flexibilität bei Divi.

Wenn Du eine neue Zeile bei Divi einfügst, wirst Du nun viele weitere Spaltenlayouts zur Verfügung haben. So kannst Du nun auch ein 5 Spaltenlayout erstellen welches 3/5, 1/5 und 1/5 hat. Oder eine Zeile die 3/5 und 2/5 hat. Auch Zeilen mit 6 x 1/6 sind möglich.

Wie Du merkst, handelt es sich bei diesem Divi Update um einen echten Lifechanger das Dir beim Erstellen von Websites mit Divi noch mehr Freiheiten lassen.

Ich bin super happy, dass es diese Funktion nun endlich gibt.
Divi jetzt ansehen

Divi lässt sich auf viele unterschiedliche Weisen anpassen, was viele Vorteile mit sich bringt. So kannst Du benutzerdefiniertes CSS über mehrere Methoden hinzufügen und wir zeigen Dir in diesem Blog Artikel wie das genau funktioniert. Custom CSS bei Divi ist eine super Sache und bringt deiner Website noch mehr Individualität.

1: Inline-CSS

Du kannst wie auch in anderen Editoren Inline-CSS verwenden um Schriften, Abstände oder andere Eigenschaften festzulegen. Das geht schnell, hat aber auch seine Nachteile.

Besonders bei umfangreicheren Websites würde Inline-CSS die Seite unübersichtlich und aufwändig machen diese zu bearbeiten.

Angenommen die Website hat über 50 Inhaltsseiten und bei Überschriften wird Inline-CSS genutzt um bei Divi die Überschriften anders zu stylen. Dann müsste bei einer gewünschten Design Änderung man nochmals an alle Inline-CSS Sachen rangehen.

Einer der Vorteile von Inline-CSS ist, dass diese vom Caching ausgeschlossen sind. Wenn man auf automatisches Caching stellt, ist das nicht unbedingt ein Vorteil.

Um die Liste möglichst vollständig zu machen, habe ich auf die Möglichkeit mit Inline-CSS trotzdem aufgenommen.

2: Benutzerdefiniertes CSS im Design-Customizer

Diese Variante gefällt mir persönlich sehr gut. Denn hier lässt sich die Website quasi im Livemodus anpassen. Einfach in den Design-Custizer gehen und dann unten auf benutzerdefiniertes CSS klicken. Auf der linken Seite ist dann eine längere Eingabemaske zu sehen, bei der die ganzen CSS Anpassungen eingegeben werden können.

Legt man irgendwelche Anpassungen fest, wird auf der rechten Seite das Resultat live angezeigt. So sparst Du dir lästiges Speichern und Testen.
Bei den Kundenprojekten gehe ich oft so vor und packe die ganzen CSS Anpassungen in den Design-Customer um live arbeiten zu können.

Nach Fertigstellung kopiere ich die CSS Stylings und füge es in der CSS Datei meines Child-Theme ein. Dann noch ein paar schöne Kommentare mit dazu schreiben, damit es noch etwas übersichtlicher ist.

3: Registerkarte "Abschnitte, Zeile und Module"

Du hast das bei Divi bestimmt schon gesehen, dass es oben den Reiter "Erweitert" gibt und dort hast Du die Möglichkeit eigene CSS Anpassungen direkt einzugeben.

Es gibt mehrere Felder und Du kannst die ID, CSS-Klassen, Vorher, Hauptelemente, After Elemente und auch benutzerdefiniertes CSS bei Divi nutzen.

Die Vorher und Nachher Felder eignen sich für die Pseudoelemente die seit CSS3 möglich sind.

Bei den Zeilen kann jede Spalte individuell über CSS angepasst werden. Damit die CSS Anpassungen nur für eine bestimmte Zeile gelten soll, eignet sich diese Methode hervorragend. Was auch gehen würde, dass Du der Zeile eine CSS Klasse gibst und sie dann über die CSS Datei stylst.

4: Auf der Seite oder im Beitrag

Wenn Du den Divi-Builder nutzt, kannst Du bei jeder einzelnen Seite oder auch bei Beiträgen, Projekten und anderen Post-Types die den Divi-Builder zulassen, eignes CSS hinzufügen. Das ist sehr praktisch, wenn es bestimmte CSS Anpassungen nur für eine bestimmte Seite geben soll.

Rechts oben beim Divi-Builder findest Du diese Möglichkeit und nach dem Klicken auf das Einstellungen Symbol öffnet sich ein kleines Fenster. Dort kannst Du dann den CSS Code einfügen.

Leider ist das Eingabefenster sehr klein, sodass man viel scrollen und suchen muss. Daher kann ich diese Methode nicht so empfehlen. Wenn Du hier CSS Anpassungen vornimmst und die Seite exportierst, werden diese Anpassungen leider nicht übernommen.

5: Divi Design Optionsseite

Wenn Du auf Divi Optionen gehst, dann hast Du ganz am Ende eine große Box um dein benutzerdefiniertes CSS eingeben zu können. Nach einem Divi Update werden diese Änderungen nicht überschrieben.

6: Child Theme nutzen bei Divi

Ein eigenes CSS-Stylesheet zu nutzen ist meiner Meinung nach die beste Möglichkeit. Sehr lange Dateien sind auch dann noch übersichtlich und nach einem Divi Update bleiben diese Änderungen alle erhalten.

Wenn Du wissen möchtest, wie Du einen Child Theme erstellst, dann ist dieser Artikel für dich bestimmt interessant.

Es ist soweit und die Funktion für Divi ist endlich da!
Optimierte und bessere Code-Bearbeitung für das Divi Theme.

Heute kommt von Divi ein Update für einen voll funktionsfähigen Code-Editor, der die Erfahrung beim Hinzufügen von benutzerdefiniertem CSS und anderem benutzerdefiniertem Codes bei den Optionen für Visual Builder und Divi Theme erheblich verbessert hat.

So sieht es aus:

Heute gibt es ein  mega spannendes Update für Entwickler, die in Divi benutzerdefiniertes CSS und benutzerdefinierten Codes benutzen. Beim Erstellen einer Website mit dem Divi Builder kann jeder Teil jedes Moduls mit eigenen CSS-Regeln angepasst werden.

Darüber hinaus kannst Du mit den Divi-Designoptionen benutzerdefinierter Code zu deiner Divi Seite und zu verschiedenen Teilen deiner Website hinzufügen.

Heute wird das Code-Editieren in Divi deutlich übersichtlicher und einfacher, indem ein voll funktionsfähiger Code-Editor mit dazu kommt, der das Schreiben und Bearbeiten von Code so viel einfacher und angenehmer macht.

Zu den Optimierungen gehören unter anderem Syntaxhervorhebung, Fehlermeldungen, automatische Vervollständigung, Farbauswahl Funktoinen, Mehrfachauswahl, Suchen und Ersetzen und vieles mehr!
Das ist ein weiterer Grund warum ich das Divi Theme liebe.

Jede Woche kommen neue coole Updates. Und erst letzte Woche gab es schon so ein mega geniales Update.

Heute wird die Code Bearbeitung für Divi an mehreren Stellen deutlich verbessert. Innerhalb des Visual Builders bekommst Du nun eine hammermäßige Code-Bearbeitung, wenn Du deinen Modulen benutzerdefiniertes CSS Regeln hinzufügen möchtest.

Das funktioniert außerdem beim Bearbeiten von benutzerdefiniertem Code in Code Modulen und beim Verwenden der Custom CSS- und Integrationseinstellungen in den Divi-Designoptionen eine verbesserte Code-Bearbeitung erhalten.

Die Funktionen und Vorteile dieses Update:

  • Benutzerdefiniertes CSS wie in einem Entwickler Editor
  • Smart Syntax Highlighting
  • Warnungen und Fehlerreporting, so erkennst Du Probleme schon früher
  • Autovervollständigung und Vorschläge im Editor
  • Color Picker
  • Mehrfachauswahl
  • Suchen und Ersetzen im Divi Editor

Was sich bei diesem Divi Update ebenfalls noch getan hat:

Jedes Mal, wenn der Divi Builder neue Funktion bekommt, wird der Builder selbst ein bischen größer. ElegantThemes spricht nicht über die Geschwindkeit der Website im Frontend. Sie sprechen darüber, wie lange es dauert, bis die Visual Builder-Benutzeroberfläche geladen ist, Du also mit der Bearbeitung deiner Seite beginnen kannst.

In diesem Update wurde viel Zeit in die Optimierung der Ladezeiten gesteckt, wie die Visual Builder-Anwendung gebündelt wird und wie die einzelnen Teile der Anwendung geladen werden, um Ladezeiten zu minimieren, die der Builder zum Starten benötigt.

Durch Aufteilen der Anwendung in separate Blöcke und Lazy-Loading in die benötigten Elemente (dies geschieht unsichtbar im Hintergrund) konnte die Größe des Visual Builders um ganze 35% reduziert und die Ladezeiten stark reduziert werden.

Das bedeutet, dass Du all diese neuen Verbesserungen für die Code-Bearbeitung in Divi bekommst, ohne das die Divi Ladezeiten darunter leiden.

Du möchtest Divi erwerben?

Du bist am Überlegen Divi zu kaufen? Hier sind meine Divi Erfahrungen

Wenn Sie bei dem Divi den Footer am Seitenrand fixieren haben möchten, dann geht das sehr einfach und schnell.

Gehe zu Divi -> Theme Optionen -> General
Scrollen Sie dann nach unten und fügen Sie bei Benutzerdefiniertes CSS folgendes ein

#main-footer {
position: fixed;
bottom: 0;
width: 100%;
}

Anschließend auf "Änderungen speichern" klicken und nach Aktualisieren der Website wird der Footer auch beim Scrollen fixiert angezeigt.

Standardmäßig ist das erste Element beim Divi Akkordeon geöffnet wenn Du die Seite lädst. Möchtest Du aber, dass alle geschlossen sind, so kannst Du folgendes Script in deine footer.php vom Child Theme legen.

<script>
jQuery(function($){
$('.et_pb_accordion .et_pb_toggle_open').addClass('et_pb_toggle_close').removeClass('et_pb_toggle_open');$('.et_pb_accordion .et_pb_toggle').click(function() {$this = $(this);setTimeout(function(){$this.closest('.et_pb_accordion').removeClass('et_pb_accordion_toggling');},700);});});</script>
Quelle: https://divibooster.com/make-divi-accordions-closed-by-default/

Wie sieht das Akkordeon dann aus?

Nach dem das Script in der footer.php eingebaut und gespeichert wurde, sind alle Elemente beim Aufruf der Seite geschlossen. Hier das Ergebnis:

Es sieht noch nicht wirklich hübsch aus, dies lässt sich aber die Design Optionen in Divi wunderbar ändern.

Haben für einen Kunden eine Website mit dem Divi Theme erstellt und eine Galerie für die Referenzen eingesetzt. Problem war, dass Divi die Bilder selbst zugeschnitten hat und demnach die Köpfe von den Personen gefehlt haben.

Es war keine Einstellung, die man über die Theme Settings einstellen konnte. Damit könnt ihr das automatische Zuschneiden / Cropping für die Thumbnail Bilder also die Vorschaubilder, welche angezeigt werden bevor man auf das Bild klickt und es dann groß angezeigt wird.

Hier ist der Code für die functions.php Datei:

Am besten fügt ihr diesen in der functions.php von eurem Child Theme ein.
Die bereits hochgeladenen Bilder werden nicht korrigiert. Aber alle Bilder die danach hochgeladen werden, stimmen.

Viel Spaß damit

Für eventuelle Probleme übernehmen wir keine Haftung!

© 2009 - 2020 by Philipp Pistis
Double-click to edit link text.