Springe zum Hauptinhalt

So verwenden Sie das Divi Builder Vollbreiten-Navigationsmodul

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 dem Divi Full Width-Menü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 Hauptnavigation an den unteren Rand der Seite zu verschieben. Beispielsweise können Sie Ihr Menü unter den ersten Abschnitt verschieben, um Benutzer mit einem großen Startabbild aufzunehmen. Dies ermöglicht im Wesentlichen, dass sich Ihre Kopfzeilennavigation mit dem Konstruktor auf der Seite bewegt!

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 in Divi Builder springen. 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 Aktivieren Sie den visuellen Builder Wenn Sie Ihre Website im Vordergrund durchsuchen, wenn Sie mit Ihrem WordPress-Dashboard verbunden sind.

Nachdem Sie Visual Builder aufgerufen haben, können Sie auf das graue Plus-Symbol klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Die neuen Module mit voller Breite können nur innerhalb der Abschnitte mit voller Breite hinzugefügt werden. Wenn Sie eine neue Seite erstellen, vergessen Sie nicht, Ihrer Seite zuerst einen Abschnitt mit voller Breite hinzuzufügen. Wir haben einige gute Tutorials zur Verwendung der Divi-Section-Elemente.

Vollbreitenmenü modul.png

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 ist durchsuchbar, dh Sie können auch das Wort "Voll mit Menü" oder "Voll-Menü" eingeben (abhängig von Ihrer Version) und dann auf die Eingabetaste klicken, um das Voll-Menü-Modul automatisch zu suchen 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 eines Menüs mit voller Breite unter dem Seitenkopf

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

Hier ein Beispiel:

Beispiel für Menü Fullwidth divi.jpg

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

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

Attribut der page.png

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

Beispielmenü wordpress.jpg

Nachdem Sie Ihr Menü erstellt haben, fügen Sie mit Visual Builder einen Abschnitt mit voller Breite direkt unter der Kopfzeile der Seite hinzu. Fügen Sie dann dem Abschnitt ein Menümodul voller Breite hinzu.

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

Fügen Sie unterhalb der title.jpg ein Menü in voller Breite hinzu

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

Inhaltsoptionen

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

Design-Optionen

Textfarbe: Heller Text Ausrichtung: Mittleres Schriftmenü: Roboto-Menü Schriftgröße: 20px

Das ist alles!

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

Ergebnismenü divi.jpg

Fullwidth Menü Inhalt Optionen

In der Registerkarte Inhalt finden Sie alle Inhaltselemente des Moduls, wie z. B. Text, Bilder und Symbole. All das kontrolliert was erscheint in Ihrem Modul immer auf dieser Registerkarte.

fullwidth-menu-section content.png

Menü

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 für Ihren Menühintergrund eine andere Farbe verwenden möchten, können Sie diese hier mit der Farbauswahl auswählen.

Hintergrundfarbe des Dropdown-Menüs

Standardmäßig übernehmen die Dropdown-Menüs in Ihrem Menümodul die in der vorherigen Einstellung festgelegte 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 verwandelt sich das Menümodul in ein anderes und mobilerfreundliches Design. Sie können die Hintergrundfarbe des Dropdown-Menüs für Mobilgeräte unabhängig von dessen 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 Bezeichnungen im Modulblock der Divi Builder-Benutzeroberfläche angezeigt.

Menüoptionen für die gesamte Breite

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.

Abschnitt Design Modul Menü fullwidth.png

Untermenüs öffnen

Standardmäßig werden alle Untermenüs in einem Dropdown-Menü unterhalb der Hauptmenüleiste geöffnet. Wenn Sie Ihr Menü am Ende der Seite platzieren und Ihr Menü lange Dropdown-Menüs enthält, können Sie diese Menüs über dem Menümodul öffnen, damit das Menü nicht über das Browserfenster hinausgeht.

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]

Erstellen Sie vollständige Menüverknüpfungen

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

Farbe der Dropdown-Menüzeile

In den Dropdown-Menüs sind die Links durch eine Linie von 1-Pixeln getrennt. Wenn Sie die Farbe dieser Linie anpassen möchten, können Sie mithilfe der Farbauswahl 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 einem klaren Hintergrund arbeiten, sollte Ihr Text dunkel sein.

Textausrichtung

Hiermit steuern Sie, wie Ihr Text im Modul ausgerichtet wird. Sie können zwischen Links, Rechts und Zentriert wählen.

Aktive Linkfarbe

Farben für aktive 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 Markierungsfarbe ändern.

Farbe des Textes des Dropdown-Menüs

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

Farbe des mobilen Menütexts

Standardmäßig übernimmt der Text in den Dropdown-Menüs des Moduls die Farbe des Texts aus dem Hauptmenü. 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ß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.

Schriftgrößen-Menü

Hier können Sie die Größe Ihrer Menüschrift 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 Menütexts

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

Abstand der Menübuchstaben <

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. 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 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 Menüzeile

Die Höhe der Zeile wirkt sich auf den Abstand zwischen den einzelnen Zeilen Ihres digitalen Texts 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.

Erweiterte Vollbreiten-Menüoptionen

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.

Menümodul Fullwidth Advanced Section divi.png

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]

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.

Animation des Dropdown-Menüs

Sie können zwischen verschiedenen Animationen wählen, wenn ein Dropdown-Menü aktiviert ist. Standardmäßig ist die Animation auf Ausblenden eingestellt, Sie ändern sie jedoch in: Erweitern, Ziehen oder Kippen.

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 0

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
17 Aktien
Aktie10
tweet3
Registrieren4