Sticky Bars continuano ad essere una parte popolare del web design. Sono ottimi per incentivare le conversioni mantenendo le call to action all'avanguardia senza essere invadenti come i popup.
In questo caso d'uso, progetteremo una barra adesiva per i prodotti WooCommerce utilizzando i moduli Woo da 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 quando l'utente scorre la pagina verso il basso. Inoltre, creeremo anche una barra di notifica del carrello in modo che gli utenti vedranno sempre il pulsante "visualizza carrello" una volta fatto clic sul pulsante "aggiungi al carrello".
Questi elementi appiccicosi della barra aiuteranno ad aumentare le conversioni tenendo presenti questi CTA cruciali.
Panoramica
Ecco un'anteprima di ciĂ² che progetteremo in questo tutorial.
Parte 1: design della barra adesiva su una pagina del prodotto
Per questo esempio utilizzeremo un semplice prodotto simulato, quindi è necessario creare un nuovo prodotto o modificare un prodotto esistente. Le informazioni sul prodotto non sono importanti per questo tutorial. Assicurati di avere le basi come titolo del prodotto, prezzo, descrizione, immagine, ecc.
Una volta che un prodotto semplice è pronto, fai clic per modificare il prodotto sul back-end e distribuirlo Divi Costruttore sulla pagina del prodotto. In Impostazioni pagina Divi, seleziona "Larghezza intera" per il layout, quindi fai clic su "Crea su fronte".
La pagina del prodotto dovrebbe apparire così.
Sotto la prima riga contenente i breadcrumb e l'avviso del carrello, aggiungi una nuova riga con un layout a una colonna.
Impostazioni linea
Prima di aggiungere moduli, aggiornare le impostazioni della linea come segue:
- Colore di sfondo: # 333333
- Utilizzare una larghezza della grondaia personalizzata: SĂŒ
- Larghezza della grondaia: 1
- Larghezza: 100%
- Tappezzeria: 0px Top, 0px Bottom
Rendi la linea appiccicosa
Per rendere la linea appiccicosa, aggiungi il seguente codice CSS personalizzato all'elemento desktop principale:
position: -webkit-sticky !important; position: sticky !important; top: 50px;
Quindi aggiungi il seguente codice CSS allo stesso elemento principale per il display del tablet:
top: 0px;
Se non hai familiarità con la proprietà css "position: sticky", questaèuna specie di mix tra la posizione fissa e la posizione relativa dove l'elemento (in questo caso la linea) scorrerà con il suo container fino a raggiungere una posizione designata nella parte superiore o inferiore della pagina (o nell'offset specificato). In questo esempio, impostiamo l'offset a 50px dalla parte superiore della finestra del browser (lasciando spazio all'altezza di un'intestazione fissa predefinita sul desktop). Quindi, su un tablet, l'offset viene modificato in "top: 0px" per correggere la linea / barra adesiva nella parte superiore del browser su dispositivo mobile.
Nota: ignora gli errori visualizzati quando aggiungi CSS alla casella. Il codice funzionerĂ bene.
Dopo aver eseguito CSS, aggiorna l'indice Z come segue:
- Indice Z: 10
Ora la linea diventerĂ appiccicosa mentre l'utente scorre la pagina del prodotto.
Colonna CSS personalizzata
Prima di iniziare a riempire la riga con 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 della linea adesiva. Ora dobbiamo riempire la riga con contenuto.
Aggiungi un titolo Woo
Aggiungi un nuovo modulo del titolo Woo alla colonna della linea adesiva.
Quindi aggiornare le impostazioni come segue:
- Titolo del testo a colori: #ffffff
- Dimensione titolo testo: 28px (desktop), 20px (tablet), 16px (telefono)
- Larghezza: 30%
- Tappezzeria: 2vw in alto, 2vw in basso, 2vw a sinistra, 2vw a destra
Aggiungi il prezzo Woo
Quindi aggiungi un modulo prezzi Woo facendo clic sull'icona grigia piĂ¹ che appare quando passi con il mouse sopra il modulo titolo woo che hai appena creato.
Quindi aggiorna le impostazioni di Woo Price come segue:
- Prezzo Dimensioni testo: 28px (desktop), 20px (tablet), 16px (telefono)
- Larghezza: 30%
- Tappezzeria: 2vw in alto, 2vw in basso, 2vw a sinistra, 2vw a destra
- Larghezza del bordo destro: 1px
- Colore del bordo destro: #777777
- Larghezza del bordo sinistro: 1px
- Colore bordo sinistro: #777777
Aggiungi un modulo Aggiungi al carrello
Per l'ultimo elemento di contenuto, aggiungi un modulo Woo Aggiungi al carrello subito dopo il modulo Woo Prezzo.
Quindi aggiornare le impostazioni come segue:
Semplifica l'elemento Aggiungi al carrello nascondendo la quantitĂ di inventario e il campo quantitĂ sui dispositivi mobili.
- Visualizza il campo quantitĂ : OFF (tablet)
- Mostra azione: OFF
- Allineamento del testo: a destra
- Usa stili personalizzati per Button: SĂŒ
- Dimensione testo pulsante: 18px (tablet), 14px (telefono)
- Colore testo pulsante: #ffffff
- Colore di sfondo del pulsante: #0c71c3
- Larghezza del bordo del pulsante: 0px
- Larghezza: 40%
- Tappezzeria: 2vw a sinistra, 2vw a destra
Risultato
Vediamo come appare sulla pagina live.
Parte 2: creare una barra di notifica del carrello
La creazione di una barra di notifica del carrello adesiva richiede in realtĂ alcuni semplici passaggi, ma il risultato puĂ² essere estremamente efficace. Come forse giĂ saprai, l'avviso del carrello viene visualizzato solo quando 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 appare come una barra adesiva nella parte inferiore della finestra, è piĂ¹ visibile all'utente.
Per creare la barra adesiva di notifica del carrello, creare prima una nuova riga di una colonna nella parte inferiore della pagina del prodotto. Quindi aggiorna le impostazioni della riga come segue:
- Larghezza: 100%
- Tappezzeria: 0px nella parte superiore, 0px nella parte inferiore
Rendi la linea 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.
La riga rimarrĂ nella parte inferiore della finestra quando si scorre verso l'alto.
Quindi aggiorna l'indice z per mantenerlo in primo piano, in questo modo:
- Indice Z: 10
Aggiungi il modulo di notifica del carrello
Dopo aver creato la linea, aggiungi il modulo Woo Cart Notice alla linea e aggiorna le impostazioni come segue:
- Dimensioni del testo (telefono): 15px
- Margine: 0em in basso
Questo è tutto ! Se vuoi o meno rimuovere l'elemento di avviso del carrello predefinito nella parte superiore della pagina dipende da te, ma potrebbe essere una buona idea lasciarlo per conversioni migliori.
Risultato finale
Ecco come potrebbe apparire il risultato finale.
Considerazioni finali
Speriamo che questo articolo ci aiuti a capire come creare barre adesive per le nostre pagine dei prodotti in Divi. Abbiamo spiegato come creare una barra adesiva che includa il titolo del prodotto, il prezzo e il pulsante Aggiungi al carrello. E abbiamo anche mostrato come creare una barra adesiva. Entrambi dovrebbero semplificare il processo di acquisto e aumentare le conversioni. E non abbiamo nemmeno bisogno di un plugin!
