Timing en popup ved side procent er fint, indtil du har brug for det til at lande på én præcis stedet. Måske vil du have det den øjeblik nogen når din prissætning blok, en testimonial række, eller en call-to-action band, ikke en vag 40% ned på siden. Den Master Addons Popup Builder håndterer det med På Scroll to Element trigger. Du giver popup'en et CSS ID med en #, så sæt det samme ID, uden at #, på det element, du vil fungere som udløser.
Her er den fulde opsætning i Master Addons Popup Builder, som kommer gratis med Master Addons for Elementor. Hvis en procentbaseret trigger er alt hvad du behøver, er guide til popup-triggerindstillinger dækker den der.
Før du starter #
- En popup allerede bygget i Master Addons Popup Builder (se popup-indstillingsguide at skabe en)
- En side med det element, du vil bruge som rulletrigger
- Elementor installeret og aktiv
- Master Addons til Elementor installeret og aktiv (installationsvejledning)
Trin 1: Indstil popup'en til Åbn ved rulle til element #
Åbn din popup i Elementor og gå til MA Popup-indstillinger panel. Under Indstillinger, skifte Åbn Popup til På Scroll to Element. Et nyt felt dukker op: Elementvælger.
Tipet under feltet præciserer, hvad det vil have, en CSS-vælger for det element, der udløser popup'en ved rulle, f.eks #my-id eller .my-class.
Trin 2: Indtast en CSS ID Selector (med #-tegnet) #
I Elementvælger felt, skriv et CSS ID, der starter med #. Her er det #show-popup. Hold navnet kort og unikt, så du kan genbruge det på siden uden at støde ind i noget andet.
The # er at gøre rigtigt arbejde: det fortæller popup'en at holde øje med et element, hvis ID er show-popup. Udgiv (eller opdater) popup'en for at gemme den.
Trin 3: Tilføj det samme id til dit målemærke (uden #-tegnet) #
Åbn nu siden, hvor popup-vinduet skal skyde, og rediger det i Elementor. Klik på det element, du vil have som udløser, her er det sektionsblokken på siden, og åbn dens Advanced tab.
Find the CSS ID felt i fanen Avanceret, og skriv det samme navn, som du brugte i pop op-vinduet, men uden den #, så bare show-popup. At en lille forskel er hele tricket:
- Popup Element Selector:
#show-popup(med hashen) - Elementets CSS ID:
show-popup(ingen hash)
The # er en del af CSS-vælgeren, ikke en del af ID'et, hvorfor det hører hjemme i popup-feltet, men aldrig i elementets CSS ID-felt. Opdater siden for at gemme. En ting at se: genbrug ikke et ID, der allerede er tilsluttet et ankerlink eller brugerdefineret CSS andetsteds, ellers får du overraskelser.
Trin 4: Forhåndsvisning og rul til elementet #
Åbn siden på forenden og begynd at rulle. Intet øverst. Det andet elementet, der bærer show-popup ID ruller til syne, popup'en åbnes over siden.
Vil du have flere rullepunkter til at udløse den samme popup? Giv hvert element det samme CSS ID, show-popup, og enhver af dem vil sætte det i gang.
Fejlfinding #
- Popup åbner aldrig? Tjek hashen. Popup'ens Element Selector har brug for
#show-popup, og elementets CSS ID-behovshow-popupuden hash. - Brugte # i feltet CSS ID? Tag det ud. Feltet Elementor CSS ID ønsker kun det almindelige navn.
- To elementer med samme ID, der virker? Det er fint til at udløse, men genbrug ikke et ID, der allerede håndterer CSS eller ankerlinks på siden.
- Popup vises slet ikke? Sørg for, at popup-vinduets aktivering er slået til, og at dets visningsbetingelser omfatter siden med udløserelementet.
Ofte stillede spørgsmål #
Hvordan åbner jeg en popup, når jeg ruller til et bestemt element i Elementor?
Indstil popup-vinduets Åbn popup-indstilling til På rul til element, og indtast et CSS-id som #show-popup i feltet Elementvælger. Tilføj derefter det samme id, uden #, til målemelementets CSS ID-felt i Elementors Avancerede fane.
Hvorfor tilføjer jeg # i popup'en, men ikke på elementet?
Feltet Elementvælger forventer en CSS-vælger, og # markerer en ID-vælger. Feltet Elementor CSS ID forventer kun ID-navnet. Så du bruger #show-popup i popup og show-popup på elementet.
Kan jeg udløse popup'en fra mere end ét element?
Ja. Giv hvert element det samme CSS ID, og popup-vinduet udløses, når den besøgende ruller til nogen af dem. Dette er praktisk, når du har flere sektioner, der alle skal udløse det samme tilbud.
Hvad er forskellen mellem On Scroll og On Scroll to Element?
På Scroll brande efter en besøgende ruller en indstillet procentdel af siden. På Scroll to Element brande, når en bestemt element kommer til syne, hvilket er mere præcist, når du vil have popup bundet til en nøjagtig sektion.
Har jeg brug for Elementor Pro til dette?
Nej. Master Addons Popup Builder arbejder med den gratis version af Elementor, så On Scroll to Element-triggeren og CSS ID-metoden fungerer uden Elementor Pro.
