Tutorial: Hamburger-Menu mit Elementor und JetBlocks erstellen
Bei der Umsetzung einer Website sind Elemente gefragt, die Platz sparen und die Benutzerfreundlichkeit verbessern können. Eines derartigen Elemente ist das bekannte Hamburger-Menü, ein Navigationselement, das auf Websites, in der Webapps und Programmen verwendet wird. In diesem Artikel befassen wir uns mit dem Hamburger-Menü, seinen Vor- und Nachteilen sowie damit, wie du es mit Hilfe vom Elementor Page-Builder erstellen kannst. Also, lies weiter.
Vor- und Nachteile vom Hamburger-Menü
Werfen wir einen Blick auf Wikipedia, um herauszufinden, was das Hamburger-Menü ist. Die Enzyklopädie definiert es als "einen Button, der normalerweise in der oberen Ecke einer grafischen Benutzeroberfläche platziert ist". Er ist dafür verantwortlich, zwischen dem Menü oder der Navigationsleiste zu wechseln, die sich hinter dem Symbol auf dem Bildschirm verstecken.
Einige User halten das Hamburger-Menü für eine erstklassige Lösung zur Verbesserung der Navigation, während andere behaupten, dass die Verwendung des Menüs auf Websites keinen Sinn macht, weil es schlecht auffindbar ist, was verwirrend wirkt. Wir raten davon ab, diese oder jene Meinung zu unterstützen, bevor du dich mit den Vor- und Nachteilen des Menüs vertraut machst. Nach Abwägung aller Fakten solltest du selbst entscheiden, ob dir das Hamburger-Menü gefällt oder nicht.
Beginnen wir also mit den Vorteilen:
- Es ist weit verbreitet und wird für Websites, Webanwendungen, Computerprogramme und sogar Videospiele verwendet.
- Es ist eine großartige Lösung, wenn du möchtest, dass deine Website sauber und aufgeräumt wirkt, und deine Benutzer sie wegen Chaos nicht sofort verlassen.
- Es ist ein perfekter Ort für Navi-Buttons, die für bestimmte Aufgaben wichtig sind, aber nicht direkt dem Hauptziel der Website dienen und daher nicht zu viel Platz auf der Homepage einnehmen sollten.
Hier sind einige Gründe, warum man auf das Hamburger-Menü verzichtet:
- Es vermittelt die Botschaft, dass die versteckten Elemente nicht besonders wichtig sind, so dass Besucher nicht unbedingt diese Sektionen aufrufen werden.
- Es führt zu niedrigeren Klickraten und einem schwächeren Engagement. Das Hamburger-Menü ist nicht nur schwer aufzufinden, sondern trägt es dazu bei, dass Besucher keinen Wunsch haben, sich mit den Navigationsmöglichkeiten auseinanderzusetzen.
- Es lässt die Besucher die Extrameile gehen, um das Endziel zu erreichen.
Jetzt, wenn du schon im Klaren über die wichtigsten Vor- und Nachteile vom Hamburger-Menü bist, kannst du endgültig entscheiden, ob du dieses Element auf deiner Website brauchst. Wenn ja, dann hilft dir diese Anleitung, das Navigationsmenü einfach zu erstellen.
So erstellst du das Hamburger-Menü mit dem Elementor Page-Builder und JetBlocks-Plugin
Um das Hamburger-Menü einfach erstellen zu können, benötigst du einen Zugriff auf die Erstellung eigener Kopf- und Fußzeilen. Hier gehen wir auf diesen Schritt näher ein:
- Wähle eine kostenlose Lösung wie das WordPress Plugin (das ist allerdings nicht die sicherste Lösung, weil niemand die Leistung des Plugins überwachen und technischen Support anbieten wird).
- Entscheide dich für das Elementor Pro Abonnement und erhalte die Möglichkeit, benutzerdefinierte Kopf- und Fußzeilen nach deinem Wunsch zu bearbeiten.
- Entscheide dich für das Monstroid2 WordPress Theme und erhalte die Möglichkeit, benutzerdefinierte Kopf- und Fußzeilen zu erstellen sowie nutze weitere Vorteile wie Plugins der Jet-Familie, eine Vielzahl von vorgefertigten Seiten und Abschnitten und andere Funktionen.
Wenn du ein Hamburger-Menü auf deiner Website sehen möchtest, benötigst du neben dem Elementor Page-Builder ein separates JetPlugin. Das ist ein Addon namens JetBlocks, das Widgets die Erstellung von funktionalen Kopf- und Fußzeilen liefert.
Wenn du Monstroid2 für deine Website verwendest, entdeckst du das JetBlocks-Plugin im Dashboard. Dafür sollst du nur Monstroid2 im Menü finden, auf Plugins gehen, und du siehst da alle Addons, die installiert und aktiviert sind. Solltest du ein anderes Theme auswählen, dann stelle sicher, dass das notwendige Plugin an Bord ist.
Nun, du weißt jetzt, was du brauchst, um das Hamburger-Menü zu erstellen. Lass uns nun dir genaue Schritte zeigen. Wenn eine andere Vorlage als Monstroid2 verwendest, kannst du auf die Kopfzeile über die Theme-Bibliothek zugreifen und sie im Live Customizer einzurichten. Aber, in diesem Tutorial geht es gerade um das Monstroid2 WordPress Theme.
- Öffne den Elementor Editor und klicke auf Header Home.
- Beginne mit der Erstellung eines neuen Abschnitts.
- Finde das Hamburger Panel über die Suchleiste und ziehe es per Drag & Drop in den Bereich. Es besteht aus zwei Elementen - einem Panel und Toggle, beide müssen angepasst werden.
- Navigiere zum Menü "Style Settings" und spiele mit den Einstellungen für das Panel und Toggle herum.
- Gehe zum Menü "Content" und wähle eine Vorlage für das Hamburger-Panel. Danach kannst du Änderungen daran vornehmen. Klicke auf die Schaltfläche "Edit Template". Sobald dies erledigt ist, wirst du zu einem anderen Elementor-Fenster weitergeleitet, in dem du das Aussehen der Vorlage anpassen kannst.
- Navigiere zum Abschnitt "Style", setze den Hintergrund auf “transparent” und nimm die Einstellungen für Rand, Hintergrundüberlagerung, Shape Divider und Typografie vor. Speichere die Vorlage, um die Erstellung des Hamburger-Menüs abzuschließen.
Hamburger Menu with Elementor Page Builder and JetBlocks Add-on | Elementor Tutorial
Top 3 Elementor Themes
Für diejenigen, die Entscheidungshilfe bei der Auswahl einer Vorlage für eine zukünftige Website brauchen, haben wir 3 meistverkaufte Elementor Themes aufgesucht, die mit dem innovativen Drag-and-Drop-Content-Editor und JetPlugins kommen.
Monstroid2 - Multipurpose WordPress Theme
Monstroid2 ist das Flaggschiffprodukt auf dem TM-Marktplatz. Dieses Elementor WordPress Theme ist bekannt für seine Leichtgewichtigkeit und einwandfreie Performance. Es verfügt über eine riesige Sammlung von vorgefertigten Abschnitten und Seiten, großartige Skins sowie beliebte Plugins und Erweiterungen.
Der Elementor Page-Builder, der im Paket enthalten ist, sorgt für eine codefreie Bearbeitung in Echtzeit, während JetPlugins die Erstellung zahlreicher Elemente und Module für erweiterte Funktionen ermöglichen. Wer einen funktionsfähigen Onlineshop aufbauen möchte, der ist mit Monstroid2 gut bedient. Das Theme enthält das WooCommerce-Paket, sodass du deine Produkte und Dienstleistungen sofort anbieten kannst.
BeClinic - Mehrzweckiges WordPress Theme für Medizin-Websites
BeClinic ist ein weiteres Elementor WordPress Theme, das sich einer großen Beliebtheit bei Benutzern erfreut. Abgesehen von einer riesigen Auswahl an Demos, die für jeden Zweck geeignet sind, enthält es vorgefertigte Seiten, Inhaltstypen usw. Um ein erstaunliches Layout zu erstellen und Inhalte ohne großen Aufwand anzupassen, kannst du den Elementor Page-Builder verwenden. Ausgestattet mit einem Drag-and-Drop-Editor sorgt er für eine intuitive Anpassung.
Wenn du BeClinic für deine Website einsetzt, so sparst du bis zu ca. 700 US-Dollar, weil alle wichtigen Plugins im Theme enthalten sind. Mit diesem Theme erhältst du den Revolution Slider, Bonusbilder, JetPlugins, Event-Kalender, Cherry-Plugins, WooCommerce-Plugin und 4 Blog-Layouts.
JohnnyGo - Mehrzweckiges WordPress Theme für Hausservice-Websites
Möchtest du eine Website für dein Serviceunternehmen umsetzen? Dann probiere dieses WordPress Theme mit dem Elementor Page-Builder aus. Mit JohnnyGo erwarten dich 16 Demos, 30 vorgefertigte Seiten und andere Elemente, die dich dabei unterstützen, deine Dienstleistungen online zu bewerben. Darüber hinaus helfen die hohe Funktionalität und die effiziente Benutzeroberfläche dein Unternehmen voranzubringen. Du kannst deine Projekte verwalten, deine Teammitglieder vorstellen, mit Hilfe von WooCommerce verkaufen, Termine vereinbaren, einen Blog betreiben und vieles mehr.
Mit dem Elementor Page-Builder, das im Paket enthalten ist, kannst du pixelgenaue Seitenlayouts erstellen, ohne dass du dazu eine Zeile Code berühren muss. Kurz gesagt, alles, was du für deine Website benötigst, bietet dir dieses moderne Theme.
Olga Kulmann ist Mitglied des deutschen Marketer-Teams von TemplateMonster. Ihr Interessenkreis umfasst von Online-Marketing über E-Commerce bis hin zum Webdesign. Olgas Anliegen ist es, die Blogleser mit besten Erfahrungen und geprüftem Expertenwissen in diesen Bereichen vertraut zu machen. Olga auf Facebook.