Come progettare barre adesive per le pagine dei prodotti con i moduli Woo di Divi

Pubblicato: 2019-10-16

Le Sticky Bar continuano ad essere un elemento popolare nel web design. Sono ottimi per aumentare le conversioni mantenendo i CTA in prima linea senza essere invadenti come i popup.

In questo caso d'uso, progetteremo una barra adesiva per i prodotti WooCommerce utilizzando i moduli Woo di Divi. La barra adesiva può includere qualsiasi modulo Divi. Per questo tutorial, creeremo una barra adesiva che include il pulsante "Aggiungi al carrello" in modo che rimanga visibile mentre l'utente scorre la pagina. Inoltre, creeremo anche una barra di notifica del carrello adesiva in modo che gli utenti vedranno sempre il pulsante "Visualizza carrello" una volta che si fa clic sul pulsante "Aggiungi al carrello".

Questi elementi della barra appiccicosa aiuteranno ad aumentare le conversioni mantenendo in vista quei CTA cruciali.

Iniziamo!

Sbirciata

Ecco una rapida occhiata a ciò che progetteremo in questo tutorial sui casi d'uso.

Scarica GRATUITAMENTE il layout delle barre adesive

Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il layout nella tua pagina, estrai semplicemente il file zip e trascina il file json nel Divi Builder.

Andiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

Se non lo hai ancora fatto, installa e attiva il tema Divi installato (o il plug-in Divi Builder se non utilizzi il tema Divi).
Installa e attiva il plugin WooCommerce. Se è la prima volta che configuri WooCommerce, dovrai eseguire la procedura guidata di configurazione di base per preparare il tuo negozio. Una volta fatto, sei pronto per aggiungere i tuoi nuovi prodotti.
Crea alcuni prodotti se non ne hai ancora. Per maggiori informazioni su come aggiungere un nuovo prodotto, dai un'occhiata a questo tutorial.

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Parte 1: Progettare la Sticky Bar su una pagina del prodotto

Utilizzeremo un prodotto semplice finto per questo esempio, quindi è necessario creare un nuovo prodotto o modificare un prodotto esistente. Le informazioni sul prodotto non sono importanti per questo tutorial, assicurati solo di avere le nozioni di base come il titolo del prodotto, il prezzo, la descrizione, l'immagine, ecc...

Una volta che hai un prodotto semplice pronto, fai clic per modificare il prodotto sul back-end e distribuire Divi Builder sulla pagina del prodotto. Sotto Divi Page Settings, seleziona "Fullwidth" per il layout di pagina e quindi fai clic su "Build On the Front End".

La pagina del prodotto dovrebbe essere simile a questa.

Sotto la prima riga contenente i breadcrumb e l'avviso del carrello, aggiungi una nuova riga con un layout a una colonna.

Impostazioni riga

Prima di aggiungere qualsiasi modulo, aggiorna le impostazioni della riga come segue:

Colore di sfondo: #333333
Usa larghezza grondaia personalizzata: S
Larghezza grondaia: 1
Larghezza: 100%
Imbottitura: 0px in alto, 0px in basso

Rendere la riga appiccicosa

Per rendere permanente la riga, aggiungi il seguente CSS personalizzato all'elemento principale per desktop:

position: -webkit-sticky !important;
position: sticky !important;
top: 50px;

Quindi aggiungi il seguente CSS allo stesso elemento principale per la visualizzazione del tablet:

top: 0px;

Se non hai familiarità con la proprietà css “position: sticky”, fondamentalmente è una sorta di blend tra la posizione fissa e la posizione relativa in cui l'elemento (in questo caso la riga) scorrerà insieme al suo contenitore fino a raggiungere una posizione designata nella parte superiore o inferiore della pagina (o l'offset specificato). In questo esempio, stiamo impostando l'offset su 50 px dalla parte superiore della finestra del browser (lasciando spazio per l'altezza di un'intestazione fissa predefinita sul desktop). Quindi su tablet, l'offset viene modificato in "top: 0px" per correggere la riga/barra adesiva nella parte superiore del browser sui dispositivi mobili.

NOTA: Ignora gli errori che vedi quando aggiungi il CSS alla casella. Il codice funzionerà bene.

Dopo che hai il CSS, aggiorna l'indice Z come segue:

Indice Z: 10

Ora la riga diventerà appiccicosa mentre l'utente scorre verso il basso la pagina del prodotto.

Colonna CSS personalizzata

Prima di iniziare a riempire la riga con il contenuto, dobbiamo assicurarci che il modulo all'interno della nostra riga a una colonna si allinei orizzontalmente anziché verticalmente. Possiamo usare un semplice trucco CSS per farlo con la proprietà flex. Apri le impostazioni della colonna e aggiungi il seguente CSS personalizzato all'elemento principale:

display:flex;
align-items:center;

Questo si prende cura del nostro design a righe adesive. Ora, dobbiamo riempire la riga con del contenuto.

Aggiungi titolo Woo

Aggiungi un nuovo modulo titolo Woo alla colonna della riga adesiva.

Quindi aggiorna le impostazioni come segue:

Colore del testo del titolo: #ffffff
Dimensione del testo del titolo: 28 px (desktop), 20 px (tablet), 16 px (telefono)
Larghezza: 30%
Imbottitura: 2vw sopra, 2vw sotto, 2vw sinistra, 2vw destra

Aggiungi prezzo Woo

Quindi, aggiungi un modulo del prezzo woo facendo clic sull'icona più grigia che appare quando passi con il mouse sul modulo del titolo woo che hai appena creato.

Quindi aggiorna le impostazioni di Woo Price come segue:

Dimensioni testo prezzo: 28 px (desktop), 20 px (tablet), 16 px (telefono)
Larghezza: 30%
Imbottitura: 2vw sopra, 2vw sotto, 2vw sinistra, 2vw destra
Larghezza bordo destro: 1px
Colore bordo destro: #777777
Larghezza bordo sinistro: 1px
Colore bordo sinistro: #777777

Aggiungi Woo Aggiungi al modulo del carrello

Per l'ultimo contenuto, aggiungi un modulo Woo Add to Cart subito dopo il modulo Woo Price.

Quindi aggiorna le impostazioni come segue:

Semplifica l'elemento Aggiungi al carrello nascondendo l'importo delle scorte e il campo della quantità sul dispositivo mobile.

Mostra campo quantità: OFF (tablet)
Mostra Stock: OFF

Allineamento del testo: a destra
Usa stili personalizzati per il pulsante: S
Dimensione del testo del pulsante: 18 px (tablet), 14 px (telefono)
Colore del testo del pulsante: #ffffff
Colore di sfondo del pulsante: #7ac5af
Larghezza bordo pulsante: 0px

Larghezza: 40%
Imbottitura: 2vw sinistra, 2vw destra

Risultato

Ora diamo un'occhiata a come appare nella pagina live.

Ed eccolo sul cellulare.

Parte 2: creazione di una barra adesiva per l'avviso del carrello

La creazione di una barra adesiva per l'avviso del carrello in realtà richiede solo pochi semplici passaggi, ma il risultato può essere estremamente efficace. Come forse già saprai, l'avviso del carrello viene visualizzato solo dopo che un utente fa clic sul pulsante "Aggiungi al carrello". Ma è il prossimo passaggio cruciale nel processo di acquisto che porta gli utenti alla pagina di pagamento. Quindi, quando l'avviso del carrello viene visualizzato come una barra adesiva nella parte inferiore della finestra, è più evidente per l'utente.

Per creare la barra adesiva dell'avviso del carrello, crea prima una nuova riga a una colonna nella parte inferiore della pagina del prodotto. Quindi aggiorna le impostazioni della riga come segue:

Larghezza: 100%
Imbottitura: 0px in alto, 0px in basso

Quindi rendi la riga appiccicosa aggiungendo il seguente CSS personalizzato all'elemento principale:

position: -webkit-sticky !important;
position: sticky !important;
bottom: 0px;

NOTA: come abbiamo fatto in precedenza, puoi ignorare gli errori che compaiono quando aggiungi la proprietà position: sticky.

Ciò farà sì che la riga rimanga nella parte inferiore della finestra durante lo scorrimento verso l'alto.

Quindi aggiorna l'indice z per mantenerlo in prima linea come segue:

Indice Z: 10

Aggiungi il modulo di avviso del carrello

Una volta creata la riga, aggiungi il Woo Cart Notice Module alla riga e aggiorna le impostazioni come segue:

Testo Dimensione testo (telefono): 15px
Margine: 0em inferiore

Questo è tutto! Sta a te decidere se cancellare o meno l'elemento di avviso del carrello predefinito nella parte superiore della pagina, ma potrebbe essere una buona idea lasciarlo per migliori conversioni.

Risultato finale

Ecco il risultato finale con le due barre adesive in posizione.

Desktop

Mobile

Pensieri finali

Speriamo che questo post ci aiuti a capire come creare barre adesive per le nostre pagine dei prodotti in Divi. Abbiamo spiegato come creare una barra adesiva che include il titolo del prodotto, il prezzo e il pulsante Aggiungi al carrello. E abbiamo anche mostrato come creare una barra adesiva per l'avviso del carrello. Entrambi dovrebbero aiutare il processo di acquisto e aumentare le conversioni. E non abbiamo nemmeno bisogno di un plugin!

Sentiti libero di esplorare nuovi modi per utilizzare le barre adesive della pagina del prodotto sul tuo sito.

Non vediamo l'ora di sentirti nei commenti.

Saluti!