Ein Sprungmenü mit Enfold erstellen

  • Ein-Sprungmenue-mit-Enfold-erstellen

Mit einem Menü zu bestimmten Sektionen einer Seite springen.

Das WordPress Theme Enfold bietet eine schöne Möglichkeit innerhalb einer komplexeren Seite ein Sprungmenü zu integrieren. Somit ist eine schnelle Navigation zu bestimmten Bereichen auf einer Seite möglich. In meinem Tutorial „Ein Sprungmenü mit Enfold erstellen“ zeige ich Euch, wie Ihr mit dem WordPress Theme Enfold und dem Avia Layout Builder mehrere Farb-Sektions Container erstellt und mit dem Inhaltselement „Fullwidth Sub-Menu“ eine eigene Navigation uf der Seite platziert.

1. Farbsektionen auf der Seite erstellen

Im Enfold Theme auf einer leeren neuen leeren Seite startet den Avia Layout Architekt und wählt →Layout Elemente→Farb-Sektion.

Layout-Elemente-Farb-Sektion-erstellen

In den Optionen des Farb-Sektions Containers legt Ihr unter „Für Entwickler: Section ID“ einen eindeutigen Namen für den ersten Sektionsbereichs fest. Achtet darauf, einen Namen in Kleinbuchstaben und ohne Sonderzeichen zu wählen. In meinem Beispiel ist der Name „menu1“.

Einstellungen für den Farb-Sektions Container

Optionale Einstellungen & Inhalte erstellen

In meinem Beispiel habe ich dem Farb-Sektions Container eine feste Höhe von 724px zugewiesen und eine Hintergrundfarbe unter „Section Background“ vergeben. Da ich möchte, das alle folgenden Container sich übergangslos untereinander anreihen, habe ich unter der Option Innenabstand Sektion „Keinen Innenabstand“ ausgewählt.

Inhalte für den Farb-Sektions-Container erstellen

Inhalte innerhalb des Farb-Sektions Container erstellen
Innerhalb des 1. Farb-Sektions Containers habe ich zwei ½ Layout Elemente nebeneinander eingefügt. Links ein Bild und rechts einige Textbausteine.

2. Die Seite aufbauen

Dupliziert jetzt je nach belieben den 1. Container auf Eurer Seite. Wichtig ist, jedem neuen Farb-Sektions Container eine eigene eindeutige ID/Namen zu vergeben.

3. Fullwith Sub Menü Element einfügen

Unter Layout Elemente wählt „Fullwith Sub Menü“ aus und platziert es auf Eurer Seite. Am Beispiel meiner Seite, habe ich zum Aufbau der Seite als erstes ein Headline-Element eingesetzt dann ein Bild-Element und darunter das eigentliche „Fullwith Sub Menu“eingefügt. In den Einstellungen können jetzt frei wählbare Menüpunkte definiert werden. Auch die Auswahl eines „Sticky Submenü“ ist hilfreich. Somit bleibt Euer Sub-Menü beim scrollen oben am Bildschirmrand stehen.

Optionen für das Fulwith-Sub Menu Element

4. Menüpunkte erstellen

Für jeden Menüpunkt könnte Ihr einen individuellen Menü Text erstellen. Unter „Text Link“ wählt Ihr „Manuell festlegen“ und setzt im Textfeld als erstes eine Raute-Symbol (#) gefolgt vom Namen des Ziel- Farb-Sektions Containers kleingeschrieben. Durch das einfügen eines Raute-Symbols mit Namen ist der sog. Ziel-Anker-Link definiert. Beim klick auf den Menüpunkt im Browser, wird jetzt weich zu der definierten Farb-Sektion gescrollt.

Sub-Menue erstellen

5. Das fertige Sprungmenü

Eine solche spezielle Sub-Menü-Navigation, gleich am Anfang einer Seite gesetzt, ermöglicht es dem Benutzer, bei sehr vielen Inhalten auf einer Seite sofort zu den für ihn interessanten Bereich zu kommen.

Noch ein Tipp zum Schluss

Die gleiche Navigations-Technik lässt sich auch über die Hauptnavigation erreichen. Fügt dazu im WordPress Menü Eure neue Seite als Menüpunkt hinzu. Als Submenü-Punkte benutzt Ihr „Individuelle Links“, vergebt einen Namen und als Linkziel gebt Ihr z.b. „#Menu1“ anstatt einer URL ein. Mit dieser Technik navigiert Ihr den Benutzer direkt aus der Hauptnavigation zu einem bestimmten Bereich auf Eurer Seite.

About the Author:

Als freiberuflicher Web- und Mediendesigner biete ich Konzeption, Webdesign & Entwicklung von Firmen Webseiten auf der Basis des Open Source CMS WordPress.

Hinterlassen Sie einen Kommentar

*