I primi popup sono stati creati dallo scenario immaginato da Ethan Zukerman per ilsistemazione della sua pagina web su Tripod all'inizio degli anni 90. I suoi utenti si lamentavano del numero di annunci che pubblicava sul sito web, così ha deciso di posizionare i banner su una pagina separata che si apriva quando un utente accedeva alla pagina.
Questo piccolo pezzo di codice non era ancora un vero popup come vedi su ogni sito web in questo momento, ma è lì che è iniziato tutto. Nelle pagine Web moderne, i popup vengono utilizzati per scopi diversi, non solo per la pubblicità . Anche i moduli di contatto, gli avvisi sulla politica sulla privacy e i suggerimenti di iscrizione vengono spesso presentati come popup.
Ci sono due cose che infastidiscono gli utenti quando si tratta di popup: quando saltano su di te quando non li vuoi; e quando il suo aspetto differisce completamente dallo stile del sito Web. Questi due problemi compaiono quando si utilizzano plugin che non sembrano della massima qualità .
Il più grande problema della maggior parte dei plug-in per cui gli sviluppatori alle prime armi usano creazione di pop-up è la mancanza di controllo sul messaggio risultante. Tuttavia, potresti evitare tutti questi problemi se usi Elementor per creare un sito Web.
Due fantastici plugin, creati appositamente per Elementor Page Builder, ti aiutano a creare popup di qualsiasi tipo, forma e stile di cui hai bisogno - Elementor Popup Builder et JetPopup. Poiché sono entrambi fatti della stessa carne di Elementor, l'unica domanda da porsi è quale di questi plugin scegliere. Per aiutarti a prendere questa decisione, farò una revisione approfondita di entrambi e potrai confrontare i loro pro e contro. Quindi andiamo !
Download e installazione
Questo non è il criterio più importante quando si sceglie quale plug-in utilizzare, ma per provarlo è necessario prima ottenerlo. Ecco perché inizierò dall'inizio e delineerò il processo per ottenerlo: il prezzo, lo sforzo richiesto e la semplicità del processo di installazione.
Popup Builder
Questo plugin è stato creato dal team di Elementor. Potremmo quindi chiamarlo il suo vero "figlio". Questo è l'ultimo aggiornamento per Elementor, rilasciato a gennaio 2019 per soddisfare le esigenze dei clienti. Tuttavia, non è disponibile per gli utenti della versione gratuita di Elementor.
Popup Builder è incluso nel piano di abbonamento professionale. Quindi, per avere la possibilità di creare popup, devi prima avere Elementor Pro. Il piano tariffario più semplice che ti consente di utilizzare tutta la varietà di funzionalità di Elementor per un singolo sito Web costa $ 49 all'anno. Quindi, dai primi passi (acquisto di Elementor Pro), ecco l'algoritmo per ottenere Popup Builder:
- Acquista Pro Elementor Page Builder.
- Vai al tuo account personale e scarica il plugin.
- Vai alla dashboard del tuo sito Web, Plugin> Aggiungi nuovo, fai clic sul pulsante "Carica plug-in" e scegli il file .zip appropriato.
- Quando l'installazione è completa, attiva il plugin con la tua chiave di licenza.
- Ecco il Popup Builder che può essere trovato in Modelli> scheda Popup.
È un po 'lungo, ma con Popup Builder ottieni anche una vasta raccolta di elementi diversi da Elementor, come widget, modelli e altri strumenti aggiuntivi.
Popup Builder
JetPopup
La "famiglia" di plugin Jet ha già più di articoli 10 e JetPopup è uno di questi. È stato creato con cura appositamente per Elementor e aumenta il numero dei suoi strumenti disponibili. Questo plugin è t
Pienamente compatibile con le versioni gratuite ea pagamento. Quindi non è necessario effettuare acquisti aggiuntivi. JetPopup costa $ 15 e una volta ottenuto puoi usarlo per un solo sito web. Se ne hai bisogno per più di un progetto, puoi acquistare il plugin con la licenza dello sviluppatore (ti costerà $ 45) e utilizzarlo per cinque siti web. L'algoritmo per ottenere il plugin è un po 'più semplice:
- Acquista il plug-in sul Marketplace TemplateMonster. Sarà scaricato sul tuo computer.
- Vai alla dashboard del tuo sito Web, Plugin> Aggiungi nuovo, fai clic sul pulsante "Carica plug-in" e scegli il file .zip appropriato.
- Quando l'installazione è completa, attiva il plugin.
- Ecco! Quando apri il menu di personalizzazione di Elementor (facendo clic sul pulsante "Modifica con Elementor"), troverai la sezione JetPopup nel menu a sinistra del widget.
Creazione popup
Ora, quando gli strumenti sono presenti e pronti, posso provare a creare un popup con entrambi i plugin e vedere quanto sia semplice e comprensibile la funzionalità . Successivamente, creerò un pop-up di base e dare un'occhiata alle opzioni di personalizzazione di Popup Builder e JetPopup.
Popup Builder
In Pro Elementor i pop-up vengono creati separatamente dalle pagine del sito. Per modificare l'aspetto del sito web, apri la pagina che desideri personalizzare, fai clic sul pulsante "Modifica con Elementor" e apporta le modifiche. Ma per creare (e quindi modificare) i popup devi andare su Modelli> Popup e premere il pulsante "Aggiungi nuovo popup".
Nella finestra aperta, devi scegliere il modello che creerai (sì, puoi creare modelli non solo per i popup, ma anche per pagine e altri elementi) e dargli un nome.
Dopo aver premuto il pulsante "Crea modello" verrai reindirizzato al menu di personalizzazione di Elementor. È più facile personalizzare un oggetto esistente costruendolo da zero. Ti verrà quindi chiesto prima di scegliere un modello appropriato.
Ho scelto uno dei modelli visualizzati nella parte superiore dell'elenco delle librerie. Subito dopo la scelta, atterri nell'area di lavoro di Elementor a cui probabilmente sei abituato. Le opzioni di personalizzazione si trovano nella barra laterale sul lato sinistro dello schermo. Hai tre schede qui.
La scheda "Impostazioni" consente di modificare il layout del popup, cambiare il nome del modello e visualizzare l'anteprima. Nella scheda "Stile" è possibile personalizzare il design: cambiare colori, caratteri, immagini e bordi. La scheda "Avanzate" ha anche una serie di cursori aggiuntivi; ad esempio, impediscono la chiusura del popup con il tasto ESC.
Come puoi vedere, niente di inaspettato, se hai utilizzato Elementor prima non incontrerai alcun problema con questo plugin. Ecco un video dettagliato che spiega come creare una finestra pop-up utilizzando Popup Builder:
JetPopup
Questo plugin aggiunge anche una nuova scheda alla dashboard di tema WordPress e con il suo aiuto, i popup vengono creati anche separatamente dalle pagine. I popup predefiniti sono anche archiviati in una scheda denominata "Libreria popup". Per creare un nuovo popup, puoi premere il pulsante "Aggiungi" sul modello predefinito o andare su JetPopup> Aggiungi nuovo popup, assegnare un nome al modello e premere "Modifica con Elementor".
Il campo di lavoro è leggermente diverso dalla norma perché ora stai creando una finestra più piccola. Nel menu a sinistra, puoi aggiungere qualsiasi tipo di elemento al tuo popup.
Il plug-in JetPopup aggiunge un singolo elemento al menu del widget: il pulsante di azione contestuale. Ciò consente di definire il tipo di azione che si verificherà quando l'utente preme il pulsante.
Non è del tutto ovvio aprire le impostazioni dalla finestra pop-up. È necessario fare clic sul pulsante di manutenzione nella parte inferiore del menu. Il menu delle impostazioni è abbastanza simile a quello di Popup Builder, ma ci sono solo due schede di personalizzazione. "Impostazioni generali" consente di definire un effetto di animazione, rinominare il modello o definire le condizioni. Nella scheda "Stile" puoi modificare layout, colori, immagini, caratteri e bordi.
JetPopup ha una funzionalità un po 'meno ovvia ma compensa con tutorial video dettagliati e utili.
trigger
Per essere utili e non infastidire i visitatori, i popup devono apparire al momento giusto. Le condizioni in cui viene visualizzato il popup sono denominate "trigger". Più dettagliate sono le condizioni disponibili, più flessibile è il plugin popup. La precisione è molto importante se non si desidera che l'utente lasci il sito dopo la visualizzazione della finestra a comparsa del modulo di iscrizione.
Popup Builder
Questo plugin ti aiuta a definire le condizioni necessarie subito dopo aver personalizzato la finestra pop-up. Quando si preme il pulsante "Pubblica", viene visualizzata la finestra in cui è possibile definire le condizioni (su quali pagine verrà visualizzato questo popup), i trigger (quando verrà visualizzata la finestra a comparsa) e le regole avanzate.
Popup Builder ha sei trigger, come la visualizzazione su uno scorrimento e clic, e sette regole avanzate, come la visualizzazione dopo un determinato numero di sessioni o la visualizzazione su determinati dispositivi. I trigger e le regole avanzate hanno semplici interruttori a scorrimento e sarà molto veloce impostare tutti i parametri desiderati.
JetPopup
Tutti i trigger, le condizioni e gli eventi di apertura sono raggruppati nei parametri. Dopo aver fatto clic sul pulsante di manutenzione, si aprono le schede delle impostazioni e si possono impostare i trigger immediatamente. È possibile impostare la percentuale della pagina dopo lo scorrimento, il menu contestuale da visualizzare o il numero di secondi dopo i quali l'utente vedrà il messaggio.
La finestra può essere visualizzata solo una volta o ogni volta che l'utente esegue determinate azioni (non la consiglio vivamente, non renderà felici gli utenti). Puoi anche scegliere in modo molto preciso quali post o pagine verranno visualizzati in questo pop-up concreto. In generale, questo plugin è abbastanza flessibile e consente di visualizzare i popup con grande precisione.
posizionamento
Gli utenti certamente non saranno in grado di evitare finestre che saltano fuori dal centro dello schermo, ma distraggono i visitatori dal sito web e possono essere davvero fastidiose. Non tutti i popup devono essere posizionati al centro, un nastro stretto nella parte superiore sarà meno evidente, ma può essere molto più efficace. Ciò significa che è necessario controllare la posizione della finestra ed essere in grado di muoversi sullo schermo.
Popup Builder et JetPopup dividere lo schermo in nove settori e consentire di posizionare il popup in uno di essi. Il posizionamento è definito lungo le scale sinistra-destra e su-giù. Non è molto flessibile, ma è sufficiente per un popup.
Effetti di animazione
Il modo in cui la finestra scorre (o rotola o salta) sulla pagina è molto importante. Se la finestra si muove troppo velocemente o troppo lentamente, non sarà efficace. Anche rimbalzi, solletico e tremori dovrebbero essere usati con grande precisione. Gli effetti di animazione rendono il sito più dinamico, ma possono anche rovinare l'intera impressione.
Popup Builder ha 36 tipi di animazione di input, inclusi diversi tipi di scorrimento, apertura, zoom, rimbalzo e rotazione in diverse direzioni. Tutto questo, insieme alla durata dell'animazione, può essere trovato nella sezione "Layout" della scheda Impostazioni.
Ci sono 13 tipi di animazione nel plugin JetPopup, inclusi dissolvenze, rotazione verticale, diapositive diverse, rimbalzo e zoom. Li troverai nella sezione "Impostazioni" della scheda Impostazioni.
modelli
In alcuni casi, vuoi creare un popup con una struttura specifica e sapere esattamente come dovrebbe apparire. Ma questa è un'occasione piuttosto rara; molto più spesso non hai idea di quali elementi dovrebbe contenere il tuo popup. È qui che i modelli tornano utili. Anche se non utilizzi nessuno dei campioni preconfigurati, elaborarli può darti una buona panoramica. E, naturalmente, personalizzare un elemento pronto all'uso è molto più veloce e più facile che costruirlo da zero.
Popup Builder aggiunta una categoria alla libreria di modelli di Elementor. Come ti ho detto prima, puoi vederlo proprio all'inizio del nuovo processo di creazione di un popup. L'assortimento di modelli di popup è abbastanza ampio; ci sono più di 100 articoli. Nell'angolo in alto a sinistra, uno strumento di ordinamento per categoria a discesa consente di velocizzare la ricerca. Le categorie sono comprensibili e non ci vorrà molto tempo per trovare il popup di cui hai bisogno.
JetPopup ha anche una vasta libreria di modelli. Tutti sono archiviati nella scheda Libreria contestuale e hanno funzioni utili come il pulsante di anteprima e il contatore di utilizzo. Ci sono più opzioni di ordinamento, l'elenco può essere configurato per visualizzare un tipo specifico di modelli e quindi essere posizionato in qualsiasi ordine; ad esempio, a seconda della data di creazione. Non posso dirti il ​​numero esatto di modelli disponibili, ma ce ne sono sicuramente più di 100.
Tabella comparativa
| Elementor Popup Builder | JetPopup | |
| Prezzo | $ 45 | $ 15 |
| modelli | 100+ | 100+ |
| trigger | Trigger 6, regole avanzate 7 | Eventi aperti 5 con parametri aggiuntivi |
| animatio | Tipi 36 | Tipi 13 |
| Tutoriels | documentazione | documentazione, video tutorial 9 |
Conclusione
Non posso dire quale di questi due plugin sia il migliore; è troppo complicato giudicarli. Ogni caso e ogni persona ha le proprie esigenze per la scelta dei plugin. Immagino che dovresti definirlo da solo: quale di questi due sarà il migliore per te? Ti auguro buona fortuna con l'aggiunta di un fantastico popup al tuo sito web!
