Hallo liebe/r Divi-User/in,
heute möchte ich dir einen umfassenden Überblick über den Divi Builder geben, der Bestandteil des beliebten Divi Themes von Elegant Themes ist. Der Divi Builder ist ein leistungsstarkes Werkzeug, das es dir ermöglicht, wunderschöne und funktionale Webseiten zu gestalten – und das ganz ohne Programmierkenntnisse. Als Webdesignerin verwende ich den Divi Builder gerne, weil ich meinen Kunden dadurch auch ermöglichen kann, ganz einfach kleinere Dinge selbst auf ihren Websites zu ändern, falls sie das möchten. Das Bearbeiten des Textes und der Austausch von Bildern sind wirklich einfach und intuitiv. So müssen meine Kunden bei schnellen Änderungen nicht auf mich warten, sondern können direkt selbst loslegen was meine Kunden Zeit und Geld spart!
Was ist der Divi Builder?
Der Divi Builder ist ein visueller Drag-and-Drop-Seiteneditor, der dir erlaubt, Websites in Echtzeit zu gestalten. Du siehst sofort, wie deine Änderungen aussehen, was das Designen zu einem echten Vergnügen macht. Das Herzstück des Divi Builders besteht aus drei Hauptbausteinen: Sektionen, Reihen und Modulen. Diese drei Elemente bilden die Grundstruktur jeder Seite, die du mit Divi erstellst. Genau um diese Elemente geht es heute in meinem Beitrag.
Sektionen
Sektionen sind die großen Container, in denen du deine Inhalte organisierst. Stell sie dir als große Boxen vor, in die du verschiedene Inhalte einfügen kannst. Sektionen helfen dir, deine Seite in übersichtliche Bereiche zu unterteilen. Im Divi Builder sind sie durch einen blauen Rahmen gekennzeichnet.
Typen von Sektionen:
- Normale Sektionen: Diese verwendest du im Normalfall am häufigsten. Sie dienen zur Strukturierung der Hauptinhalte.
- Spezialsektionen: Diese Sektionen bieten erweiterte Layout-Optionen und eignen sich besonders gut für komplexere Layouts.
- Vollbreiten-Sektionen: Ideal, um Inhalte über die gesamte Breite des Bildschirms anzuzeigen – perfekt für beeindruckende Header oder Slider.
Sektionen lassen sich vielseitig anpassen: Du kannst sie mit Farben, Bildern, Mustern oder Formen hinterlegen, Margins und Padding anpassen, um den Abstand innerhalb und außerhalb der Sektionen zu regulieren, sanfte Übergänge zwischen verschiedenen Sektionen einfügen und Schatten oder Rahmen hinzufügen, um sie hervorzuheben. Um die Einstellungen einer Sektion zu öffnen, klickst du einfach auf das Zahnrad-Symbol. Du kannst Sektionen auch kopieren, in der Divi-Bibliothek speichern, löschen oder per Drag-and-Drop verschieben
Reihen
Reihen befinden sich innerhalb der Sektionen und sind dafür da, die Inhalte in Spalten aufzuteilen. Eine Reihe kann aus bis zu vier Spalten bestehen, was dir erlaubt, komplexe Layouts zu erstellen. Reihen sind im Divi Builder durch einen grünen Rahmen gekennzeichnet. Du kannst verschiedene Spaltenlayouts auswählen, z.B. eine Reihe mit einer Spalte, zwei gleichgroßen Spalten oder asymmetrischen Spaltenverteilungen.
Fast gleich wie bei den Sektionen lassen sich auch Reihen flexibel anpassen: Hintergrundbilder, Muster oder Farben können eingestellt werden, ebenso wie Spaltenabstände. Rahmen und Schatten können hinzugefügt werden, um Reihen optisch abzugrenzen. Das Besondere an Reihen ist, dass jede einzelne Spalte innerhalb einer Reihe separat bearbeitet werden kann. So kannst du z.B. jeder Spalte eine eigene Hintergrundfarbe oder ein eigenes Bild zuweisen. Um die Einstellungen einer Reihe zu öffnen, klickst du auf das Zahnrad-Symbol. Reihen können ebenfalls kopiert, in der Divi-Bibliothek gespeichert, gelöscht oder per Drag-and-Drop verschoben werden.
Module
Module sind die kleinen Helden des Divi Builders und stellen die eigentlichen Inhaltselemente dar. Jedes Modul erfüllt eine spezifische Funktion, von einfachen Textblöcken bis hin zu komplexen Galerien oder Kontaktformularen. Module sind im Divi Builder durch einen grauen Rahmen gekennzeichnet. Zu den häufig verwendeten Modulen gehören Textmodule, Bildmodule, Galerien, Kontaktformulare und Call-to-Action-Elemente.
Jedes Modul bietet eine Vielzahl an Anpassungsmöglichkeiten, von Schriftarten und Farben bis hin zu Animationen und Übergangseffekten. Der Inhaltstab ermöglicht das Einfügen von Texten, Bildern oder Videos, während du im Design-Tab das Aussehen des Moduls verändern kannst, z.B. Schriftart, -größe, Farben und Abstände. Im erweiterten Tab kannst du CSS-Anpassungen und weitere Einstellungen vornehmen. Um die Einstellungen eines Moduls zu öffnen, klickst du auf das Zahnrad-Symbol. Module können ebenfalls kopiert, in der Divi-Bibliothek gespeichert, gelöscht oder per Drag-and-Drop verschoben werden
Die Plus-Zeichen unterhalb der Elemente
Unterhalb jedes Elements im Divi Builder findest du ein Plus-Zeichen. Dieses Plus-Zeichen ermöglicht es dir, schnell neue Elemente zu deiner Seite hinzuzufügen. Klicke einfach auf das Plus-Zeichen und es öffnet sich ein Menü, aus dem du eine neue Sektion, Reihe oder ein Modul auswählen kannst. Das ist besonders nützlich, um den Workflow zu beschleunigen und direkt an der gewünschten Stelle neue Inhalte einzufügen, ohne erst durch mehrere Menüs navigieren zu müssen.
Baue im Frontend
Nutze die Echtzeit-Vorschau, um deine Änderungen sofort zu sehen, und vergiss um Himmels Willen nicht, regelmäßig zu speichern. Um Zeit zu sparen, kannst du Sektionen, Reihen oder Module duplizieren und an eine andere Stelle auf deiner Seite verschieben. Wenn du ein Element auf mehreren Seiten verwenden willst, kannst du es als globales Element speichern – Änderungen an diesem Element werden dann überall übernommen, wo es verwendet wird.
Responsive Design mit Divi
Besonders beeindruckend am Divi Builder ist die Möglichkeit, deine Webseite vollständig responsiv zu gestalten. Mit Divi kannst du Layouts spezifisch für Tablets und Handys anpassen. Für jedes Gerät lassen sich eigene Einstellungen vornehmen, wie Schriftgrößen, Abstände und sogar die Sichtbarkeit von Elementen. Diese Funktion stellt sicher, dass deine Webseite auf allen Bildschirmgrößen optimal aussieht.
Um die separaten Einstellungen für das responsive Design zu finden, folge diesen Schritten:
- Modul-, Reihen- oder Sektionseinstellungen öffnen: Klicke auf das Zahnrad-Symbol des gewünschten Elements.
- Responsive Einstellungen: In allen Tabs wie „Inhalt“, „Design“ und „Erweitert“ findest du verschiedene Optionen wie den Text, Schriftarten, Größen und Abstände. Neben vielen dieser Optionen gibt es ein kleines Geräte-Symbol. Klicke auf dieses Symbol, um separate Einstellungen für Desktop, Tablet und Handy vorzunehmen.
- Ansicht wechseln: Unten im Divi Builder gibt es Schaltflächen für Desktop-, Tablet- und Handy-Ansichten. Mit diesen Schaltflächen kannst du zwischen den Ansichten wechseln und die Wirkung deiner Anpassungen direkt überprüfen. Klicke dazu auf den violetten Kreis mit den drei weißen Punkten unten in der Mitte deiner Seite. Danach sollte links im Eck eine graue Leiste mit den verschiedenen Gerätesymbolen erscheinen. Achtung: Dies ist jedoch nur die Ansicht. Nur weil du in die Ansichten springst, heißt das nicht, dass du jetzt auch nur für mobile oder Tablet bearbeitest. Hierfür musst du explizit bei den einzelnen Einstellungen die Option für die mobile Bearbeitung aktiviert haben.
Diese Funktionen sorgen dafür, dass dein Design überall perfekt funktioniert und deine Besucher ein nahtloses Erlebnis haben, egal welches Gerät sie benutzen.
Mein Fazit
Der Divi Builder ist wirklich ein tolles Werkzeug für alle, die ohne Programmierkenntnisse eine beeindruckende Webseite erstellen möchten. Mit seinen Sektionen, Reihen und Modulen hast du volle Kontrolle über dein Design und kannst alles nach deinen Wünschen anpassen. Die Plus-Zeichen unter den Elementen machen es super einfach, neue Inhalte hinzuzufügen und deinen Workflow zu optimieren. Egal ob du ein Anfänger oder ein erfahrener Webdesigner bist, der Divi Builder bietet dir die Flexibilität und Benutzerfreundlichkeit, die du willst. Also, schnapp dir Divi und leg los!
0 Kommentare