Sådan tilføjes en popup i Elementor gratis (ingen Elementor Pro påkrævet)

Du kan tilføje popups i Elementor uden at betale for Elementor Pro. Gratis Elementor leveres ikke med en popup-bygger, men Pro er ikke den eneste måde at få en. Den gratis Master Addons til Elementor plugin indeholder en fuld Popup Builder, 100 + færdige skabeloner, og fem trigger typer. Det hele sidder i det gratis plugin, med ingen prøve timer og ingen vandmærke.

Du har brug for to ting: gratis Elementor, og den gratis Master Addons plugin fra WordPress bibliotek. Opsætning af en første popup tager omkring ti minutter. Denne vejledning dækker bygning en, vælge, når den fyrer, og plukke, hvilke sider viser det, sammen med de spørgsmål, der kommer op oftest: har Elementor gratis en popup builder, hvad den elementor/popup/show event faktisk gør, og hvordan man åbner en popup fra en knap klik uden at skrive JavaScript.

Har du brug for Elementor Pro til at oprette popups?

Kort svar: nej. Elementor Pros Popup Builder er en betalt funktion, men det er ikke den eneste måde at tilføje popups inde i Elementor.

Her er hvad hver mulighed faktisk giver dig:

Så hvis popups var den eneste grund til, at du kiggede på Elementor Pro, kan du blive på gratis Elementor, installere Master Addons og bygge dem med den samme træk-og-slip editor. Hvis du allerede ejer Pro, kører de to side om side uden at være i konflikt.

Værd at være specifik om ordet “gratis” her. Popup Builder er ikke en prøveversion og ikke en nedskåret version af et betalt modul. Master Addons sælger en Pro-version, men Pro dækker andre ting: ekstra widgets og den fulde Widget Builder. Popups sidder udenfor det.

Hvad Er Master Addons Popup Builder?

Master Addons er et alt-i-en Elementor plugin, der bruges af 30.000 + aktive websteder. Det leveres med 80 + widgets, en Tema Bygherre, et Skabelonbibliotek, en Widget Builder, og en gratis Popup Builder. Popup Builder er ikke et separat køb. Installer plugin'et, og det er der.

Du designer popups visuelt inde i Elementor editor, og derefter styre, når de vises (udløsere), og hvor de vises (visningsbetingelser). Ingen kode, ingen ekstra plugin, ingen Pro licens.

Hvorfor folk vælger Free Master Addons Popup Builder

• Gratis Popup Builder bundtet i plugin. Ingen opgradering nødvendig.
• Samme træk-og-slip designoplevelse, du allerede kender fra Elementor.
• 100 + forudbyggede popup-skabeloner klar til at importere med et enkelt klik.
• Fem triggertyper: Ved klik, sideindlæsning, afslutningshensigt, ved rulning, efter inaktivitet.
• Vis betingelser for ethvert indlæg, side, kategori eller brugerdefineret indlægstype.
• Virker på gratis Elementor, gratis WordPress hosting, og de nyeste Elementor versioner.

Hvilke typer popups kan du bygge?

• Lead generation og e-mail opt-in popups
• WooCommerce-kampagner, salgsbannere og tilbud om opgivelse af indkøbskurve
• Video lightbox popups (YouTube, Vimeo, selv-hosted)
• Billedgalleri lyskasser
• Meddelelsesbarer og topbannere
• Login og tilmeldingsblanket popups
• Cookie samtykke og GDPR meddelelser
• Feedback, NPS og popups til spørgeundersøgelser
• Modale popups for vilkår, prisoplysninger eller produktinfo

De 5 Popup Triggere i Master Addons

1. På Scroll Trigger

Popup'en skyder efter den besøgende ruller en fastsat procentdel af siden. Godt, når du ønsker en indholdsopgradering eller e-mail opt-in til at blive vist, efter at læseren rent faktisk har læst noget, ikke på side indlæsning, når de ikke har besluttet, om de skal blive.

2. Side Indlæs udløser

Popup'en vises efter en forsinkelse, du har indstillet, målt i sekunder. Passer til velkomstbeskeder, tidsbegrænsede tilbud, og alt hvad alle bør se. Hold øje med forsinkelsesværdien. Alt under 2 sekunder har en tendens til at irritere folk på langsomme forbindelser.

3. Afslut hensigt Trigger

Popup'en registrerer, når markøren bevæger sig mod browserfanen eller lukkeknappen og affyrer en endelig meddelelse. Dette er, hvad folk søger efter som “elementor exit intent popup“, og det er i det gratis Master Addons plugin. En advarsel, før du bygger en kampagne omkring det: exit hensigt er en desktop adfærd. En telefon har ingen markør til at spore, så giv mobile besøgende en rulle eller inaktivitet trigger i stedet.

4. På Klik Trigger

Popup'en åbnes kun, når en besøgende klikker på en bestemt knap, et billede eller et link. Det er den nemmeste måde at opbygge en klik-for-åbn modal uden at røre kode, og det er den gratis erstatning for elementor/popup/show JavaScript-begivenhed dækket i næste afsnit.

5. Efter Inaktivitet Trigger

Popup'en engagerer igen en besøgende, der er holdt op med at rulle eller flytte markøren i en bestemt varighed. God til at genvinde opmærksomhed uden at skyde på første visning, hvilket er den hurtigste måde at miste en læser.

Sådan bruger du elementoren/popup/show-begivenheden (og det gratis alternativ)

Elementor Pro afslører en JavaScript-begivenhed kaldet elementor/popup/show. Udviklere bruger det til at udløse en popup fra kode: affyre en popup efter en brugerdefineret formularindsendelse, et AJAX-svar eller en knap, der bor uden for Elementor-editoren.

Grundmønsteret i Elementor Pro ser således ud:

jQuery( document ).on( 'elementor/popup/show', ( event, id, instance ) => {
    // your code runs when popup with this ID is shown
    console.log( 'Popup opened:', id );
} );

// To open a popup programmatically in Elementor Pro:
elementorProFrontend.modules.popup.showPopup( { id: 1234 } );

Hvis du er på gratis Elementor, har du ikke adgang til elementorProFrontend.modules.popup.showPopup. Du behøver det heller ikke til de fleste use cases. Master Addons På Klik trigger håndterer de almindelige indbygget:

• Klik på en knap hvor som helst på siden, popup åbnes. Indstil udløservælgeren til en CSS-klasse eller ID, og ethvert matchende element åbner popup'en.
• Klik på et billede, ikon eller tekstlink, popup åbnes. Den samme vælgerlogik gælder for ethvert element.
• Åbn en popup efter en formularindsendelse. Kombiner formularens omdirigering eller takkehandling med en skjult knap, der har popup-vælgeren.

Selector tilgang løber tør for vej, når beslutningen sker på runtime, som at åbne en popup kun hvis en AJAX opkald kommer tilbage med en bestemt værdi. For det, har dit script klikke på et skjult element, der bærer udløserklassen og lad vælgeren gøre resten.

Hvis du vil lytte efter popup-show-begivenheder fra din egen kode (analyse, brugerdefineret logik), skal du binde til den globale begivenhed, popup-vinduet affyrer, når det åbnes. Det nøjagtige hændelsesnavn er i Master Addons dokumentation for den version, du kører.

Sådan udløses en Elementor Popup på en knap Klik (gratis)

En af de mest almindelige anmodninger, så her er den nøjagtige opsætning:

1. Opret popup i Master Addons, Popup Builder, og design den.
2. I popupens indstillinger skal du skifte udløseren til På Klik.
3. Indtast en CSS-vælger i udløserfeltet, for eksempel .open-signup-popup.
4. Gå til siden eller skabelonen med knappen. Rediger knapwidgetens Avanceret, CSS Klasser felt og tilføj open-signup-popup (ingen prik, kun klassenavnet).
5. Gem begge. Hver knap med den klasse åbner nu popup, hvor som helst på webstedet.

Den samme vælger fungerer på en række, en kolonne, en overskrift, et ikon eller et hvilket som helst element, du kan give en klasse til. Sådan får du adfærd, der er identisk med elementor/popup/show uden at skrive en linje af JavaScript. En ting at se: hvis du bruger en ID-vælger som #open-popup, sørg for, at intet andet element på siden deler ID, ellers klikker på brand fra det forkerte element.

Gratis Elementor Popup skabeloner: 100 + Design klar til at importere

Plugin'et leveres med et popup-skabelonbibliotek, der dækker nyhedsbrev opt-ins, salgsbannere, WooCommerce-kampagner, exit-intent-tilbud, video-lysbokse, cookie-meddelelser og login-formularer. Hver skabelon importeres med et klik og er fuldt redigerbar inde i Elementor. Hvis du hellere vil starte fra et design tæt på dit endelige mål, er dette hurtigere end at bygge fra bunden.

Det fulde bibliotek bor inde i redaktøren og er en del af det bredere Master Addons skabelonbibliotek ved siden af side- og sektionsskabeloner.

Trin-for-trin: Sådan tilføjes en popup i Elementor ved hjælp af Master Addons

Trin 1: Installer og aktiver Master Addons

1. Åbn WordPress Dashboard, Plugins, Tilføj nyt.
2. Søg efter “Master Addons for Elementor”.
3. Klik Installer nu, så Aktiver.
4. En ny Master Addons element vises i WordPress-sidebjælken.

Hvis sidebjælkeelementet ikke vises med det samme, skal du opdatere administratoren (Ctrl+Shift+R / Cmd+Shift+R) hårdt. Nogle caching-plugins hænger på den gamle administratormenu i et minut.

Trin 2: Åbn Popup Builder

1. Gå til Master Addons, Popup Builder.
2. Klik Tilføj Ny Popup.
3. Giv popup'en et beskrivende navn (f.eks Nyhedsbrev, Blogindlæg).
4. Klik Rediger med Elementor.

Trin 3: Vælg en skabelon eller Start fra ridse

1. Klik på ikonet Master Addons Template Library i Elementor-editoren.
2. Gennemse popup-kategorien og forhåndsvisningsdesign.
3. Klik Indsæt på enhver skabelon for at importere den til lærredet.
4. Eller spring biblioteket over og træk widgets over på et tomt lærred.

Trin 4: Design Popup-indholdet

1. Træk i Elementor-widgets: Overskrift, Teksteditor, Knap, Billede, Form.
2. For e-mail-optagelse skal du bruge en formularwidget og forbinde den til din e-mail-tjeneste.
3. Tilføj en nedtællingsur, ikon eller video ved hjælp af enten kerne Elementor eller Master Addons widgets.
4. Juster skrifttyper, farver, udfyldning og afstand i fanerne Stil og Avanceret.
5. Forhåndsvisning på mobil- og tabletvisning for at bekræfte layoutet fungerer stadig.

Trin 5: Konfigurer Popup Trigger

1. Klik på tandhjulsikonet nederst til venstre i editoren for at åbne Indstillinger.
2. Åbn Trigger tab.
3. Vælg en af de fem triggere: På Klik, Sideindlæsning, Afslut hensigt, På rul, Efter inaktivitet.
4. Udfyld de triggerspecifikke indstillinger: rulleprocent, forsink sekunder, klikvælger eller inaktivitetsvarighed.

Trin 6: Indstil visningsbetingelser (hvor popup-vinduet vises)

Visningsforhold bestemmer, hvilke sider der rent faktisk viser popup. De fleste popup-problemer starter her. En popup uden visningsregel vises aldrig overhovedet, så det er den første ting at kontrollere, hvornår det ser fint ud i editoren, men intet vises på frontenden.

1. Åbn Visningsbetingelser faneblad i popup-indstillinger.
2. Vælg en Inkluder regel: Hele webstedet, specifikke sider, specifikke indlæg, kategorier, tags eller en brugerdefineret indlægstype.
3. Tilføj en Udelukke regel for alt, hvad du vil springe over (f.eks. udelukke kassesiden fra en popup på hele webstedet, ellers nager det folk, der allerede har konverteret).
4. Gem betingelserne før udgivelse.

Hvis du vil redigere visningsforhold senere, skal du genåbne popup'en, klikke på tandhjulsikonet, gå til Visningsforhold, ændre reglerne og opdatere. Designet og udløseren forbliver de samme. Kun målretningen ændres.

Trin 7: Udgiv og test

1. Klik Publicere eller Update nederst til venstre i editoren.
2. Åbn den side, der skal vise popup'en i et normalt browservindue (ikke editor-forhåndsvisningen).
3. Udløs popup-vinduet, som du konfigurerede det: Klik på knappen, rul, vent eller bevæg dig mod fanen Luk.
4. Kontroller responsiv adfærd på en rigtig telefon. Editor forhåndsvisningen er tæt, men ikke nøjagtig.
5. Overvåg formularindsendelser og konverteringsrater for den første uge.

Hvorfor en Popup ikke dukker op

Hvis popup'en virker i editoren, men aldrig vises på webstedet, er det næsten altid en af disse fem, i grov rækkefølge af, hvor ofte det viser sig at være årsagen:

1. Der er ikke indstillet nogen visningstilstand. En popup uden include-regel matcher ingen sider, så den gengives aldrig nogen steder. Åbn Visningsbetingelser og tilføj en.
2. Popup'en er stadig et udkast. At gemme designet er ikke det samme som at udgive det. Tjek status nederst til venstre i editoren.
3. En cache betjener den gamle side. Rens caching-plugin'et og CDN'et, og test derefter igen i et privat vindue.
4. Klikvælgeren stemmer ikke overens. For On Click tager udløserfeltet .my-class med prikken, mens knappens CSS Classes-felt tager my-class uden det. At blande de to op tegner sig for de fleste af de rapporter, vi ser.
5. Du tester exit intent på en telefon. Der er ingen markør til at forlade viewport, så intet brande. Test den på en desktop browser.

Master Addons vs. Elementor Pro Popup Builder

Master Addons er ikke den eneste gratis måde at gøre dette på. Standalone popup plugins som Popup Maker har også gratis niveauer, og hvis popups er det eneste, du har brug for, er de værd at kigge. De rapporterer om konverteringer mere detaljeret end nogen Elementor addon gør. Handelen er, at du designer i deres grænseflade i stedet for Elementors, og du kører et plugin, der gør et job. Master Addons giver mere mening, når du vil have popup bygget med samme editor, widgets og stilarter som resten af webstedet.

Vejer du også andre muligheder? Sammenlign topværktøjerne side om side i vores roundup af bedste popup builder plugins til WordPress.

Hvem denne opsætning fungerer bedst for

• Freelancere og webudviklere, der ikke ønsker at købe Pro kun til popups.
• WooCommerce butiksejere kører salg bannere og cart-gendannelse tilbud.
• Bloggere og indholdsskabere, der fanger e-mail-abonnenter.
• Agenturer, der administrerer mange kundewebsteder på stramme budgetter.
• Startups og små virksomheder, der validerer tilbud, før de betaler for premium-værktøjer.

Ofte stillede spørgsmål