Skip to content

Alt om WordPress, webutvikling — og mer til

🛠 Slik åpner du en Elementor-popup via ankerlenke fra hvilken som helst side på nettstedet ditt

🛠 Slik åpner du en Elementor-popup via ankerlenke fra hvilken som helst side på nettstedet ditt

Du trenger en knapp hvor som helst på nettstedet for å åpne en Elementor popup, men standardutløseren «ved klikk» fungerer bare innenfor én enkelt side? Denne oppgaven kan løses på fem minutter uten tredjeparts plugins og uten kodeendringer.

Den innebygde mekanismen i Elementor Pro, en ankerlenke kombinert med CSS-selektoren Open By Selector. Når du har konfigurert den, får du en popup som åpnes fra hvilken som helst side på nettstedet: fra et menyelement, en tekstlenke eller en knapp i bunnteksten. Nedenfor følger en trinnvis veiledning fra å opprette popupen til å teste den på et live-nettsted. Hvert trinn er illustrert med et skjermbilde fra et reelt oppsett.

💡 Rask oversikt:

  • Opprett en popup i Elementor Templates → Popups og publiser den
  • I visningsbetingelsene velger du «Entire Site», dette er nøkkelpunktet i metoden
  • I popupens globale innstillinger aktiverer du «Disable Page Scroll» og «Prevent Multiple Popups»
  • I Avansert-fanen skriver du inn selektoren a[href="#your-anchor"] i feltet Open By Selector
  • Plasser lenker med ankeret #your-anchor rundt om på nettstedet, popupen vil åpnes fra hvor som helst

Trinn 1: Opprett en popup i Elementor

Elementor popup med kontaktskjema

Åpne Templates → Popups i sidemenyen i WordPress og klikk «Add New». Velg en ferdig mal fra Elementor-biblioteket eller start med et tomt lerret. Gi popupen et meningsfylt navn, for eksempel «Kontaktpopup» eller «Forespørselsskjema», slik at du enkelt finner den igjen i listen senere. Designet kan være hva som helst: et kontaktskjema, nyhetsbrev-påmelding, tilbakemeldingsskjema eller en kampanjebanner.

Sett sammen innholdet i Elementor-byggeren som en vanlig side: legg til en overskrift, et skjema, tekst og en lukkeknapp. Når du er klar, klikker du Publish.

Etter publisering åpner Elementor skjermbildet for betingelser, utløsere og tilleggsregler. Her gjør vi den eneste kritiske innstillingen.

Trinn 2: Betingelse, «Entire Site»

Popup-visningsbetingelse for hele nettstedet i Elementor

På betingelsesskjermen finner du nedtrekkslisten og velger Entire Site. Dette er den eneste betingelsen du trenger å angi.

Merk: selv om du planlegger å vise popupen bare på bestemte sider, er det å velge «Entire Site» den enkleste veien. Selve visningen styres ikke av sidebetingelsen, men av tilstedeværelsen av ankerlenken #contact i URL-en. Intet anker i adressefeltet, ingen popup.

Skjermbildene for utløsere og tilleggsregler kan hoppes over: klikk Next, deretter Save & Close. Ankerlenkemetoden fungerer uavhengig av disse innstillingene.

Trinn 3: Globale popup-innstillinger

Globale popup-innstillinger i Elementor

Klikk på tannhjulikonet nederst i venstre hjørne av popup-redigeringsskjermen, så åpnes panelet Popup Settings. Gå til fanen Advanced.

Avansert-fane i Elementor popup-innstillinger

Her konfigurerer du atferden for oppgaven din. Vi anbefaler å aktivere:

  • Disable Page Scroll, slik at bakgrunnssiden ikke ruller mens popupen er åpen;
  • Prevent Multiple Popups, for å hindre at flere popuper overlapper hverandre.

La de andre parameterne stå på standardinnstillingene. Hovedsaken er feltet helt nederst i fanen, som alt dette ble startet for.

Trinn 4: Open by selector, ankermagi

Åpne via selektor-felt med ankerlenke CSS-selektor

I feltet Open By Selector skriver du inn en CSS-selektor som «lytter» etter ankerlenken. Formatet er strengt:

1a[href="#contact"]

I stedet for #contact setter du inn ditt eget anker: #popup / #callback / #sale eller en annen unik identifikator. Selektoren reagerer på et klikk på ethvert <a>-element hvis href-attributt er lik ditt anker.

Lagre popupen. Nå venter den på at en besøkende følger en lenke med det nødvendige ankeret.

Trinn 5: Plasser ankerlenker rundt om på nettstedet

Det eneste som gjenstår er å legge til lenker der den besøkende skal åpne popupen fra. Enhver Elementor-widget med et lenkefelt fungerer: Button, Text Editor, Image, Icon Box.

I lenkefeltet skriver du inn #contact (eller ditt anker) i stedet for en vanlig URL. På frontenden fungerer dette slik: ved klikk legger nettleseren til #contact i adressefeltet, selektoren a[href="#contact"] utløses, og popupen åpnes.

I praksis bruker vi tre typiske scenarioer:

  • Knapp i helteseksjonen, «Be om en samtale» med href #callback;
  • Menyelement, i Appearance → Menus legger du til en egendefinert lenke med ankeret #contact;
  • Tekstlenke i innleggets brødtekst, merk tekst og skriv inn ankeret i lenkepanelet.

Test det: åpne en hvilken som helst side på nettstedet, legg til #contact i adressefeltet og trykk Enter, popupen skal vises. Hvis ikke, gå tilbake til trinn 4 og sjekk selektoren.

Video: oppsett på 3 minutter

Den offisielle Elementor-videoen viser prosessen fra start til slutt, fra å opprette popupen til å teste den på et live-nettsted.

⁉️🤔 Ofte stilte spørsmål

Fungerer metoden uten Elementor Pro?

Nei. Popup Builder-modulen er bare inkludert i Elementor Pro. I gratisversjonen av byggeren er popuper utilgjengelige. Hvis du bruker gratisversjonen, kan du se på kombinasjonen av Elementor med en separat popup-plugin (for eksempel Popup Maker), men oppsettet vil være annerledes der, gjennom jQuery-selektorer i stedet for standard Open By Selector.

Er betingelsen «Entire Site» obligatorisk?

Ja, dette er et nøkkelkrav i metoden. Hvis du lar betingelsen stå som «On Specific Pages», vil popupen bare vises på utvalgte sider, og bare når siden lastes, ikke ved et klikk på ankeret. «Entire Site»-modus gir kontrollen over til Open By Selector-selektoren.

Kan du opprette flere forskjellige popuper med forskjellige ankere?

Ja. Opprett en separat popup for hvert anker. For eksempel en «Kontakter»-popup med selektor a[href="#contact"] og en «Salg»-popup med a[href="#sale"]. Begge ligger på «Entire Site» og utløses uavhengig av hverandre på sitt eget anker.

Hvorfor åpnes ikke popupen med anker?

Sjekk tre ting. For det første: #your-anchor må vises i adressefeltet, nettleseren legger det bare til når du klikker på en <a> med tilsvarende href, direkte tastaturinntasting fungerer kanskje ikke. For det andre: Open By Selector-feltet må inneholde nøyaktig a[href="#contact"], uten ekstra mellomrom og med riktig anførselstegntype. For det tredje: åpne nettleserkonsollen (F12) og se etter JavaScript-feil, en konflikt med en annen plugin kan blokkere utløseren.

Påvirker dette SEO?

Nei. Ankerlenker med en hash indekseres ikke av søkemotorer som separate sider. For Google er dette et teknisk navigasjonselement, ikke duplisert innhold.

Hva du gjør hvis standardutløsere ikke er nok

Ankerlenken gjennom Open By Selector er den mest universelle måten å åpne en Elementor-popup fra hvor som helst på nettstedet. Den avhenger ikke av hvilken side den besøkende er på og krever ikke redigering av functions.php.

Hvis oppgaven blir mer kompleks, for eksempel at popupen skal åpnes når man ruller til en bestemt blokk eller 10 sekunder etter at man har kommet inn på nettstedet, bruker du standardutløserne i Elementor: On Scroll, On Page Load, On Exit Intent. De konfigureres på samme skjerm der vi valgte «Entire Site», og de kombineres perfekt med ankermetoden.

Prøv det på et testnettsted: opprett en popup, skriv inn a[href="#test"], plasser en knapp med dette ankeret på hjemmesiden. Hele prosessen tar mindre enn fem minutter.