Springe zum Hauptinhalt

Divi Tutorial: Wie man das Zone Widget Modul benutzt

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Mit Divi können Sie eine unbegrenzte Anzahl von sofort einsatzbereiten Bereichen erstellen. Seitenleisten können dann zu jeder Seite hinzugefügt werden, sodass Sie eindeutige Seitenleisten für verschiedene Bereiche Ihrer Website erstellen können.

So fügen Sie ein Zonde-Widget-Modul von Divi hinzu

Bevor Sie Ihrer Seite ein Sidebar-Modul hinzufügen können, müssen Sie zunächst zu Divi Builder wechseln. Sobald das Divi-Design auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder jedes Mal, wenn Sie eine neue Seite erstellen, über dem Publisher. Klicken Sie auf diese Schaltfläche, um Divi Builder zu aktivieren und auf alle Divi Builder-Module zuzugreifen. Klicken Sie dann auf die Schaltfläche Verwenden Sie Visual Builder um den Generator im visuellen Modus zu starten. Sie können auch auf die Schaltfläche klicken Verwenden Sie Visual Builder Wenn Sie Ihre Website im Vordergrund durchsuchen, wenn Sie mit Ihrem WordPress-Dashboard verbunden sind.

Divi Builder

Sobald Sie Visual Builder verwenden, können Sie auf die graue Schaltfläche (+) klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb der Zeilen hinzugefügt werden. Wenn Sie eine neue Seite beginnen, vergessen Sie nicht, Ihrer Seite zuerst eine Zeile hinzuzufügen.

Sidebar Divi Plugin wordpress.png

Suchen Sie das Seitenleistenmodul in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Liste der Module ist durchsuchbar, dh Sie können auch das Wort "Sidebar" eingeben und dann auf "Enter" klicken, um das Sidebar-Modul automatisch zu finden und hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie von der Liste der Optionen des Moduls begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Konzeption et fortgeschritten .

Anwendungsbeispiel: Hinzufügen einer Seitenleiste zu Ihrer Blog-Seite

Mit dem Seitenleistenmodul können Sie eine Seitenleiste (und alle darin enthaltenen Widgets) an einer beliebigen Stelle auf Ihrer Seite einfügen. Tatsächlich können Sie mit dem Seitenleistenmodul jeden Widgetbereich hinzufügen. In diesem Beispiel zeige ich Ihnen, wie Sie eine benutzerdefinierte Seitenleiste in Ihre Blog-Seite einfügen, indem Sie den speziellen Bereich zum Anzeigen des Such-Widgets und der letzten Beiträge in WordPress verwenden.

Seitenleiste für Artikel auf WordPress.jpg

Diese Blog-Seite hat eine Kopfzeile in voller Breite, um den Blog-Titel oben auf der Seite anzuzeigen. Unter dem Kopfzeilenmodul mit voller Breite befindet sich ein Speziallayout mit einem Blogmodul auf der linken Seite und einem vertikalen rechten Sidebar-Feld auf der rechten Seite.

Mithilfe des speziellen Abschnitts können Sie neben den vertikalen Seitenleisten komplexe Spaltenvarianten hinzufügen, ohne der Seite unerwünschte Umbrüche hinzuzufügen. Es ist perfekt für ein Blog mit einer Seitenleiste.

Sie müssen zuerst sicherstellen, dass Sie die Widgets auf der Widgets-Seite Ihres WordPress-Dashboards eingerichtet haben. In diesem Beispiel füge ich das Widget "Suchen" und das Widget "Neueste Artikel" zum Widget "Seitenleiste" hinzu.

Seitenleiste Widget wordpress.png

Stellen Sie dann Visual Builder bereit, um die Blogseite zu bearbeiten. Fügen Sie Ihrer Seite (direkt unter Ihrer Überschrift) einen speziellen Abschnitt mit folgendem Layout hinzu:

erstelle eine eigene Sektion divi.png

Spalten einfügen divi.png

Sobald Sie der Seite einen speziellen Abschnitt hinzugefügt haben, werden Sie feststellen, dass in einem Bereich (links) die Schaltfläche "Modul hinzufügen" angezeigt wird. In diesem Beispiel wurde hier das Blog-Modul mit einem Rasterlayout hinzugefügt, um Blog-Posts anzuzeigen.
Beispiel Artikel Blog Layout grid.png

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Die andere (rechts) hat eine Schaltfläche "Zeile einfügen". Der Bereich "Modul einfügen" repräsentiert Ihre vertikale Seitenleiste. Hier gelangen Sie in das Sidebar-Modul. Sie können hier in einer Zeile so viele Module hinzufügen, dass sie sich über die vertikale Breite des Abschnitts erstrecken und an die Spaltenstruktur angrenzen, die Sie daneben erstellen. In diesem Beispiel verfügt die Blog-Seite in diesem Bereich der vertikalen Seitenleiste des Specialty-Layouts bereits über ein Optin-E-Mail-Modul und ein Personen-Modul.

Fügen Sie nun das Sidebar-Modul oben zu den anderen Modulen in Ihrem vertikalen Sidebar-Bereich hinzu.

Fügen Sie der sidebar.jpg Module hinzu

Aktualisieren Sie in der Einstellung Sidebar Module Folgendes:

Registerkarte "Inhalt"

Widget-Bereich: Wählen Sie Seitenleiste

Registerkarte Design

Orientierung: Rechts (weil die Seitenleiste rechts ist)
Randtrennzeichen löschen: JA
Textfarbe:
Dunkle Kopfzeile Schriftgröße: 26px
Abstand von Buchstaben von
Head: 3px Höhe der Kopfzeile: 1.1em

Registerkarte Erweitert

Fügen Sie im Abschnitt Benutzerdefiniertes CSS das folgende CSS zum Textfeld Widget hinzu. Dadurch wird das Design der Seitenleisten-Widgets an das Site-Design angepasst:

Hintergrund: #fff; Auffüllen: 20px; -webkit-box-shadow: 01px5px rgba (0, 0, 0, 0.1) -moz-box-shadow: 01px5px rgba (0, 0, 0, 0.1); Box-Schatten: 0 1px 5px rgba (0, 0, 0, 0.1);

Erstelle eine divi.jpg Seitenleiste

Einstellungen speichern

Sie können jetzt sehen, dass das Sidebar-Modul die Elemente des Sidebar-Widgets (Suchen und Letzte Artikel) anzeigt und sie im vertikalen Sidebar-Bereich Ihres Spezialbereichs anzeigt.

Beispiel für Sidebar divi.jpg

Inhaltsoptionen für die Seitenleiste

In der Registerkarte Inhalt finden Sie alle Inhaltselemente des Moduls, wie z. B. Text, Bilder und Symbole. Alles, was steuert, was in Ihrem Modul angezeigt wird, finden Sie immer auf dieser Registerkarte.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

sidebar.png Einstellungen

Widget-Bereich

Das Sidebar-Modul verwendet Widget-Erstellungsbereiche, die Sie auf der Registerkarte Erscheinungsbilder> Widgets erstellen können. Sie können einen Ihrer benutzerdefinierten Widgetbereiche aus diesem Dropdown-Menü auswählen.

Administratorkennzeichnung

Dadurch wird die Modulbezeichnung im Konstruktor zur einfachen Identifizierung geändert. Wenn Sie die WireFrame-Ansicht in Visual Builder verwenden, werden diese Bezeichnungen im Modulblock der Divi Builder-Benutzeroberfläche angezeigt.

Entwurfsoptionen für die Seitenleiste

Auf der Registerkarte Design finden Sie alle Stiloptionen des Moduls, z. B. Schriftarten, Farben, Größen und Abstände. Auf dieser Registerkarte können Sie das Erscheinungsbild Ihres Moduls ändern. Jedes Divi-Modul verfügt über eine lange Liste von Konstruktionsparametern, mit denen Sie alles ändern können.

Designoptionen divi.png

Orientierung

Hier können Sie auswählen, auf welcher Seite der Seite Ihre Seitenleiste angezeigt wird. Diese Einstellung steuert die Ausrichtung des Texts und die Position des Rahmens.

Löschen Sie das Randtrennzeichen

Hier können Sie den dünnen grauen Rand entfernen, der Ihre Seitenleiste vom Inhalt Ihrer Seite trennt.

Textfarbe

Hier können Sie wählen, ob Ihr Text hell oder dunkel sein soll. Wenn Sie auf einem dunklen Hintergrund arbeiten, sollte Ihr Text klar sein. Wenn Ihr Hintergrund klar ist, muss Ihr Text dunkel sein.

Polizei-Header (Header-Schriftart)

Sie können die Schriftart Ihres Kopfzeilentexts ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden großer Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Open Sans-Schriftart für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch anpassen, indem Sie die Optionen Fett, Kursiv, Großbuchstaben und Unterstrichen verwenden.

Größe der Kopfzeile

Hier können Sie die Größe Ihres Kopfzeilentextes anpassen. Sie können den Bereichsschieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder den Wert der gewünschten Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Farbe des Kopftextes

Standardmäßig werden alle Divi-Textfarben in Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihres Kopfzeilentexts ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe in der Farbauswahl.

Abstand der Briefköpfe

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Kopfzeilentext vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Regler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Höhe der Kopfzeile

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen Ihres Kopfzeilentexts aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Schieberegler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Feld ein. rechts neben dem Schieberegler eingegeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Körper Schriftart

Sie können die Schriftart Ihres Körpers ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden großer Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Open Sans-Schriftart für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch anpassen, indem Sie die Optionen Fett, Kursiv, Großbuchstaben und Unterstrichen verwenden.

Körper Schriftgröße

Hier können Sie die Größe Ihres Körpertexts anpassen. Sie können den Schieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder den Wert der gewünschten Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Textfarbe des Körpers

Standardmäßig werden alle Divi-Textfarben in Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihres Texts ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe in der Farbauswahl.

Abstand der Körperbuchstaben

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Text vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Regler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Höhe der Körperlinie

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Textzeilen in Ihrem Körper aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld ein befindet sich rechts vom Cursor. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Erweiterte Seitenleistenoptionen

Auf der Registerkarte Erweitert finden Sie Optionen, die für erfahrene Webdesigner hilfreich sein könnten, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie benutzerdefiniertes CSS auf eines der vielen Elemente des Moduls anwenden. Sie können dem Modul auch benutzerdefinierte Klassen und CSS-IDs zuweisen, mit denen Sie das Modul in der Datei style.css Ihres untergeordneten Themas anpassen können.

erweiterte Seitenleiste divi.png

CSS-ID

Geben Sie eine optionale CSS-ID ein, die für dieses Modul verwendet werden soll. Eine ID kann zum Erstellen eines benutzerdefinierten CSS-Stils oder zum Erstellen von Links zu bestimmten Abschnitten Ihrer Seite verwendet werden.

CSS-Klasse

Geben Sie die optionalen CSS-Klassen ein, die für dieses Modul verwendet werden sollen. Mit einer CSS-Klasse kann ein benutzerdefinierter CSS-Stil erstellt werden. Sie können mehrere Klassen hinzufügen, die durch ein Leerzeichen getrennt sind. Diese Klassen können in Ihrem untergeordneten Divi-Design oder in dem benutzerdefinierten CSS-Stylesheet verwendet werden, das Sie Ihrer Seite oder Website mithilfe von Divi-Designoptionen oder Divi Builder-Seiteneinstellungen hinzufügen.

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und eines der internen Elemente des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element direkt benutzerdefinierte CSS-Stylesheets hinzufügen können. Die CSS-Einträge in diesen Parametern sind bereits in die Style-Tags eingeschlossen. Geben Sie einfach die durch Semikolon getrennten CSS-Regeln ein.

Sichtbarkeit

Mit dieser Option können Sie die Geräte steuern, auf denen Ihr Modul angezeigt wird. Sie können Ihr Modul auf Tablets, Smartphones oder Desktops einzeln deaktivieren. Dies ist nützlich, wenn Sie verschiedene Module auf verschiedenen Geräten verwenden oder das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente der Seite entfernen.

Andere Divi Tutorials

Dieser Artikel enthält Kommentare 3
  1. Hallo
    Im Gegensatz zu Ihnen versuche ich, die Seitenleiste in meinen Blog-Artikelseiten zu löschen, und ich weiß nicht, wie ich mit der neuen Version von Divi 4 vorgehen soll
    Hast du einen Tipp?
    danke
    Aurélie

  2. Hallo und danke für diese Tutorials.

    Beginnen Sie in diesem Beispiel mit einer Seite voller Breite oder mit einer Vorlage mit einer ursprünglichen Seitenleiste?

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
14 Aktien
Aktie8
tweet2
Registrieren4