WordPress-Theme Divi

Eine kurze Einführung in den Visual Builder von Divi

Divi
Ein sehr vielseitiges
WordPress-Theme.

Divi ist ein Premium-Theme, das auf einem sogenannten Visual Builder („Frontend“) aufbaut. Das bedeutet, dass du direkt auf einer Seite oder einem Beitrag arbeiten kannst und sofort jede Änderung siehst. Es ist nicht mehr nötig, erst die Seite zu bearbeiten, zu speichern und auf „Vorschau“ zu gehen. Das erspart viel Zeit und macht das Gestalten einfacher und schneller!
Andere Themes verwenden beispielsweise den WPBakery Page Builder (zuvor Visual Composer) oder das Thrive Plugin. Mit diesen kannst du ebenfalls direkt deine Website bearbeiten.

Auf meinen Websites verwende ich Divi schon seit einiger Zeit und empfehle es auch Kunden.

Zu allen meinen Paketen kann ich dir – ohne Aufpreis – das Divi-Theme installieren!

Vorteile von Divi

l

Visual Builder

Du arbeitest direkt auf deiner Seite und siehst die Seite so, wie sie auch dann im Browser gezeigt wird. Jede Änderung kannst du sofort nachvollziehen.

Layoutvorlagen

Bei Divi gibt es viele Layouts zur Auswahl, die bereits mit dem Theme mitgeliefert werden. Du wählst ein Layout, fügst deine Texte und Bilder ein – fertig!

Vorlagen-Bibliothek

In der Bibliothek findest du die Layoutvorlagen von Divi.
Du kannst aber auch selbst Elemente, die du öfters brauchst, dort speichern.

Wie arbeite ich mit Divi?

Divi-Builder

Wenn du mit Divi arbeitest, stehen dir zwei grafisch orientierte Editoren zur Verfügung:
Der Divi-Builder (hier rechts im Bild) und der Visual-Builder.
Auch mit WordPress 5 kannst du weiterhin beide Editoren verwenden.

Bei Divi wird jede Seite aus drei Elementen aufgebaut:

  1. Zuerst erstellst du einen Abschnitt (blau gekennzeichnet).
  2. In diesen Abschnitt fügst du Zeilen (grün gekennzeichnet) ein – es stehen mehrere Darstellungen zur Verfügung (1-5 Spalten in unterschiedlichen Breiten).
  3. Als kleinste Einheit fügst du Module (grau gekennzeichnet) eingefügt. Es stehen viele verschiedene Module zur Auswahl (s. Bild 2 rechts).

Divi Visual-Builder

Im Visual Builder (Frontend) von Divi arbeitest du quasi direkt auf deiner Seite und jede Änderung, die du machst, siehst du sofort. Auch hier sind Abschnitte, Zeilen und Module wieder in Blau, Grün bzw. Grau gekennzeichnet.
Texte kannst du beispielsweise direkt eingeben und ändern!

Divi ist responsive

Responsive bedeutet, dass deine Website mit Divi auf allen Geräten optimal aussieht (Desktop, Tablet, Smartphone). Du kannst bei allen Modulen für jedes Gerät eigene Einstellungen vornehmen (z.B. Schriftgröße). Im Frontend von Divi kannst du zwischen den jeweiligen Ansichten wechseln – rechts im Bild siehst du eine Smartphone-Ansicht (links unten die Buttons für die 3 Ansichten).

Ansicht im Browser

So sieht dann die fertige Seite im Browser aus.

Du siehst also, dass die Ansicht im Visual Builder (siehe Bild weiter oben) genau der Ansicht im Browser entspricht!
Das hat den Vorteil, dass du sofort siehst, was du tust.

Divi – ein Theme mit vielen Layoutvorlagen

u

Was ist Divi und welche Vorteile hat es?

Divi ist ein Premium-Theme für WordPress und bietet eine große Vielfalt an Design-Optionen.
Ein großer Vorteil ist, dass es für Divi auch eine Menge an Layouts gibt, die du sofort für deine Website verwenden kannst. 

Was ist ein Layout? Wieviele Layouts gibt es?

Layouts sind Vorlagen, die du bei Divi bereits fix im Theme integriert findest. Weitere Layouts kannst du dir herunterladen und importieren. Die Auswahl wird laufend erweitert, sodass du auch für dich das passende findest!

k

Wie verwende ich ein Layout?

Es ist sehr einfach: Du öffnest eine Seite (oder einen Beitrag), lädst die gewünschte Seite des gewählten Layouts. Dann fügst du einfach deine Texte und Bilder ein, passt eventuell die Farben an. Und fertig ist deine neue Seite!

Beispiele für Divi-Layouts

Aktuell siehst du auf dieser Seite sechs Layouts: Restaurant, Consultant, Shop, Technik, Designbüro, Anwaltskanzlei.
Aber natürlich kannst du z.B. auch ein Consultant-Layout für eine anderes Unternehmen verwenden.
Jedes Layout besteht aus mehreren Vorlagen, z.B. für Startseite, Kontakt, Referenzen, Landingpage.
Auf der Seite von Elegantthemes findest du eine Übersicht über alle verfügbaren Layouts.