Creazione di una griglia di vantaggi dinamici per i prodotti WooCommerce

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%
  • Tablet: 57%
  • Telefono: 54%
• Posizione finale:
  • Desktop: 30%
  • Tablet: 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.