Crea popup Elementor in WooCommerce

Siamo tutti grandi fan di WooCommerce. È semplice da configurare e personalizzare. Nel pacchetto sono incluse funzionalità che semplificano la creazione e la gestione di un negozio di e-commerce dinamico e potente.

Tuttavia, per creare una pagina di e-commerce di successo c'è molto di più che semplicemente aggiungere prodotti popolari. Tutte le pagine devono essere anche visivamente accattivanti. Più il tuo sito web è visivamente accattivante e facile da usare, maggiore è la probabilità di attirare più clienti.

• Configurazione della finestra popup
• Puoi anche creare popup utilizzando il visual builder in Elementor
• Pubblica preferenze

Sebbene WooCommerce crei il carrello degli acquisti e la pagina di pagamento per te quando crei il tuo sito, Elementor li rende più attraenti personalizzandoli.

Hai la possibilità di ridisegnarli o ricominciare dall'inizio. Puoi ripetere la procedura per tutte le altre pagine del tuo sito web.

Creando una calorosa pagina di ringraziamento e aggiornando le pagine Il mio account e Termini di servizio, puoi conquistare i cuori e le menti dei tuoi clienti.

La funzionalità di trascinamento della selezione di Elementor, combinata con questo tutorial, ti garantirà un'esperienza senza problemi durante la creazione delle tue pagine.

Dopo aver configurato il tuo negozio wooCommerce, potresti voler renderlo più attraente per i tuoi visitatori e clienti. L'aggiunta di popup dà all'utente un'altra impressione e un nuovo desiderio di rimanere nel tuo negozio.

 Per creare un popup, vai su Modelli > Popup nella barra dei menu. Ti verrà presentato un elenco di tutti i tuoi popup e, se non ne hai ancora creato uno, vedrai qualcosa di simile al seguente:

Dopo aver fatto clic su AGGIUNGI NUOVO POPUP (che è abbastanza autoesplicativo), ti verrà chiesto di dargli un nome e quindi selezionare un modello dagli amp predefiniti visualizzati. Sono disponibili vari modelli per molteplici scopi; alcuni sono adatti per gli annunci, altri per promuovere uno sconto, altri ancora sono ideali per incoraggiare gli utenti a iscriversi a qualcosa. Esistono anche amp per avvisare gli utenti dell'uso dei cookie o di altre notifiche GDPR. Non appena hai trovato qualcosa che ti piace, fai clic su di esso per vedere un'anteprima più grande, quindi premi il pulsante Inserisci.

Verrai indirizzato al generatore di popup nel backend di WordPress dopo aver fatto clic su questo pulsante.

Se hai lavorato con Elementor in passato, ti sentirai come a casa con l'interfaccia, le opzioni e il modo in cui tutto è strutturato per te. È essenzialmente lo stesso processo della creazione di modelli di pagina Elementor in WordPress.

Sul lato destro dello schermo c'è la tela principale, che mostra un'anteprima di ciò su cui stai lavorando attualmente. Puoi modificare e personalizzare ciascun elemento individualmente selezionandolo e selezionando Modifica > Modifica elementi. Al termine, vedrai i controlli e le preferenze visualizzati nella barra laterale a sinistra, insieme all'opzione per pubblicare il tuo lavoro.

Configurazione della finestra popup

 Questo è il momento in cui dovresti vedere un'anteprima del tuo popup: una lavagna vuota o il modello che hai scelto.

Le Impostazioni popup, sempre aperte per impostazione predefinita, consentono di personalizzare il funzionamento dell'area popup stessa. Sono i seguenti:

• È qui che vorrai trascorrere la maggior parte del tempo perché è dove potrai creare diversi tipi di popup. In altre parole, regolando queste impostazioni, sarai in grado di ottenere i seguenti effetti:

• I popup modali sono un tipo di finestra modale.
• Slide-in, barre di notifica e così via.

Inoltre, puoi personalizzare molte altre impostazioni importanti.

Nella Impostazioni :

• Modifica l'altezza e la larghezza dell'immagine.
• Modificare l'orientamento verticale o orizzontale dell'oggetto (ad amp , potresti fissarlo in alto o in basso per creare una barra di notifica)
• Decidi se utilizzare o meno un overlay (questo ti consente, ad amp , di oscurare lo sfondo quando il popup è attivo)
• Disabilita il pulsante di chiusura del tuo browser.
• Includere un'animazione per l'ingresso.

Puoi eseguire le seguenti operazioni nella Stile :

• Puoi modificare il colore dello sfondo, impostarlo come gradiente o utilizzare un'immagine come sfondo.
• Se l'overlay è abilitato, configuralo.
• Nel caso in cui tu abbia abilitato il pulsante di chiusura, devi configurarlo.

Infine, la scheda Avanzate contiene alcune impostazioni di importazione varie che ti consentono di eseguire operazioni come le seguenti:

• Visualizza il pulsante di chiusura o fai in modo che il popup si chiuda automaticamente dopo un certo periodo di tempo.
• Facendo clic sulla sovrapposizione o premendo il tasto Esc è possibile impedire la chiusura della finestra.

• Disabilita la possibilità di scorrere la pagina verso il basso.
• Evita popup multipli (se hai indirizzato più popup alla stessa pagina, ciò impedirà ai tuoi visitatori di infastidirsi).

Per darti un'idea di come queste impostazioni influenzeranno il tuo popup, ecco come appare quando cambi la posizione nell'angolo in basso a destra della finestra:

Dai un'occhiata a come il popup è ora fissato in modo permanente nell'angolo in basso a destra. Usando un trigger di scorrimento insieme a un'animazione di ingresso, puoi ottenere un effetto slide-in piacevole e discreto.

Puoi anche creare popup utilizzando il visual builder in Elementor

Non appena hai completato le Impostazioni popup di base, puoi iniziare a progettare il contenuto effettivo del tuo popup trascinando e rilasciando gli elementi nell'interfaccia visiva di trascinamento della selezione.

Puoi utilizzare qualsiasi widget Elementor che desideri, il che ti dà un grande controllo sul progetto finale. Il widget Modulo è l'unica cosa che devi assolutamente includere perché è l'unico che ti consente di creare il tuo modulo di attivazione e-mail.

Con il widget Modulo, hai il controllo completo sui campi che desideri offrire, nonché sul testo e sull'aspetto del pulsante di invio. Per amp :

Oltre a ciò, ti consiglio vivamente di familiarizzare con tutti i widget e le opzioni di progettazione di Elementor.

Come affermato in precedenza, hai un grande controllo sull'aspetto del tuo sito web e hai anche accesso ad alcuni widget utili che possono aiutarti ad aumentare il tasso di conversione.

Pubblica preferenze

Quando sarai soddisfatto di ciò che hai creato, vorrai condividerlo con il mondo. Dopo aver premuto il pulsante PUBBLICA, ti verranno presentate una serie di domande. A titolo illustrativo:

È possibile specificare le condizioni in cui si desidera che venga visualizzato il popup? Puoi scegliere quali pagine includere o escludere dai risultati di ricerca. Puoi avere tutte le condizioni che desideri.

Qual è, allora, l'evento che fa apparire il popup? Puoi scegliere se visualizzare o meno il popup immediatamente al caricamento della pagina, allo scorrimento o quando l'utente scorre fino a un elemento specifico, tra le altre possibilità. Tutte queste opzioni hanno le loro impostazioni, consentendo una personalizzazione completa.

Ultimo ma non meno importante, vedrai alcune regole avanzate, come mostrare il popup solo ai visitatori di ritorno, mostrare il popup solo un determinato numero di volte o forse mostrare il popup solo quando un visitatore viene indirizzato al tuo sito web da uno specifico URL. Ce ne sono anche alcuni altri. Queste opzioni possono migliorare in modo significativo l'esperienza utente del tuo popup, permettendoti di progettarlo con vera integrità e considerazione per i tuoi utenti.

Completa le impostazioni nel modo desiderato, quindi fai clic su SALVA E CHIUDI. Ti verrà mostrato un amp di come apparirà il tuo popup dopo aver fatto clic su questo pulsante.

I popup possono essere personalizzati e ad essi è possibile aggiungere contenuto dinamico.

Portiamo le cose al livello successivo, va bene? Fino a questo punto, abbiamo selezionato un modello e ottimizzato una o due sedute, e questo è tutto. Considera lo scenario in cui vogliamo personalizzare ulteriormente il nostro popup.

Siamo tornati alla fase AGGIUNGI NUOVO POPUP del processo, dove possiamo specificare un titolo e scegliere ancora una volta un modello.

Successivamente, possiamo selezionarlo, apportare le modifiche necessarie alle impostazioni di base e premere ancora una volta PUBBLICA.

Ok, è qui che le cose iniziano a farsi interessanti. Possiamo utilizzare Elementor per recuperare dati dinamici dalla nostra installazione WordPress e inserirli nel popup stesso nel nostro popup. Possiamo includere informazioni come il nome dell'utente, il titolo della pagina e così via.

Considera il seguente scenario: stiamo utilizzando WooCommerce e vogliamo informare un utente che è disponibile uno sconto sul prodotto specifico che sta attualmente visualizzando. Per iniziare, seleziona una sezione di testo dal modello e poi fai clic su Dinamico nella barra laterale:

Abbiamo un'ampia varietà di opzioni tra cui scegliere, comprese le informazioni dal post stesso, le informazioni dal sito nel suo insieme, le informazioni sui media, le informazioni sull'autore e persino le informazioni su WooCommerce. Selezioneremo un titolo di prodotto e verrà aggiunto al nostro blocco di contenuti di testo come risultato della nostra selezione.

Supponiamo che i dettagli del database non vengano recuperati correttamente. In tal caso, è possibile specificarne alcuni prima del testo, alcuni dopo il testo e un testo di riserva (se i dettagli del database non vengono recuperati correttamente).

Quindi duplichiamo questo processo per il pulsante, che visualizzerà il prezzo del prodotto. Possiamo formulare il testo precedente come ACQUISTA ORA PER per fornirci un invito all'azione convincente:

Possiamo anche fare un ulteriore passo avanti e utilizzare l'immagine del prodotto come sfondo della finestra popup stessa.

Quando premiamo PUBBLICA, ci vengono presentate ancora una volta le impostazioni di pubblicazione, che ci consentono di specificare che vogliamo che il popup appaia solo sulle pagine WooCommerce. Imposteremo il timer su 15 secondi di inattività come trigger. Ecco come è andata alla fine:

Anche se il design potrebbe essere migliorato, puoi vedere che stiamo visualizzando il nome del prodotto, il suo prezzo e un'immagine del prodotto come sfondo del popup. Brillante!