4. Oktober 2021

Elementor Pro: Popup-Navigation

Kategorie: Plugins

0  Kommentare

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.

Elementor Pro: Popup-Navigation 1
Ein Popup in Elementor Pro anlegen funktioniert wie bei jedem anderen Template auch.

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.

Elementor Pro: Popup-Navigation 2
Achte darauf, dass die Animationsdauer Deines Popups nicht zu lange eingestellt ist.

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.

Elementor Pro: Popup-Navigation 3

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.

Elementor Pro: Popup-Navigation 4

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.

Elementor Pro: Popup-Navigation 5
Üblicherweise macht ein Navigationsmenü-Widget in einem Menü-Popup Sinn. Du kannst aber auch Icons oder andere Elemente verwenden.

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.

Elementor Pro: Popup-Navigation 6
Neben dem Hauptmenü kannst Du auch weitere Elemente wie eine Suche, Social Icons, Buttons, Newsletter-Formulare oder Chat-Widgets in Deinem Off-Canvas-Menü unterbringen.

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.

Elementor Pro: Popup-Navigation 7

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!

Elementor Pro: Popup-Navigation 8

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!

Elementor Pro: Popup-Navigation 9
Eine Popup-Menü-Vorlage aus der Elementor-Bibliothek.
Elementor Pro: Popup-Navigation 10

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 🙂


Dir hat der Artikel geholfen und du möchtest mit unseren WordPress Tipps, Tricks und Anleitungen auf dem Laufenden bleiben? Dann trag dich einfach in unseren kostenlosen Newsletter ein ...


Über den Autor

Aykut Askeri

Ich bin Webunternehmer und Gründer von LIONCAT. Ich liebe das Internet und insbesondere Menschen auf ihrem Weg beratend und tatkräftig zu unterstützen. Mein Spezialgebiet ist dabei die Konzeption und das Controlling von Webpräsenzen.


Diese Beiträge könnten dir auch gefallen

Text-Outline-Effekt mit Elementor

Text-Outline-Effekt mit Elementor
{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>

Schluss mit dem Schriftarten-Chaos.
Hol' Dir unseren Font-Guide!