Mit dem Block „Nav-Menü“ können Sie Navigationsmenüs in Ihre SeedProd-Landingpages und Website-Vorlagen integrieren. Sie haben die Möglichkeit, direkt im Builder ein einfaches benutzerdefiniertes Menü zu erstellen oder ein vorhandenes WordPress-Menü von Ihrer Website zu verknüpfen.
Der Block unterstützt horizontale und vertikale Layouts, ein ausklappbares mobiles Menü, Untermenüs mit vollständiger Stilsteuerung und Link-Einstellungen pro Element – damit ist er eine flexible Navigationslösung für Kopf- und Fußzeilen sowie Seitenleisten.
Hinzufügen des Navigationsmenü-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Nav-Menü-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „Design“ > „Blöcke“ den Block „Navigationsmenü“ per Drag & Drop in den gewünschten Bereich Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Klicken Sie nach dem Hinzufügen auf den Block „Navigationsmenü“, um dessen Einstellungen zu öffnen. Wählen Sie zunächst auf der Registerkarte „Inhalt“ unter „Einstellungen“ Ihren Menütyp aus.
Menütyp:
- Ganz einfach: Erstellen Sie direkt in SeedProd ein benutzerdefiniertes Menü, indem Sie Elemente manuell hinzufügen. Jedes Element kann per Drag & Drop verschoben, dupliziert oder gelöscht werden. Klicken Sie auf ein Element, um dessen 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. Bei Bedarf steht Ihnen ein Link zum Bildschirm „WordPress-Menüs“ zur Verfügung, über den Sie Menüs erstellen oder verwalten können.
Einstellungen:
- Schriftgröße: Legen Sie die Schriftgröße der Menüpunkt-Links zwischen 10 und 72 px fest.
- Abstand zwischen: Legen Sie den Abstand zwischen den Menüelementen zwischen 1 und 100 px fest.
- Trennlinie: Geben Sie ein Zeichen oder eine Zeichenfolge ein, das/die als visuelle Trennzeichen zwischen Menüelementen verwendet werden soll (z. B.
|). - Ausrichtung: Legen Sie die horizontale Ausrichtung des Menüs fest – links, mittig oder rechts. Unterstützt gerätespezifische Werte für Desktop, Tablet und Mobilgeräte.
- Mobile Menu: Aktivieren Sie diese Option, um ein ausklappbares Hamburger-Menü auf Mobilgeräten zu aktivieren, das das vollständige Menü durch eine kompakte Umschalttaste auf kleineren Bildschirmen ersetzt.
Die Umschaltfunktion „Mobile Menu“ zeigt auf Mobilgeräten ein Hamburger-Menü-Symbol an. Wenn Sie darauf tippen, wird das vollständige Menü angezeigt.
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie die Typografie, Farben, das Design des Untermenüs und den Abstand Ihres Navigationsmenü-Blocks anpassen.
Erweiterte Stile:
- Listenlayout: Wählen Sie aus, ob Menüelemente in einem vertikalen (gestapelten) oder horizontalen (nebeneinander angeordneten) Layout angezeigt werden sollen.
- Typografie: Optimieren Sie die Schriftfamilie, Schriftstärke, Größe, Zeilenhöhe, Buchstabenabstand und Textumwandlung für Menüpunkt-Links. Unterstützt gerätespezifische Werte für Desktop, Tablet und Mobilgeräte.
- Farbe des aktiven Texts: Legen Sie die Farbe des derzeit aktiven Menüpunkt-Links fest.
- Hover-Textfarbe: Legen Sie die Farbe der Menüpunkt-Links beim Hover fest.
- Textschatten: Fügen Sie dem Menü-Linktext einen Schatten hinzu. Wählen Sie zwischen „Keine“, „Haarfein“, „Klein“, „Mittel“, „Groß“, „X Groß“ oder „2X Groß“.
Untermenü:
- Hintergrundfarbe des Untermenüs: Legen Sie die Hintergrundfarbe der Dropdown-Untermenüfelder fest.
- Untermenü-Textfarbe: Legen Sie die Textfarbe der Untermenü-Links fest.
- Farbe beim Überfahren des Untermenüs: Legen Sie die Farbe des Textes fest, der beim Überfahren der Links im Untermenü angezeigt wird.
- Untermenü-Eckenradius: Legen Sie den Eckenradius der Untermenü-Felder zwischen 1 und 50 Pixel fest.
- Zeilenhöhe des Untermenüs: Legen Sie die Zeilenhöhe der Untermenüelemente zwischen 1 und 60 px fest.
- Breite des Untermenü-Rahmens: Legen Sie die Breite des Rahmens der Untermenü-Felder zwischen 1 und 60 Pixel fest.
- Farbe der Untermenü-Umrandung: Legen Sie die Farbe der Umrandung der Untermenü-Felder fest.
- Untermenü-Schatten: Fügen Sie den Untermenü-Feldern einen Schlagschatten hinzu.
- Untermenü-Abstand: Legen Sie den inneren Abstand des Untermenü-Fensters fest (oben, rechts, unten, links).
Abstand:
- Rand: Steuert den äußeren Abstand um Ihren Navigationsmenü-Block (oben, rechts, unten, links). Damit legen Sie fest, wie viel Platz zwischen dem Menü und den umgebenden Elementen auf der Seite angezeigt wird.
- Abstand: Passen Sie den inneren Abstand innerhalb Ihres Navigationsmenü-Blocks an (oben, rechts, unten, links). Dadurch entsteht ein Abstand 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 benutzerdefiniertes Styling oder JavaScript-Targeting erstellt.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefiniertem CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie beliebige HTML-Attribute zum Block-Wrapper-Element hinzu. Geben Sie jedes Attribut in einer neuen Zeile im folgenden Format ein: Attributname|Wert.
Geräte-Sichtbarkeit:
- Auf dem Desktop ausblenden: Blendet den Block „Navigationsmenü“ auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blendet den Block „Navigationsmenü“ auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blendet den Block „Navigationsmenü“ auf Mobilgeräten aus.
Animationseffekte:
- Eingangsanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Navigationsmenü-Block in den Blickbereich scrollt. Zu den Optionen gehören „Hüpfen“, „Einblenden“, „Vergrößern“, „Drehen“ und viele mehr.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Navigationsmenü-Blocks und die Anpassung seines Erscheinungsbilds abgeschlossen haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen Navigationsmenü-Block zu Ihrer Seite hinzugefügt! Ein gut platziertes Navigationsmenü hilft Besuchern, schnell zu finden, wonach sie suchen, und sorgt dafür, dass sie auf Ihrer Website bleiben. Verwenden Sie den Menütyp „Einfach“ für schnelle benutzerdefinierte Linklisten oder verbinden Sie ein WordPress-Menü, um Ihre Navigation mit dem Rest Ihrer Website konsistent zu halten.