Am 07.09.2016 war es endlich soweit und das Update zu Divi 3.0 von Elegantthemes war verfügbar! Ich möchte Dir heute in diesem Artikel und Video (am Ende des Beitrags) zeigen, was der visuelle Editor alles kann und wie Du ihn bedienst.
Übrigens: Zum Launch gibt es aktuell und nur für kurze Zeit einen 20% Rabatt* auf Divi!
Aktiviere den visuellen Editor im Backend bei der Seiten- bzw. Beitragserstellung
Sobald Du bei der Seiten- bzw. Beitragserstellung mit Divi auf den lilafarbenen Button „Den Divi-Builder benutzen“ geklickt hast, erscheint jetzt bei Divi 3.0 eine neue hellblaue Schaltfläche „Den visuellen Editor benutzen“.
Diesen Button klickst Du einmal an und gelangst ins Frontend Deiner Seitenerstellung mit den Schaltflächen des visuellen Divi-Builders. Jetzt siehst Du zunächst eine leere Seite mit Header und Footer Deiner Webseite. Über kleine Kreis-Schaltflächen mit einem Plus-Zeichen kannst Du sowohl neue Abschnitte als auch Zeilen hinzufügen. Hier arbeitet der Divi-Builder mit der bisher üblichen Farbcodierung:
Blaues Plus-Zeichen: Hinzufügen eines neuen Abschnitts
Grünes Plus-Zeichen: Hinzufügen einer neuen Zeile
Graues Plus-Zeichen: Hinzufügen eines neuen Moduls
Einfügen eines Abschnitts/Sektion
Im ersten Schritt ist es sinnvoll den gewünschten Abschnitt einzufügen in dem Du auf das blaue Plus-Zeichen klickst. Anschließend musst Du entscheiden ob Du einen vollbreiten Abschnitt, einen Spezial-Abschnitt (mit Sidebars) oder einen regulären Abschnitt einfügen willst.
Auch hier arbeitet der visuelle Editor wieder mit den bisherigen Standard-Farben für die verschiedenen Abschnitte:
Blaue: Regulärer Abschnitt
Rot/Orange: Spezial-Abschnitt
Lila: Volle Breite Abschnitt
Einfügen einer Zeile und eines Moduls
Je nach dem für welchen Abschnitt man sich entscheidet wird man als nächstes aufgefordert entweder eine Zeile oder ein Modul auszuwählen und einzufügen. Auch hier stehen einem wieder die altbekannten Zeilen und Module zur Verfügung, sodass man sich sehr schnell an die Bedienung des visuellen Editors bei Divi 3.0 gewöhnt.
Beim Einfügen eines Moduls stehen dem Benutzer drei verschiedene Bearbeitungs-Ansichten zur Verfügung, zwischen denen man über die kleinen Symbole in der oberen rechte Ecke jedes Moduls wechseln kann.
Modul in der Kleinansicht:
In diesem Modus nimmt das Modulfenster den geringsten Platz ein und man hat genügend Fläche in der man die vorgenommenen Änderungen direkt begutachten kann. Allerdings sind die Einstellungen im Modul selber mit viel Scroll-Arbeit verbunden und der Text entsprechend kleiner dargestellt.
Modul in der Großansicht:
In der Großansicht ist es einfacher aufgrund der größeren Darstellung die Moduleinstellungen vorzunehmen. Allerdings bleibt im Hintergrund nur noch sehr wenig Fläche um die Änderungen live verfolgen zu können.
Modul links einrasten:
Diese Einstellungsmöglichkeit ist eine gute Kombination aus großer Vorschaufläche bei der man auch die diversen Moduleinstellungen übersichtlich und in einer angenehmen Größe betrachten kann. Diese Einstellungsmöglichkeit erinnert stark an den Customizer von WordPress.
Abschnitt- und Zeileneinstellungen bei Divi 3.0
Im linken oberen Rand befindet sich eine Symbol-Navigation für die Abschnitt- und Zeileneinstellungen. Diese sind größtenteils identisch und ebenfalls durch eine Farbcodierung für den Benutzer sofort identifizierbar (blaue Symbol-Navigation für Abschnitte, grüne Symbol-Navigation für Zeilen).
Symbol-Navigation für Zeilen:
Definition der Symbol-Navigation von links nach rechts:
Pfeil-Kreuz: Bei gedrückter Maustaste verschieben der gesamten Zeile/Abschnitts auf der Seite
Zahnrad: Zeilen/Abschnitt Einstellungen
Doppeltes Viereck: Kopieren der gesamten Zeile/Abschnitts
Gitter: Auswahl des Spaltenlayouts (nur bei Zeilen möglich)
Pfeil in Kreis: Speichern der gesamten Zeile/Abschnitts in der Bibliothek
Mülleimer: Löschen der gesamten Zeile/Abschnitts
Seiteneinstellungen bei Divi 3.0
Als letztes ist noch auf einen lilafarbenen Kreis mit drei kleinen Punkten am unteren Ende der Seite/Beitrags hinzuweisen:
Mit einem Klick auf das lilafarbene Kreissymbol öffnet man die Seiten/Beitrags-Einstellungen:
Definition der Seiten-Einstellungen von links nach rechts:
Plus-Zeichen: Hinzufügen eines Layouts aus der Bibliothek
Pfeil in Kreis: Speichern des gesamten Seiten-Layouts in der Bibliothek
Mülleimer: Löschen der gesamten Zeile/Abschnitts
Großes X: Zusammenklappen der Seiten-Einstellungen
Zanhrad: Seiten-Einstellungen
Uhr: Öffnet den Verlauf
Pfeile: Herunterladen des Seiten-Layouts im Divi-Format
Zusammenfassung Divi 3.0 und der visuelle Editor
Abschließend bleibt nach den ganzen oberen Erläuterungen zur Bedienung des visuellen Editors von Divi 3.0 noch zu sagen, das man hierüber eine Zeitersparnis beim Erstellen neuer Seiten-Layouts erreicht. Ein Wechsel zwischen Backend und Frontend nach vorgenommen Änderungen ist nicht mehr nötig und man erzielt bessere Ergebnisse in kürzerer Zeit!
Unterm Strich macht die Bedienung des visuellen Editor richtig Spaß und wer bereits mit Divi gearbeitet hat, kommt innerhalb weniger Minuten mit der Bedienung des visuellen Editor zurecht.
Was ich mir noch wünschen würde von Divi 3.0?
Ich finde die Erweiterung von Divi 3.0 mit dem visuellen Editor sehr gelungen und bisher hat auch die Bedienung bei mir reibungslos und ohne Fehler funktioniert. Trotzdem würde ich mir von den Machern der Elegantthemes definitiv noch mehr Layout-Vorlagen wünschen die bereits in der Bibliothek integriert sind oder noch besser im Elegantthemes- Benutzer-Backend zum Download bereit stehen.
Mit Layoutvorlagen für Landingpages, Newsletter-Eintragungen, Bestätigungsseiten, Mitgliederbereichen usw. könnte das Divi-Theme endgültig in den Olymp der Landingpage-Tools wie OptimizePress, Thriveleads oder Leadpages aufsteigen!
Video-Anleitung zu Divi 3.0 und dem visuellen Editor
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von Vimeo.
Mehr erfahren
Hallo Sandra,
ich bin ein großer Fan vom Divi Visual Builder und nutze auch das Divi Theme. Seit einiger Zeit bin ich aber am verzweifeln. Im Bearbeitungsmodus sieht alles gut aus, wenn ich dann aber nach dem Speichern den Builder verlasse und in die normale Ansicht wechsle, sieht vieles anders aus. Die Schriften stimmen nicht, die Farben sind anders, Überschriften sind dünn statt fett, die Formatierung ist anders. Ich bin langsam mit meinem Latein am Ende. Auch die Plugins habe ich schon nacheinander deaktiviert, in der Hoffnung, dass es evtl. daran liegt. Hat aber auch nicht geholfen. Hast du eine Idee? Auch die im Designmodifikator voreingestellten Farben und Schriftgrößen übernimmt er nicht sauber.
Liebe Regina,
dann hat es Dir was in der CSS zerschossen. Bitte gehe dafür bei Elegantthemes in den Kaufbereich und eröffne dort bei Support ein Ticket. Du musst kurz auf englisch beschreiben, dass nach Verlassen des Customizers die Schriften und Farben nicht übernommen werden. Sie werden Dich dann auffordern ein spezielles Plugin zu installieren, damit Sie über das Plugin einen sog. Token bekommen und Zugang auf Deine Installation haben. Sie werden Dir die Webseite dann wieder richten. Der Support ist Spitze dort! Normalerweise geht das alles innerhalb eines Tages, wenn Du morgens das Ticket eröffnest. LG Sandra
Hallo Sandra,
empfiehlt sich bei der Nutzung des Divi Themes die Verwendung eines Childthemes? Wenn ja, bietet Elegant Themes ein Childtehme zum Download an?
Schöne Grüße & frohe Ostern
Hallo Sebastian,
ob Du ein Childtheme verwenden möchtest, hängt davon ab was Du alles anpassen willst. Wenn Du nur CSS-Änderungen vornimmst, brauchst du kein extra Childtheme denn dafür hat Divi ja den Custom CSS Bereich der bei einem Update erhalten bleibt. Nur wenn Du Änderungen in den PHP Dateien vornimmst, macht das Childtheme Sinn. Divi bietet kein Childtheme an. Viele Grüße Sandra
Hallo Sandra, kann ich den Divi Pagebuilder auch nachträglich in eine bestehenden WP Seite mit WooCommerce germanized implementieren? Benötige ich dazu bestimmte Voraussetzungen?
Besten Dank schon mal für Deine Antwort.
Hallo Jörg, es ist generell so dass Du das Plugin nachträglich für alle WordPress Installationen verwenden kannst. Allerdings kann es im Einzelfall immer zur Unverträglichkeit zwischen Divi Pagebuilder und anderen Themes oder Plugins geben. Mit WooCommerce gibt es an sich mir keine bekannten Probleme! Lg Sandra
Exzellente Informationen und Erläuterungen zu Divi 3. Ich werde dieses Theme bestimmt genauer unter die Lupe nehmen. Ich nehme mal an, dass du auch deine Website damit erstellt hast. Mir gefällt sie in ihrer Schlichtheit ausgesprochen gut.
Ich habe auch schon das Theme «Avada» angeschaut. Macht mir auch einen guten Eindruck. Was spricht aus deiner Sicht eher für/gegen Divi im Vergleich zu Avada?
Hallo Sandra,
Ich habe auch über die neuen Divi 3.0 Et bei Ihnen vor einiger Zeit informiert.
Die allgemeine Bestellung habe ich auch mit US – Produkte per Paypal bezahlt. Leider kommt bei der Bestellungvorgang Divi ET 3.0 mit Rabatt cyper-monday-2016 nur bis zum registierte Zugang. Erst nach Divi 3.0 ET Zugang kann man die Bezahlung fortsetzung. Leider fehlt die Info über Art der Bezahlung bei den Divi ET 3,0.
Dann habe ich bei Divi ET 3.0 geschattet.
Paypal – Bezahlung geht nur über Business VAT – Number, ansonsten bleiben nur die Bezahlung mit Kredit – und Debit – Karte.
Leider fehlt Videos über Bestell – Vorgang bis zum Abschluss und außerdem hätte man bei neuen Vorstellung Divi 3.0 die Besonderheiten der Bestellvorgang bei den Divi Et zu informieren.
Von Divi 3.0 Chat habe ich so eine Links für Divi 3.0 Visual Builder Demo erhalten. Da kann ich mal ausprobieren.
Hallo Andreas,
ich kann gerne mal ein Video zum Bestellvorgang machen und werde Deine Informationen dafür mit aufnehmen. Danke und viele Grüße
Sandra
Hallo Sandra,
dein Webinar zu Divi 3.0 war ja echt super hilfreich. Elegantthemes hat jetzt auch Shortcuts erstellt, die die Arbeit mit dem visuellen Editor vereinfachen.
Du hast Recht manche Sachen gehen im Page Builder dennoch einfacher. Die Ränder einzelner Blöcke/Sektionen sind im visuellen Editor deutlich schneller einzustellen.
Eine Frage habe ich noch: Wie kann ich den Zeilenabstand in einem Textmodul ändern? Bei großen SChriftgrößen ist der zu klein. Bei den allgemeinen Einstellungen und den erweiterten Designoptionen habe ich nichts gefunden. Und CSS ändern kann ich im Moment noch nicht.
Herzlichen Dank für deine Hilfe
Stefan
Hallo Stefan,
also wenn Du als Divi-Profi keine Einstellung für den Zeilenabstand gefunden hast, dann gibts den auch nicht :) und natürlich kannst Du CSS!
Gehe auf Theme-Options auf „Gernell“ ganz nach unten und füge bei der Custom CSS eine line-heigt für den body oder die jeweilige Überschrift h1, h2, h3 usw. ein.
Das sieht dann ungefähr so aus:
body {
line-height: 1.5;
}
Einfach mal mit den Zahlen für den Abstand ein bisschen herum probieren!
LG Sandra
DANKE. Genau so hat’s funktioniert. Die Seite steht mittlerweile (auch Dank des super Supports vom Divi-Team, noch ein Grund für Elegentthemes):
http://thailaendisch-fuer-reisende.de
Hallo Sandra,
seid der neuesten Version/Update von Divi auf 3.0.12 werden auf meinem Blog alle Bilder, die ich als Galerie erstellt habe nicht mehr angezeigt (auf der ersten Blogseite). Wenn ich allerdings einen bestimmten Blog aufrufe, werden die Bilder angezeigt. Bilder, die nicht als Galerie eingerichtet sind, werden weiterhin angezeigt.
Ist dieser Bug bekannt? Ich habe jetzt auf Version 3.0.2 zurückgesetzt und alles ist wieder OK.
Würde mich über eine Antwort freuen.
LG Jürgen
Hallo Jürgen, das hört sich bei mir nur nach einer falschen Einstellungen an und nicht nach einem Bug.
Bitte melde Dich mal per Mail bei mir, ich denke wir müssen nur mal einen Haken irgendwo setzen, wenn Du das Update gemacht hast.
Lg Sandra
Hallo Sandra,tolle Videos und super verständlich erklärt.Vielen Dank dafür.
Ist es bei DIVI 3.0 möglich, erstmal das Developer Paket zu kaufen (also jährliche Bezahlung) und wenn man dann sieht das einem das Paket absolut überzeugt,dann upgraden auf das Lifetime Access Paket und wird dann das erste Paket angerechnet oder wird die komplette Summe für das Lifetime Paket noch mal fällig?
Hallo Kai,
genau so kannst Du es machen. Du kannst bei Elegantthemes jederzeit upgraden und dann wird Dir der alte Preis angerechnet. Liebe Grüße Sandra
Liebe Sandra,
ist es möglich Divi nachträglich auf Deutsch umzustellen?
lieben Gruß
Edith
Liebe Edith,
Divi passt sich normalerweise automatisch der Sprache an die Du in Deinem WordPress Dashboard verwendest. D.h. wenn Du mit einer deutschen WordPress Installation arbeitest, dann wird Divi nach der Installation automatisch auf Deutsch angezeigt. Um die Systemsprache anzupassen gehe einfach auf Einstellungen – Allgemein scrolle etwas runter und stelle bei „Sprache der Webseite“ auf Deutsch um. Evtl. musst du danach das Theme nochmal löschen und wieder installieren ;)
Natürlich kannst Du es aber auch nachträglich ändern und es gibt ein gutes Videotutorial von Elegantthemes selber, in dem gezeigt wird wie man die Sprachdateien (egal für welches Elegantthemes) nachträglich ändert: https://www.elegantthemes.com/gallery/divi/documentation/translate/
Ich hoffe das hilft Dir weiter! LG Sandra
Ihr Kommentar wartet auf Modertaion.
Steht da ;)
Ja das bedeutet ich muss ihn erst lesen und freischalten :) Lg Sandra
Schöner Artikel.