Nogle gange ønsker du ikke, at en popup skal indlæses af sig selv. Du vil have den kun til at åbne, når nogen klikker på en knap eller et link. Den Master Addons Popup Builder gør dette med På Klik trigger og en CSS ID-vælger. Du indstiller ID'et på popup'en, tilføjer derefter det samme ID til et hvilket som helst Elementor-element, og ved at klikke på det element åbnes popup'en.
Hvad Er en On-Click Popup i Elementor? #
En popup-vindue med et klik i Elementor er en popup, der forbliver skjult, indtil en besøgende klikker på et bestemt element — en knap, et link, et billede eller et ikon — i stedet for at blive vist alene, når siden indlæses. Den Master Addons Popup Builder bygger en med På Klik trigger: du giver popup en CSS ID-vælger såsom #sale-popup, så tilføj det samme ID (uden at #) til ethvert Elementor-elements CSS ID-felt. Fordi matchen er lavet på ID'et alene, kan en popup udløses fra så mange elementer, som du vil — og den behøver ingen Elementor Pro-licens og ingen brugerdefineret JavaScript, selvom On Click-udløseren kræver Master Addons Pro. On-click popups passer til intentionsdrevet indhold som prisoplysninger, videodemoer, login-formularer og kuponkoder, hvor en automatisk popup ville afbryde i stedet for at hjælpe. Gennemse resten af Master Addons widgets og udvidelser for at se, hvad du ellers kan putte i en.
Før du starter #
Tre ting skal være på plads, før du konfigurerer en popup med et klik: en popup, der allerede er bygget i Master Addons Popup Builder, Elementor installeret og aktiv, og Master Addons for Elementor installeret og aktiv. Hele opsætningen tager derefter to felter og omkring et minut.
- En popup allerede bygget i Master Addons Popup Builder (se popup-indstillingsguide at skabe en)
- Elementor installeret og aktiv
- Master Addons til Elementor installeret og aktiv (installationsvejledning)
Trin 1: Indstil popup til Åbn ved klik #
Åbn din popup i Elementor og gå til MA Popup-indstillinger panel. Under Indstillinger, ændre Åbn Popup til På Klik. Et nyt felt dukker op: Åbn efter vælger.
I det felt skal du skrive et CSS ID med #-tegnet, f.eks #sale-popup. Det er vælgeren, der udløser popup'en. Hold navnet enkelt og unikt, så det er nemt at genbruge.
Trin 2: Tilføj CSS ID til et elementorelement #
Gå nu til den side, hvor du vil have udløseren, og rediger den i Elementor. Vælg et hvilket som helst element, en knap fungerer godt, og åbn dens Advanced fane. Find den CSS ID felt og indtaste samme navn, men uden #-tegnet denne gang, så sale-popup.
Den forskel rejser folk op: popup'ens Open By Selector bruger #sale-popup, mens elementets CSS ID bruger sale-popup. Den # er en del af vælgersyntaksen, ikke en del af id'et.
Trin 3: Forhåndsvisning og klik #
Opdater siden, og forhåndsvisning derefter på frontend. Du vil se din knap (her er det mærket “Klik for at åbne popup”) sidder i layoutet, med ingen popup i syne endnu.
Klik på knappen, og popup-vinduet åbnes med det samme. Den samme udløser virker på så mange elementer, som du vil, bare giv hver enkelt det samme CSS ID.
Fejlfinding #
- Der sker ikke noget ved klik? Sørg for, at id'erne matcher:
#sale-popupi popup'ens Open By Selector, ogsale-popup(ingen #) i elementets CSS ID. - Popup ikke aktiv? Tjek, at popup'en er Aktivering er tændt, og dets visningsforhold inkluderer siden med knappen.
- Brugte # i feltet CSS ID? Fjern det. Elementor CSS ID tager kun det almindelige navn.
Ofte stillede spørgsmål #
Hvordan åbner jeg en Master Addons popup ved klik?
I panelet MA Popup Settings skal du indstille Open Popup to On Click og indtaste et CSS ID som #sale-popup i feltet Open By Selector. Tilføj derefter det samme ID, uden #, til et elements CSS ID-felt i Elementors Advanced-fane.
Hvorfor tilføjer jeg # på ét sted, men ikke det andet?
Feltet Åbn efter vælger forventer en CSS-vælger, og # markerer en ID-vælger. Feltet Elementor CSS ID forventer kun ID-navnet. Så du bruger #sale-popup i popup- og sale-popup-vinduet på elementet.
Kan jeg udløse popup'en fra mere end én knap?
Ja. Giv hver knap eller element det samme CSS ID, så åbner hver enkelt den samme popup ved klik. Du kan blande knapper, links og andre elementer.
Kan jeg åbne en popup fra et tekstlink i stedet for en knap?
Ja. Ethvert element med det matchende CSS-id fungerer, herunder et link, et billede eller et ikon. Tilføj id'et i det elements fane Avanceret, og det bliver en trigger.
Har jeg brug for Elementor Pro til en popup med et klik?
Nej. Master Addons Popup Builder arbejder med den gratis version af Elementor, så On Click trigger og CSS ID-metoden fungerer uden Elementor Pro. On Click-triggeren har selv brug for Master Addons Pro, da det gratis plugin åbner hver popup på sideindlæsning.
