loader image

WordPress Webseite mit Divi aufbauen

Andreas Blum

03.28.2020

Mein Name ist Andreas Blum – Freelancer im Bereich Webdesign, -entwicklung und Marketing. Mit meinem Unternehmen finde ich für Start-Ups und bestehende Unternehmen moderne Software-Lösungen passend zu ihren Ansprüchen, damit Prozesse automatisiert und Arbeitszeit gespart werden kann.

Enthält Produktplatzierungen

Vorwort

In meinem letzten Beitrag habe ich die drei populärsten Page Builder vorgestellt und Vor- und Nachteile präsentiert. Dieser Beitrag soll die Vorteile von Divi detaillierter präsentieren und eine grundlegende Anleitung zur Nutzung von Divi liefern. Sie werden immer wieder meinen Affiliate Link in diesem Beitrag finden. Wenn Sie sich über diesen Link zum Kauf von Divi entscheiden, verdiene ich eine Provision an jedem Verkauf. Verschiedene Theme-Entwickler bieten Affiliate Marketing an, doch ich habe mich gezielt auf Divi spezialisiert, da es meiner Meinung nach das aktuell fortschrittlichste WordPress Theme ist, mit dem sich nahezu alle Projekte umsetzen lassen. Zudem ermöglicht die visuelle und einfach verständliche Bedienoberfläche meinen Kunden nach einem kurzen Coaching ihre Webseite selbst zu verwalten. Das spart langfristig Kosten.

Einführung

Nachdem wir Ihr Webhosting eingerichtet, WordPress und alle nötigen Plugins installiert haben, haben Sie je nach Vereinbarung schon die Möglichkeit, selbst am Aufbau der Webseite teilzunehmen. Vorab will ich erwähnen, dass alle Screenshots auf Englisch sind, da ich es persönlich bevorzuge, mit der Englischen Version von WordPress, den Themes und den Plugins zu arbeiten. Die Software wurde in dieser Sprache entwickelt und ungeeignete Übersetzungen können schnell zu Missverständnissen führen. Außerdem gibt es im Englischen viel mehr Ressourcen, auf die man zurückgreifen kann, sofern sich beim Aufbau einer Webseite Fragen ergeben.

Neue Seite erstellen

Wenn Sie sich im WordPress Backend befinden können Sie durch oben gezeigte Schaltflächen eine neue Seite erstellen. Nachdem Sie auf eine der Schaltflächen geklickt haben, werden Sie zu einer anderen Seite weitergeleitet, auf der Sie der Seite einen Namen geben können. Ist das erledigt können Sie die Änderungen speichern und „Mit Divi Builder bearbeiten“ aktivieren oder die Seite anzeigen und dort den Divi Builder starten.

Nun wird Ihnen folgende Ansicht angezeigt, in der Sie wählen können, ob Sie Ihre Seite ohne Vorlage bzw. Template aufbauen wollen, ein Template auswählen wollen oder eine bestehende Seite duplizieren wollen.

Divi bietet sehr viele Layouts bzw. Templates an, die zu vielen Unternehmensbereichen passen. Falls Sie Ihre Webseite selbst gestalten aber nicht zu viel Zeit dafür investieren wollen, ist die mittlere Option für Sie die richtige.

Struktur

Nun will ich Ihnen die Struktur des Divi Page Builders genauer erläutern.

Divi ist in verschiedene Elemente aufgeteilt. Es gibt Sektionen (in den Screenshots hellblau), Reihen (grün) und Module (grau). Außerdem gibt es noch Sonderelemente. Dazu zählen Elemente, die den gesamten Bildschirm ausfüllen (violett) und in der Hierarchie Sektion > Reihe > Modul den Platz der Sektion einnimmt. Orange Elemente hingegen nehmen in der Hierarchie den Platz der Reihen ein. Grüne Reihen bieten Ihnen üblicherweise die Möglichkeit mehrere Spalten anzulegen. Mit den orangen Reihenelementen ist es möglich unterschiedlich große Kacheln mit vertikaler Abstufung anzulegen. Jedoch ist es komplexer orange Reihenelemente für die mobilen Varianten Ihrer Webseite zu optimieren. In den Screenshots habe ich Ihnen Schaltflächen markiert, die Sie wohl am häufigsten verwenden werden.

Sektionen

Sektionen sind das Page Builder Element, das in der Hierarchie ganz oben steht. In eine Sektion kann man mehrere Reihen einbauen, die wiederum mehrere Module aufnehmen können. Über die Sektionen-Einstellungen können Sie beispielsweise Hintergründe einfügen, die sich über die komplette Breite der Webseite erstrecken sollen oder Sie können visuelle Übergangselemente am oberen und am unteren Ende der Sektion einfügen, um Ihrer Webseite mehr Struktur zu verleihen.

Reihen

Sektionen, Reihen und Module besitzen die gleichen grundlegenden Einstellungen. Überall können Hintergründe eingefügt werden, die Größe verändert werden oder Animationen eingefügt werden. Was die Reihen besonders macht ist die Möglichkeit, verschieden große Spalten anzulegen und in diese Module einzubauen.

Module

Divi besitzt eine große Auswahl an nützlichen Modulen mit unzähligen Anpassungsmöglichkeiten. Hier empfehle ich Ihnen sich zu Beginn alle Elemente anzusehen und sich Gedanken über deren Anwendungen zu machen. Die Designoptionen ähneln sich in allen Modulen. Wenn Sie sich in den Einstellungen eines Moduls befinden, können Sie mit der Maus über verschiedene Textbereiche fahren. Dort erscheint ein kleiner Pinsel. Wenn die auf den Pinsel klicken, wird in den Moduleinstellungen automatisch die Option geöffnet mit der Sie die Stil des gewählten Elements anpassen können. Ein sehr nützliches Tool, das viel Zeit spart, da man sich nicht immer durch die gesamten Designoptionen klicken muss.

Module besitzen einen großen Vorteil. Globale Designoptionen sind möglich.

Globale Designoptionen in Modulen ermöglichen es die grundlegende Corporate Identity einer Webseite festzulegen. Wenn Sie beispielsweise die globalen Einstellungen des Textmoduls bearbeiten, können Sie der regulären Paragraphenschrift, sowie den H1-, H2-, H3-, usw. Überschriften unterschiedliche Schriftarten, Schriftgrößen und sogar unterschiedliche mobile Designoptionen zuweisen. Wenn Sie die Einstellungen speichern, werden alle Änderungen, die Sie vorgenommen haben auf alle Textmodule Ihrer Webseite angewendet. So können Sie sicherstellen, dass Ihre Webseite ein einheitliches Design erhält. Für Buttons oder andere Module gilt dasselbe.

Globale Elemente

Globale Elemente wirken sich wie globale Moduleinstellungen auf die gesamte Webseite aus. Jedoch beeinflussen die Einstellungen nicht alle anderen Elemente der gleichen Kategorie, sondern nur die Elemente, die als globales Element gekennzeichnet sind. Sie können entweder Sektionen, Reihen oder auch nur einzelne Module in globale Elemente umwandeln. Dies ist möglich, indem Sie Ihr gewünschtes Element in der Bibliothek speichern und dabei die Option „als globales Element speichern“ wählen.

Sobald Sie das Element gespeichert haben können Sie es auf jeder möglichen Unterseite Ihrer Webseite aus der Bibliothek einfügen. Ändern Sie das Element auf einer beliebigen Seite, so ändert es sich automatisch auf allen anderen Seiten, auf denen es platziert wurde. Dieses Feature ist besonders praktisch für Call-To-Action Elemente oder Werbeanzeigen. Wenn Sie ein Element ohne die globale Option speichern, können Sie es ebenso auf jeder beliebigen Seite einfügen. Änderungen an diesem Element werden für andere Seiten aber nicht übernommen. Diese Funktion ist hilfreich, wenn Sie sich Vorlagen anlegen wollen, mithilfe derer Sie Ihre Webseite aufbauen. Sie erkennen globale Elemente daran, dass sie hellgrün im Page Builder erscheinen.

Im nächsten Beitrag wird es darum gehen, wie Sie den Divi Theme Builder nutzen können, um noch produktiver und effizienter zu arbeiten.

Sollten Sie Fragen haben können Sie sich gern jederzeit an uns wenden. Wir werden Sie gerne unterstützen.

Enthält Produktplatzierungen

Divi Theme Builder

Divi Theme Builder

Produktplatzierung Was ist der Divi Theme Builder? In einem früheren Beitrag habe ich bereits das Divi Theme...

WebGo Premium Partner

WebGo Premium Partner

Enthält Produktplatzierungen Der Hosting-Anbieter WebGo sitzt im Norden Deutschlands in Hamburg und ist bereits zum...

Ihre Anfrage

Senden Sie uns gerne eine Anfrage, um ein unverbindliches Angebot zu erhalten.

Datenschutz

13 + 10 =