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

Gratis Elementor inkluderer ikke en popup-bygger. Popup Builder er en Elementor Pro funktion. For at få popups uden at betale for Pro, skal du installere den gratis Master Addons Popup Builder, designe popup inde i den normale Elementor editor, indstille den til at åbne på side belastning, og offentliggøre. Den sti er gratis, det virker på den gratis version af Elementor, og det tager omkring fem minutter.

Denne vejledning går det hele, med skærmbilleder taget på Elementor 4.2.4 og Master Addons 3.2. Det dækker også de dele, de fleste tutorials springer over: hvilke triggere er faktisk gratis, hvordan man holder en popup fra hver side, når sidemålretning er en Pro-funktion, og JavaScript API, der erstatter elementorProFrontend.modules.popup.showPopup når du ikke har Pro.

Har Elementor free en popup-bygger?

Nej. Elementors egen popup-bygger leveres kun med Elementor Pro. Installer gratis Elementor, og der er ingen Popups-vare nogen steder i menuen, og den elementor/popup/show event findes ikke på siden.

Du har tre udveje:

Master Addons er den mulighed, der er dækket her, fordi popup er bygget i det samme Elementor lærred, du allerede bruger, så der er ingen anden editor at lære. Det er et gratis plugin på WordPress.org, der kører på 30.000+ websteder, og Popup Builder kommer med den gratis download.

Hvis du hellere vil sammenligne flere værktøjer først, holder vi en separat opsummering af bedste popup builder plugins til WordPress.

Hvad den gratis popup builder faktisk giver dig

Opdelingen nedenfor blev kontrolleret kontrol ved kontrol i plugin, så du kan se, hvor den gratis version stopper, før du begynder at bygge.

Så den gratis version giver dig en rigtig popup med ægte designkontrol. Hvad det ikke giver dig, er triggervariation og side-niveau målretning. Begge disse har løsninger, og begge er dækket nedenfor.

Sådan tilføjes en popup i Elementor gratis, trin for trin

Trin 1: Installer Elementor og Master Addons

Fra WordPress dashboard gå til Plugins → Tilføj plugin, søge efter Elementor, installere og aktivere det. Derefter søge efter Master Addons til Elementor og gør det samme. Elementor Pro er ikke nødvendig på noget tidspunkt.

Hent Elementor Pro linket i det skærmbillede er giveaway, at dette er den gratis build. Alt nedenfor blev gjort på præcis den opsætning. Fuld installere noter live i installationsdokumenter.

Trin 2: Åbn Master Addons → Popup Builder

Aktivering af plugin tilføjer en Master Addons element til WordPress sidebar. Åbn det og klik Popup Builder.

Denne liste er mere nyttig end den ser ud. Hver række viser popup'ens visningstilstand, uanset om den er Aktiv eller Inaktiv, og den kortkode, du kan bruge til at slippe den på en enkelt side. Hav den kortkodekolonne i tankerne, den løser problemet med gratis sidemålretning senere.

Trin 3: Navngiv popup'en og skift Aktivering til

Klik Tilføj Ny Popup. Der åbnes en lille dialog med to felter.

Giv det et navn, du vil genkende om seks måneder, og vend derefter Aktivering på. En popup venstre inaktiv aldrig gengiver på forenden, selvom du udgiver det, og selvom du placerer det ved shortcode. Dette er den enkelte mest almindelige grund en færdig popup viser intet.

Trin 4: Indstil hvor popup vises

Skift til Betingelser faneblad i samme dialog.

På den gratis version får du én regel: Inkluder → Hele webstedet. De andre regler (Forside, Ental, Arkiv, Søg, 404), typen Udeluk og knappen Tilføj betingelse er Pro. Hvis du kun vil have popup'en på én side, og du forbliver fri, skal du springe videre til shortcode-metode.

Klik nu Rediger med Elementor.

Trin 5: Start fra en skabelon eller et tomt lærred

Editoren åbnes med en tom popup- ramme. I drop- området er der en lilla Master Addons knap ved siden af Elementors egne tilføjelses knapper. Klik på den for at åbne popup skabelon biblioteket.

Der er 25 popup designs derinde, alle tilgængelige på det gratis plugin, der dækker salg, produktlanceringer, sæsonbestemte tilbud, kommer snart og om sider. Hold et kort og klik Indsæt for at importere det. Alt importeres som normale Elementor elementer, så du kan omskrive teksten og bytte farverne med det samme.

Den samme biblioteksidé kører på tværs af plugin'et. Hvis du også vil have færdige sider og sektioner, er det Master Addons skabelon bibliotek.

Trin 6: Design popup

Foretrækker du at bygge din egen? Træk widgets på lærredet, som du ville gøre på enhver side. Overskrift, Teksteditor og Knap dækker en typisk opt-in.

Et par ting, der er værd at gøre her:

• Hold kopien til ét løfte. En overskrift, én linje med supporttekst, én knap.
• Kontroller tablet- og mobilvisningerne med enhedsikonerne øverst. En 640px popup er fin på en bærbar computer og trang på en telefon.
• For e-mail-optagelse, slip i en formular widget fra hvilken form plugin du allerede kører. Kontakt Form 7 og MC4WP begge arbejder inde i popup.
• Alle 80+ Master Addons widgets er tilgængelige inde i popup også, så nedtællingstimer og prissætningstabeller fungerer på samme måde som på en side.

Trin 7: Vælg udløseren

Klik MA Popup-indstillinger i den øverste værktøjslinje. Det er det fjerde ikon fra venstre, det der ligner et dokument med et gear. Ældre tutorials peger på et gear i nederste venstre hjørne, som er hvor det boede før Elementor 4.

Syv triggere er angivet. På side Indlæs er den frie, og Forsinkelse efter sideindlæsning (sek.) accepterer alt fra 0 til 60 i trin på 0,1. To til tre sekunder er et fornuftigt udgangspunkt. Affyring øjeblikkeligt irriterer folk på langsomme forbindelser, og alt over ti sekunder normalt savner den besøgende helt.

Under den, Vis igen forsinkelse styrer, hvor længe du skal vente, før du viser popup igen til en person, der lukkede den. Gratis giver dig Ingen forsinkelse, 1, 3 og 5 minutter. Pro udvider det til timer, dage, en måned og Vis ikke igen.

Deaktiver siderul er gratis og er som standard til Ja, som låser siden bag popup'en.

Trin 8: Indstil layout, position og animation

Åbn Layout sektion i samme panel. Det hele er gratis.

Vis som skifter pop op-vinduet mellem tre figurer:

• Popup Modal: den centrerede boks de fleste mennesker mener med popup.
• Notification Bar: en strimmel fastgjort til toppen af siden, god til meddelelser og forsendelsestilbud.
• Fuld skærm: overtager udsigtshavnen, bedst for et enkelt stærkt tilbud.

Modale layouts får derefter ni positioner, fra Center Center til Nederst til højre, og omkring 70 indgangsanimationer. Fade In på 400ms er den sikre standard. Den popup-indstillinger reference viser hvert kontrolelement, hvis du vil have det fulde kort.

Trin 9: Offentliggør og test det på frontenden

Hit Publicere, så åbne dit websted i et privat vindue. Her er popup fyring to sekunder efter side belastning, på gratis Elementor med kun den gratis Master Addons plugin aktiv.

Test i et privat vindue snarere end editor preview. Editoren undertrykker bevidst popups, og en normal browser fane kan være betjener dig en cachelagret side.

Vis kun en popup på én side, gratis

Visningsforhold på sideniveau er Pro. Kortkoden er gratis, og den når samme resultat fra den anden retning.

Hver popup på Popup Builder-listen bærer en kortkode som . Indsæt det i en side, et indlæg, et widgetområde eller en Shortcode-widget i Elementor, og den popup-indlæsninger på den side alene. Placering af det på denne måde springer visningsforholdene helt over.

To regler at vide:

• Popup'en skal udgives og dens Aktivering toggle skal være tændt. En inaktiv popup gengiver intet, shortcode eller ej.
• Shortcoden udsender ingen synlig markup, hvor du indsætter den. Popup'en udskrives i sidefoden og åbnes i henhold til dens trigger.

Så en gratis, sidespecifik popup ser sådan ud: Forlad betingelsen på hele webstedet og slip kortkoden på den ene side, der skal have den.

De syv popup-triggere, og hvilke du får fri

Exit Intent er kun desktop-kun af natur. Telefoner har ingen markør til at forlade vinduet, så der er intet for udløseren at opdage. Test det på en desktop browser, før du arkiverer en fejl.

Den gratis On Page Load trigger har sin egen opsætning doc hvis du vil have den korte version.

Sådan udløses en Elementor popup på en knap klik

Dette er den mest efterspurgte trigger efter sideindlæsning, og det er den, folk oftest forsøger at forfalske med JavaScript. Med Master Addons Pro er det et tekstfelt.

1. Design og gem popup'en som normalt.
2. In MA Popup-indstillinger, sæt Åbn Popup til På Klik.
3. In Åbn efter vælger, skriv vælgeren inklusive prikken, for eksempel .open-newsletter-popup.
4. Rediger knappen, der skal åbne den. Gå til Avanceret → CSS Klasser og type open-newsletter-popup, denne gang uden prikken.
5. Opdater begge, og test derefter på frontenden.

Punktmismatchet i trin 3 og 4 forårsager de fleste af “min klikudløser gør intet” rapporter, vi ser. Udløserfeltet tager en CSS-vælger, Elementor-feltet tager et klassenavn.

Vælgeren er ikke begrænset til knapper. Ethvert element, du kan give en klasse til værker: en beholder, en overskrift, et ikon, et billede. Du kan også målrette et eksisterende link med en attributvælger som f.eks a[href="#pricing-popup"]. Der er en relateret Popup Trigger widget til at placere tætte og omdirigere handlinger inde i selve popup'en.

Uden Pro gør fire linjer JavaScript det samme job. Den kode er i næste afsnit.

Elementor/popup/show-begivenheden, og hvad der erstatter den uden Pro

elementorProFrontend.modules.popup.showPopup og the elementor/popup/show event tilhører begge Elementor Pro. Popup modulet registrerer sig på elementorProFrontend objekt, så på en gratis installere det objekt er udefineret, og begivenheden aldrig brande. Ingen snippet bringer det tilbage, fordi den kode, der ville udsende det er i Pro plugin.

Det gratis Master Addons plugin sender sin egen API, der dækker samme grund.

Master Addons afslører en global kaldet JltmaPopups på enhver side, hvor en popup er til stede. Her er kortlægningen:

Hver popup udskrives med DOM-id'et jltma-popup-id-<post ID>. Post-id'et er nummeret i shortcoden på Popup Builder listeskærmen. For at åbne popup 441 fra din egen kode:

jQuery(function ($) {
  var $popup   = $('#jltma-popup-id-441');
  var settings = JltmaPopups.getLocalStorage(441);

  JltmaPopups.openPopup($popup, settings);
});

Sådan tilsluttes det til et klik, som er den gratis stand-in til On Click-udløseren:

jQuery(function ($) {
  $(document).on('click', '.open-newsletter-popup', function (e) {
    e.preventDefault();

    var $popup   = $('#jltma-popup-id-441');
    var settings = JltmaPopups.getLocalStorage(441);

    JltmaPopups.openPopup($popup, settings);
  });
});

Og for at lukke den igen:

JltmaPopups.closePopup(jQuery('#jltma-popup-id-441'));

Tre ting at se:

• getLocalStorage() returnerer false indtil popup'en er initialiseret på siden, hvilket sker på DOM klar. Kør din kode indenfor jQuery(function ($) { ... }) og du har det fint.
• Popup'en skal være på siden for at noget af dette virker. Enten inkluderer dens tilstand siden, eller også placerede du den med kortkoden.
• Scriptet springes over inde i Elementor-editoren med vilje, så test på frontenden.

Hvorfor elementor/popup/show fyrer to gange

På Elementor Pro betyder føreren, der kører to gange, næsten altid, at den blev bundet to gange: én gang tændt elementor/frontend/init og igen i et uddrag eller en temafil, eller én gang pr. popup-instans, når flere er til stede. Bevogt det med et flag, eller bind med .off('elementor/popup/show').on(...) før genbinding. Elementors egen popup events dokumentation viser den fulde begivenhedssignatur.

Master Addons-ækvivalenten har ingen dokumenthændelse at dobbeltbinde, så problemet overføres ikke. Du ringer openPopup() direkte i øjeblikket vil du have popup'en åben.

Hvorfor din Elementor popup ikke vises

I grov rækkefølge af, hvor ofte hver enkelt viser sig at være årsagen:

1. Aktiveringen er slukket. Åbn Master Addons → Popup Builder og tjek kolonnen Status. Inaktiv betyder intet gengiver overalt, kortkode inkluderet.
2. Popup'en er stadig et udkast. At gemme designet i Elementor er ikke det samme som at udgive popup'en.
3. Du tester i editor-forhåndsvisningen. Popups undertrykkes der ved design. Brug et privat vindue.
4. Cache. Rens caching- plugin' et og CDN' et, og genindlæs derefter i et privat vindue. En cachelagret HTML- side vil ikke indeholde en nyudgivet popup.
5. Vis igen Forsinkelse er allerede fyret. Når du lukker popup'en, gemmer plugin'et et tidsstempel i browserlagring. Ryd webstedsdata eller skift browsere, når du tester gentagne gange.
6. Punktmismatch på en klikvælger. Udløserfeltet ønsker .my-class, feltet Elementor CSS Classes ønsker my-class.
7. Afslut hensigten på en telefon. Der er ingen markør, så intet udløses. Kun desktop.

Master Addons vs Elementor Pro popups

Hvis popups er den eneste Pro-funktion, du ønsker, dækker den gratis Master Addons-bygger plus en shortcode det. Hvis du vil have exit-hensigt eller klikke på triggere uden at skrive JavaScript, skal du sammenligne Master Addons prissætning mod en Elementor Pro-fornyelse, da Master Addons-licensen også bringer Tema Bygherre og Widget Builder med det.

Ofte stillede spørgsmål

Relateret læsning

• Master Addons Popup Builder, funktionssiden med hver indstilling, der er anført
• Bedste popup builder plugins til WordPress, hvis du vil sammenligne værktøjer
• Popup-indstillinger og -indstillinger, den fulde kontrolreference
• Master Addons på WordPress.org, download og support forum