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, c'è di più nella creazione di una pagina di e-commerce di successo rispetto alla semplice aggiunta di 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
• Preferenze di pubblicazione

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 i 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 a quanto segue:

Dopo aver cliccato su ADD NEW POPUP (che è abbastanza autoesplicativo), ti verrà chiesto di dargli un nome e poi di selezionare un modello dagli esempi amp visualizzati. Sono disponibili vari modelli per molteplici scopi; alcuni sono appropriati per gli annunci, altri per promuovere uno sconto, altri sono ideali per incoraggiare gli utenti a registrarsi per qualcosa. Ci sono anche ex amp les per avvisare gli utenti di utilizzo 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 è organizzato 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. Puoi modificare e personalizzare singolarmente ogni elemento 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 della tela stessa. Sono i seguenti:

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

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

Inoltre, puoi personalizzare diverse altre impostazioni importanti.

Nella scheda Impostazioni sono disponibili le seguenti opzioni :

• Modificare l'altezza e la larghezza dell'immagine.
• Cambiare l'orientamento verticale o orizzontale dell'oggetto (ad es amp le, si potrebbe risolvere il problema alla parte superiore o inferiore per creare una barra di notifica)
• Prendere una decisione sull'opportunità o meno di utilizzare un overlay (questo consente, ad es amp le, in grigio background quando il popup è attivo)
• Disabilita il pulsante di chiusura sul tuo browser.
• Includere un'animazione per l'ingresso.

Nella scheda Stile puoi eseguire le seguenti operazioni :

• Puoi cambiare il colore di sfondo, renderlo un gradiente o utilizzare un'immagine come sfondo.
• Se l'overlay è abilitato, configuralo.
• Nel caso in cui il pulsante di chiusura sia abilitato, è necessario configurarlo.

Infine, la scheda Avanzate contiene alcune impostazioni di importazione varie che 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 sull'overlay o premendo il tasto Esc, è possibile impedire la chiusura della finestra.

• Disabilita la possibilità di scorrere la pagina verso il basso.
• Evita più popup (se hai indirizzato più popup alla stessa pagina, questo eviterà che i tuoi visitatori si infastidiscano).

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 fisso in modo permanente nell'angolo in basso a destra. Usando un trigger di scorrimento in combinazione con un'animazione di ingresso, puoi ottenere un piacevole e discreto effetto slide-in.

Puoi anche creare popup utilizzando il visual builder in Elementor

Non appena hai completato le impostazioni di base del popup, 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 design finale. Il widget Modulo è l'unica cosa che devi assolutamente includere perché è l'unico che ti consente di creare il tuo modulo di attivazione della posta elettronica.

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

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 utili widget che possono aiutarti ad aumentare il tasso di conversione.

Preferenze di pubblicazione

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. Come un'illustrazione:

È possibile specificare le condizioni in cui si desidera che appaia 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 su 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 solo mostrare il popup quando un visitatore viene indirizzato al tuo sito Web da uno specifico URL. Ce ne sono anche altri. Queste opzioni possono migliorare significativamente l'esperienza utente del tuo popup, consentendoti di progettarlo con vera integrità e considerazione per i tuoi utenti.

Completa le impostazioni nel modo che desideri, quindi fai clic su SALVA E CHIUDI. Verrà come amp le di ciò che il popup sarà simile dopo aver fatto clic su questo pulsante.

I popup possono essere personalizzati e possono essere aggiunti contenuti dinamici.

Porta le cose al livello successivo, vero? 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 PUBBLICARE ancora una volta.

Ok, è qui che le cose iniziano a farsi interessanti. Possiamo usare Elementor per recuperare i dati dinamici dalla nostra installazione di 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 eseguendo 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, quindi fai clic su Dinamico nella barra laterale:

Abbiamo un'ampia varietà di opzioni tra cui scegliere, tra cui informazioni dal post stesso, informazioni dal sito nel suo insieme, informazioni sui media, informazioni sull'autore e persino informazioni su WooCommerce. Selezioneremo un titolo del 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 specificare alcuni prima del testo, alcuni dopo il testo e un testo di fallback (se i dettagli del database non vengono recuperati correttamente).

Quindi duplichiamo questo processo per il pulsante, che mostrerà il prezzo del prodotto. Possiamo esprimere 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, permettendoci di specificare che vogliamo che il popup appaia solo sulle pagine di WooCommerce. Imposteremo il timer su 15 secondi di inattività come trigger. Ecco come è andata a finire:

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