De eerste pop-ups zijn gemaakt op basis van het scenario dat Ethan Zukerman voor deaccommodatie van zijn webpagina op Tripod begin jaren 90. Zijn gebruikers klaagden over het aantal advertenties dat hij op de website plaatste, dus besloot hij de banners op een aparte pagina te plaatsen die werd geopend wanneer een gebruiker de pagina bezocht.
Dit kleine stukje code was nog steeds geen echte pop-up zoals je nu op elke website ziet, maar daar begon het allemaal. Op moderne webpagina's worden pop-ups voor verschillende doeleinden gebruikt, niet alleen voor advertenties. Contactformulieren, waarschuwingen voor het privacybeleid en suggesties voor abonnementen worden ook vaak weergegeven als pop-ups.
Er zijn twee dingen die gebruikers ergeren als het gaat om pop-ups: wanneer ze op je springen wanneer je ze niet wilt; en wanneer het uiterlijk volledig verschilt van de stijl van de website. Deze twee problemen verschijnen wanneer u plug-ins gebruikt die niet van de hoogste kwaliteit lijken te zijn.
Het grootste probleem van de meeste plug-ins die beginnende ontwikkelaars gebruiken pop-ups maken is het gebrek aan controle over het resulterende bericht. U kunt al deze problemen echter voorkomen als u Elementor gebruikt maak een website.
Twee geweldige plug-ins, speciaal gemaakt voor Elementor Pagina Builder, helpen u bij het maken van pop-ups van elk type, vorm en stijl die u nodig hebt - Elementor Popup Builder et JetPopup. Omdat ze allebei van hetzelfde vlees zijn gemaakt als Elementor, is de enige vraag die je moet stellen welke van deze plug-ins je moet kiezen. Om u te helpen bij het nemen van deze beslissing, ga ik beide grondig bekijken en kunt u hun voor- en nadelen vergelijken. Dus laten we gaan !
Downloaden en installeren
Dit is niet het belangrijkste criterium bij het kiezen van welke plug-in je wilt gebruiken, maar om het te proberen, moet je het eerst downloaden. Daarom begin ik vanaf het allereerste begin en geef ik een overzicht van het proces om het te krijgen: de prijsstelling, de moeite die het kost en het gemak van het installatieproces.
Popup Builder
Deze plug-in is gemaakt door het Elementor-team. We zouden hem dus zijn echte "kind" kunnen noemen. Dit is de laatste update voor Elementor, uitgebracht in januari 2019 om aan de behoeften van de klant te voldoen. Het is echter niet beschikbaar voor gebruikers van de gratis versie van Elementor.
Popup Builder is inbegrepen in het professionele abonnement. Dus om pop-ups te kunnen maken, moet u eerst Elementor Pro hebben. Het eenvoudigste tariefplan waarmee u alle functies van Elementor voor één website kunt gebruiken, kost $ 49 per jaar. Dus vanaf de eerste stappen (aankoop van Elementor Pro), hier is het algoritme om Popup Builder te verkrijgen:
- Koop Pro Elementor Pagina Builder.
- Ga naar uw persoonlijke account en download de plug-in.
- Ga naar het dashboard van uw website, Plug-ins> Nieuwe toevoegen, klik op de knop "Upload plug-in" en kies het juiste .zip-bestand.
- Als de installatie is voltooid, activeert u de plug-in met uw licentiesleutel.
- Hier is de Popup Builder in het tabblad Sjablonen> Pop-ups.
Het is een beetje een lange weg, maar met Popup Builder krijg je ook een enorme verzameling verschillende elementen van Elementor, zoals widgets, sjablonen en andere extra tools.
Popup Builder
JetPopup
De "familie" van Jet-plug-ins heeft al meer dan 10-artikelen en JetPopup is er een van. Het is zorgvuldig speciaal voor Elementor gemaakt en verhoogt het aantal beschikbare tools. Deze plug-in is t
Volledig compatibel met gratis en betaalde versies. U hoeft dus geen extra aankopen te doen. JetPopup kost $ 15 en als je het eenmaal hebt, kun je het voor slechts één website gebruiken. Als je het voor meer dan één project nodig hebt, kun je de plug-in kopen onder de licentie van de ontwikkelaar (het kost je $ 45) en gebruiken voor vijf websites. Het algoritme om de plug-in te krijgen is een beetje eenvoudiger:
- Koop de plug-in op de TemplateMonster Marketplace. Het wordt naar uw computer gedownload.
- Ga naar het dashboard van uw website, Plug-ins> Nieuwe toevoegen, klik op de knop "Upload plug-in" en kies het juiste .zip-bestand.
- Activeer de plug-in als de installatie is voltooid.
- Alstublieft! Wanneer u het aanpassingsmenu van Elementor opent (door op de knop "Bewerken met Elementor" te klikken), vindt u het JetPopup-gedeelte in het linkermenu van de widget.
Pop-up maken
Nu de tools er zijn en klaar zijn, kan ik proberen een pop-up te maken met beide plug-ins en zien hoe eenvoudig en begrijpelijk de functie is. Vervolgens maak ik een eenvoudige pop-up en bekijk ik de aanpassingsopties voor Popup Builder en JetPopup.
Popup Builder
In Pro Elementor worden pop-ups apart van sitepagina's gedaan. Om het uiterlijk van de website te veranderen, opent u de pagina die u wilt aanpassen, klikt u op de knop "Bewerken met Elementor" en brengt u wijzigingen aan. Maar om pop-ups te maken (en vervolgens te bewerken) moet je naar Sjablonen> Pop-ups gaan en op de knop "Nieuwe pop-up toevoegen" klikken.
In het geopende venster moet u de sjabloon kiezen die u wilt maken (ja, u kunt niet alleen sjablonen maken voor pop-ups, maar ook voor pagina's en andere items) en deze een naam geven.
Nadat u op de knop "Sjabloon maken" hebt gedrukt, wordt u doorgestuurd naar het personalisatiemenu van Elementor. Het is gemakkelijker om een ​​bestaand item aan te passen door het helemaal opnieuw te bouwen. U wordt daarom eerst gevraagd om een ​​geschikt model te kiezen.
Ik heb een van de modellen gekozen die bovenaan de bibliotheeklijst worden weergegeven. Meteen na de keuze beland je op de Elementor-werkruimte die je waarschijnlijk gewend bent. Aanpassingsopties worden in de zijbalk aan de linkerkant van het scherm geplaatst. Je hebt hier drie tabbladen.
Op het tabblad "Instellingen" kunt u de lay-out van de pop-up wijzigen, de naam van het model wijzigen en een voorbeeld bekijken. Op het tabblad "Stijl" kunt u het ontwerp aanpassen - kleuren, lettertypen, afbeeldingen en randen wijzigen. Het tabblad "Geavanceerd" heeft ook een aantal extra schuifregelaars; ze voorkomen bijvoorbeeld dat de pop-up wordt gesloten met de ESC-toets.
Zoals je kunt zien - niets onverwachts, als je Elementor eerder hebt gebruikt, zul je geen problemen tegenkomen met deze plug-in. Hier is een gedetailleerde video waarin wordt uitgelegd hoe u een pop-upvenster kunt maken met Popup Builder:
JetPopup
Deze plug-in voegt ook een nieuw tabblad toe aan uw dashboard van WordPress theme en met zijn hulp worden pop-ups ook afzonderlijk van pagina's gemaakt. Kant-en-klare pop-ups worden ook opgeslagen op een tabblad met de naam 'Pop-upbibliotheek'. Om een ​​nieuwe pop-up te maken, kunt u op de knop "Toevoegen" op de vooraf gemaakte sjabloon drukken of naar JetPopup> Nieuwe pop-up toevoegen, de sjabloon een naam geven en op "Bewerken met Elementor" drukken.
Het werkveld wijkt iets af van de norm omdat u nu een kleiner venster maakt. In het linkermenu kunt u elk type item toevoegen aan uw pop-up.
De JetPopup-plug-in voegt een enkel item toe aan het widgetmenu: contextuele actieknop. Dit maakt het mogelijk het type actie te definiëren dat zal plaatsvinden wanneer de gebruiker op de knop drukt.
Het is niet echt voor de hand liggend om de instellingen vanuit het pop-upvenster te openen. U moet op de onderhoudsknop onderaan het menu klikken. Het instellingenmenu lijkt veel op dat in Popup Builder, maar er zijn slechts twee aanpassingstabbladen. Met "Algemene instellingen" kunt u een animatie-effect definiëren, het model hernoemen of de voorwaarden definiëren. Op het tabblad "Stijl" kunt u de lay-outs, kleuren, afbeeldingen, lettertypen en randen wijzigen.
JetPopup heeft iets minder voor de hand liggende functionaliteit, maar compenseert dit met gedetailleerde en nuttige video-tutorials.
triggers
Om nuttig te zijn en bezoekers niet te ergeren, moeten pop-ups op het juiste moment verschijnen. De voorwaarden waaronder de pop-up wordt weergegeven, worden "triggers" genoemd. Hoe gedetailleerder de beschikbare voorwaarden, hoe flexibeler de pop-up plug-in is. Precisie is erg belangrijk als u niet wilt dat uw gebruiker de site verlaat nadat het pop-upvenster met het abonnementsformulier verschijnt.
Popup Builder
Deze plug-in helpt u bij het definiëren van de noodzakelijke voorwaarden net na het aanpassen van het pop-upvenster. Wanneer u op de knop 'Publiceren' drukt, ziet u het venster waarin u voorwaarden kunt definiëren (op welke pagina's deze pop-up wordt weergegeven), triggers (wanneer het pop-upvenster wordt weergegeven) en geavanceerde regels.
Popup Builder heeft zes triggers, zoals weergave op één scroll en klik, en zeven geavanceerde regels, zoals weergave na een bepaald aantal sessies of weergave op bepaalde apparaten. Triggers en geavanceerde regels hebben eenvoudige schuifregelaars en het is heel snel om alle gewenste parameters in te stellen.
JetPopup
Alle triggers, voorwaarden en openingsgebeurtenissen zijn gegroepeerd in de parameters. Nadat je op de onderhoudsknop hebt geklikt, open je de instellingen-tabbladen en kun je direct triggers instellen. U kunt het percentage van de pagina instellen na het scrollen, het contextmenu dat moet worden weergegeven of het aantal seconden waarna de gebruiker het bericht te zien krijgt.
Het venster kan slechts één keer worden weergegeven of elke keer dat de gebruiker bepaalde acties uitvoert (ik raad het niet sterk aan - het zal gebruikers niet blij maken). Ook kun je heel precies kiezen welke posts of pagina's deze concrete pop-up getoond wordt. Over het algemeen is deze plug-in vrij flexibel en kunt u pop-ups met grote precisie weergeven.
positionering
Gebruikers zullen zeker geen vensters kunnen vermijden die recht uit het midden van het scherm springen, maar ze leiden bezoekers af van de website en kunnen erg vervelend zijn. Niet alle pop-ups moeten in het midden worden geplaatst, een smal lint bovenaan zal minder opvallen, maar kan veel effectiever zijn. Dit betekent dat u de positie van het raam moet bepalen en zich over het scherm moet kunnen bewegen.
Popup Builder et JetPopup verdeel het scherm in negen sectoren en laat u uw pop-up in een van deze sectoren plaatsen. De positionering wordt gedefinieerd langs de links-rechts- en op-neer-schaal. Het is niet erg flexibel, maar het is voldoende voor een pop-up.
Animatie-effecten
De manier waarop het venster over de pagina schuift (of rolt of springt) is erg belangrijk. Als het raam te snel of te langzaam beweegt, zal het niet effectief zijn. Stuiteren, kietelen en trillen moeten ook met grote precisie worden gebruikt. Animatie-effecten maken de site dynamischer, maar kunnen ook de hele indruk bederven.
Popup Builder heeft 36 soorten invoeranimatie, waaronder verschillende soorten schuiven, uitvouwen, zoomen, stuiteren en roteren in verschillende richtingen. Dit alles, samen met de duur van de animatie, is te vinden in het gedeelte "Lay-out" van het tabblad Instellingen.
Er zijn 13 soorten animatie in de plug-in JetPopup, inclusief fades, verticaal spiegelen, verschillende dia's, stuiteren en zoomen. U vindt ze in het gedeelte 'Instellingen' van het tabblad Instellingen.
modellen
In sommige gevallen wil je een pop-up maken met een specifieke structuur en precies weten hoe deze eruit moet zien. Maar dit is een vrij zeldzame gelegenheid; veel vaker heb je geen idee welke elementen je pop-up zou moeten bevatten. Dit is waar sjablonen van pas komen. Zelfs als u geen van de vooraf geconfigureerde voorbeelden gebruikt, kan het verwerken ervan u een goed overzicht geven. En natuurlijk is het aanpassen van een kant-en-klaar artikel veel sneller en gemakkelijker dan het helemaal opnieuw te bouwen.
Popup Builder heeft een categorie toegevoegd aan de modelbibliotheek van Elementor. Zoals ik je al eerder vertelde, kun je het meteen zien aan het begin van het nieuwe proces voor het maken van een pop-up. Het assortiment pop-upsjablonen is groot genoeg; er zijn meer dan 100 items. In de linkerbovenhoek kunt u met een sorteerhulpmiddel op vervolgkeuzecategorie uw zoekopdracht versnellen. De categorieën zijn begrijpelijk en het zal niet lang duren om de pop-up te vinden die u nodig heeft.
JetPopup heeft ook een enorme bibliotheek met sjablonen. Ze zijn allemaal opgeslagen op het tabblad Contextuele bibliotheek en hebben handige functies zoals de voorbeeldknop en gebruiksteller. Er zijn meer sorteeropties, de lijst kan worden geconfigureerd om een ​​specifiek type modellen weer te geven en vervolgens in willekeurige volgorde worden geplaatst; bijvoorbeeld afhankelijk van de aanmaakdatum. Ik kan je het exacte aantal beschikbare modellen niet vertellen, maar het zijn er zeker meer dan 100.
Vergelijkingstabel
| Elementor Popup Builder | JetPopup | |
| Prijs | 45 € | 15 € |
| modellen | 100+ | 100+ |
| triggers | 6-triggers, 7 geavanceerde regels | 5 open evenementen met aanvullende parameters |
| animatio | 36 types | 13 types |
| tutorials | documentatie | documentatie, 9 video-tutorials |
Conclusie
Ik kan niet zeggen welke van deze twee plug-ins de beste is; het is te ingewikkeld om ze te beoordelen. Elk geval en elke persoon heeft zijn eigen vereisten voor de keuze van plug-ins. Ik denk dat je het zelf moet definiëren - welke van deze twee is het beste voor jou? Ik wens je veel succes bij het toevoegen van een geweldige pop-up aan je website!
