De første popups blev oprettet ud fra det scenarie, Ethan Zukerman forestillede sig forovernatning af hans webside på Tripod i begyndelsen af ​​90'erne. Hans brugere klagede over antallet af annoncer, han placerede på webstedet, så han besluttede at placere bannerne på en separat side, der åbnede, når en bruger fik adgang til siden.

Dette lille stykke kode var stadig ikke en rigtig popup, som du ser på hvert websted lige nu, men det var her det hele startede. På moderne websider bruges pop op-vinduer til forskellige formål, ikke kun til reklamer. Kontaktformularer, advarsler om fortrolighedspolitik og forslag til abonnement præsenteres ofte som pop op-vinduer.

Der er to ting, der irriterer brugere, når det kommer til popups: når de springer på dig, når du ikke ønsker dem; og når dens udseende adskiller sig helt fra stilen på webstedet. Disse to problemer vises, når du bruger plugins, der ikke ser ud til at være af højeste kvalitet.

Det største problem med de fleste plugins, som nybegynderudviklere bruger til oprette pop-ups er manglen på kontrol over det resulterende budskab. Du kan dog undgå alle disse problemer, hvis du bruger Elementor til at oprette et websted.

To fantastiske plugins, skabt specielt til Elementor Side Builder, hjælpe dig med at oprette popups af enhver type, form og stil, du har brug for – Elementor Popup Builder et JetPopup. Da de begge er lavet af det samme kød som Elementor var, er det eneste spørgsmål at stille, hvilke af disse plugins der skal vælges. For at hjælpe dig med at træffe denne beslutning vil jeg foretage en grundig gennemgang af begge dele, og du kan sammenligne deres fordele og ulemper. Så lad os gå !

Download og installation

Dette er ikke det vigtigste kriterium, når du vælger, hvilket plugin der skal bruges, men for at prøve det skal du først få det. Derfor begynder jeg lige fra starten og skitserer processen for at få det - prissætningen, den involverede indsats og letheden i installationsprocessen.

Popup Builder

Elementor

Dette plugin blev oprettet af Elementor-teamet. Vi kunne derfor kalde ham hans rigtige "barn". Dette er den sidste opdatering til Elementor, der blev udgivet i januar 2019 for at imødekomme kundernes behov. Det er dog ikke tilgængeligt for brugere af den gratis version af Elementor.

Popup Builder er inkluderet i den professionelle abonnementsplan. Så for at have evnen til at oprette pop op-vinduer skal du først have Elementor Pro. Den enkleste prisplan, der giver dig mulighed for at bruge alle Elementors forskellige funktioner til et enkelt websted koster $ 49 om året. Så fra de første trin (køb af Elementor Pro) er her algoritmen til opnåelse af Popup Builder:

  • Køb Pro Elementor Side Builder.
  • Gå til din personlige konto og download plugin.
  • Gå til dit websteds dashboard, Plugins> Tilføj nyt, klik på knappen "Upload plugin" og vælg den relevante .zip-fil.
  • Når installationen er afsluttet, skal du aktivere pluginet med din licensnøgle.
  • Her er Popup Builder, der findes i Skabeloner> Fanen Popups.

Det er lidt af en lang vej, men med Popup Builder får du også en enorm samling af forskellige elementer fra Elementor, såsom widgets, skabeloner og andre ekstra værktøjer.

Popup Builder

JetPopup

"Familien" af Jet-plugins har allerede mere end 10-artikler, og JetPopup er en af ​​dem. Det er omhyggeligt oprettet specielt til Elementor og øger antallet af tilgængelige værktøjer. Dette plugin er tJetPopupsFuldt kompatibel med gratis og betalte versioner. Så du behøver ikke foretage yderligere køb. JetPopup koster $ 15, og når du først får det, kan du bruge det til kun et websted. Hvis du har brug for det til mere end et projekt, kan du købe pluginet under udviklerlicensen (det koster dig $ 45) og bruge det til fem websteder. Algoritmen til at få pluginet er lidt enklere:

  • Køb plugin på TemplateMonster Marketplace. Det bliver downloadet til din computer.
  • Gå til dit websteds dashboard, Plugins> Tilføj nyt, klik på knappen "Upload plugin" og vælg den relevante .zip-fil.
  • Når installationen er afsluttet, skal du aktivere pluginet.
  • Voila! Når du åbner menuen Elementor-tilpasning (ved at klikke på knappen "Rediger med elementor"), finder du JetPopup-sektionen i widgetens venstre menu.

JetPopup

Oprettelse af pop-up

Når værktøjerne er der og er klar, kan jeg prøve at oprette en popup med begge plugins og se, hvor enkel og forståelig funktionen er. Dernæst opretter jeg en grundlæggende pop-up og kigger på tilpasningsmulighederne for Popup Builder og JetPopup.

Popup Builder

I Pro Elementor pop op-vinduer udføres separat fra websidesider. For at ændre webstedets udseende skal du åbne den side, du vil tilpasse, klikke på knappen "Rediger med Elementor" og foretage ændringer. Men for at oprette (og derefter redigere) popups skal du gå til Skabeloner> Popups og trykke på knappen "Tilføj ny popup".

Popup Builder
Prøv Popup Builder nu

I det åbne vindue skal du vælge den skabelon, du vil oprette (ja, du kan oprette skabeloner ikke kun til pop-ups, men også til sider og andre emner) og give det et navn.

oprettelse af popup

Efter at have trykket på knappen "Opret skabelon" vil du blive omdirigeret til Elementor-personaliseringsmenuen. Det er lettere at tilpasse en eksisterende vare ved at opbygge den fra bunden. Du bliver derfor først bedt om at vælge en passende model.

popup-bibliotek

Jeg valgte en af ​​de modeller, der vises øverst på biblioteklisten. Lige efter valget lander du på Elementor-arbejdsområdet, som du sandsynligvis er vant til. Tilpasningsmuligheder er placeret i sidepanelet til venstre på skærmen. Du har tre faner her.

Fanen "Indstillinger" giver dig mulighed for at ændre layout af popup, ændre navnet på modellen og få vist preview. På fanen "Stil" kan du tilpasse designet - ændre farver, skrifttyper, billeder og rammer. Fanen "Avanceret" har også et sæt yderligere skyder. for eksempel forhindrer de, at popup'en lukkes med ESC-nøglen.

popup-indstillinger

Som du kan se - intet uventet, hvis du har brugt Elementor før, vil du ikke støde på problemer med dette plugin. Her er en detaljeret video, der forklarer, hvordan du opretter et pop op-vindue ved hjælp af Popup Builder:

JetPopup

Dette plugin tilføjer også en ny fane til dit betjeningspanel WordPress tema og med dens hjælp oprettes popups også separat fra sider. Out-of-the-box popups er også gemt i en fane med navnet "Popup library." For at oprette en ny popup kan du enten trykke på knappen "Tilføj" på den foruddefinerede skabelon eller gå til JetPopup > Tilføj ny popup, give skabelonen et navn og trykke på "Rediger med Elementor."

tilføj ny popup

Arbejdsfeltet er lidt anderledes end normen, fordi du nu opretter et mindre vindue. I menuen til venstre kan du tilføje enhver type element til din popup.

popup-elementer

JetPopup-pluginet tilføjer et enkelt element til widgetmenuen - kontekstuel handlingsknap. Dette giver dig mulighed for at definere den type handling, der skal opstå, når brugeren trykker på knappen.

popup-handlingsknap

rediger popup-handlingsknap

Det er ikke rigtig indlysende at åbne indstillingerne fra pop op-vinduet. Du skal klikke på vedligeholdelsesknappen nederst i menuen. Indstillingsmenuen er meget lig den i Popup Builder, men der er kun to tilpasningsfaner. “Generelle indstillinger” giver dig mulighed for at definere en animationseffekt, omdøbe modellen eller definere betingelserne. På fanen "Stil" kan du ændre layout, farver, billeder, skrifttyper og kanter.

popup-generelle indstillinger

JetPopup har en lidt mindre indlysende funktionalitet, men kompenserer med detaljerede og nyttige videotutorials.

triggere

For at være nyttige og ikke for at irritere besøgende, skal popups vises på det rigtige tidspunkt. Betingelserne, under hvilke popup vises, kaldes "triggere". Jo mere detaljerede betingelser der er tilgængelige, desto mere fleksibel er popup-pluginet. Præcision er meget vigtig, hvis du ikke ønsker, at din bruger skal forlade webstedet, efter at pop op-vinduet til abonnementsformularen vises.

Popup Builder

popup-builder redigering

offentliggøre popup

Dette plugin hjælper dig med at definere de nødvendige betingelser lige efter tilpasning af pop-up-vinduet. Når du trykker på knappen "Publicer", kan du se det vindue, hvor du kan definere betingelser (på hvilke sider denne popup vises), udløser (når pop-up-vinduet vises) og avancerede regler.

Popup Builder har seks udløsere, såsom visning på en rulle og klik, og syv avancerede regler, såsom visning efter et bestemt antal sessioner eller visning på bestemte enheder. Udløsere og avancerede regler har enkle skyderkontakter, og det vil være meget hurtigt at indstille alle de parametre, du ønsker.

JetPopup

popup-indstillinger

forsiden af ​​en popup

Alle udløsere, betingelser og åbningsbegivenheder er samlet i parametrene. Når du har klikket på vedligeholdelsesknappen, åbner du fanerne til indstillinger og kan indstille udløsere med det samme. Du kan indstille procentdelen af ​​siden efter rulning, kontekstmenuen, der skal vises, eller antallet af sekunder, hvorefter brugeren får vist meddelelsen.

Vinduet kan kun vises en gang eller hver gang brugeren udfører bestemte handlinger (jeg kan ikke varmt anbefale det - det vil ikke gøre brugerne glade). Du kan også vælge meget præcist, hvilke indlæg eller sider denne konkrete pop-up vises. Generelt er dette plugin ret fleksibelt og giver dig mulighed for at vise pop op-vinduer med stor præcision.

positionering

Brugere vil bestemt ikke være i stand til at undgå vinduer, der springer lige ud af midten af ​​skærmen, men de distraherer fra besøgende på webstedet og kan være rigtig irriterende. Ikke alle pop op-vinduer skal placeres i midten, et smalt bånd øverst vil være mindre synligt, men kan være meget mere effektivt. Det betyder, at du skal kontrollere vinduets position og være i stand til at bevæge sig rundt på skærmen.

positionering

Popup Builder et JetPopup del skærmen i ni sektorer, og lad dig placere din popup i en af ​​dem. Positionering defineres langs venstre-højre og op-ned-skalaen. Det er ikke meget fleksibelt, men det er nok til en popup.

Animationseffekter

Det er meget vigtigt, hvordan vinduet glider (eller ruller eller springer) på siden. Hvis vinduet bevæger sig for hurtigt eller for langsomt, vil det ikke være effektivt. Hopp, kild og skælv skal også bruges med stor præcision. Animationseffekter gør siden mere dynamisk, men de kan også ødelægge hele indtrykket.

Animationseffekter

Popup Builder har 36 typer input-animationer, herunder forskellige typer glidning, udfoldning, zoom, hoppende og rotation i forskellige retninger. Alt dette sammen med animationens varighed kan findes i afsnittet "Layout" under fanen Indstillinger.

jet popup-indstillinger

Der er 13 typer animationer i pluginet JetPopup, inklusive fades, lodret vippe, forskellige dias, hoppning og zoom. Du finder dem i afsnittet "Indstillinger" under fanen Indstillinger.

modeller

I nogle tilfælde vil du gerne lave en popup med en bestemt struktur og vide præcis, hvordan den skal se ud. Men dette er en ret sjælden lejlighed; meget oftere aner du ikke, hvilke elementer din popup skal indeholde. Det er her, skabeloner er nyttige. Selvom du ikke bruger nogen af ​​de prækonfigurerede prøver, kan behandlingen af ​​dem give dig et godt overblik. Og selvfølgelig er det meget hurtigere og nemmere at tilpasse en færdigvare, end at bygge den fra bunden.

Elementor-modelbibliotek

Popup Builder tilføjede en kategori til Elementors skabelonbibliotek. Som jeg fortalte dig før, kan du se dette lige i starten af ​​den nye proces til oprettelse af en popup. Sortimentet af popup-skabeloner er stort nok; der er mere end 100 varer. I øverste venstre hjørne giver et sorteringsværktøj efter rullemenu dig mulighed for at fremskynde din søgning. Kategorierne er forståelige, og det tager ikke lang tid at finde den popup, du har brug for.

jet popups forudindstillede bibliotek

JetPopup har også et stort bibliotek med skabeloner. Alle gemmes på fanen Kontekstbibliotek og har praktiske funktioner som eksempelvisningsknappen og brugstælleren. Der er flere sorteringsmuligheder, listen kunne konfigureres til at vise en bestemt type modeller og placeres derefter i en hvilken som helst rækkefølge; for eksempel afhængigt af oprettelsesdatoen. Jeg kan ikke fortælle dig det nøjagtige antal tilgængelige modeller, men der er bestemt over 100.

Sammenligningstabel

Elementor Popup Builder JetPopup
Pris 45 $ 15 $
modeller 100 + 100 +
triggere 6-triggere, avancerede 7-regler 5 åbne begivenheder med yderligere parametre
Animatio 36 former 13 former
Vejledninger dokumentation dokumentation, 9-videotutorials

JetPopup vs Popup Builder

Konklusion

Jeg kan ikke sige, hvilket af disse to plugins der er bedre; det er for kompliceret til at dømme dem. Hver sag og hver person har deres egne krav til valg af plugins. Jeg antager, at du selv skal definere det - hvilken af ​​disse to vil være bedst for dig? Jeg ønsker dig held og lykke med at tilføje en fantastisk popup til dit websted!