Verwenden des Fullwidth-Menümoduls von Divi im Vergleich zum regulären Menümodul
Veröffentlicht: 2022-06-06Ein oft übersehener, aber wesentlicher Bestandteil jeder Website ist das Navigationsmenü. Die Navigation ist ein Schlüsselelement, um ein angenehmes Benutzererlebnis zu schaffen. Wenn es richtig gemacht wird, kann ein Menü die Benutzererfahrung erheblich verbessern und es Ihren Besuchern erleichtern, durch die Website zu navigieren.
Divi wird mit 2 verschiedenen Arten von Navigationsmodulen geliefert; Menü in voller Breite und normales Menü. In diesem Artikel werden wir einige der Unterschiede zwischen dem Divi-Menümodul in voller Breite und dem regulären Menümodul diskutieren und demonstrieren. Wenn Sie sich jemals gefragt haben, welches Modul Sie für Ihre Website verwenden sollen, hilft Ihnen dieser Artikel hoffentlich dabei, die wichtigsten Unterschiede und Anwendungsfälle für diese Module zu verstehen. Wir geben Ihnen auch Schritt-für-Schritt-Anleitungen, um das Design eines Menüs in voller Breite und eines regulären Menümoduls anzupassen.
Lass uns anfangen!
Vorgeschmack
Desktop: Menümodul in voller Breite
Desktop: Reguläres Menümodul
Mobil: Menümodul in voller Breite
Mobil: Reguläres Menümodul
Hauptunterschiede zwischen dem Divi-Menümodul in voller Breite und dem regulären Menümodul
Hier ist ein Überblick über die wichtigsten Unterschiede zwischen einem Menümodul in voller Breite und einem regulären Menümodul.
Normaler vs. Vollbreiten-Container
Das Menümodul mit voller Breite erfordert einen Abschnitt mit voller Breite in Divi. Da der Abschnitt die volle Breite hat, nimmt jedes Modul, das Sie hinzufügen, die gesamte Breite der Seite ein. Im Gegensatz zum regulären Menübereich können Sie nicht mehrere Module nebeneinander haben. Das Menümodul in voller Breite ist großartig, wenn Sie möchten, dass sich das Menü über die gesamte Breite der Seite erstreckt und keine zusätzlichen Module daneben benötigt.
Das reguläre Menümodul erfordert einen regulären Abschnitt in Divi. Normale Abschnitte haben viele verschiedene Zeilenlayouts, und Sie können jedes Layout mit dem regulären Menümodul verwenden. Auf diese Weise können Sie neben dem Menü zusätzliche Inhalte einfügen, indem Sie die anderen Zeilen verwenden, um eine komplexere Menüleiste zu erstellen. Dank der vielen Zeilenoptionen von Divi können Sie mit dem regulären Menümodul ganz einfach einzigartige Layouts für Ihre Menüleiste erstellen.
Integrierte Breiteneinstellungen vs. Bearbeiten des Zeilencontainers
Der andere Hauptunterschied zwischen den Menüs mit normaler und voller Breite besteht darin, dass sie unterschiedliche Möglichkeiten haben, die Breite und den Abstand des Moduls zu bearbeiten.
Das Fullwidth-Menümodul verfügt über einige integrierte Einstellungen zum Bearbeiten der Breite. Mit der Option „Menülinks in voller Breite erstellen“ können Sie den Menütext in voller Breite erstellen. Dadurch wird das Menümodul in voller Breite über die Standardinhaltsbreite hinaus erweitert.
Um ein ähnliches Aussehen mit einem normalen Menümodul zu erzielen, müssten Sie stattdessen die Einstellungen der enthaltenden Zeile bearbeiten. Bearbeiten Sie beispielsweise die Breite, maximale Breite und Ausrichtung der Zeile mit dem regulären Menü, um das reguläre Menümodul über die Standardinhaltsbreite hinaus zu erweitern.
Verwenden des Fullwidth-Menümoduls von Divi im Vergleich zum regulären Menümodul
Was Sie für den Einstieg benötigen
Wenn Sie diesem Tutorial folgen möchten, installieren und aktivieren Sie das Divi-Design und stellen Sie sicher, dass Sie die neueste Version von Divi auf Ihrer Website haben.
Jetzt können Sie loslegen!
Entwerfen eines Menümoduls in voller Breite
Fügen Sie Ihrer Website eine neue Seite hinzu, geben Sie ihr einen Titel und wählen Sie dann die Option Divi Builder verwenden.
Für dieses Tutorial werden wir das Design von Grund auf neu erstellen, also wählen Sie die Option zum Starten des Erstellens.
Wenn Sie zum ersten Mal eine leere Seite erstellen, ist darauf ein normaler Abschnitt vorinstalliert. Fügen Sie zuerst einen Abschnitt in voller Breite unterhalb des regulären Abschnitts hinzu.
Löschen Sie dann den regulären Abschnitt von der Seite.
Fügen Sie der Zeile mit voller Breite ein Menümodul mit voller Breite hinzu.
Fügen Sie dem Menü in voller Breite eine Hintergrundfarbe hinzu.
- Hintergrund: #4e7560
Fügen Sie dem Menü in voller Breite ein Logo hinzu.
Navigieren Sie als Nächstes zu den Menütextoptionen auf der Registerkarte Design.
- Menüschriftart: Poppins
- Menütextfarbe: #FFFFFF
- Menütextgröße: 20px
Navigieren Sie als Nächstes zu den Dropdown-Menüeinstellungen.
- Hintergrundfarbe des Dropdown-Menüs: #FFFFFF
- Farbe der Dropdown-Menüzeile: #7EAD70
- Textfarbe des Dropdown-Menüs: #000000
Legen Sie den Hintergrund und die Textfarbe des Mobile-Menüs fest.
- Hintergrundfarbe des mobilen Menüs: #FFFFFF
- Textfarbe des mobilen Menüs: #000000
Ändern Sie als Nächstes die Einstellungen des Hamburger-Menüs.
- Farbe des Hamburger-Menüsymbols: #FFFFFF
- Schriftgröße des Hamburger-Menüsymbols: 40px
Fügen Sie zum Schluss etwas obere und untere Polsterung hinzu.
- Polsterung-Oberseite: 10px
- Polsterung unten: 10px
Jetzt ist Ihr Menümodul in voller Breite fertig!
Entwerfen eines regulären Menümoduls
Fügen Sie Ihrer Website eine neue Seite hinzu, geben Sie ihr einen Titel und wählen Sie dann die Option Divi Builder verwenden.
Wählen Sie „Building starten“ aus, um von Grund auf neu zu erstellen.
Die Seite ist mit einem leeren regulären Abschnitt vorinstalliert. Fügen Sie diesem Abschnitt eine Hintergrundfarbe hinzu.
- Hintergrund: #4e7560
Als nächstes entfernen Sie die obere und untere Polsterung.
- Polsterung oben: 0px
- Polsterung unten: 0px
Fügen Sie eine neue Zeile mit dem unten gezeigten Layout hinzu.
Gleichen Sie in den Zeileneinstellungen die Spaltenhöhen an.
- Spaltenhöhen ausgleichen: Ja
Fügen Sie in den CSS-Einstellungen für das Hauptelement auf der Registerkarte „Erweitert“ das folgende benutzerdefinierte CSS hinzu.
align-items:center;
Fügen Sie der Spalte ganz links einen Textbaustein hinzu. Wir werden dies verwenden, um den Website-Namen anzuzeigen, anstatt ein Logo hochzuladen. Dies ist ein einzigartiger Vorteil des regulären Menümoduls, da Sie es zusammen mit anderen Modulen verwenden können, um zusätzliche Elemente zur Menüleiste hinzuzufügen.
- H1-Text: „Divi-Blog“
Stellen Sie die Textausrichtung auf dem Desktop auf links ein.
- Textausrichtung-Desktop: Links
Stellen Sie die Textausrichtung so ein, dass sie auf Tablets und Mobilgeräten zentriert ist.
- Textausrichtung-Tablett: Mitte
- Textausrichtung-Mobil: Mitte
Navigieren Sie als Nächstes zu den Überschriftentexteinstellungen.
- Überschriftenschrift: Poppins
- Schriftstärke der Überschrift: Fett
- Textfarbe der Überschrift: #FFFFFF
- Textgröße der Überschrift: 40px
Nachdem der Titel „Divi Blog“ fertig ist, fügen wir das reguläre Menümodul zur mittleren Spalte hinzu.
Entfernen Sie die Hintergrundfarbe.
- Hintergrund: Keine
Navigieren Sie als Nächstes zum Design-Tab. Ändern Sie unter Layout den Stil in Zentriert.
- Stil: Zentriert
Jetzt können wir die Menütextstile ändern.
- Menüschriftart: Poppins
- Menütextfarbe: #FFFFFF
- Menütextgröße: 20px
Ändern Sie auch die Dropdown-Menüstile.
- Farbe der Dropdown-Menüzeile: #7EAD70
- Textfarbe des Dropdown-Menüs: #000000
Ändern Sie als Nächstes die Einstellungen des mobilen Menüs.
- Hintergrundfarbe des mobilen Menüs: #FFFFFF
- Textfarbe des mobilen Menüs: #000000
Ändern Sie abschließend die Hamburger-Menüeinstellungen.
- Farbe des Hamburger-Menüsymbols: #FFFFFF
- Schriftgröße des Hamburger-Menüsymbols: 40px
Dies vervollständigt das Styling des regulären Menümoduls. Um das Menüdesign abzuschließen, fügen wir der rechten Spalte einen Call-to-Action-Button hinzu. Fügen Sie zuerst das Schaltflächenmodul hinzu.
Ändern Sie den Schaltflächentext.
- Schaltfläche: „Kostenlose 30-Tage-Testversion“
Stellen Sie die Schaltflächenausrichtung auf Mitte ein.
- Tastenausrichtung: Mitte
Setzen Sie „Benutzerdefinierte Stile für Schaltfläche verwenden“ auf „Ja“ und ändern Sie die Textfarbe.
- Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
- Schaltflächentextfarbe: #FFFFFF
Legen Sie den Schaltflächenhintergrund fest.
- Schaltflächenhintergrund: #7EAD70
Stellen Sie den Schaltflächenhintergrund beim Hover auf Orange ein.
- Schaltflächenhintergrund beim Hover: #D19929
Legen Sie als Nächstes die Rahmenbreite, den Radius und die Schriftart der Schaltfläche fest.
- Rahmenbreite der Schaltfläche: 0px
- Randradius der Schaltfläche: 40 Pixel
- Button-Schriftart: Poppins
Stellen Sie abschließend die linke und rechte Polsterung ein.
- Polsterung links: 30px
- Padding-Right: 30px
Endergebnis
Schauen wir uns nun das Endergebnis für unsere Menümodule an.
Desktop: Menümodul in voller Breite
Desktop: Reguläres Menümodul
Mobil: Menümodul in voller Breite
Mobil: Reguläres Menümodul
Abschließende Gedanken
Hoffentlich hat Ihnen dieser Artikel geholfen, einige der wichtigsten Unterschiede zwischen dem Divi-Menümodul in voller Breite und dem regulären Menümodul zu verstehen. Beide lassen sich unglaublich einfach anpassen, um großartig aussehende Menüs für Ihre Website zu erstellen. Das Fullwidth-Menümodul nimmt die Breite der Seite ein und verfügt über integrierte Optionen zum Ändern und Optimieren der Breite. Andererseits kann das reguläre Menümodul neben anderen Modulen verwendet werden und ist in einer Reihe enthalten, in der die Breite und andere Größenoptionen angepasst werden können. Verwenden Sie auf Ihrer Website ein Menümodul in voller Breite oder ein reguläres Menümodul? Wir würden uns freuen, von Ihnen in den Kommentaren zu hören!