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

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

Bevor Sie Ihrer Seite ein Seitenleistenmodul hinzufügen können, müssen Sie zuerst zu Divi Builder wechseln. Einmal die Divi-Thema auf deinem installiert Website, 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 durchsuchen Website im Vordergrund, wenn Sie in Ihr WordPress-Dashboard eingeloggt sind.

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.

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 , Technologie 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.

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.

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:

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.

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.

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);

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.

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.

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.

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.

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.

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.

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.

[vc_row center_row=“yes“][vc_column width=“1/2″][vcex_button target=“blank“ layout=“expanded“ 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][/vc_column][vc_column width=” 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“]LADEN SIE HERUNTER TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andere Divi Tutorials

• 5 Websites, die Divi Restaurant Thema verwenden
• Wie man Text auf einem Divi WooCommerce Produkt hinzufügt
• So ändern Sie die Menüfarbe zwischen Divi-Seiten
• So personalisieren Sie die Gitter eines Blogs mit Divi
• Wie die Rolle Divi-Editor auf Wordpress verwenden
• So erstellen Sie einen Divi-Schieberegler im Vollbildmodus
• So ändern Sie die Farbe von Menüs zwischen Divi-Seiten
• Funktionen, die Sie wahrscheinlich nicht über Divi kennen
• Wie man Divi Builder auf WordPress benutzt
• Wie benutzt man das Divi Video-Scroll-Modul?
• Wie benutze ich das Divi Builder Flip Modul?
• So fügen Sie ein Testimonial-Modul in Divi Builder hinzu
• Wie benutzt man das Divi-Textmodul?
• So erstellen Sie einen Schieberegler auf Divi
• So bearbeiten Sie eine Divi-Benutzerrolle
• Wie benutzt man das Divi Social Media Modul?
• So verwenden Sie das Shop-Modul zum Thema WordPress Divi
• So verwenden Sie das Divi-Sidebar-Modul
• Wie benutzt man das Divi Preistabellen Modul?
• Wie verwende ich das Titelmodul von Divi-Publikationen?
• So fügen Sie ein Video-Modul von Divi hinzu
• Wie man das Artikelnavigationsmodul benutzt
• Wie benutzt man das Divi-Suchmodul?
• So verwenden Sie das Divi-Wallet-Modul
• Wie man das Personenmodul im Divi Builder benutzt
• Wie man das Geldbörsenmodul mit Divi-Filter verwendet
• So verwenden Sie das Schiebermodul mit voller Breite
• Wie benutzt man das Divi Builder Image Modul?
• So verwenden Sie das vollständige Navigationsmodul von Divi Builder
• So verwenden Sie das Bildergalerie-Modul
• So verwenden Sie das Divi Builder Kartenmodul mit voller Breite
• So verwenden Sie das Divi Full Width Portfolio-Modul
• So verwenden Sie das Divi-Header-Modul in voller Breite
• Wie benutze ich das Divi Counter Modul?
• So verwenden Sie den Artikel-Schieberegler in Divi Builder
• Wie benutze ich das Divi Email Optin Modul?