der divi builder

Baue Deine Website in Echtzeit

mit dem Divi Visual Editor von Elegant Themes ist das erstellen von Webseiten noh einfacher und schneller umzusetzen

Responsive

Mache Deine Webseite auf allen Bildschirmen ordentlich sichtbar und verbessere Dein Ranking

Customizable

Verändere deine Texte und Bilder live in Deiner Webseite und siehe genau das, was Dein Besucher auch sehen wird

UI Elements

Füge neue inhalten mit wenigen Klicks in die Site ein, und gib Deinem Style damit herausragende Eye-Catcher

Clean Code

Mit Divi und WordPress ist der Code sauber strukturiert und anpassbar, sofern Du es jemals brauchen würdest

Documented

Alle Funkionen und Arbeitsschritte sind einzeln und ausführlich dokumentiert, da bleiben kaum noch Fragen offen

Free Updates

Nutze due automatische Update-Funktion und halte Dein Theme immer auf dem neusten Stand

Divi Theme 3.0 – deutsche Anleitung für das WordPress Plugin/Theme

Im September 2016 wurde Divi in der Version 3.0 von Elegant Themes vorgestellt. Damit hat sich einiges geändert und das lange warten auf das Update 3.0 hat sich alle gelohnt, die Ihre Website gerne „Live“ also in Echtzeit bearbeiten und erstellen wollen.

Divi 3.0 arbeitet schnell und einfach und ist mit jedem vorhandenen WordPress Theme kombinierbar. Die Benutzeroberfläche ist ist absolut intuitiv gestaltet und vor Allem leicht verständlich und eingängig. Mit dem neuen Visual-Editor ist es möglich die Webseite im Frontend (in der Live-Ansicht) zu verändern, anstatt dieses immer nur mühsam im Backend durchführen zu müssen.

Divi 3.0 Training

 

Im gleichen Zuge bieten wir euch auch unsere Unterstützung für das Erstellen von Webseiten mit Divi 3.0 an.

Bei Divi-Training.de könnt Ihr komplette Trainingskurse oder auch Einzelcoaching buchen und für Mitglieder der ITService-Akdamie bieten wir auch noch Vorteilsangebote für WordPress Hostiing und Installation zu güsntigeren Konditionen an.

Divi 3.0 deutsche Anleitung

Elegeant Themes hat die Funktionen von Divi 3.0 auf Ihren Webseiten sehr gut dokumentiert. Allerdings sind die Erklärungen und Beispiele, sowie auch die unzähligen Videobeiträge in englischer Sprache.

Das hat uns von Divi-Training.de dazu veranlasst, einmal eine deutsche Anleitung zum Divi-Builder 3.0 zu schreiben und euch mit dieser ausführlichen Anleitung ein klares Bild von den Vorteilen zu zeichnen.

Im gleichen Zuge bieten wir euch auch unsere Unterstützung für das Erstellen von Webseiten mit Divi 3.0 an.

Bei Divi-Training.de könnt Ihr komplette Trainingskurse oder auch Einzelcoaching buchen und für Mitglieder der ITService-Akdamie bieten wir auch noch Vorteilsangebote für WordPress Hostiing und Installation zu güsntigeren Konditionen an.

Die neue Benutzeroberfläche von Divi 3.0 verändert die Arte und Weise wie man bislang Webseite erstellt hat.
Möchte man einen Text (Contend) ändern, so genügt es einfach in den Absatz zu klicken und schon kann man den Inhalt editieren.

Durch das Markieren von Textpassagen oder ganzen Absätzen, lassen sich Größe und Stil mit wenig Aufwand ändern. Ebenso einfach kannst Du aus mehr als 40 Modulen, bereits vorformatierte Absätze (Divi-Module) in Deine Seite einfügen. Je nachdem welche Inhalte Du in die Seite einfügen möchtest.

Mit dem Visual-Editor siehst Du Deine Seite direkt, genau so wie es der Besucher tut, wenn Sie bereits fertig wäre. Du kannst einzelene Elemete kopieren, verschieben oder in Deiner Vorlagen-Bibliothek speichern und daraus laden.

divi-training-mit-divi-3.0

Viele Dinge die in anderen Blockbasierten Backend-Builder langwierig und frustierend waren, wie das Aufwinden von bestimmten Objekten und Textpassagen, gehören jetzt der Vergangenheit an. Solche Dinge sind mit dem Divi-Builder ganz easy zu erledigen.

ÄNDERUNG DIREKT SICHTBAR

Wenn Du im Visual-Editor etwas änderst, wird das direkt auf der Seite sichtbar, der Text auf der Seite ist praktisch spürbar und reagiert sofort. Du kannst auf ein beliebiges Elemt klicken und dessen Inhalt, Größe, Abstand, Farbe, Position undv vieles mehr anpassen. Die neue visuelle Oberfläche ist einfach verständlich, übersichtlich und strukturiert.

Sobald Du die Schriftgröße veränderst, kannst Du es direkt beobachten wie sich der Text ausdehnt und siehst sofort welche Größe oder Schriftfarbe am besten zum Layout passt. Die Seite fühlt sich irgendwie lebendig an. da alles sofort reagiert und Du somit weniger Arbeit beim Styling Deiner Webseite hast.

Divi Schriftfarbe ändern

 

Stelle Deine Farben oder leuchtende Transformationen ein und beobachte direkt beim Erstellen, wie die Schrift sich verändert. Das ist schon mal ganz anders als wie ich es bei den anderen Front-Editoren gesehen haben.

Alles geht viel schneller und zügig, irgendwie schon etwas „magisch“. So macht der Designprozess Spaß und geht dank des Visuel Builder unglaublich schnell von der Hand.

 

FÜGE NEUE INHALTE HINZU

Das Hinzufügen von neuen Inhalten zu Deiner Seite könnte nicht einfacher sein. Wenn Du etwas neues hinzufügen möchtest, bewegst Du einfach die Maus über den gewünschten Bereich und klickst auf die Schaltfläche „+„.

Jetzt kannst Du aus über 40 fertigen Contend-Vorlagen (Divi-Module) das passende Modul auswählen und direkt in die Seite platzieren.

Sobald Du die Schriftgröße veränderst, kannst Du es direkt beobachten wie sich der Text ausdehnt und siehst sofort welche Größe oder Schriftfarbe am besten zum Layout passt. Die Seite fühlt sich irgendwie lebendig an. da alles sofort reagiert und Du somit weniger Arbeit beim Styling Deiner Webseite hast.

 Divi Modul einfügen

Bei Divi gibt es ein Content-Modul für jeden Anlass und jedes Modul kann individuell angepasst und verändert werden. So kannst Du ganz einfach neue Inhalte hinzufügen und Sie vermischen, platziere die Elemente eben da, wo Du Sie brauchst.

Deine Seite bekommt damit schnell neue Inhalte und Du siehst förmlich, wie Sie zum Leben erweckt wird. Du brauchst kein Stück Code oder unterschiedliche Plugins um eine moderne responsive Webseite zu kreieren, Du brauchst nur Divi 3.0.

Einfach klicken und direkt bauen, so einfach geht Webdesign heute. Egal welche Art von Webseite Du erstellen möchtest, Divi hat genau die Werkzeuge, die es braucht um eine Vision Wirklichkeit werden zu lassen.

divi-module auswahl

Bild @ Elegeant Themes

Alle Divi Module in Aktion ansehen

siehe Dir alle Module einmal in der Übersicht an und lasse Dich von den Funktionen beeindrucken

VERSCHIEBEN - EINFÜGEN - KOPIEREN

Natürlich kommt kaum noch ein Website-Builder ohne das Thema Drag an Drop aus und das wird bei Divi 3.0 besonders groß geschrieben. Das Ziehen (Drag) und Ablegen (Drop) von Modulen oder Zeilen (Elemente) ist in Divis Visual-Builder allerdings besonders intuitiv, da Du hierbei mit den tatsächlichen Inhalten arbeiten kannst und nicht mit mehrdeutigen Rastern und Blöcken.

All das geschieht natürlich in Echtzeit und direkt in der Live-Ansicht deiner Seite und selbst wenn Du mal eine sehr lange Seite bearbeiten musst, ist das mit der neuen Funktion „Zoom-Out“ auch kein Problem mehr. Damit erhälst Du eine Übersicht über Dein Design und kannst große Teiele des Inhaltes auch über große Entfernungen ziehen, ohne scrollen zu müssen.

Divi Style kopieren

Natürlich kannst auf das Drag and Drop auch verzichten und stattdessen Divi Copy and Paste verwenden, das Ergebnis ist das gleiche und geht ebenso schnell und flüssig von der Hand.

WEITEN & HÖHEN EINFACH VERÄNDERN

Eines der wesentlichen Dinge, die die Entwickler von Divi 3.0 anstrebten, wares, sinnvolle Interaktion zu ermöglichen, die den visuellen Charakter des Design vollständig ausnutzen. Ein sehr gutes Beispiel dafür, sind sind die verschiebbaren Breiten und Höhen.

Das ist etwas was im Backend-Builder keinen Sinn gemacht hätte, aber im Visual-Builder einfach umzusetzen und absolut genial ist. Ich kenne andere Visual Builder und Composer bei denen genau diese wichtige Funktion nur mit sehr viel Aufwand und Fachwissen zu erreichen ist, das ist bei Divi 3.0 einfach genial einfach umgesetzt worden.

Wenn Du den Cursor auf eine der vier Seiten einer Reihe oder eines Abschnitts stellst, kannst Du sie ziehen, um die Abstände zu erhöhen oder zu verringern, wodurch die Breite und Höhe des Elements erhöht oder verringert wird. Du kannst sehen, dass die Änderungen sofort stattfinden, während Du die Maus bewegst – einfach genial!

divi-screencast ränder

Das Arbeiten mit Leerräumen kann manchmal sehr nervenaufreibend sein und in derBackend-Ansicht ist es  eher frustrierend, da man das Ergebnis nicht sofort, sondern erst in der Vorschau betrachten kann,

Um wichtige Design Entscheidungen kreativ und spontan treffen zu können, ist es aber wichtig, in Echtzeit zu sehen, wie sich die geänderten Abstände, Weiten und Höhen direkt auf der Seite, auswirken würden, genau dann wenn Du die werte bearbeitest. Das ist mit Divi 3.0 Visual-Builder möglich und ist schon fast ein magisches Erlebnis.

RESPONSIVE DESIGN - MOBIL IMMER GUT AUSSEHEN

Responsive Design ist heute wichtiger denje und bedeutet, dass Deine Website auch für kleinere Bildschirme wie Smartphones, iPads oder Tablets optimiert werden muss. Bei vielen WP-Themes wird dieses Thema oft ausgeklammert und das Design unverändert und damit vollkommen unleserlich auf den kleineren Bildschirmen angezeigt.

Der Visual-Builder enthält genau dafür einen „Responsive-Schalter“ mit denen Du die Ansicht auf dem Tablet oder Handy simulieren kannst und die Schriftgrößen oder Bildgrößen für jede Ansicht einzeln einstellen kannst. Du kannst einfach zwischen den verschiedenen Ansichten hin und herschalten, während Du die Seite und Inhalte bearbeitest.

divi responsive

 

Der Divi-Builder wechselt direkt in die ausgewählte Ansicht und zeigt das Ergebnis direkt an, so kannst Du die Website auf ganz einfache Weise für die Ansicht auf mobilen Geräten, optimieren, ohne das Du dazu erst ein Plugin oder eine Weiche in die Homepage einbauen musst.

RÜCKGÄNGIG UND WIEDERHERSTELLEN

Mit dabei ist ein umfassendes Rückgängig und Wiederherstellungssystem (undo / redo) inklusive einem vollstöndig wiederherstellbaren Protokoll. Das ist eine sehr hilfreiche Funktion, da Sie überaus nützlich ist und zudem eines der leuchtenden Beispiele wir mächtig und wirkungsvoll der neue Editor ist.

Damit ist es eigentlich fast ausgeschlossen, einen unwiederruflichen Fehler zu machen, da ja nichts wirklich verloren geht, dank dem Verlaufsprotokoll. Mit dem Verlaufs und Änderungsprotokoll ist es sogar möglich an hand einer Zeitleiste hin und her zu springen und dabei beobachten, wie Deine Seite sich jeweils ändert.

Das ist eine großartige Möglichkeit zwischen unterschiedlichen Designänderungen zu vergleichen und so zu entscheiden, welche die „richtige“ für Dich ist. Blättere einfach durch Deine Geschichte wie ein lebendes Skizzenbuch erweitere deine Lieblingsideen und Vorstellungen innerhalb weniger Klicks.

divi löschen rückgängig machen

DIE UNSICHTBARE SCHNITTSTELLE

Der neue Divi-Builder bringt eine ganz neue unsichtbare Schnittstelle, die den Benutzer überhaupt nicht in seiner Kreativität oder seinen gewohnten Workflow behindert. Deine Inhalte sind nicht auf unzähligen Knöpfen angebracht, oder auf störenden Rastern oder Overlayfolie verstekt.

Nein, ganz im Gegenteil, bei dem Divi-Bulder ist deutlich besser und intuitiv gelöst. Was Du während des Editieren siehst, ist genau Deine Webseite, eben genau das, was Dein Besucher auch sehen wird. Wenn Du in einen Abstatz klickst, kannst Du direkt drauf los schreiben und musst nicht erst einen Schalter zum Öffnen eines Editor-Fenster suchen.

Wenn Du einen Textblock oder Absatz markierst kannst Du direkt Schriftart und Schriftfarbe und Stile anpassen. Ganz einfach so und wenn Du mit der Maus über einem Basiselement schwebst, kannst Du mit einem Klick dessen Einstellungen öffnen und anpassen. Alles was es an Einstellungen gibt befindet sich in diesem gut übersichtlich und aufgeräumten Flyer, der über dem Element zu schweben scheint, ohne jedoch zu stören.

Ebenso kann man die Box mit den Einstellungen auch links am Monitor anheften, was mir persönlich am Besten gefällt. Denn dann siehst Du alle Eintellungen und Werte direkt in der Layoubox und kannst jede Veränderung sofort in der Livewebseite ansehen um visuell zu entscheiden, ob das alles so richtig ist, was Du da so einstellst.

divi editor bewegen

Du kannst die Größe und Position des Popups anpassen, wenn Du das Popup auf eine der beide Seiten am Monitor ziehst, wird es automatisch in die Seitenleistenposition einschnappen und ihren Inhalt entsprechend anpassen! Du kannst die Breite der Seitenleiste ändern, um die Größe Deines Bildschirms anzupassen, oder ziehe sie einfach an eine gewünschte Stelle auf Deinem Bildschirm, je nach persönlicher Vorliebe.

EDITIEREN VON TEXTEN

Das direkte Bearbeiten von Texten ist in Divi eines der beliebtesten Funktionen. Zum Ändern einer Textpassage muss kein Einstellungsfenster oder Editorfenster aufgerufen werden. Wenn Du Inhalte hinzufügen möchtest, recht es aus einfach in die Spalte zu klicken und los zu schreiben.

Das Erstellen und Bearbeiten von Texten, geht somit viel einfacher und flüssiger als über die Arbeit in der Backend-Oberfläche und ist wirklich einfach und leicht verständlich ohne große Ablenkung.

Divi Text hinzufügen

BENUTZERDEFIERTE SCHRIFTARTEN & STILE

Auch das Formatieren von Text ist mit dem Inline-Edtor super einfach und echt ein Kinderspiel. So kannst Du ganz einfach die Standardstile wie z.B. Fett oder Kursiv oder unterstrichen, ruckzuck auf einen Text oder einen Absatz anwenden. Oder auch schnell aus einem Standard-Text eine Überschrift in H1 – H5 machen.

Links erstellen und einfügen, ist ebenso einfach wie das erstellen von definiierten oder undefinierten Listen. Auch die Textausrichtung wie Rechts, Links oder Mittig sind so mit einem Klick auszuwählen. Das ist genau so wie man es im Standard-WP-Texteditor machen würde, nur halt eben schöner und magischer.

Darüberhinaus kannst Dunatürlich von hier aus auch benutzerderfinierte Schriftstile, Schriftfarben und Textgrößen einfliessen lassen, so macht das Stylen Deiner Homepage wirklich Spaß.

Divi Schriftfarbe ändern

MODERNER WEBSEITEN EDITOR - WYSIWIG

Der neue Visual Builder wurde mit einer modernen Javasscript-Bibliothek konzipiert und in das modalar aufgebaute Divi-Framework implementiert. Obwohl diese neue Schittstelle auf dem modular aufgebauten Divi-Framework basiert, ist sie vollkommen unabhängig. Das hat das Team von Elegant Themes ermöglicht, sich diesem Thema auf eine völlig neue und moderne Art und Weise zu nähern, und dies sollte der Divi-Community Vertrauen in die Langlebigkeit des Themes und in das Engagement von Elegant Themes für die Weiterentwicklung von Divi geben.

Ich persönlich erlebe und begleite die Entwicklung von Divi erst seit ca einem Jahr und bin schon jetzt oder immer noch davon überzeugt, das es so schnell keinen anderen Visual-Builder geben wird, der Divi das Wasser reichen könnte.

Der neue Divi-Builder 3.0 ist in der Tat der schnellste Front-End-Builder der mir bislang untergekommen ist. Man spürt es sofort, ob beim Bearbeiten von Texten oder Einstellen der Attribute und ich möchte diesen Builder nicht mehr missen. Mit Divi 3.0 kommt ein neuer Standard für WYSIWIG – What You See Is What You Get

Divi-Training.de bietet alles was Du brauchst

Divi Theme

Alle Grundlagen und Stellschrauben für das Divi Theme 3.0, damit Du schnell und erfolgreich Deine Webseite erstellst

Dvi Builder

Optimale Einbindung in Dein vorhandenes WordPress-Theme mit allen Vorteilen und Geschwindigkei von Divi 3.0

Visual Builder

Egal ob als Theme oder Plugin, wenn Du die Handgriffe kennst, ist Deine Website mit wenig Aufwand erstellt.

In unseren Divi-Trainings bieten wir Die Unterstützung, die Du gesucht hast und machen Dich in kurzer Zeit zum Profi

WEBDESIGN

Startet Dein neues Projekt mit einem Plan und einer ausführlichen Anleitung von uns

WORDPRESS

Die Grundlagen solltest Du unbedingt kennen und beherrschen, dann ist WordPress ein echter Star

ERFOLGREICH

Wir zeigen Dir was Du brauchst um Deine Site erfolgreich und interessant zu gestalten, damit Du erfolgreicher bist

Jetzt 10% Rabatt auf Divi sichern