Eine der zentralen Herausforderungen bei Websites ist die Navigation. Diese ist nicht immer einfach zu gestalten, besonders wenn es sich um ein umfangreicheres Menü handelt. Zum Glück gibt es in Elementor Pro die Popup-Funktion mit der sich ein größeres Menü erst per Klick einblenden lässt. In diesem Artikel erfährst du, wie du so ein Off-Canvas-Menü mit dem Popup-Feature von Elementor Pro erstellst.
1. Popup erstellen
Falls du dich noch nicht mit der Elementor Popup Funktion vertraut gemacht hast, kannst du auch erst unseren Grundlagenartikel dazu lesen, um einen besseren Überblick zu erhalten. Ansonsten navigiere einfach im WordPress-Dashboard zu Templates -> Popups und lege ein neues Popup an. Wenn du möchtest, kannst du eine Vorlage aus der Bibliothek wählen, die deiner Vorstellung nahe kommt. Für diesen Artikel starten wir allerdings mit einem leeren Popup.
2. Popup-Einstellungen
Anschließend werden die grundlegenden Einstellungen festgelegt. Solltest du aus Versehen aus den Einstellungen herausklicken, kannst du sie wieder über das kleine Zahnrand in der unteren linken Ecke aufrufen.
Für ein "klassisches" Off-Canvas-Menü, sollte das Popup die volle Bildschirmhöhe einnehmen und seitlich einfahren. Natürlich kannst du diese und weitere Einstellungen nach deinem persönlichen Geschmack anpassen. Vielleicht möchtest du die Overlay-Farbe dezenter gestalten, in der Brand-Color wählen oder das Overlay gänzlich deaktiveren.
Im "Erweitert"-Tab kannst du bei Bedarf noch weitere Einstellungen vornehmen und z. B. das Scrollen der Seite bei geöffnetem Popup verhindern. du solltest darauf achten, dass du entweder den Close-Button aktivierst oder aber das Schließen des Popups zumindest auf andere Weise erlaubst.
Im "Stil"-Tab findest du die gewohnten Einstellungen zum Hintergrund und Rahmen des Popups, sowie die Einstellungen zum Overlay und Close-Button (sofern aktiviert). Die Position des Close-Button ist ebenfalls anpassbar.
3. Widgets einfügen
Nachdem du das Popup deinen Vorstellungen entsprechend gestaltet hast, geht es an den Inhalt. Logischerweise macht ein Navigationsmenü-Widget Sinn, du kannst aber auch z. B. Icon-Widgets verwenden, um deine Seiten zu verlinken. Bedenke nur, dass in dem Fall die Links jedes Mal manuell angepasst werden müssen, wenn sich der Permalink einer Seite verändert.
Ich wähle für diesen Artikel das Navigationsmenü-Widget. Hier ist es wichtig, dass das Menü auf mobilen Geräten nicht zu einem Hamburger-Menü umbricht.
Im Prinzip ist dein Off-Canvas-Menü jetzt fertig. Je nachdem, was du dir vorstellst, kannst du jetzt noch weitere Elemente wie z. B. eine Suche, Social-Icons und Trust-Badges hinzufügen.
4. Menü-Popup verlinken
Dein Popup ist nun fertig. Es muss noch verlinkt werden, damit es sich auch bei einem entsprechenden Klick öffnet. Dazu speicherst du das Popup zunächst ab. Die Bedingungen, Trigger und Erweiterten Regeln kannst du dabei leer lassen.
Wechsle du dem Element, mit dem du das Popup aufrufen willst. In meinem Beispiel ist das ein Icon-Widget. Klick neben dem Feld "Link" auf das Symbol für die dynmaischen Attribute und wähle aus der Dropdown-Liste das "Popup" aus. Zuletzt wählst du über den Schraubenschlüssel dein eben erstelltes Popup aus und speicherst das Ganze ab. Deine Popup-Navigation ist jetzt einsatzbereit!
5. Unterschiedliche Menü-Layouts
Natürlich musst du das Popup nicht auf die volle Bildschirmhöhe einstellen oder seitlich einfahren lassen. Probiere ruhig etwas Neues aus! Du kannst z.B. mit einem zentralen, breiten Poup arbeiten und ein zweispaltiges Layout umsetzen. Achte bloß darauf, dass das Poup auch auf mobilen Endgeräten gut funktioniert!
Schlusswort
Mit diesem Artikel hast du hoffentlich einen Einblick in die Möglichkeiten mit Popups zu arbeiten erhalten! Bei Fragen und Anmerkungen, schreibe gerne unten einen Kommentar. Ich wünsche dir viel Spaß mit deinen neuen Skills 🙂
