Navigation: Ollie Menu Designer

Navigation bei Block Themes aufpimpen: Plugin Ollie Menu Designer

Mit dem Ollie Menu Designer kann man in WordPress ansprechende und responsive Menüs gestalten – inklusive mobiler Menüs und Mega-Menüs. Die Gestaltung erfolgt komplett im Block-Editor. Das Plugin hat bereits für einigen Wirbel gesorgt, weil es als Gamechanger für den Navigation Block angesehen wird. Eine Funktion, auf die User, die Block Themes einsetzen, schon lange warten. Im Beitrag zeige ich, was mit dem Plugin möglich ist.

Schauen wir uns erst mal an, was man mit dem Plugin Ollie Menu Designer machen kann. Zunächst: Das Plugin kann nur dann verwendet werden, wenn man – wie wir – Block Themes einsetzt. Einfacher ist die Integration, wenn man als Block Theme das bekannte Ollie Theme verwendet, weil in dem Theme bereits viele Vorlagen zur Verfügung stehen. Mike McAlister, ist der Entwickler des Themes und auch federführend bei der Entwicklung des Plugins.

Nach der Installation und Aktivierung des Plugins sucht man zunächst vergebens nach Einstellungen. Der Grund ist recht einfach: Alles spielt sich im Block Editor beim Block Theme ab und zwar beim Navigation Block. Das Plugin erweitert den Navigation Block um zwei Features:

• Bei Mobil: Das mobile Menu und eine zusätzliche Option, den Breakpoint zu ändern
• Bei der Navigation der neue Block „Dropdown Menu“, mit dem man beispielsweise ein Mega Menu erstellen kann

Erstellung eines mobilen Menüs

Schauen wir uns zunächst die Erstellung des mobilen Menüs an:

1. Gehe im WordPress-Dashboard zu Design (Appearance) → Editor → Patterns und öffne dort dein Header-Template.
2. Klicke auf den Navigations-Block im Header.
3. Im Block-Einstellungsbereich findest du den Mobile Menu-Bereich.
4. Klicke auf Create a new one (Neues mobiles Menü erstellen) oder wähle ein bestehendes mobiles Menü aus.
5. Du kannst nun aus vorgefertigten Ollie-Designs ein mobiles Menü auswählen oder mit beliebigen WordPress-Blöcken dein eigenes mobiles Menü gestalten (z. B. Bilder, Buttons, Spalten).
6. Speichere deine Auswahl und stelle sicher, dass das mobile Menü im Mobile Menu Panel aktiviert ist.
7. Optional kannst du in den Einstellungen des mobilen Menüs Hintergrundfarben und das Menü-Icon anpassen, um es optisch passend zu deiner Seite zu machen.
8. Außerdem kann man den Breakpoint individuell einstellen

Hier ein Beispiel mit einem mobilen Menü:

Erstellung eines Menüpunkts als Mega-Menü

1. Öffne ebenfalls dein Header-Template unter Design (Appearance) → Website-Editor → Vorlagen.
2. Füge einen neuen Block hinzu und suche nach dem Block Dropdown Menu.
3. Benenne dein Dropdown-Menü (z. B. „Mega-Menü“).
4. Positioniere den Dropdown-Block im Hauptmenü an der gewünschten Stelle.
5. In den Block-Einstellungen findest du die Option, ein neues Dropdown-Menü zu erstellen oder ein vorhandenes Template zu verwenden.
6. Wähle aus den bereits vorgefertigten Ollie-Vorlagen oder baue dein Mega-Menü mit beliebigen Blöcken (Spalten, Bildergalerien, Buttons, Überschriften).
7. Speichere das Menü und aktiviere es im Dropdown-Menü-Panel.
8. Passe weitere Einstellungen an, etwa das Verhalten bei Hover, Option zur Deaktivierung im mobilen Menu, etc.

Ein Beispiel dazu:

---

Perspektiven für WordPress

Bei Automattic, der Firma, die sich hauptsächlich um die Entwicklung und Infrastruktur im WordPress-Umfeld kümmert, ist man auf das Plugin relativ schnell aufmerksam geworden:

Automattic’s Anne McCarthy says developers are preparing to review Ollie’s Menu Designer for inclusion in the Gutenberg plugin, marking the start of a collaborative push to bring the plugin’s features into WordPress core.

Übersetzung über Deepl.de: Anne McCarthy von Automattic sagt, dass Entwickler sich darauf vorbereiten, Ollies Menu Designer für die Aufnahme in das Gutenberg-Plugin zu überprüfen. Dies markiert den Beginn einer gemeinsamen Initiative, um die Funktionen des Plugins in den WordPress-Kern zu integrieren.

Quelle: https://www.therepository.email/ollies-menu-designer-flagged-for-core-with-automattic-developers-set-to-help-shepherd-it

---

Anne McCarthy: „I wanted to share some thoughts after being one of the people who chatted with Mike today. To zoom out a bit, Mike is an interesting type of contributor that I think reflects an untapped source of inspiration and feedback. His work with the Ollie Theme, Ollie Pro, and now the Ollie Menu Designer reflects both the power of embracing the Site Editor and solving real world problems that exist within the Site Editor today. „

Übersetzung: Ich wollte ein paar Gedanken mit euch teilen, nachdem ich heute mit Mike gechattet habe. Um es etwas genauer zu beschreiben: Mike ist ein interessanter Autor, der meiner Meinung nach eine ungenutzte Quelle der Inspiration und des Feedbacks darstellt. Seine Arbeit mit dem Ollie Theme, Ollie Pro und jetzt dem Ollie Menu Designer zeigt sowohl, wie leistungsstark der Site Editor ist, als auch, wie er echte Probleme löst, die heute mit dem Site Editor bestehen.

Quelle: https://nomad.blog/2025/10/08/on-bringing-the-ollie-menu-designer-to-core/

Mehr Informationen dazu findet ihr unten bei Links und Quellen

Weitere Optionen mit dem Plugin Dynamic Header & Navigation for Block Themes

Wenn man das Plugin Dynamic Header & Navigation for Block Themes zusätzlich verwendet, kann man außerdem recht einfach u. a. auch die Sticky-Option mit einem Shrinked-Effekt nutzen. In dem Fall sollte man aber nicht den Breakpoint (eine Option in dem Plugin) setzen. Weitere Infos zu dem Plugin gibt es in diesem Beitrag.

Tipps

• Ollie Menu Designer nutzt den nativen WordPress-Block-Editor. Man kann daher alle Blöcke verwenden, um das Menü zu gestalten.
• Die Designs sind responsive, so dass die Menüs auf allen Geräten gut aussehen.
• Für einen schnellen Start kann man attraktive vorgefertigte Muster des Ollie-Themes verwenden und diese anpassen.

Fazit

Der Ollie Menu Designer bietet umfassende kreative Freiheit, um mit den Blöcken dse Block Editors sowohl ansprechende Dropdown- als auch mobile Menüs zu gestalten, die sich nahtlos an das Design der Website anpassen lassen. Besonders hervorzuheben sind die mobile-optimierten Menüs, die voll responsiv und benutzerfreundlich sind. Wenn man das Ollie Theme verwendet, kann man vorgefertigte Menüvorlagen verwenden, die den Einstieg erleichtern und eine schnelle, kreative Gestaltung ermöglichen. Etwas verwirrend fand ich, dass bei der Erstellung eines neuen mobilen Menüs wie auch bei einem Dropdown-Menü jeweils ein neuer Tab erstellt wird.

Links, Quellen und aktuelle Infos

• https://wordpress.org/plugins/ollie-menu-designer/
• https://de.wordpress.org/themes/ollie/
• https://olliewp.com/
• https://olliewp.com/introducing-menu-designer/
• https://olliewp.com/menu-designer-is-now-available-on-wordpress-org/
• Transform your WordPress navigation with Menu Designer (by Mike McAlister): https://www.youtube.com/watch?v=UXWOafpBn38
• WordPress Mega Menus with Ollie Block Builder (by Matt Medeiros): https://www.youtube.com/watch?v=7NYskePLDM0
• Ollie Menu Designer (by Jamie Marsland): https://www.youtube.com/watch?v=Z12kUMtLODw
• Plugin Dynamic Header & Navigation for Block Themes
• Beitrag mit Anleitung zu dem Plugin Dynamic Header & Navigation for Block Themes und die englischsprachige Anleitung
• Gedanken in der Community, ob und wie man das Plugin in den Core integrieren könnte:
  • https://nomad.blog/2025/10/08/on-bringing-the-ollie-menu-designer-to-core/
  • https://www.therepository.email/ollies-menu-designer-lands-on-wordpress-org-praised-as-game-changer
  • https://www.therepository.email/ollies-menu-designer-flagged-for-core-with-automattic-developers-set-to-help-shepherd-it
  • https://gutenbergtimes.com/mega-menus-in-core-wordpress-6-9-calls-for-testing-going-from-elementor-to-site-editor-weekend-edition-344/
  • https://github.com/WordPress/gutenberg/issues/39142

Weitere Beiträge zum Thema (Block Neueste Beiträge)

• Theme-Update – Und wo finde ich die Infos?
• Schnellbearbeitung bei Seiten und Beiträgen
• Navigation: Ollie Menu Designer
• WordPress: llms.txt (KI) einrichten
• theme.json: Globale Blöcke wie Buttons bei Block Themes gestalten

Wir freuen uns über eine Kontaktaufnahme

Was hältst du davon?

Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

Newsletter: Wenn du über unsere neuesten Beiträge und Neuigkeiten rund um WordPress informiert werden möchtest, kannst du dich gerne bei unserem kostenlosen Newsletter anmelden.

Blog: Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörtern.