Divi ist definitiv einer von ihnen WordPress-Themes heutzutage am beliebtesten. Eines der Elemente, das die Stärke dieses Themas ausmacht, ist sein Builder (Divi Builder), der uns sehr an den erinnert Visual Composer.

Der Divi Builder gibt es in zwei Formen: dem Standard-Back-End-Builder und dem Visual Visual Builder. Mit beiden Schnittstellen können Sie genau dieselben Arten von Websites mit denselben Inhalten und denselben Designparametern erstellen. Der einzige Unterschied ist die Schnittstelle. Der Back-End-Builder befindet sich im WordPress-Dashboard und ist mit allen anderen Standardeinstellungen von WordPress zugänglich.

Es befindet sich in der WordPress-Benutzeroberfläche und ersetzt den Standard-WordPress-Post-Editor. Es ist ideal, um schnelle Änderungen vorzunehmen, während Sie sich im Dashboard befinden. Es ist jedoch auch auf das Dashboard beschränkt und wird als blockartige Darstellung Ihrer Website gerendert. Dieses Tutorial konzentriert sich nur auf den Visual Builder.

Laden Sie das DIVI WordPress Theme herunter

divi builder.jpeg

Mit dem brandneuen Visual Builder hingegen können Sie Ihre Seiten am Frontend Ihrer Website erstellen! Es ist eine erstaunliche Erfahrung und ermöglicht ein viel schnelleres Design. Wenn Sie im Visual Builder Inhalte hinzufügen oder Designeinstellungen anpassen, werden Ihre Änderungen sofort angezeigt.

Sie können auf die Seite klicken und mit der Eingabe beginnen. Sie können den Text markieren und seine Schriftart und seinen Stil anpassen. Sie können neuen Inhalt hinzufügen, Ihre Seite erstellen und alles sehen, was vor Ihren Augen passiert.

Verwendung von-Visual-Builder.jpg

Wie Visual Builder aktiviert wird

Wenn Sie in Ihrem WordPress-Dashboard angemeldet sind, können Sie zu einer beliebigen Seite im Frontend Ihrer Website navigieren und in der WordPress-Administrationsleiste auf die Schaltfläche "Visual Builder aktivieren" klicken, um den Builder zu starten. visuell.

wie man visual builder.jpeg aktiviert

Wenn Sie Ihre Seite im Dashboard bearbeiten, können Sie zum Visual Builder wechseln, indem Sie auf die Schaltfläche "Visual Builder aktivieren" oben in der Divi Builder-Backend-Oberfläche klicken (beachten Sie, dass Sie dies zuerst tun müssen) Aktivieren Sie den Divi Builder, bevor die Schaltfläche Visual Builder angezeigt wird.

Verwenden Sie den visuellen Builder Divi.jpeg

Die Grundlagen von Visual Builder

Die Stärke von Divi liegt in Visual Builder, einem Seitenersteller, der mit "Drag & Drop" zusammenarbeitet und es Ihnen ermöglicht, nahezu jede Art von Website zu erstellen, indem Sie die Inhalte kombinieren und anordnen.

Der Builder verwendet drei Hauptbausteine: Abschnitte, Zeilen und Module. Wenn Sie sie gemeinsam verwenden, können Sie unzählige Layouts erstellen. Abschnitte sind die größten Bausteine ​​und beherbergen Gruppen von Reihen. Die Zeilen befinden sich innerhalb der Abschnitte und dienen zur Unterbringung der Module. Die Module werden innerhalb der Zeilen platziert. Dies ist die Struktur jeder Divi-Website.

Abschnitte

Die grundlegendsten und größten Bausteine ​​für die Gestaltung von Layouts mit Divi sind Abschnitte. Sie werden verwendet, um große Gruppen von Inhalten zu erstellen. Dies ist das erste, was Sie Ihrer Seite hinzufügen. Es gibt drei Arten von Abschnitten: Normal, Spezial und Vollbreite.

Regelmäßige Abschnitte bestehen aus Spaltenreihen, während Abschnitte mit voller Breite aus Modulen mit voller Breite bestehen, die die gesamte Breite des Bildschirms erweitern. Die speziellen Abschnitte ermöglichen erweiterte Seitenlayouts.

Reihe

Die Zeilen befinden sich innerhalb der Abschnitte, und Sie können eine beliebige Anzahl von Zeilen innerhalb eines Abschnitts platzieren. Es stehen viele verschiedene Arten von Spalten zur Auswahl. Nachdem Sie eine Spaltenstruktur für Ihre Zeile definiert haben, können Sie Module in einer gewünschten Spalte platzieren. Die Anzahl der Module, die Sie in eine Spalte einfügen können, ist unbegrenzt.

Module

Module sind die Inhalte, aus denen Ihre Website besteht. Jedes Divi-Modul kann sich an jede Spaltenbreite anpassen und alle reagieren vollständig.

Erstellen Sie Ihre erste Seite

Die drei Grundbausteine ​​(Abschnitte, Linien und Module) werden zum Erstellen Ihrer Seite verwendet.

Aufbau einer Divi.jpg Seite

HinzufĂĽgen Ihres ersten Abschnitts

Bevor Sie Ihrer Seite etwas hinzufügen können, müssen Sie zuerst einen Abschnitt hinzufügen. Abschnitte können durch Klicken auf die blaue Schaltfläche (+) hinzugefügt werden. Wenn Sie mit der Maus über einen Abschnitt fahren, der bereits auf der Seite vorhanden ist, wird unten eine blaue Schaltfläche (+) angezeigt. Wenn Sie auf klicken, wird unter dem Abschnitt, über dem Sie sich gerade befinden, ein neuer Abschnitt hinzugefügt.

Wenn Sie eine neue Seite erstellen, wird Ihr erster Abschnitt automatisch hinzugefĂĽgt.

Liste der divi.jpg Abschnitte

Erste Zeile hinzufĂĽgen

Nachdem Sie Ihren ersten Abschnitt hinzugefügt haben, können Sie mit dem Hinzufügen von Spaltenzeilen beginnen. Ein Abschnitt kann eine beliebige Anzahl von Zeilen enthalten, und Sie können Zeilen aus verschiedenen Spaltentypen mischen und abgleichen, um eine Vielzahl von Layouts zu erstellen.

Um eine Zeile hinzuzufügen, klicken Sie auf die grüne Schaltfläche (+) in einem leeren Bereich oder auf die grüne Schaltfläche (+), die angezeigt wird, wenn Sie den Mauszeiger über eine aktuelle Zeile bewegen, um eine neue Zeile darunter hinzuzufügen. Sobald Sie auf die grüne Schaltfläche (+) geklickt haben, wird eine Liste mit Spaltentypen angezeigt. Wählen Sie die Spalte Ihrer Wahl und Sie können Ihr erstes Modul hinzufügen.

So fĂĽgen Sie die Zeile Divi.jpeg ein

HinzufĂĽgen Ihres ersten Moduls

Module können innerhalb von Zeilen hinzugefügt werden, und jede Zeile kann eine beliebige Anzahl von Modulen enthalten. Module sind die Inhaltselemente Ihrer Seite, und Divi enthält über 40 verschiedene Elemente, die Sie zum Erstellen verwenden können.

Sie können grundlegende Module wie Texte, Bilder und Schaltflächen oder erweiterte Module wie Schieberegler, Portfolios, Galerien und verwenden E-Commerce Geschäft.

Um ein Modul hinzuzufügen, klicken Sie auf die graue Schaltfläche (+) in einer leeren Spalte oder auf die graue Schaltfläche (+), die vorhanden ist, wenn Sie mit der Maus über ein Modul auf der Seite fahren, um unten ein neues Modul hinzuzufügen . Sobald Sie auf die Schaltfläche klicken, werden Sie mit einer Liste von Modulen begrüßt.

Wählen Sie das Modul Ihrer Wahl und es wird Ihrer Seite hinzugefügt und das Kontrollfeld des Moduls wird angezeigt. Über dieses Bedienfeld können Sie mit der Konfiguration Ihres Moduls beginnen.

FĂĽgen Sie ein DIVI.jpeg-Modul ein

Das war es für dieses Tutorial. Mit dem, was Sie heute gelernt haben, können Sie mit Divi ein Layout erstellen. Wir werden mit fortgeschrittenen Tutorials zu diesem Thema zurückkommen. Sie können die bereits herunterladen Divi-Thema.

[vc_row center_row = "yes"] [vc_column width = "1/2"] [vcex_button target = "blank" layout = "erweitert" align = "center" font_family = "Raleway" font_weight = "700" style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DIVI-THEMA HERUNTERLADEN [/ vcex_button] [/ width_column] [»vc_col] vc_column] 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center "font_family =" Raleway "font_weight =" 700 "style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] DOWNLOAD TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Andere Divi Tutorials