Ein Sprungmenü mit Enfold erstellen

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.

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

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“.

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 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.

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.

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.

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.

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.

Lese auch meine Anleitung wie Du ein dynamisches Inhaltsverzeichnis (TOC) im Enfold Theme erstellen kannst

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.