Il modo in cui progetti la pagina del prodotto ha un impatto immediato sul comportamento dei tuoi visitatori. Un design ben realizzato e personalizzato della pagina del prodotto può rendere più facile per i visitatori decidere se vogliono acquistare il tuo prodotto. Se stai cercando un modo per rendere la pagina del tuo prodotto più accattivante, probabilmente ti piacerà questo tutorial.
Ti mostreremo come includere una griglia dinamica dei vantaggi del prodotto nel tuo progetto utilizzando Divi e il plug-in Advanced Custom Fields. Inizieremo creando un gruppo di campi per i vantaggi. Completeremo quindi i campi personalizzati sulla nostra pagina del prodotto e includeremo il contenuto dinamico nel nostro modello di pagina del prodotto.
Possibile risultato
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di dimensioni diverse.
1. Installare il plug-in ACF e il plug-in del gruppo di campi relativi ai vantaggi del prodotto
Installa il plug-in Campi personalizzati avanzati
Per visualizzare i vari vantaggi del prodotto nel back-end dei nostri prodotti, utilizzeremo il plug-in Advanced Custom Fields gratuito. Accedi al tuo Backend di WordPress> Plugin> Aggiungi nuovo> Trova plugin ACF> Installa> Attiva .
Vai a campi personalizzati e aggiungi un nuovo gruppo di campi
Dopo aver installato e attivato il plug-in ACF, sarai in grado di accedere ai tuoi campi personalizzati e aggiungere un nuovo gruppo di campi.
Impostazioni del gruppo di campi
Assegna un titolo al tuo nuovo gruppo di campi e consenti che venga visualizzato solo sulle pagine dei prodotti.
- "Tipo di messaggio" equivale a "Prodotto"
Aggiungi un primo campo
Continua aggiungendo un nuovo campo per il titolo del tuo primo vantaggio di prodotto.
- Etichetta del campo: titolo del vantaggio 1
- Tipo di campo: testo
Ripeti il passaggio per i campi rimanenti
Fai lo stesso per gli altri vantaggi del prodotto e le loro descrizioni. Tutti questi campi richiedono il tipo di campo "Testo" loro assegnato.
- Titolo del servizio 1
- Descrizione dei vantaggi 1
- Titolo del servizio 2
- Descrizione dei vantaggi 2
- Titolo del servizio 3
- Descrizione dei vantaggi 3
- Titolo del servizio 4
- Descrizione dei vantaggi 4
2. Aggiungi vantaggi ai prodotti
Apri o aggiungi un nuovo prodotto
Dopo aver creato il gruppo di campi e i campi, è possibile aggiungere i vantaggi del prodotto ai prodotti a livello individuale. Apri un prodotto a tua scelta o creane uno nuovo.
Completa i campi Vantaggi del prodotto
E soddisfare i vantaggi del prodotto.
3. Creare un modello di pagina del prodotto in Divi Theme Builder
Vai a Divi Theme Builder e aggiungi un nuovo modello
È ora di iniziare con Divi! Per creare un nuovo modello, vai al Divi Theme Builder e fai clic su "Aggiungi un nuovo modello".
Usa un modello su tutti i prodotti
Usiamo questo modello su tutti i prodotti, ma sentiti libero di selezionare i prodotti con una categoria o un'etichetta specifica.
Accedi all'editor del modello del corpo del modello
Quindi inserire il corpo del modello facendo clic su "Aggiungi un corpo personalizzato" e selezionando "Crea un corpo personalizzato".
Modifica la sezione n. 1
Colore di sfondo
Una volta all'interno dell'editor del modello, noterai una sezione. Apri quella sezione e cambia il colore di sfondo in nero.
- Colore di sfondo: # 000000
spaziatura
Passa alla scheda di progettazione della sezione e aggiungi alcune imbottiture superiori e inferiori personalizzate.
- Imbottitura superiore: 10px
- Imbottitura inferiore: 10px
Aggiungi una nuova linea
Struttura a colonna
Continuiamo aggiungendo una nuova riga alla sezione che ha la seguente struttura:
spaziatura
Senza aggiungere alcuna modifica, apriamo le impostazioni delle righe e apportiamo alcune regolazioni della spaziatura.
- Usa grondaia personalizzata: Sì
- Larghezza della grondaia: 1
- Larghezza: 90%
- Larghezza massima: 100%
spaziatura
Rimuovere tutta la spaziatura interna superiore e inferiore.
- Margine interno elevato: 0px
- Margine interno basso: 0px
Aggiungi il modulo Woo Cart Notice alla colonna
Contenuto dinamico
L'unico modulo di cui abbiamo bisogno in questa riga e sezione è il modulo Avviso carrello Woo. Assicurati che "Questo prodotto" sia selezionato nella sezione dinamica.
- Prodotto: questo prodotto
Colore di sfondo
Quindi aprire le impostazioni del modulo e utilizzare uno sfondo trasparente.
- Colore di sfondo: rgba (0,0,0,0)
Impostazioni del testo
Passa alla scheda "Design" e cambia il carattere del testo.
- Carattere testo: Karla
Impostazione pulsante
Termina le impostazioni del plugin definendo le impostazioni di stile:
- Usa stili personalizzati per il pulsante: Sì
- Dimensione testo pulsante: 20 px
- Colore testo pulsante: # 000000
- Sfondo del pulsante: # ffd623
- Larghezza bordo pulsante: 0px
- Pulsante bordo arrotondato: 0px
- Carattere pulsante: Oswald
- Stile carattere pulsante: Maiusc
- Margine interno elevato: 20px
- Margine interno basso: 20px
- Margine interno sinistro: 50px
- Margine interno destro: 50px
Aggiungi la sezione # 2
Sfondo sfumato
Aggiungi un'altra sezione regolare sotto quella precedente. Quindi aprire le impostazioni e utilizzare uno sfondo sfumato come segue:
- Colore 1: # 000000
- Colore 2: #ffffff
- Posizione di partenza:
- Desktop: 30%
- Compressa: 57%
- Telefono: 54%
- Posizione finale:
- Desktop: 30%
- Compressa: 57%
- Telefono: 54%
spaziatura
Andiamo alla scheda Design e aggiungiamo un margine interno alto.
- Imbottitura superiore: 150px
Aggiungi una nuova linea
Struttura a colonna
Continua aggiungendo una nuova linea con la stessa struttura mostrata di seguito:
dimensionamento
Senza aggiungere ancora alcuna mod, apriremo le impostazioni e cambieremo la spaziatura come segue:
- Usa grondaie personalizzate: Sì
- Spazio della grondaia: 1
- Larghezza: 95%
- Larghezza massima: 2560 px
- Allineamento linea: centro
Spaziatura
Rimuoveremo anche il margine interno superiore.
- Imbottitura superiore: 0px
Elemento principale
E per centrare il contenuto della colonna sul desktop, useremo due righe di codice CSS nell'elemento principale del modulo riga.
Desktop:
display: flex; align-items: center;
Tablet e telefono:
blocco di visualizzazione;
Aggiungi il modulo Woo Image alla colonna 1
Contenuto dinamico
È ora di aggiungere i moduli, inizieremo con il modulo Woo Images nella colonna 1. Assicurati che "Questo prodotto" sia selezionato.
- Prodotto: questo prodotto
Effetto di animazione di scorrimento verticale
Aggiungiamo un leggero movimento all'immagine utilizzando l'effetto di scorrimento del movimento orizzontale nella scheda avanzata.
- Attiva movimento verticale: Sì
- Inizia offset:
- Ufficio: -4
- Tablet e telefono: 0
- Offset medio: 0
- Scostamento finale: 0
- Attivare l'effetto di movimento: metà dell'elemento
Aggiungi il modulo del titolo Woo alla colonna 2
Contenuto dinamico
Nella colonna 2, la prima mod di cui abbiamo bisogno è una mod del titolo Woo. Assicurati che "Questo prodotto" sia selezionato nell'area del contenuto dinamico.
- Prodotto: questo prodotto
Impostazioni del testo del titolo
Quindi vai alla scheda Progettazione e applica uno stile al testo del titolo come segue:
- Carattere del titolo: Oswald
- Stile del carattere del titolo: maiuscolo
- Colore del testo del titolo: # ffd623
- Dimensione del testo del titolo: 80px
spaziatura
Completa il modulo del titolo Woo aggiungendo i margini sinistro e destro.
- Margine sinistro: 5%
- Margine destro: 5%
Aggiungi il modulo di descrizione Woo alla colonna 2
Contenuto dinamico
Passiamo al modulo successivo, che è un modulo di descrizione di Woo. Usiamo il seguente contenuto dinamico per questo:
- Prodotto: questo prodotto
- Tipo di descrizione: breve descrizione
Impostazioni del testo
Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:
- Carattere testo: Karla
- Colore del testo: #dbdbdb
- Dimensioni del testo: 17 px (desktop e tablet), 15 px (telefono)
- Altezza della riga di testo: 1,9 em
dimensionamento
Quindi modificare la larghezza su diverse dimensioni dello schermo.
- Larghezza: 59% (desktop), 82% (tablet e telefono)
spaziatura
Completa il modulo di descrizione di Woo aggiungendo valori di margine personalizzati nelle impostazioni di spaziatura.
- Margine superiore: 50px
- Margine inferiore: 100px
- Margine sinistro: 5%
- Margine destro: 5%
Aggiungi il modulo Blurb alla colonna 2
Contenuto dinamico
Per visualizzare i vantaggi del prodotto che abbiamo aggiunto nella prima parte di questo tutorial, utilizzeremo i moduli Blurb. Aggiungi un primo modulo Blurb e usa il contenuto dinamico del primo vantaggio prodotto per il titolo e il corpo.
- Titolo: Benefit Title 1
- Corpo: Descrizione del vantaggio 1
Carica immagine
Carica un'immagine o utilizza successivamente un'icona a tua scelta. Puoi trovare quelli che abbiamo usato in questo tutorial nella cartella di download che sei riuscito a scaricare all'inizio di questo tutorial.
Impostazioni immagine / icona
Passa alla scheda di progettazione del modulo e modifica le impostazioni dell'immagine / icona come segue:
- Posizionamento immagine / icona: in alto
- Allineamento immagine / icona: a sinistra
Impostazioni del testo del titolo
Successivamente modificheremo le impostazioni del testo del titolo.
- Carattere del titolo: Oswald
- Stile carattere titolo: Maiuscolo
- Dimensione del testo del titolo: 25px
Impostazioni del corpo del testo
Insieme alle impostazioni del testo del corpo.
- Carattere del corpo: Karla
- Dimensioni del testo: 17 px (desktop e tablet), 15 px (telefono)
- Altezza della linea del corpo: 1,9 em
dimensionamento
Quindi vai alle impostazioni di dimensionamento e modifica le larghezze. È importante utilizzare una larghezza principale inferiore al 50%, questo ci permetterà di mostrare due moduli Blurb affiancati nei passaggi successivi.
- Larghezza immagine: 25%
- Larghezza: 49%
spaziatura
Aggiungeremo anche spazi attorno al modulo Blurb utilizzando valori di riempimento personalizzati su diverse dimensioni dello schermo.
- Imbottitura superiore: 8%
- Imbottitura inferiore: 8%
- Imbottitura sinistra: 8% (desktop e tablet), 2% (telefono)
- Imbottitura destra: 8% (desktop e tablet) 2% (telefono)
Elemento principale
Ora ci assicureremo che il modulo Riepilogo visualizzi il testo uno accanto all'altro, in due passaggi. Innanzitutto, ci assicureremo che la larghezza del modulo sia inferiore al 50% (come abbiamo fatto nel passaggio precedente). Successivamente, useremo la proprietà sulla riga. Aggiungeremo questa proprietà CSS sull'elemento principale nella sezione avanzata.
display: inline-block;
Clonare il modulo di riepilogo 3 volte
Una volta completata la prima mod Blurb, puoi clonarla tre volte. Noterai automaticamente che i moduli Blurb appaiono in una griglia.
Modifica le immagini del modulo Blurb
Modifica l'immagine in ogni pod Blurb duplicato. Puoi trovarli nella cartella dei download che potresti aver scaricato all'inizio di questo articolo.
Modifica il contenuto dinamico del modulo Blurb
Modifica anche il contenuto dinamico di ciascun modulo Blurb duplicato.
- Titolo: titolo del servizio (2,3 o 4)
- Corpo: descrizione dei vantaggi (2,3 o 4)
Aggiungi bordi ai moduli Blurb individualmente
Blurb module 1 border settings
Ora, per finire di progettare la nostra griglia, aggiungeremo bordi ai moduli Blurb a livello individuale. Apri la prima mod Blurb e usa un bordo dritto.
- Larghezza del bordo destro: 1px
- Colore bordo destro: # ffd623
Aggiungi anche un bordo inferiore al primo modulo Blurb.
- Larghezza del bordo inferiore: 1px
- Colore bordo inferiore: # 000000
Blurb module 2 border settings
Quindi apri il secondo modulo Blurb e usa un bordo inferiore.
- Larghezza del bordo inferiore: 1px
- Colore bordo inferiore: # 000000
Blurb module 3 border settings
Completa il design della griglia aggiungendo un bordo dritto al terzo modulo Blurb.
- Larghezza del bordo destro: 1px
- Colore bordo destro: # ffd623
Aggiungi Woo Aggiungi al carrello Modulo nella colonna 2
Contenuto dinamico
L'ultimo modulo di cui abbiamo bisogno nel nostro design è un modulo Woo Add to Cart. Assicurati che "Questo prodotto" sia selezionato nell'area del contenuto dinamico.
- Prodotto: questo prodotto
Impostazioni sul campo
Vai alla scheda di progettazione successiva e modifica le impostazioni del campo.
- Colore di sfondo dei campi: #ffffff
- Colore del testo del campo: # 000000
- Campi arrotondati: 0px (tutti gli angoli)
- Larghezza del bordo inferiore dei campi: 1px
- Colore del bordo inferiore dei campi: # 000000
Impostazioni dei pulsanti
Quindi, stile il pulsante di conseguenza:
- Usa stili personalizzati per il pulsante: Sì
- Dimensione del testo del pulsante: 20 pixel
- Colore testo pulsante: # 000000
- Colore di sfondo del pulsante: # ffd623
- Larghezza bordo pulsante: 0px
- Raggio bordo pulsante: 0px
- Carattere pulsante: Oswald
- Stile carattere pulsante: maiuscolo
- Imbottitura superiore: 20px
- Imbottitura inferiore: 20px
- Padding sinistro: 50px
- Imbottitura destra: 50px
spaziatura
E completa i parametri del modulo aggiungendo valori di margine personalizzati.
- Margine superiore: 100px
- Margine sinistro: 5%
3. Salvare le modifiche del generatore di temi e visualizzare l'anteprima del risultato
Una volta terminata la progettazione del modello di pagina del prodotto, puoi salvare tutte le modifiche di Theme Builder e visualizzare i risultati sui tuoi prodotti!
Panoramica
Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.
Considerazioni finali
In questo articolo, ti abbiamo mostrato come essere creativo con il tuo prossimo modello di pagina prodotto Divi. Nello specifico, ti abbiamo mostrato come includere una griglia dinamica dei vantaggi del prodotto per aggiungere ulteriori vantaggi alla tua pagina prodotto. Abbiamo creato questo tutorial utilizzando Divi in combinazione con il plug-in Advanced Custom Fields. Puoi anche scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, sentiti libero di lasciare un commento nella sezione commenti qui sotto.
