{"id":5480,"date":"2023-06-29T15:00:09","date_gmt":"2023-06-29T13:00:09","guid":{"rendered":"https:\/\/creare-sito-web-gratis.it\/?p=5480"},"modified":"2023-10-13T16:29:03","modified_gmt":"2023-10-13T14:29:03","slug":"creare-popup-con-elementor-tutorial-completo","status":"publish","type":"post","link":"https:\/\/creare-sito-web-gratis.it\/creare-popup-con-elementor-tutorial-completo\/","title":{"rendered":"Creare popup con Elementor: tutorial completo"},"content":{"rendered":"\n

Elementor \u00e8 diventato uno degli strumenti pi\u00f9 popolari al mondo per la costruzione di siti web. Una delle caratteristiche principali del page builder \u00e8 la possibilit\u00e0 di realizzare popup<\/strong> con estrema facilit\u00e0. In questo post, ti mostrer\u00f2 come creare popup con Elementor per il tuo sito web.<\/p>\n\n\n\n

\"Creare<\/figure>\n\n\n\n

Cos’\u00e8 un popup?<\/h2>\n\n\n\n

Prima di iniziare, \u00e8 importante capire cos’\u00e8 un popup. Un popup \u00e8 una finestra che appare sopra il contenuto della pagina web per catturare l’attenzione dell’utente<\/strong> e offrirgli un’offerta o un’informazione speciale sul sito. I popup possono essere utilizzati per diverse finalit\u00e0 come la raccolta di email, la promozione di prodotti o servizi, l’invito ad un evento e molto altro.<\/p>\n\n\n\n

Come creare popup con Elementor<\/h2>\n\n\n\n

Prima di iniziare, bisogna premettere che per poter creare e pubblicare dei popup \u00e8 necessaria la versione Pro di Elementor<\/a>, in quanto la versione free non include tale funzionalit\u00e0.<\/p>\n\n\n\n

Se sei un web designer professionista o semplicemente vuoi realizzare in autonomia il tuo sito web, ti consiglio vivamente di acquistare Elementor Pro<\/a> che, oltre ai popup, mette a disposizione un’ampissima gamma di funzionalit\u00e0 e strumenti indispensabili per la costruzione di un sito web.<\/p>\n\n\n\n

Se quindi hai gi\u00e0 acquistato e attivato Elementor Pro sul tuo sito web, dal tuo admin di WordPress, vai su TEMPLATE<\/strong> > POPUP<\/strong> e clicca sul pulsante in alto NUOVO<\/strong>.<\/p>\n\n\n\n

\"Creare<\/figure>\n\n\n\n

Vedrai apparire una schermata (anzi… un popup!); inserisci quindi il nome che vuoi assegnare al modello e clicca sul pulsante CREA TEMPLATE<\/strong>.<\/p>\n\n\n\n

\"Popup<\/figure>\n\n\n\n

E adesso arriva la parte interessante. Come puoi vedere dall’immagine qui sopra, una volta caricato il builder, si apre un’altra schermata (la libreria di Elementor) con una serie di popup pronti all’uso. Stiamo parlando di qualcosa come oltre 170 modelli<\/strong> gi\u00e0 impostati di popup. Non dovrai far altro che scegliere quello che pi\u00f9 si avvicina alle tue esigenze e successivamente personalizzarlo con i tuoi contenuti.<\/p>\n\n\n\n

Posizioni e tipologie di popup<\/h3>\n\n\n\n

Quando si parla di popup, a molti verr\u00e0 in mente quello classico di forma quadrata o rettangolare che appare al centro dello schermo del sito. La realt\u00e0 \u00e8 che un popup pu\u00f2 essere di svariate forme e misure<\/strong>: verticale, orizzontale, tondo o arrotondato e persino con sagoma personalizzata. Inoltre, non deve necessariamente apparire al centro dello schermo ma pu\u00f2 anche mostrarsi lateralmente, a schermo pieno, a met\u00e0 schermo, in un angolo, in basso oppure in alto.<\/p>\n\n\n\n

Come scegliere quello ideale<\/h3>\n\n\n\n

Quale tipologia scegliere? Beh, questo dipende da te e dal proposito del popup stesso. Ad esempio, se l’intento \u00e8 quello di proporre un’offerta imperdibile, preferirai metterlo ben in evidenza. Potresti utilizzare un overlay scuro per coprire il fondo e posizionare un popup di discrete dimensioni al centro della pagina. Se, invece, lo scopo del popup \u00e8 quello di mostrare un avviso di secondaria importanza, potresti optare per un banner pi\u00f9 piccolo su un lato o un angolo della pagina, senza utilizzare un overlay per lo sfondo.<\/p>\n\n\n\n

Comunque, scorrendo i modelli disponibili nella libreria di Elementor, potrai farti un’idea delle infinite possibilit\u00e0 che hai a disposizione per creare un popup originale e accattivante<\/strong>. Inoltre, ti renderai conto di quanto sia facile e veloce personalizzarlo secondo il tuo gusto e le tue necessit\u00e0.<\/p>\n\n\n\n

Prima di scegliere il modello da inserire, puoi anche cliccare sopra l’immagine per vedere un’anteprima ingrandita del popup. Una volta scelto il template, clicca su INSERISCI TEMPLATE<\/strong>.<\/p>\n\n\n\n

\"Popup<\/figure>\n\n\n\n

A questo punto potrai vedere apparire nel page builder il template da te scelto. Ora, non ci resta che modificarlo a piacere.<\/p>\n\n\n\n

Per rendere il popup attraente, puoi personalizzare colori, font, l’immagine di sfondo, l’animazione e tantissimo altro.<\/p>\n\n\n\n

\"Creare<\/figure>\n\n\n\n

Ed ecco che nel giro di pochi minuti abbiamo personalizzato il nostro popup nei colori e nei contenuti. <\/p>\n\n\n\n

Al fine di non prolungare eccessivamente l’articolo, rimando a questo punto della guida WordPress + Elementor<\/a> per maggiori dettagli su come personalizzarne la grafica, il responsive e, in generale, come utilizzare il page builder Elementor.<\/p>\n\n\n\n

Controllo delle impostazioni<\/h3>\n\n\n\n

Specie se si \u00e8 partiti da un template della libreria, \u00e8 bene ricordarsi di controllare le impostazioni del popup<\/strong>. Per farlo, clicca sulla rotellina nell’angolo in basso a sinistra del page builder.<\/p>\n\n\n\n

Nel pannello di sinistra, nella tab IMPOSTAZIONI<\/strong> puoi gestire le impostazioni generali del layout, come larghezza, posizione, sovrapposizione, animazioni, pulsante di chiusura. Nella tab STILE<\/strong>, puoi personalizzare gli stili generali del popup, come sfondo, bordo e ombra riquadro. Infine, nella tab AVANZATO<\/strong>, sono presenti altre opzioni importanti, come la chiusura automatica del popup dopo tot secondi o il prevenirne la chiusura qualora l’utente cliccasse all’esterno del popup.<\/p>\n\n\n\n

\"Impostazioni<\/figure>\n\n\n\n

Pubblicazione del popup<\/h2>\n\n\n\n

Quando ritieni che il popup sia pronto per la pubblicazione, procedi cliccando il tasto PUBBLICA<\/strong>. Si aprir\u00e0 una finestra relativa alle impostazioni di pubblicazione<\/strong>.<\/p>\n\n\n\n

Apertura automatica del popup<\/h3>\n\n\n\n

Se desideri che il popup appaia in modo automatico<\/strong> durante la navigazione dell’utente, dovrai seguire una configurazione suddivisa in tre semplici passaggi:<\/p>\n\n\n\n