Du willst ein Pop-Up Menü mit Anker-Links?
In Elementor kann man ja so fancy Full-Page Pop-Up Navigationsmenüs bauen. Was man damit aber nicht kann, ist Anker-Links auf z.B. einem One-Pager ansteuern, denn das Pop-Up bleibt nach dem Klick auf den Anker-Link einfach geöffnet obwohl die Seite im Hintergrund zum Ankerlink scrollt und man müsste das Pop-Up manuell schließen -> macht natürlich keiner, denn das ist buggy.
Bei herkömmlichen Menülinks die intern auf eine andere Seite verlinken tritt das Problem nicht weil sich das Pop-Up durch den Page-Reload automatisch schließt.
Lösung JS Snippet
Gott sei dank gibt es dafür eine recht einfache Lösung die sich JS Snippet nennt. Und so sieht das Snippet aus (öffnendes und schließendes script nicht vergessen“:
/* close elementor pop-up menu after click - for anchor nav */
<script>
jQuery( document ).ready(function($){
$(document).on('click','.elementor-location-popup a', function(event){
elementorProFrontend.modules.popup.closePopup( {}, event);
})
});
</script>
Im Prinzip gibt es 3 Möglichkeiten das Snippet einzufügen:
- Über das Elementor HTML-Widget
- über eine Header Injection oder
- über die functions.php
Wir schauen uns heute die Möglichkeiten 1 und 2 an, da diese schnell, einfach und übersichtlich funktionieren bzw. nachvollzogen werden können.
1. Einbindung über das Elementor HTML Widget
Am einfachsten ist es wohl es mittels HTML-Widget einzubinden. Ich mache das gerne direkt in der Navigation wo sich das Element befindet welches auf Klick das Pop-Up öffnet. Warum? Weil sich diese Navigation welches das Pop-Up triggert auf jeder Seite befindet wo das PopUp aufrufbar sein soll und somit automatisch auch das JS-Snippet auf jeder dieser Seiten vorkommt.
Also einfach den Code in das HTML-Widget kopieren und danach noch unter „Erweitert“ die Position auf „Absolut“ stellen damit wir uns nichts verschieben.
FERTIG
2. Einbindung über Header Injection
Alternativ kann man den Code auch in den Header einbinden und hat ihn so automatisch auf JEDER Seite und alles übersichtlich beieinander wenn man ein Plugin dafür nutzt.
Ich nutze für so etwas generell Head, Footer and Post Injections weil so schön simpel und lightweight ist aber es gibt auch andere derartige Plugins wie zum Beispiel WP-Code welche eher richtige Snippet-Manager sind wobei man Snippets direkt aktivieren/deaktivieren und ganz gezielt an vielen Stellen einbinden kann.
Fazit
Simpel aber hilfreich für fancy Pop-Up Navigationen auf One-Pagern oder Landing-Pages, egal welche Methode man für das Einbinden des Widgets man nutzt.