Menüs mit WordPress & Dropdown-Plugin

In diesem Tutorial wird gezeigt, wie man mit den Bordmitteln von WordPress Menüs anlegt. Wir werden einfache menüs anlegen und zudem auch zeigen, wie man ein Dropdown Menü (1) mit WordPress erstellt. Darüber hinaus zeige ich, wie man das animierte Dropdown-Menü von Matt Say (2) richtig mit Inhalt bestückt.

1. Das Standard-Menü von WordPress einrichten

Beginnen wir mit dem normalen Menü von WordPress. In unserem Beispiel wird das WordPress-Menü als „Kopfmenü“ verwendet.

WordPress

Zunächst öffnen wir das Menü Design > Menüs

WordPress

Nun legen wir einen Menünamen fest – und speichern das Menü. Der Name kann beliebig gewählt werden. Wollt ihr mit verschiedenen Menüs arbeiten, empfehle ich allerdings möglichst sinnvolle Namen zu wählen.

WordPress

Als erstes wollen wir dem Menü einen Link zur Home-Seite hinzufügen. Dazu fügen wir unter „Links“ unsere Domain (mit http://) ein. Zudem legen wir einen Titel fest, wie der Homelink in unserem Menü angezeigt werden soll. Über den Button „Zum Menü hinzufügen“ … fügen wir den Punkt unserem Menü hinzu :-)

WordPress

So. Unser erster Menüpunkt „Home“ ist erfolgreich im Menü gelandet.

WordPress
Jetzt werden wir eine paar Seiten hinzufügen. Dazu wählen wir die gewünschte Seite (oder auch mehrere Seiten) aus dem Feld „Seiten“ aus – und fügen diese ebenfalls unserem Menü hinzu.

WordPress

WordPress

Okay. Das Prinzip ist klar … und funktioniert bei Kategorien genauso wie bei Seiten.

WordPress

Haben wir alle Inhalte dem Menü hinzugefügt, geht es daran diese zu ordnen. Dazu klicken wir mit mit der Maus (linker Button) auf einen Menüpunkt, halten den Mausknopf gedrückt und verschieben den Menüpunkt an die geewünschte Stelle. Dies funktioniert sowohl von oben nach unten, als auch „verschachtelt“ von links nach rechts. Auf diese Weise können wir rasch unsere Inhalte zu einem vernünftig strukturiertem Menü umbauen.

WordPress

Zum Schluss wählen wir wir unter „Anordnung im Theme“ das neue Menü als Primärmenü aus – und speichern. Sollte unter „Primäre Naivagation“ unser Menü noch nicht angezeigt werden, kann es sein, dass wir das Menü selbst noch nicht gespeichert haben. In diesem Fall zunächst auf „Menü speichern“ drücken. Dann erscheint das neue Menü auch in der Auswahl „Primäre Navigation“.

WordPress

 

2. Das animierte Menü von Matt Say einrichten

In diesem Beispiel soll uns das animierte Menü als Haupt-Menü dienen. Bei Designer-Inn-Themes ist das Layout immer optimal für das jeweilige Theme angepasst, so dass die Einrichtung denkbar einfach ist.

Zuerst muss das Plugin installiert werden. Bei Designers-Inn-Themes liegt das Plugin vorkonfiguriert im Plugin-Ordner (dropdown-menu-widget.zip). Anderfalls kann unter Plugins > installieren auch nach „dropdown menu widget“ suchen – und das Dropdown Menü von Matt Say installieren. Aber kommen wir nun zur Einrichtung des Menüs:

 

WordPress

 

Als Erstes legen wir unter Design > Menüs ein neues Menü an.

WordPress

Dann geben wir dem Menü einen sinnvollen Namen – zum Beispiel „Hauptmenü“ – und speichern das neue Menü.

WordPress

Nun können wir unsere Inhalte hinzufügen und das Menü wie gewünscht aufgliedern. Speichern nicht vergessen!

WordPress

Als nächstes gehen wir in die Hauptnavigation zu Einstellungen > Dropdownmenü

WordPress

Das Dropdownmenü kann vielfältigst angepasst werden. In unseren Designers-Inn-Themes haben wir euch die Arbeit abgenommen und bereits alle Layout-Information in das Theme integriert. Aus diesem Grunde müssen wir nur zwei Einstellungen vornehmen.

1.) Das Dropdown Menu Theme auf „none“ setzen (dadurch wird unser Theme aktiviert). Zusätzlich könnt ihr die Effekte des Menüs aktivieren und euren Lieblingseffekt (fade oder slide) und das Tempo des Effekts auswählen.

WordPress

2.) Ganz unten auf dieser Seite müssen wir noch festlegen, welches Menü wir nutzen wollen. Hier wählen wir unter „Menu Type“ unser Menü aus – in diesem Beispiel „Hauptmeü“. Zudem können wir das Menü ausrichten (Alignment). Zur Auswahl stehen hier Links (left), Rechts (right) und Mittig (center).

Speichern und fertig!


KOSTENLOS: WordPress Grundlagen Handbuch

Neuer Theme Builder ab Divi 4

Neuer Theme Builder ab Divi 4

Unendliche Möglichkeiten dank des Theme Builders Divi 4. Mit dem Theme Builder könnt ihr jetzt komplette Seiten-Templates erstellen, z.B. für den Blog, die 404-Seite oder für Archiv- oder Suchergebnisse. Dabei könnt ihr global einen Kopf-, Inhalts-, und Fußbereich...

WordPress Standard-Text für geschützte Seiten ändern

WordPress Standard-Text für geschützte Seiten ändern

Du kannst in WordPress einzelne Seiten und Beiträge mit einem Passwort schützen. Ruft dann jemand diese Seite auf, erscheint ein Standard-Text: “This post is password protected. To view it please enter your password below:” beziehungsweise: "Um diesen geschützten...

DIVI Related Posts ohne Plugin

DIVI Related Posts ohne Plugin

In diesem Tutorial "Divi Related Posts" zeige ich dir, wie du ähnliche Beiträge unterhalb deiner Blogbeiträge ausgeben kannst. Divi bietet von Hause aus leider keine Möglichkeit, ähnliche Beiträge unterhalb eines Blogbeitrags auszugeben. Aber keine Sorge: Es gibt...

|

Hey, hinterlasse mir einen Kommentar!

3 Kommentare

  1. Frederic

    Hallo Marco,

    vielen dank für den wirklich informativen Artikel!

    Viele Grüße,
    Frederic.

  2. Lara

    Hallo Marco, wenn ich das genannte Plugin aktivieren möchte, kommt bei mir die Meldung dass ich dazu nicht berechtigt sei. Ich benutze das Theme DI Shoppy.
    Kannst du mir weiterhelfen?

  3. Marco

    Hi, du brauchst in den aktuellen DI Themes keine Plugins mehr für deine Menüs. Lege einfach dein Menü unter Design > Menü an.

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Marco

Marco

Designer & Marketer

Später lesen?

Diesen Artikel als
E-Book downloaden!


DOWNLOAD

Pin It on Pinterest

Share This

Durch der Website stimmst du der Cookie-Verwendung zu. Impressum | Datenschutzerklärung | Cookie-Settings