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 901.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 gebrauchsfertiger Zonen im laufenden Betrieb 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 Seitenleistenmodul hinzufügen können, müssen Sie zunächst zu Divi Builder springen. Sobald das Divi-Thema auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder über dem Post-Editor, wenn Sie eine neue Seite erstellen. 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 von Zeilen hinzugefügt werden. Wenn Sie eine neue Seite starten, denken Sie daran, 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. Sie können also auch das Wort "Seitenleiste" eingeben und dann auf "Eingabe" klicken, um das Seitenleistenmodul automatisch zu finden und hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie von der Moduloptionsliste begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Konzeption et fortgeschritten .

Beispiel für einen Anwendungsfall: Hinzufügen einer Seitenleiste zu Ihrer Blog-Seite

Mit dem Seitenleistenmodul können Sie eine Seitenleiste (und alle integrierten Widgets) an einer beliebigen Stelle auf Ihrer Seite einfügen. Tatsächlich können Sie mit dem Seitenleistenmodul einen beliebigen Widget-Bereich hinzufügen. In diesem Beispiel zeige ich Ihnen, wie Sie eine benutzerdefinierte Seitenleiste in Ihre Blog-Seite einfügen. Verwenden Sie dazu den speziellen Abschnitt, um das Widget "Suchen und Letzte Beiträge" in WordPress anzuzeigen.

Seitenleiste für Artikel auf WordPress.jpg

Diese Blog-Seite verfügt über eine Kopfzeile in voller Breite, um den Blog-Titel oben auf der Seite anzuzeigen. Unterhalb des Header-Moduls mit voller Breite befindet sich ein spezielles Layout mit einem Blog-Modul links und einem rechten vertikalen Seitenleistenbereich rechts.

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

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

Seitenleiste Widget wordpress.png

Stellen Sie dann Visual Builder bereit, um die Blog-Seite zu bearbeiten. Fügen Sie Ihrer Seite (direkt unter Ihrer Kopfzeile) 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" vorhanden ist. In diesem Beispiel wurde hier das Blog-Modul mit einem Rasterlayout hinzugefügt, um Blog-Beiträge 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 zum Sidebar-Modul. Sie können hier so viele Module in einer einzelnen Zeile hinzufügen, dass sie sich über die vertikale Breite des Abschnitts neben der Spaltenstruktur erstrecken, die Sie daneben erstellen. In diesem Beispiel verfügt die Blog-Seite bereits über ein E-Mail-Anmeldemodul und ein Personenmodul in diesem Bereich der vertikalen Seitenleiste des Speziallayouts.

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:
Schriftgröße der dunklen Kopfzeile: 26px
Abstand von Buchstaben von
Header: 3px Header-Zeilenhöhe: 1.1em

Registerkarte Erweitert

Fügen Sie im Abschnitt Benutzerdefiniertes CSS das folgende CSS zum Textfeld Widget hinzu. Dadurch stimmt das Design der Seitenleisten-Widgets mit dem Design der Site überein:

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

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

sidebar.png Einstellungen

Widget-Bereich

Das Seitenleistenmodul verwendet Widget-Erstellungsfelder, die Sie auf der Registerkarte Darstellung> Widgets erstellen können. In diesem Dropdown-Menü können Sie einen Ihrer benutzerdefinierten Widget-Bereiche auswählen.

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]

Administratorkennzeichnung

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

Entwurfsoptionen für die Seitenleiste

Auf der Registerkarte Design finden Sie alle Stiloptionen für das Modul, z. B. Schriftarten, Farben, Größe und Abstand. Auf dieser Registerkarte können Sie das Erscheinungsbild Ihres Moduls ändern. Jedes Divi-Modul verfügt über eine lange Liste von Designeinstellungen, mit denen Sie Änderungen vornehmen können.

Designoptionen divi.png

Orientierung

Hier können Sie auswählen, auf welcher Seite der Seite Ihre Seitenleiste angezeigt werden soll. Dieser Parameter steuert die Ausrichtung des Textes 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 hell sein. Wenn Ihr Hintergrund hell ist, sollte Ihr Text dunkel sein.

Header-Schriftart

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

Header-Schriftgröße

Hier können Sie die Größe Ihres Kopfzeilentextes anpassen. Sie können den Bereichsregler ziehen, um die Größe Ihres Texts zu erhöhen oder zu verringern, oder den gewünschten Textgrößenwert direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Kopfzeilentextfarbe

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

Kopfbuchstabenabstand

Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Kopfzeilentext vergrößern möchten, passen Sie den Abstand mit dem Bereichsregler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Kopfzeilenhöhe

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen Ihres Kopfzeilentextes aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, passen Sie den Abstand mit dem Schieberegler an oder geben Sie die gewünschte Abstandsgröße in das Feld ein. Eintrag befindet sich rechts vom Schieberegler. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Sie können also je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Körper Schriftart

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

Körper Schriftgröße

Hier können Sie Ihre Körpertextgröße 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 unterschiedliche Maßeinheiten. Sie können also je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Textfarbe des Körpers

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

Abstand der Körperbuchstaben

Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Text vergrößern möchten, passen Sie den Abstand mit dem Bereichsregler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "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, können Sie den Abstand mit dem Bereichsregler anpassen oder die gewünschte Abstandsgröße in das Eingabefeld eingeben befindet sich rechts vom Cursor. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Sie können also je nach Größenwert "px" oder "em" eingeben, 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 erfahrene Webdesigner möglicherweise als nützlich erachten, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie benutzerdefiniertes CSS auf jedes der vielen Elemente des Moduls anwenden. Sie können dem Modul auch benutzerdefinierte CSS-Klassen und -IDs zuweisen, mit denen Sie das Modul in der style.css-Datei 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 verwendet werden, um einen benutzerdefinierten CSS-Stil zu erstellen oder um auf bestimmte Abschnitte Ihrer Seite zu verlinken.

CSS-Klasse

Geben Sie die optionalen CSS-Klassen ein, die für dieses Modul verwendet werden sollen. Eine CSS-Klasse kann zum Erstellen eines benutzerdefinierten CSS-Stils verwendet werden. Sie können mehrere Klassen hinzufügen, die durch ein Leerzeichen getrennt sind. Diese Klassen können in Ihrem untergeordneten Divi-Design oder im benutzerdefinierten CSS-Stylesheet verwendet werden, das Sie Ihrer Seite oder Ihrer Website mithilfe der Divi-Designoptionen oder der Einstellungen auf der Divi Builder-Seite hinzufügen.

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und alle Interna des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element benutzerdefinierte CSS-Stylesheets direkt hinzufügen können. CSS-Einträge in diesen Einstellungen sind bereits in Stil-Tags eingeschlossen. Geben Sie einfach die durch Semikolons 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 Mods auf verschiedenen Geräten verwenden möchten oder wenn Sie das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente von der Seite entfernen.

Andere Divi Tutorials

Dieser Artikel enthält Kommentare 3

  1. Hallo
    Im Gegensatz zu Ihnen versuche ich, die Seitenleiste auf meinen Blog-Artikelseiten zu entfernen, und ich weiß nicht, wie ich das mit der neuen Divi 4-Version machen soll
    Hast du einen Tipp?
    wenden
    Aurélie

  2. Hallo und danke für diese Tutorials.

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

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