Vai al contenuto principale

Creazione di una griglia di vantaggi dinamici per i prodotti WooCommerce

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 701.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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.

Possibile risultato divi

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 .

Installa un plug-in avanzato per campi personalizzati

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.

Crea campi acf

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 regole

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
Aggiungi campo ac
Personalizzazione del campo Divi

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
Configura i campi acf

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.

Creazione del prodotto Divi

Completa i campi Vantaggi del prodotto

E soddisfare i vantaggi del prodotto.

Compila i campi divi vantaggi

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".

Costruttore di temi Divi

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.

Aggiungi tutti i prodotti woocommerce

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".

Costruzione corpo divi

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
Configurazione dello sfondo della sezione Divi

spaziatura

Passa alla scheda di progettazione della sezione e aggiungi alcune imbottiture superiori e inferiori personalizzate.

  • Imbottitura superiore: 10px
  • Imbottitura inferiore: 10px
Configurazione della spaziatura delle sezioni Divi

Aggiungi una nuova linea

Struttura a colonna

Continuiamo aggiungendo una nuova riga alla sezione che ha la seguente struttura:

Configurazione layout modulo di linea

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%
Impostazioni spaziatura modulo linea

spaziatura

Rimuovere tutta la spaziatura interna superiore e inferiore.

  • Margine interno elevato: 0px
  • Margine interno basso: 0px
Impostazioni spaziatura modulo linea Divi

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.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

  • Prodotto: questo prodotto
Impostazioni woo cart notice module divi

Colore di sfondo

Quindi aprire le impostazioni del modulo e utilizzare uno sfondo trasparente.

  • Colore di sfondo: rgba (0,0,0,0)
Impostazioni divi del modulo carrello Woo

Impostazioni del testo

Passa alla scheda "Design" e cambia il carattere del testo.

  • Carattere testo: Karla
Impostazioni dei caratteri del modulo Divi

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
Impostazioni colore modulo avviso carrello Woo
  • Carattere pulsante: Oswald
  • Stile carattere pulsante: Maiusc
Regolazione del design del colore del modulo di avviso del carrello Woo
  • Margine interno elevato: 20px
  • Margine interno basso: 20px
  • Margine interno sinistro: 50px
  • Margine interno destro: 50px
Avviso del carrello di corteggiamento del modulo di progettazione della configurazione

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%
Regolazione posteriore modulo Divi line

spaziatura

Andiamo alla scheda Design e aggiungiamo un margine interno alto.

  • Imbottitura superiore: 150px
Configurazione spaziatura moduli linea Divi

Aggiungi una nuova linea

Struttura a colonna

Continua aggiungendo una nuova linea con la stessa struttura mostrata di seguito:

Configurazione stile linea Divi

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
Modulo divi di configurazione grondaia

Spaziatura

Rimuoveremo anche il margine interno superiore.

  • Imbottitura superiore: 0px
Configurazione della spaziatura dei moduli Divi

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;
Impostazioni dello stile del modulo della linea Divi

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
Impostazioni del modulo immagine del prodotto Woocommerce

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
Regolazione del modulo immagine Divi

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
griglia dei vantaggi del 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
Regolazione del design del modulo del titolo Divi

spaziatura

Completa il modulo del titolo Woo aggiungendo i margini sinistro e destro.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

  • Margine sinistro: 5%
  • Margine destro: 5%
Impostazione del modulo del titolo Divi

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 modulo di descrizione del prodotto

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
Descrizione modulo regolazione colore divi

dimensionamento

Quindi modificare la larghezza su diverse dimensioni dello schermo.

  • Larghezza: 59% (desktop), 82% (tablet e telefono)
Regolazione della larghezza del modulo di riepilogo Divi

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%
Modulo di descrizione del prodotto Divi

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
Impostazione del testo del modulo di riepilogo Divi

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.

Configurazione divi di riepilogo del modulo immagine

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
Modulo di regolazione Divi

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
Configura il carattere del modulo di riepilogo divi

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
Configura div i di riepilogo del modulo di testo

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%
Configurare il dimensionamento del modulo di riepilogo divi

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)
Configurare la spaziatura del modulo di riepilogo divi

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;
Aggiungi il modulo divi del codice css

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.

Sezione divi del nome del prodotto

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.

Immagine del modulo di riepilogo Divi

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)
Regole del modulo di riepilogo Divi

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
Modulo riepilogo divi configurazione bordo arrotondato

Aggiungi anche un bordo inferiore al primo modulo Blurb.

  • Larghezza del bordo inferiore: 1px
  • Colore bordo inferiore: # 000000
Configura il margine inferiore del divi
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
Riepilogo modulo bordo configurazione divi
Blurb module 3 border settings

Completa il design della griglia aggiungendo un bordo dritto al terzo modulo Blurb.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

  • Larghezza del bordo destro: 1px
  • Colore bordo destro: # ffd623
griglia dei vantaggi del prodotto

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
Aggiungi alle impostazioni del modulo divi della scheda

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
Configura lo stile del modulo colore aggiungi al carrello divi
  • Campi arrotondati: 0px (tutti gli angoli)
  • Larghezza del bordo inferiore dei campi: 1px
  • Colore del bordo inferiore dei campi: # 000000
Configurare la spaziatura delle sezioni Div

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
Configura il design del pulsante divi
  • Carattere pulsante: Oswald
  • Stile carattere pulsante: maiuscolo
Configura il pulsante divi
  • Imbottitura superiore: 20px
  • Imbottitura inferiore: 20px
  • Padding sinistro: 50px
  • Imbottitura destra: 50px
Configurare il dimensionamento del modulo divi

spaziatura

E completa i parametri del modulo aggiungendo valori di margine personalizzati.

  • Margine superiore: 100px
  • Margine sinistro: 5%
Configurare la spaziatura divi

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!

Salva design divi
Salva modifiche divi

Panoramica

Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata a come appare su schermi di dimensioni diverse.

Risultato demo

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.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
0 azioni
quota
Tweet
Enregistrer