De første popup-vinduene ble opprettet fra scenariet Ethan Zukerman forestilte seg forovernatting av nettsiden hans på Tripod tidlig på 90-tallet. Brukerne hans klaget over antallet annonser han plasserte på nettstedet, så han bestemte seg for å plassere bannerne på en egen side som åpnet når en bruker gikk inn på siden.

Denne lille koden var fortsatt ikke en ekte popup som du ser på hvert nettsted akkurat nå, men det var der det hele startet. På moderne nettsider brukes popup-vinduer til forskjellige formål, ikke bare for reklame. Kontaktskjemaer, advarsler om personvern og abonnementsforslag presenteres også ofte som popup-vinduer.

Det er to ting som irriterer brukere når det kommer til popups: når de hopper på deg når du ikke vil ha dem; og når utseendet skiller seg helt ut fra stilen på nettstedet. Disse to problemene vises når du bruker plugins som ikke ser ut til å være av høyeste kvalitet.

Det største problemet med de fleste plugins som nybegynnerutviklere bruker til lage pop-ups er mangelen på kontroll over den resulterende meldingen. Du kan imidlertid unngå alle disse problemene hvis du bruker Elementor til å opprette et nettsted.

To fantastiske plugins, laget spesielt for Elementor Page Builder, hjelpe deg med å lage popup-vinduer av enhver type, form og stil du trenger – Elementor Popup Builder et JetPopup. Siden de begge er laget av samme kjøtt som Elementor var, er det eneste spørsmålet å stille hvilke av disse pluginene du skal velge. For å hjelpe deg med å ta denne avgjørelsen, skal jeg gjøre en grundig gjennomgang av begge deler, og du kan sammenligne fordeler og ulemper mellom dem. Så la oss gå !

Last ned og installer

Dette er ikke de viktigste kriteriene når du velger hvilket plugin du vil bruke, men for å prøve det må du skaffe det først. Derfor kommer jeg til å starte helt fra begynnelsen og skissere prosessen for å få det - prissettingen, den innsatsen som er involvert, og enkelheten i installasjonsprosessen.

Popup Builder

Elementor

Dette pluginet ble opprettet av Elementor-teamet. Vi kunne derfor kalle ham hans virkelige "barn". Dette er den siste oppdateringen for Elementor, utgitt i januar 2019 for å møte kundenes behov. Den er imidlertid ikke tilgjengelig for brukere av den gratis versjonen av Elementor.

Popup Builder er inkludert i den profesjonelle abonnementsplanen. Så for å ha muligheten til å lage popup-vinduer, må du først ha Elementor Pro. Den enkleste prisplanen som lar deg bruke alle Elementors forskjellige funksjoner for et enkelt nettsted koster $ 49 per år. Så fra de første trinnene (kjøp av Elementor Pro), her er algoritmen for å skaffe Popup Builder:

  • Kjøp Pro Elementor Page Builder.
  • Gå til din personlige konto og last ned programtillegget.
  • Gå til dashbordet til nettstedet ditt, Plugins> Legg til nytt, klikk på "Last opp plugin" -knappen og velg passende .zip-fil.
  • Når installasjonen er fullført, aktiverer du pluginet med lisensnøkkelen.
  • Her er Popup Builder som ligger i Maler> Popups-fanen.

Det er litt av en lang vei, men med Popup Builder får du også en enorm samling av forskjellige elementer fra Elementor, som widgets, maler og andre tilleggsverktøy.

Popup Builder

JetPopup

"Familien" av Jet-plugins har allerede mer enn 10-artikler, og JetPopup er en av dem. Den er nøye opprettet spesielt for Elementor og øker antall tilgjengelige verktøy. Denne pluginen er ikkeJetPopupsFullt kompatibel med gratis og betalte versjoner. Så du trenger ikke å foreta ytterligere kjøp. JetPopup koster $ 15, og når du først får det, kan du bruke det til bare ett nettsted. Hvis du trenger det for mer enn ett prosjekt, kan du kjøpe programtillegget under utviklerlisensen (det koster $ 45) og bruke det til fem nettsteder. Algoritmen for å få plugin er litt enklere:

  • Kjøp plugin på TemplateMonster Marketplace. Det blir lastet ned til datamaskinen din.
  • Gå til dashbordet til nettstedet ditt, Plugins> Legg til nytt, klikk på "Last opp plugin" -knappen og velg passende .zip-fil.
  • Når installasjonen er fullført, aktiverer du pluginet.
  • Voila! Når du åpner tilpasningsmenyen for Elementor (ved å klikke på "Rediger med elementor" -knappen), finner du JetPopup-delen i venstre meny for widgeten.

JetPopup

Opprettelse av popup-vinduer

Nå, når verktøyene er der og klare, kan jeg prøve å lage en popup med begge plugins og se hvor enkel og forståelig funksjonen er. Deretter lager jeg en grunnleggende pop-up og tar en titt på tilpasningsalternativene for Popup Builder og JetPopup.

Popup Builder

I Pro Elementor popup-vinduer gjøres separat fra sidene. For å endre utseendet til nettstedet, åpner du siden du vil tilpasse, klikker på “Rediger med Elementor” -knappen og gjør endringer. Men for å opprette (og redigere) popup-vinduer, må du gå til Maler> Popups og trykke på knappen "Legg til ny popup".

Popup Builder
Prøv Popup Builder nå

I det åpne vinduet må du velge malen du vil opprette (ja, du kan lage maler, ikke bare for popup-vinduer, men også for sider og andre elementer) og gi den et navn.

popup-oppretting

Etter å ha trykket på "Opprett mal" -knappen blir du omdirigert til Elementor-personaliseringsmenyen. Det er lettere å tilpasse en eksisterende vare ved å bygge den fra bunnen av. Du blir derfor først bedt om å velge en passende modell.

popup-bibliotek

Jeg valgte en av modellene som vises øverst på biblioteklisten. Rett etter valget lander du på Elementor-arbeidsområdet som du sannsynligvis er vant til. Personaliseringsalternativer er plassert i sidefeltet på venstre side av skjermen. Du har tre faner her.

Fanen "Innstillinger" lar deg endre layout av popup, endre navn på modell og forhåndsvise. I kategorien "Style" kan du tilpasse designet - endre farger, skrifter, bilder og rammer. Fanen "Avansert" har også et sett med flere glidebrytere; for eksempel forhindrer de at popup-vinduet lukkes med ESC-tasten.

popup-innstillinger

Som du kan se - ingenting uventet, hvis du har brukt Elementor før, vil du ikke støte på noen problemer med dette pluginet. Her er en detaljert video som forklarer hvordan du oppretter et popup-vindu ved hjelp av Popup Builder:

JetPopup

Denne pluginen legger også til en ny fane på dashbordet ditt WordPress tema og med dens hjelp opprettes også popup-vinduer separat fra sidene. Out-of-the-box popup-vinduer lagres også i en fane kalt "Popup-bibliotek." For å lage en ny popup, kan du enten trykke på "Legg til"-knappen på den forhåndsdefinerte malen eller gå til JetPopup > Legg til ny popup, gi malen et navn og trykk "Rediger med Elementor."

legg til ny popup

Arbeidsfeltet er litt forskjellig fra normen fordi du nå oppretter et mindre vindu. I venstre meny kan du legge til alle typer elementer i popup-en.

popup-elementer

JetPopup-pluginet legger til et enkelt element i widgetmenyen - kontekstuell handlingsknapp. Dette gjør det mulig å definere hvilken type handling som vil oppstå når brukeren trykker på knappen.

popup-handlingsknapp

rediger popup-handlingsknapp

Det er egentlig ikke opplagt å åpne innstillingene fra popup-vinduet. Du må klikke på vedlikeholdsknappen nederst på menyen. Innstillingsmenyen er ganske lik den i Popup Builder, men det er bare to tilpasningsfaner. “Generelle innstillinger” lar deg definere en animasjonseffekt, gi nytt navn til modellen eller definere forholdene. I kategorien "Stil" kan du endre oppsett, farger, bilder, skrifttyper og rammer.

popup-generelle innstillinger

JetPopup har litt mindre åpenbar funksjonalitet, men kompenserer med detaljerte og nyttige videoopplæringsprogrammer.

triggere

For å være nyttig og ikke irritere besøkende, må popups vises til rett tid. Betingelsene som popupen vises under kalles "triggere". Jo mer detaljerte betingelser som er tilgjengelige, jo mer fleksibel er popup-plugin. Presisjon er veldig viktig hvis du ikke vil at brukeren skal forlate nettstedet etter at popup-vinduet for abonnementsskjema vises.

Popup Builder

redigering av popup-byggherre

publiser popup

Denne plugin hjelper deg med å definere de nødvendige forholdene rett etter tilpasning av popup-vinduet. Når du trykker på "Publiser" -knappen, ser du vinduet der du kan definere betingelser (på hvilke sider denne popup-en skal vises), utløsere (når popup-vinduet vises) og avanserte regler.

Popup Builder har seks utløsere, for eksempel visning på en bla og klikk, og syv avanserte regler, for eksempel visning etter et bestemt antall økter eller visning på bestemte enheter. Utløsere og avanserte regler har enkle glidebrytere, og det vil være veldig raskt å stille inn eventuelle parametere du vil ha.

JetPopup

popup-innstillinger

forsiden av en popup

Alle utløsere, betingelser og åpningshendelser er samlet i parametrene. Etter å ha klikket på vedlikeholdsknappen, åpner du innstillinger-fanene og kan angi utløsere umiddelbart. Du kan angi prosentandelen av siden etter rulling, hurtigmenyen som skal vises, eller antall sekunder som brukeren vil se meldingen etter.

Vinduet kan bare vises en gang eller hver gang brukeren utfører visse handlinger (jeg anbefaler det ikke på det sterkeste - det vil ikke gjøre brukerne fornøyde). Du kan også velge veldig nøyaktig hvilke innlegg eller sider denne konkrete popupen skal vises. Generelt er dette pluginet ganske fleksibelt og lar deg vise popup-vinduer med stor presisjon.

posisjonering

Brukere vil definitivt ikke være i stand til å unngå vinduer som hopper rett inn i midten av skjermen, men de distraherer fra besøkende på nettstedet og kan være veldig irriterende. Ikke alle popup-vinduer skal plasseres i midten, et smalt bånd øverst vil være mindre merkbart, men kan være mye mer effektivt. Dette betyr at du trenger å kontrollere posisjonen til vinduet og kunne bevege deg rundt på skjermen.

posisjonering

Popup Builder et JetPopup del skjermen i ni sektorer og la deg plassere popup-en i noen av dem. Posisjonering er definert langs skalaene til venstre og høyre. Det er ikke veldig fleksibelt, men det er nok for en popup.

Animasjonseffekter

Måten vinduet glir på (eller ruller eller hopper) på siden er veldig viktig. Hvis vinduet beveger seg for fort eller for sakte, vil det ikke være effektivt. Spretter, kiler og skjelvinger bør også brukes med stor presisjon. Animasjonseffekter gjør nettstedet mer dynamisk, men de kan også ødelegge hele inntrykket.

Animasjonseffekter

Popup Builder har 36 typer inngangsanimasjoner, inkludert forskjellige typer skyve, brette ut, zoome, sprette og rotere i forskjellige retninger. Alt dette, sammen med animasjonens varighet, finner du i delen "Layout" i kategorien Innstillinger.

jet popup-innstillinger

Det er 13 typer animasjoner i pluginet JetPopup, inkludert blekninger, vertikal vending, forskjellige lysbilder, sprett og zooming. Du finner dem i delen "Innstillinger" i Innstillinger-fanen.

modeller

I noen tilfeller vil du lage en popup med en bestemt struktur og vite nøyaktig hvordan den skal se ut. Men dette er en ganske sjelden anledning; mye oftere aner du ikke hvilke elementer popup-vinduet ditt skal inneholde. Det er her maler kommer godt med. Selv om du ikke bruker noen av de forhåndskonfigurerte prøvene, kan behandling av dem gi deg en god oversikt. Og selvfølgelig er det mye raskere og enklere å tilpasse en ut-av-esken-vare enn å bygge den fra bunnen av.

Elementor modellbibliotek

Popup Builder lagt til en kategori i Elementors modellbibliotek. Som jeg fortalte deg før, kan du se dette rett i starten av den nye prosessen med å lage en popup. Utvalget av popup-maler er stort nok; det er mer enn 100 varer. Øverst til venstre hjelper et sorteringsverktøy etter nedtrekkskategori deg å øke hastigheten på søket. Kategoriene er forståelige, og det tar ikke lang tid å finne popupen du trenger.

jet popups forhåndsinnstilte bibliotek

JetPopup har også et stort bibliotek med maler. Alle lagres i kategorien Innholdsbibliotek og har praktiske funksjoner som forhåndsvisningsknappen og brukstelleren. Det er flere sorteringsalternativer, listen kan konfigureres til å vise en bestemt type modeller og deretter plasseres i hvilken som helst rekkefølge; for eksempel avhengig av opprettelsesdato. Jeg kan ikke fortelle deg nøyaktig antall tilgjengelige modeller, men det er definitivt over 100.

Sammenligningstabell

Elementor Popup Builder JetPopup
Prix 45 $ 15 $
modeller 100 + 100 +
triggere 6 utløser, 7 avanserte regler 5 åpne hendelser med tilleggsparametere
Animatio 36 typer 13 typer
Guider dokumentasjon dokumentasjon, 9 videoopplæringer

JetPopup vs Popup Builder

konklusjonen

Jeg kan ikke si hvilken av disse to pluginene som er bedre; det er for komplisert å dømme dem. Hver sak og hver person har sine egne krav til valg av plugins. Jeg antar at du burde definere det selv - hvilken av disse to vil være best for deg? Jeg ønsker deg lykke til med å legge til en fantastisk popup på nettstedet ditt!