So verwenden Sie das Divi Builder Vollbreiten-Navigationsmodul

Mit dem Divi Full Modth Menu-Modul können Sie ein Navigationsmenü an einer beliebigen Stelle auf der Seite platzieren. Dies kann verwendet werden, um der Seite ein zweites Seitenmenü hinzuzufügen, oder es kann in Verbindung mit der Funktion "Leere Seite" verwendet werden, um Ihre primäre Navigation an den unteren Rand der Seite zu verschieben. Sie können beispielsweise Ihr Menü unter Ihren ersten Abschnitt verschieben, um Personen mit einem großen Startbild aufzunehmen. Dies ermöglicht Ihrer Header-Navigation im Grunde, sich mit dem Builder auf der Seite zu bewegen!

So fügen Sie Ihrer Seite ein Vollbild-Menümodul hinzu

Bevor Sie Ihrer Seite ein Menümodul in voller Breite 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 Aktivieren Sie den visuellen Builder wenn Sie Ihre durchsuchen Website im Vordergrund, wenn Sie in Ihr WordPress-Dashboard eingeloggt sind.

Nachdem Sie Visual Builder eingegeben haben, können Sie auf das graue Pluszeichen klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module mit voller Breite können nur innerhalb von Abschnitten mit voller Breite hinzugefügt werden. Wenn Sie eine neue Seite starten, vergessen Sie nicht, Ihrer Seite zuerst einen Abschnitt mit voller Breite hinzuzufügen. Wir haben einige großartige Tutorials zur Verwendung von Divi-Abschnittselementen.

Suchen Sie das Menümodul in voller Breite in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Liste der Module kann durchsucht werden. Sie können also auch das Wort "Menü mit voller Breite" oder "Menü mit voller Breite" (je nach Version) eingeben und dann auf die Eingabetaste klicken, um das Menü-Modul mit voller Breite automatisch zu suchen 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 eines Menüs mit voller Breite unter dem Seitenkopf

In diesem Beispiel zeige ich Ihnen, wie Sie im Kopfbereich einer Seite ein Menü mit voller Breite hinzufügen.

Hier ein Beispiel:

Da dieses neue Ganzseitenmenü das Standard-Hauptnavigationsmenü ersetzt, muss die leere Seitenvorlage ausgewählt werden, damit das Standardnavigationsmenü nicht zusätzlich zum Vollbreitenmenü oben auf der Seite angezeigt wird. das werde ich hinzufügen.

Um Ihre Seitenvorlage zu bearbeiten, rufen Sie Ihren Seiteneditor auf und wählen Sie die Vorlage "Leere Seite" im Bereich "Seitenattribute" der rechten Seitenleiste aus.

Da in diesem Modul ein bereits vorhandenes Menü angezeigt wird, ist es wichtig, dass Sie das Menü bereits erstellt haben, bevor Sie es dem Menümodul in voller Breite hinzufügen.

Wenn Sie Ihr Menü erstellt haben, können Sie mit dem Visual Builder einen Abschnitt mit voller Breite direkt unter dem Kopfbereich der Seite hinzufügen. Fügen Sie dann dem Abschnitt ein Menümodul in voller Breite hinzu.

Aktualisieren Sie die Einstellungen im Menü "Volle Breite" wie folgt:

Inhaltsoptionen

Menü: [Wählen Sie das Menü aus, das im Modul verwendet werden soll] Kontext: # 333333

Design-Optionen

Textfarbe: Hell Textausrichtung: Mitte Menü Schriftart: Roboto-Menü Schriftgröße: 20px

Das ist es!

Trick : Sie können die Ansichtsoptionen auf der Registerkarte Erweitert verwenden, um dieses Menü auf Mobilgeräten auszublenden und ein anderes Menü über der Kopfzeile anzuzeigen, damit mobile Benutzer das Menü sehen können, ohne die Seite nach unten scrollen zu müssen .

Fullwidth Menü Inhalt Optionen

Auf der Registerkarte Inhalt finden Sie den gesamten Inhalt des Moduls, z. B. Text, Bilder und Symbole. All das steuert was erscheint in Ihrem Modul immer auf dieser Registerkarte.

Kategorien

Wählen Sie ein Menü aus, das im Modul verwendet werden soll. Über die Seite können Sie neue Menüs erstellen Auftritte> Menüs von Ihrem WordPress-Dashboard. Jedes Mal, wenn Sie ein neues Menü erstellen, kann das Menü aus diesem Dropdown-Menü ausgewählt werden.

Hintergrundfarbe

Standardmäßig hat das Menümodul eine weiße Hintergrundfarbe. Wenn Sie eine andere Farbe für Ihren Menühintergrund verwenden möchten, können Sie diese hier mit dem Farbwähler auswählen.

Hintergrundfarbe des Dropdown-Menüs

Standardmäßig erben die Dropdown-Menüs in Ihrem Menümodul die in der vorherigen Einstellung definierte Hintergrundfarbe. Wenn Ihre Dropdown-Menüs eine eigene Farbe haben sollen, können Sie mit dieser Einstellung eine benutzerdefinierte Farbe auswählen.

Hintergrundfarbe des mobilen Menüs

Auf Mobilgeräten wird das Menümodul in ein anderes Design umgewandelt und besser an Mobilgeräte angepasst. Sie können die Hintergrundfarbe des mobilen Dropdown-Menüs unabhängig von seinem Desktop-Gegenstück steuern.

Administrationsetikett

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.

Menüoptionen für die gesamte Breite

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.

Untermenüs öffnen

Standardmäßig werden alle Untermenüs als Dropdown-Menü unterhalb der Hauptmenüleiste geöffnet. Wenn Sie Ihr Menü am unteren Rand der Seite platzieren und Ihr Menü lange Dropdown-Menüs enthält, möchten Sie diese Menüs möglicherweise über dem Menümodul öffnen, damit das Menü nicht über das Browserfenster hinausgeht.

Erstellen Sie vollständige Menüverknüpfungen

Standardmäßig werden Links der obersten Ebene mit dem Menümodul innerhalb Ihrer Standardinhaltsbreite platziert. Wenn Sie diese Einschränkung aufheben möchten und Ihre Links über die gesamte Breite der Seite beginnend ganz links auf dem Bildschirm ausgeführt werden sollen, können Sie diese Option aktivieren.

Farbe der Dropdown-Menüzeile

In Dropdown-Menüs werden Links durch eine 1-Pixel-Linie getrennt. Wenn Sie die Farbe dieser Zeile anpassen möchten, können Sie mit dem Farbwähler in dieser Einstellung eine benutzerdefinierte Farbe auswählen.

Textfarbe

Hier können Sie den Wert Ihres Textes auswählen. Wenn Sie auf einem dunklen Hintergrund arbeiten, sollte Ihr Text aktiviert sein. Wenn Sie mit hellem Hintergrund arbeiten, sollte Ihr Text dunkel sein.

Textausrichtung

Dies steuert, wie Ihr Text im Modul ausgerichtet wird. Sie können zwischen Links, Rechts und Mitte wählen.

Aktive Linkfarbe

Die Farben der aktiven Links werden im Menümodul hervorgehoben, um dem Benutzer den aktuellen Standort anzuzeigen. Mit dieser Einstellung können Sie die für diese aktiven Links verwendete Hervorhebungsfarbe ändern.

Farbe des Textes des Dropdown-Menüs

Standardmäßig erbt der Text in den Dropdown-Menüs des Moduls die Farbe des Hauptmenütextes. Möglicherweise möchten Sie diese Farbe jedoch ändern, wenn Sie eine benutzerdefinierte Hintergrundfarbe für das Dropdown-Menü definiert haben.

Farbe des mobilen Menütexts

Standardmäßig erbt der Text in den Dropdown-Menüs des Moduls die Farbe des Hauptmenütextes. Möglicherweise möchten Sie diese Farbe jedoch ändern, wenn Sie eine benutzerdefinierte Hintergrundfarbe für das mobile Menü festgelegt haben.

Menüschriftart

Sie können die Schriftart Ihrer Menüschrift ä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.

Schriftgrößen-Menü

Hier können Sie die Größe Ihrer Menüschrift anpassen. Sie können den Bereichsregler 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, dh Sie können je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Farbe des Menütexts

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

Menübuchstabenabstand

Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem numerischen 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 Schieberegler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten, dh Sie können je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Höhe der Menüzeile

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen Ihres numerischen Textes 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 verschiedene Maßeinheiten, dh Sie können je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Erweiterte Vollbreiten-Menüoptionen

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. Mit einer CSS-Klasse kann ein benutzerdefinierter CSS-Stil erstellt werden. Sie können mehrere Klassen hinzufügen, getrennt durch ein Leerzeichen. Diese Klassen können in Ihrem Divi-Child-Theme oder im benutzerdefinierten CSS-Stylesheet verwendet werden, das Sie Ihrer Seite oder Website hinzufügen. Website Verwenden von Divi-Designoptionen oder Divi Builder-Seiteneinstellungen.

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.

Animation des Dropdown-Menüs

Sie können zwischen verschiedenen Animationen wählen, die verwendet werden sollen, wenn ein Dropdown-Menü aktiviert ist. Standardmäßig ist die Animation auf Überblenden eingestellt, aber Sie ändern dies in: Erweitern, Ziehen oder Spiegeln.

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?