Come presentare in modo creativo prodotti popolari sulla tua pagina di destinazione Divi
Pubblicato: 2019-11-07Quando mostri prodotti popolari su una landing page, non è solo importante scegliere i prodotti giusti, ma anche mostrarli in modo attraente. Con i nuovi moduli WooCommerce di Divi, ci sono cadute in grembo innumerevoli nuove possibilità di design. Per aiutarti a trarre ispirazione, ricreeremo un design di prodotto popolare bello ed elegante che puoi utilizzare per la tua prossima pagina di destinazione Divi. Potrai anche scaricare gratuitamente il file JSON!
Andiamo ad esso.
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Desktop
Statico
Passa il mouse
Mobile
Scarica GRATUITAMENTE il layout dei prodotti più popolari
Per mettere le mani sul layout dei prodotti popolari gratuiti, devi 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 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!
Iniziamo a ricreare!
Aggiungi nuova sezione
Spaziatura
Inizia aggiungendo una sezione normale a una nuova pagina o a una esistente. Apri le impostazioni della sezione e regola di conseguenza i valori di riempimento superiore e inferiore:
- Imbottitura superiore: 8vw
- Imbottitura inferiore: 8vw
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Dimensionamento
Senza aggiungere ancora alcun modulo, apri le impostazioni di riga e modifica le impostazioni di dimensionamento della riga.
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
- Larghezza: 85vw
- Larghezza massima: 100%
Aggiungi il modulo immagine Woo alla colonna
Contenuto dinamico
È ora di iniziare ad aggiungere moduli! Il primo modulo di cui abbiamo bisogno è il modulo Woo Image. Seleziona il prodotto che vuoi visualizzare.
Immagine
Passa alla scheda Design e modifica le impostazioni dell'immagine.
- Angoli arrotondati immagine: 20 px (tutti gli angoli)
- Forza sfocatura ombra scatola: 50 px
- Colore ombra: rgba(0,0,0,0.3)
Aggiungi modulo titolo Woo alla colonna
Contenuto dinamico
Il modulo successivo di cui abbiamo bisogno è il modulo Woo Title. Seleziona un prodotto a tua scelta.
Impostazioni del testo del titolo
Modifica le impostazioni del testo del titolo del modulo come segue:
- Livello titolo titolo: H3
- Carattere del titolo: Prata
- Dimensione del testo del titolo: 3vw (desktop), 5vw (tablet), 7vw (telefono)
Spaziatura
Completa le impostazioni del modulo aggiungendo alcuni valori di margine personalizzati su schermi di diverse dimensioni.
- Margine superiore: 7vw (desktop), 14vw (tablet e telefono)
- Margine inferiore: 2vw (desktop), 4vw (tablet e telefono)
- Margine sinistro: 2vw (desktop), 5vw (tablet e telefono)
- Margine destro: 2vw (desktop), 5vw (tablet e telefono)
Aggiungi il modulo di descrizione di Woo alla colonna
Contenuto dinamico
Al modulo successivo, che è il modulo di descrizione di Woo. Seleziona un prodotto a tua scelta.
Impostazioni testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo come segue:
- Carattere del testo: Montserrat
- Dimensione del testo: 0.8vw (desktop), 1.6vw (tablet), 2vw (telefono)
- Altezza riga di testo: 1,8 em
Spaziatura
Gioca anche con i valori dei margini personalizzati su diverse dimensioni dello schermo.
- Margine superiore: 2vw (desktop), 4vw (tablet e telefono)
- Margine inferiore: 2vw (desktop), 4vw (tablet e telefono)
- Margine sinistro: 2vw (desktop), 5vw (tablet e telefono)
- Margine destro: 2vw (desktop), 5vw (tablet e telefono)
Aggiungi Woo Aggiungi al carrello Modulo alla colonna
Contenuto dinamico
Proprio sotto il modulo di descrizione di Woo, aggiungeremo un modulo di aggiunta al carrello di Woo. Seleziona un prodotto a tua scelta.
Impostazioni campi predefiniti
Passa alla scheda di progettazione del modulo e modifica le impostazioni dei campi come segue:
- Colore di sfondo dei campi: #ffffff
- Colore testo campi: #3d3d3d
- Carattere dei campi: Montserrat
- Larghezza bordo campi: 0px
- Colore bordo campi: #3d3d3d
Impostazioni dei campi al passaggio del mouse
Modifica la larghezza del bordo al passaggio del mouse.
- Larghezza bordo campi: 1px
Impostazioni predefinite dei pulsanti
Successivamente apri le impostazioni del pulsante e applica uno stile al pulsante.
- Usa stili personalizzati per pulsante: Sì
- Dimensione del testo del pulsante: 1vw (desktop), 3vw (tablet), 4vw (telefono)
- Colore del testo del pulsante: #3d3d3d
- Colore di sfondo del pulsante: #FFFFFF
- Larghezza bordo pulsante: 0px
- Colore bordo pulsante: #3d3d3d
- Carattere pulsante: Prata
- Imbottitura superiore: 0.5vw
- Imbottitura inferiore: 0,5 vw
- Imbottitura sinistra: 2vw
- Imbottitura destra: 2vw
Impostazioni del pulsante al passaggio del mouse
Modifica la larghezza del bordo del pulsante al passaggio del mouse.
- Larghezza bordo pulsante: 1px
Spaziatura
Quindi, vai alla spaziatura e aggiungi alcuni valori di margine personalizzati su diverse dimensioni dello schermo.
- Margine inferiore: 7vw (desktop), 14vw (tablet e telefono)
- Margine sinistro: 2vw (desktop), 5vw (tablet e telefono)
- Margine destro: 2vw (desktop), 5vw (tablet e telefono)
Impostazioni bordo predefinite
Modifica anche le impostazioni del bordo del modulo.
- Larghezza bordo inferiore: 1px
- Colore bordo inferiore: #3d3d3d
Impostazioni bordo al passaggio del mouse
E rimuovi la larghezza del bordo al passaggio del mouse.
- Larghezza bordo inferiore: 0px
Aggiungi il modulo del prezzo di Woo alla colonna
Contenuto dinamico
L'ultimo modulo di cui abbiamo bisogno nella colonna è un modulo prezzo Woo. Seleziona un prodotto a tua scelta.
Impostazioni del testo del titolo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo del prezzo di conseguenza:
- Carattere del testo del prezzo: Montserrat
- Peso del carattere del testo del prezzo: leggero
- Colore testo prezzo: #333333
- Dimensioni testo prezzo: 2vw (desktop), 4vw (tablet), 6vw (telefono)
- Altezza linea prezzo: 1,8 em
Spaziatura
Modifica anche i valori dei margini.
- Margine inferiore: 5vw
- Margine sinistro: 2vw (desktop), 5vw (tablet e telefono)
- Margine destro: 2vw (desktop), 5vw (tablet e telefono)
Clona colonna due volte
Una volta completata la colonna e tutti i moduli in essa contenuti, puoi clonare l'intera colonna due volte.
Cambia la struttura della colonna della riga
Modifica successivamente la struttura delle colonne della riga.
Cambia tutto il contenuto dinamico
Continua modificando tutti i contenuti dinamici nelle colonne 2 e 3 con altri prodotti di tua scelta.
Cambia la spaziatura del modulo della colonna 2
Modulo titolo Woo
I moduli nella seconda colonna necessitano di ulteriori modifiche alla spaziatura. Inizia con il modulo titolo Woo.
- Margine sinistro: 5vw (tutti i dispositivi)
- Margine destro: 5vw (tutti i dispositivi)
Modulo di descrizione di Woo
Successivamente, cambia le impostazioni di spaziatura del modulo di descrizione di Woo.
- Margine superiore: 4vw (tutti i dispositivi)
- Margine inferiore: 4vw (tutti i dispositivi)
- Margine sinistro: 5vw (tutti i dispositivi)
- Margine destro: 5vw (tutti i dispositivi
Woo Modulo Aggiungi al carrello
Passa alle impostazioni di spaziatura del modulo Woo Add To Cart.
- Margine sinistro: 5vw (tutti i dispositivi)
- Margine destro: 5vw (tutti i dispositivi)
Modulo prezzo Woo
E completa i moduli della colonna 2 modificando anche le impostazioni di spaziatura del modulo Woo Price.
- Margine sinistro: 5vw (tutti i dispositivi)
- Margine destro: 5vw (tutti i dispositivi)
Stili di colonna
Tutte le colonne
Colore di sfondo
Ora che abbiamo tutti i nostri moduli a posto, possiamo iniziare a definire lo stile delle colonne. Ognuna delle colonne ha bisogno di un colore di sfondo bianco.
- Colore di sfondo: #ffffff
Frontiera
Puoi anche aggiungere "20px" agli angoli di ogni colonna.
- Angoli arrotondati: 20 px (tutti gli angoli)
Colonna 1 e 3
Ombra casella predefinita
Continua aggiungendo un'ombra di casella predefinita alle colonne 1 e 3.
- Posizione verticale dell'ombra del riquadro: 22 px
- Forza della sfocatura dell'ombra dell'ombra della scatola: 150 px
- Colore ombra: rgba(0,0,0,0) (desktop), rgba(0,0,0,0.1) (tablet e telefono)
Ombra del riquadro al passaggio del mouse
Cambia il colore dell'ombra al passaggio del mouse.
- Colore ombra: rgba(0,0,0,0.27)
Filtri predefiniti
Quindi, vai alle impostazioni dei filtri e aggiungi un po' di sfocatura a entrambe le colonne 1 e 3.
- Sfocatura: 4px (desktop), 0px (tablet e telefono)
Filtri al passaggio del mouse
Rimuovi la sfocatura al passaggio del mouse.
- Sfocatura: 0px
Indice Z predefinito
Assegna lo stesso valore di indice z predefinito alle colonne successive.
- Indice Z: 9
Passa il mouse sull'indice Z
E aumenta lo stesso indice z al passaggio del mouse.
- Indice Z: 12
Solo colonna 1
Trasforma Traduci
Continua modificando la posizione della colonna 1 utilizzando l'opzione di traduzione di trasformazione.
- Destra: 7vw (desktop), 0vw (tablet e telefono)
- In basso: 2vw (desktop), 0vw (tablet e telefono)
Solo colonna 3
Trasforma Traduci
Apri quindi le impostazioni di trasformazione della colonna 3 e applica le seguenti impostazioni:
- Destra: 7vw (desktop), 0vw (tablet e telefono)
- In basso: -2vw (desktop), 0vw (tablet e telefono)
Solo colonna 2
Scatola ombra
Passa alle impostazioni della colonna 2 e applica un'ombra sottile.
- Posizione verticale dell'ombra del riquadro: 22 px
- Forza sfocatura ombra scatola: 150 px
- Colore ombra: rgba(0,0,0,0.27) (Desktop), rgba(0,0,0,0.1) (Tablet e telefono)
Indice Z
Ultimo ma non meno importante, cambia l'indice z della seconda colonna e il gioco è fatto!
- Indice Z: 11
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Desktop
Statico
Passa il mouse
Mobile
Pensieri finali
In questo post, ti abbiamo mostrato come presentare in modo elegante i prodotti popolari sulla tua pagina di destinazione Divi. Ti abbiamo mostrato, passo dopo passo, come creare un bellissimo risultato utilizzando solo le opzioni integrate di Divi. Questo esempio di design mostra quanto siano versatili i nuovi moduli WooCommerce di Divi e come puoi creare un fantastico web design eCommerce in pochissimo tempo. Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto!
Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.