Der Navigationsmenü-Block ermöglicht es Ihnen, Navigationsmenüs in Ihre SeedProd-Landingpages und Website-Vorlagen zu integrieren. Sie haben die Flexibilität, ein einfaches benutzerdefiniertes Menü direkt im Builder zu erstellen oder ein beliebiges vorhandenes WordPress-Menü von Ihrer Website zu verbinden.
Der Block unterstützt horizontale und vertikale Layouts, einen einklappbaren Umschalter für mobile Menüs, Untermenüs mit vollständiger Stilkontrolle und Linkeinstellungen pro Element – was ihn zu einer flexiblen Navigationslösung für Header, Footer und Seitenleisten macht.
Hinzufügen des Navigationsmenü-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Navigationsmenü-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke den Navigationsmenü-Block in den gewünschten Bereich Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Sobald er hinzugefügt wurde, klicken Sie auf den Navigationsmenü-Block, um seine Einstellungen zu öffnen. Im Tab Inhalt beginnen Sie mit der Auswahl Ihres Menütyps im Abschnitt Einstellungen.
Menütyp:
- Einfach: Erstellen Sie ein benutzerdefiniertes Menü direkt in SeedProd, indem Sie Elemente manuell hinzufügen. Jedes Element kann per Drag & Drop neu angeordnet, dupliziert oder gelöscht werden. Klicken Sie auf ein beliebiges Element, um seine Einstellungen zu erweitern und die Optionen Text (die sichtbare Linkbezeichnung), URL-Link (die Ziel-URL), In neuem Fenster öffnen und No Follow zu konfigurieren. Klicken Sie auf + Neues Element hinzufügen, um weitere Links zum Menü hinzuzufügen.
- WordPress-Menü: Verbinden Sie ein vorhandenes WordPress-Menü mit diesem Block. Wählen Sie ein Menü aus der Dropdown-Liste der auf Ihrer Website registrierten Menüs aus. Ein Link zum Bildschirm WordPress-Menüs wird bereitgestellt, um bei Bedarf Menüs zu erstellen oder zu verwalten.
Einstellungen:
- Schriftgröße: Legen Sie die Schriftgröße der Menüelement-Links von 10 bis 72 Pixel fest.
- Abstand dazwischen: Legen Sie den Abstand zwischen den Menüelementen von 1 bis 100 Pixel fest.
- Trennzeichen: Geben Sie ein Zeichen oder eine Zeichenfolge ein, die als visueller Trenner zwischen den Menüelementen verwendet werden soll (z. B.
|). - Ausrichtung: Legen Sie die horizontale Ausrichtung des Menüs fest – Links, Mitte oder Rechts. Unterstützt gerätespezifische Werte für Desktop, Tablet und Mobilgeräte.
- Mobiles Menü: Aktivieren Sie diese Option, um auf Mobilgeräten ein einklappbares Hamburger-Menü zu aktivieren, das das vollständige Menü auf kleineren Bildschirmen durch eine kompakte Umschalt-Schaltfläche ersetzt.
Der Umschalter für das mobile Menü zeigt auf Mobilgeräten ein Hamburger-Menü-Symbol an. Wenn darauf getippt wird, erweitert es sich, um das vollständige Menü anzuzeigen.
Schritt 3: Design anpassen
Im Tab Erweitert können Sie die Typografie, Farben, Untermenü-Stile und Abstände Ihres Navigationsmenü-Blocks anpassen.
Erweiterte Stile:
- Listenlayout: Wählen Sie, ob Menüelemente in einem vertikalen (gestapelten) oder horizontalen (nebeneinander) Layout angezeigt werden sollen.
- Typografie: Passen Sie Schriftfamilie, Schriftstärke, Größe, Zeilenhöhe, Buchstabenabstand und Texttransformation für Menüelement-Links fein an. Unterstützt gerätespezifische Werte für Desktop, Tablet und Mobilgeräte.
- Textfarbe für aktive Elemente: Legt die Farbe des Links für das aktuell aktive Menüelement fest.
- Textfarbe bei Hover: Legt die Farbe der Links für Menüelemente beim Überfahren mit der Maus fest.
- Textschatten: Fügt dem Text des Menülinks einen Schatten hinzu. Wählen Sie aus Keine, Haarlinie, Klein, Mittel, Groß, X-Groß oder XX-Groß.
Untermenü:
- Hintergrundfarbe des Untermenüs: Legt die Hintergrundfarbe von Dropdown-Untermenü-Bereichen fest.
- Textfarbe des Untermenüs: Legt die Textfarbe der Untermenü-Links fest.
- Hover-Farbe des Untermenüs: Legt die Hover-Textfarbe der Untermenü-Links fest.
- Abrundung des Untermenüs: Legt den Eckradius von Untermenü-Bereichen von 1 bis 50px fest.
- Zeilenhöhe des Untermenüs: Legt die Zeilenhöhe von Untermenü-Elementen von 1 bis 60px fest.
- Rahmenbreite des Untermenüs: Legt die Rahmenbreite von Untermenü-Bereichen von 1 bis 60px fest.
- Rahmenfarbe des Untermenüs: Legt die Rahmenfarbe von Untermenü-Bereichen fest.
- Schatten des Untermenüs: Fügt Untermenü-Bereichen einen Schlagschatten hinzu.
- Abstand innen (Padding) des Untermenüs: Legt den inneren Abstand des Untermenü-Bereichs fest (Oben, Rechts, Unten, Links).
Abstand:
- Abstand außen (Margin): Steuert den äußeren Abstand um Ihren Navigationsmenü-Block (Oben, Rechts, Unten, Links). Dies bestimmt, wie viel Platz zwischen dem Menü und den umliegenden Elementen auf der Seite vorhanden ist.
- Abstand innen (Padding): Passt den inneren Abstand innerhalb Ihres Navigationsmenü-Blocks an (Oben, Rechts, Unten, Links). Dies schafft Freiraum zwischen den Menülinks und den Blockrändern.
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Navigationsmenü-Block an. Diese ID wird automatisch von SeedProd für benutzerdefinierte Stile oder JavaScript-Ziele erstellt.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um spezifische Stile aus Ihrem Theme oder benutzerdefinierten CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie dem Block-Wrapper-Element beliebige HTML-Attribute hinzu. Geben Sie jedes Attribut in einer neuen Zeile im Format ein: attribut-name|wert.
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Blendet den Navigationsmenü-Block auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blendet den Navigationsmenü-Block auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blendet den Navigationsmenü-Block auf Mobilgeräten aus.
Animationseffekte:
- Eingangs-Animation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Navigationsmenü-Block in den Ansichtsbereich gescrollt wird. Optionen umfassen Bounce, Fade In, Zoom In, Rotate In und viele mehr.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Navigationsmenü-Blocks abgeschlossen und sein Aussehen angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Navigationsmenü-Block zu Ihrer Seite hinzugefügt! Ein gut platziertes Navigationsmenü hilft Besuchern, schnell zu finden, wonach sie suchen, und hält sie mit Ihrer Website beschäftigt. Verwenden Sie den einfachen Menütyp für schnelle benutzerdefinierte Linklisten oder verbinden Sie ein WordPress-Menü, um Ihre Navigation mit dem Rest Ihrer Website konsistent zu halten.