Du behöver en knapp var som helst på din webbplats för att öppna en Elementor-popup, men standardutlösaren "vid klick" fungerar bara inom en enda sida? Den här uppgiften kan lösas på fem minuter utan tredjepartsplugins och utan kodändringar.

Den inbyggda mekanismen i Elementor Pro, en ankarlänk kombinerad med CSS-väljaren Open By Selector. När du har konfigurerat den får du en popup som öppnas från vilken sida som helst på din webbplats: från ett menyalternativ, en textlänk eller en knapp i sidfoten. Nedan följer en steg-för-steg-guide från att skapa popupen till att testa den på en live-webbplats. Varje steg illustreras med en skärmdump från en verklig installation.

💡 Snabb översikt:

• Skapa en popup i Elementor Templates → Popups och publicera den
• I visningsvillkoren väljer du "Entire Site", detta är metodens nyckelpunkt
• I popupens globala inställningar aktiverar du "Disable Page Scroll" och "Prevent Multiple Popups"
• På fliken Advanced anger du väljaren a[href="#your-anchor"] i fältet Open By Selector
• Placera länkar med ankaret #your-anchor över hela din webbplats, popupen öppnas då från var som helst

Steg 1: Skapa en popup i Elementor

Öppna Templates → Popups i sidomenyn i WordPress och klicka på "Add New". Välj en färdig mall från Elementor-biblioteket eller börja med en tom canvas. Ge popupen ett meningsfullt namn, till exempel "Kontaktpopup" eller "Offertformulär", så att du enkelt kan hitta den i listan senare. Designen kan vara vad som helst: ett kontaktformulär, nyhetsbrevsprenumeration, feedbackformulär eller en kampanjbanner.

Bygg innehållet i Elementor-byggaren som en vanlig sida: lägg till en rubrik, ett formulär, text och en stängningsknapp. När du är klar klickar du på Publish.

Efter publicering öppnar Elementor skärmen för villkor, utlösare och ytterligare regler. Här gör vi den enda kritiska inställningen.

Steg 2: Villkor, "Entire Site"

På villkorsskärmen hittar du rullgardinslistan och väljer Entire Site. Detta är det enda villkor du behöver ställa in.

Observera: även om du planerar att visa popupen endast på specifika sidor är "Entire Site" den enklaste vägen. Själva visningen styrs inte av sidvillkoret, utan av förekomsten av ankarlänken #contact i webbadressen. Inget ankare i adressfältet, ingen popup.

Skärmarna för utlösare och ytterligare regler kan hoppas över: klicka på Next och sedan Save & Close. Ankarlänksmetoden fungerar oberoende av dessa inställningar.

Steg 3: Globala popup-inställningar

Klicka på kugghjulsikonen i det nedre vänstra hörnet av popupens redigeringsskärm, panelen Popup Settings öppnas. Gå till fliken Advanced.

Här konfigurerar du beteendet för din uppgift. Vi rekommenderar att du aktiverar:

• Disable Page Scroll, så att bakgrundssidan inte rullar medan popupen är öppen;
• Prevent Multiple Popups, för att förhindra att flera popups överlappar varandra.

Lämna övriga parametrar på sina standardvärden. Huvudsaken är fältet längst ner på fliken, det som allt detta handlar om.

Steg 4: Open by selector, ankarmagi

I fältet Open By Selector anger du en CSS-väljare som "lyssnar" efter ankarlänken. Formatet är strikt:

1
a[href="#contact"]

Istället för #contact byter du ut mot ditt eget ankare: #popup / #callback / #sale eller någon annan unik identifierare. Väljaren reagerar på ett klick på vilket <a>-element som helst vars href-attribut matchar ditt ankare.

Spara popupen. Nu väntar den på att en besökare följer en länk med det obligatoriska ankaret.

Steg 5: Placera ankarlänkar över hela din webbplats

Det enda som återstår är att lägga till länkar från vilka besökaren ska öppna popupen. Alla Elementor-widgets med ett länkfält fungerar: Button, Text Editor, Image, Icon Box.

I länkfältet anger du #contact (eller ditt ankare) istället för en vanlig webbadress. På frontend fungerar detta enligt följande: vid klick lägger webbläsaren till #contact i adressfältet, väljaren a[href="#contact"] utlöses och popupen öppnas.

I praktiken använder vi tre typiska scenarier:

• Knapp i hero-sektionen, "Begär samtal" med href #callback;
• Menyalternativ, i Appearance → Menus lägger du till en anpassad länk med ankaret #contact;
• Textlänk i inläggets brödtext, markera text och ange ankaret i länkpanelen.

Testa det: öppna vilken sida som helst på din webbplats, lägg till #contact i adressfältet och tryck på Enter, popupen bör visas. Om inte, gå tillbaka till steg 4 och kontrollera väljaren.

Video: installation på 3 minuter

Den officiella Elementor-videon visar processen från början till slut, från att skapa popupen till att testa den på en live-webbplats.

⁉️🤔 Vanliga frågor

Fungerar metoden utan Elementor Pro?

Nej. Popup Builder-modulen ingår endast i Elementor Pro. I gratisversionen av byggaren är popups inte tillgängliga. Om du använder gratisversionen, undersök kombinationen Elementor med ett separat popup-plugin (till exempel Popup Maker), men installationen blir annorlunda där, via jQuery-väljare snarare än via standard-Open By Selector.

Är villkoret "Entire Site" obligatoriskt?

Ja, detta är ett centralt krav för metoden. Om du lämnar villkoret som "On Specific Pages" visas popupen endast på valda sidor, och endast när sidan laddas, inte vid ett klick på ankaret. Läget "Entire Site" överlämnar kontrollen till Open By Selector-väljaren.

Kan man skapa flera olika popups med olika ankare?

Ja. Skapa en separat popup för varje ankare. Till exempel en "Kontakter"-popup med väljaren a[href="#contact"] och en "Rea"-popup med a[href="#sale"]. Båda ligger på "Entire Site" och utlöses oberoende av varandra på sitt eget ankare.

Varför öppnas inte popupen via ankare?

Kontrollera tre saker. För det första: #your-anchor måste visas i adressfältet, webbläsaren lägger bara till det vid klick på en <a> med motsvarande href, direkt tangentbordsinmatning kanske inte fungerar. För det andra: fältet Open By Selector måste innehålla exakt a[href="#contact"], utan extra mellanslag och med korrekt typ av citattecken. För det tredje: öppna webbläsarens konsol (F12) och leta efter JavaScript-fel, en konflikt med ett annat plugin kan blockera utlösaren.

Påverkar detta SEO?

Nej. Ankarlänkar med en hash indexeras inte av sökmotorer som separata sidor. För Google är detta ett tekniskt navigationselement, inte duplicerat innehåll.

Vad du ska göra om standardutlösare inte räcker

Ankarlänken via Open By Selector är det mest universella sättet att öppna en Elementor-popup från var som helst på din webbplats. Den är inte beroende av vilken sida besökaren befinner sig på och kräver inte redigering av functions.php.

Om uppgiften blir mer komplex, till exempel att popupen ska öppnas när man scrollar till ett specifikt block eller 10 sekunder efter att man kommit in på webbplatsen, använd standardutlösarna i Elementor: On Scroll, On Page Load, On Exit Intent. De konfigureras på samma skärm där vi valde "Entire Site", och de kombineras perfekt med ankarmetoden.

Prova det på en testsajt: skapa en popup, ange a[href="#test"], placera en knapp med detta ankare på startsidan. Hela processen tar mindre än fem minuter.