Wenn Du mit Divi Deine Webseite erstellen willst, dann solltest Du mit einem der vorgefertigten Layouts starten. Divi bringt bei der Installation schon zahlreiche Vorlagen mit, die Dir dabei helfen eine komplette Webseite mit Startseite, Blog, Kontakt, Service/Leistungen, Über Mich Seite, Landingpage oder einer Shop-Seite zu erstellen.

In diesem Beitrag erkläre ich Dir, wie Du in 15 Minuten eine Divi Website erstellen kannst, die verschiedene  Unterseiten und eine Navigation enthält. Du kannst das folgende Videotutorial anschauen und direkt nachmachen. Unter dem Video findest Du passend zum Video die schriftliche Anleitung mit Screenshots.

Divi Website erstellen – Schritt für Schritt Anleitung

Bevor Du loslegen kannst, musst Du das Divi Theme in Deine WordPress Webseite hochgeladen, installiert und aktiviert haben. Wenn das passiert ist, klicke auf Seite – Erstellen. Jetzt siehst Du folgenden Bildschirm vor Dir:

Klicke nun auf Verwenden Sie den Divi Builder und Du gelangst in den sog. visuellen Builder. Es öffnet sich folgendes Bild und dort klickst Du bitte in der Mitte auf Premade-Layout auswählen.

Jetzt bist Du in der Divi Bibbliothek und kannst aus den Divi Layouts eine schöne Vorlage auswählen. Zum Zeitpunkt dieses Artikels befinden sich bereits 196 Layout-Packs mit insgesamt 1447 Einzelseiten-Layouts in der Divi Bibliothek. Das Schöne ist, Elegantthemes – die Macher des Divi Themes – machen immer neue Layouts, die Du dann automatisch in der Bibliothek sehen kannst. So bekommst Du mit den Monaten und Jahren einen immer größeren Vorlagen Fundus, der Dich nichts kostet, sondern bei Divi mit dabei ist. Du kannst alle Vorlagen für Deine eigenen oder Kundenprojekte nutzen.

Die Layouts liegen alle auf dem Server von Elegantthemes bzw. in einer Cloud, erst wenn Du auf installieren klickst, wird die Vorlage samt Bildern und Texten auf Deinen Server geladen. Nach diesen kurzen Erläuterungen, machen wir jetzt weiter und wählen ein Layout aus.

Auf der linken Seite kannst du eine Vorauswahl nach Themengebieten einstellen. Wenn Du eine Website zum Thema Fashion & Events erstellen willst, dann setze dort mit der Maus ein Häkchen rein und es werden Dir nur die entsprechenden Layouts zu diesem Thema angezeigt.

Ich klicke in meinem Beispiel auf Food & Drink und scrolle anschließend in den Layouts herunter bis zum Bakery Layout.

Mit einem weiteren Klick auf das Bakery Layout öffnet sich nun folgender Bildschirm:

Jetzt wird Dir in der Übersicht jede Seite angezeigt, die das Bakery Layout mitbringt. Je nach Layout können diese Seiten variieren. Manchmal ist ein Shop-Layout dabei oder wie in diesem Fall eine Sonderseite für das Menu. Folgende Seiten sind bei allen Divi Layout Packs enthalten: Home, Landing, Kontakt, About und Blog.

Mit einem Klick auf eine der Unterseiten wie z.B. About, wird Dir im linken Bereich die Vorschau dieser Seite angezeigt. Du kannst entweder in diesem kleinen Vorschaufenster herunter scrollen um dir die ganze Seite anzusehen oder Du klickst in dem blauen Feld unter der Vorschau auf View Live Demo.

Ich würde Dir einen Blick in das Live Demo empfehlen, denn dort siehst Du nicht nur die eine About-Seite, sondern auch die anderen Unterseiten mit einer schönen Navigation oben rechts. Dort kannst du besser entscheiden, ob ein Layout zu Deinen Vorstellungen passt, welche Seiten Du auf Deiner Webseite verwenden möchtest und welche vielleicht nicht.

Divi Layout installieren

Im nächsten Schritt entscheidest Du Dich, welches der Unterseiten Layouts Du für Deine aktuelle Seiten nutzen möchtest. An dieser Stelle nur kurz für’s Verständnis: Du kannst immer nur ein Layout pro Seite laden. Um eine Webseite mit 5 verschiedenen Seiten zu erstellen, musst du also 5 neue Seiten erstellen und in jede Seite ein anderes Unterseiten-Layout Deines Layout-Packs hinein laden.

Ich habe mich dazu entschieden, das Layout der About-Seite zu installieren und es für meine spätere „Über Mich“ Seite zu nutzen. Dafür klicke ich auf Use This Layout. Jetzt wird Dir ein Ladebalken angezeigt und je nach Internet-Verbindung, kann es einen Moment dauern, bis das Layout auf Deinen Server geladen wurde.

Jetzt wurde das Layout in deine Seite geladen und Du bist im visuellen Builder. Hier kannst du Deine Texte ändern, Bilder austauschen, Zeilen oder Sektionen löschen und alles so anpassen wie es Dir gefällt.

Danach klickst Du noch auf Veröffentlichen, damit Du später diese Seite in deine Navigation einfügen kannst.

Im folgenden wiederholst Du dieses Vorgehen so oft, bis Du alle Seiten erstellt und mit dem entsprechenden Divi Layout gefüllt hast. Erstelle jetzt zum Beispiel eine neue Seite für den Kontakt und lade dort das Kontakt-Layout Deines Layout-Packs hinein. Wenn Du alle Deine Seiten erstellt und veröffentlicht hast, kannst Du zum Punkt Design-Menü wechseln und dort Deine Hauptnavigation erstellen.

Wie Du eine Navigation erstellst, kannst Du am Ende des Videos (oben in diesem Beitrag) nochmal ansehen.

Ich hoffe mit dieser kleinen Divi Anleitung kannst Du schnell deine neue Webseite erstellen! Wenn Du die gesamten Funktionen und Bedienung des Divi Themes lernen möchtest, dann schau Dir dazu meinen Divi Kurs an.

Solltest Du noch Fragen zu dieser Anleitung haben, dann stelle mir diese unter diesem Beitrag in den Kommentaren.