Come creare una pagina del prodotto pulita e audace con i moduli WooCommerce di Divi (download gratuito!)

Le pagine dei prodotti in grassetto hanno un modo speciale di attirare l'attenzione dei tuoi visitatori. E con il nuovo aggiornamento dei moduli WooCommerce di Divi, puoi trasformare rapidamente la tua vecchia pagina del prodotto in una pagina pulita e audace che sia tu che i tuoi visitatori adorerete. Nel tutorial di oggi, ricreeremo da zero una pagina del prodotto in grassetto e potrai anche scaricare il file JSON gratuitamente! Questo tutorial mostra quanto siano versatili i nuovi moduli WooCommerce di Divi e come puoi creare un sito eCommerce altamente professionale in pochissimo tempo.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Scarica GRATUITAMENTE il layout di pagina del prodotto Clean & Bold

Per mettere le mani sul layout della pagina del prodotto pulito e audace dell'eroe gratuito, dovrai 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 i file

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.

SCARICA

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!

Iscriviti al nostro canale Youtube

1. Aggiungi/Apri prodotto WooCommerce

Dettagli del prodotto

Apri un prodotto esistente o creane uno nuovo. Se vuoi ottenere esattamente lo stesso risultato mostrato nell'anteprima di questo post, assicurati di aggiungere i seguenti dettagli del prodotto:

• Titolo
• breve descrizione
• Descrizione lunga
• Categoria
• Immagine in evidenza
• Prezzo

Abilita Divi Builder e modifica le impostazioni della pagina del prodotto

Una volta completati i dettagli del prodotto, abilita Divi e modifica il layout della pagina in "Larghezza intera".

Passa a Visual Builder

Continua passando a Visual Builder.

Rimuovi la sezione del prodotto originale sulla pagina

Lì vedrai le informazioni sulla pagina del prodotto originale riunite in un'unica sezione. Ricreeremo da zero il nostro design pulito e audace, quindi sentiti libero di eliminare questa sezione.

2. Crea una pagina del prodotto pulita e audace utilizzando Visual Builder di Divi

Aggiungi la sezione regolare n. 1

Spaziatura

È ora di iniziare a creare la nostra audace pagina del prodotto! Aggiungi una nuova sezione normale e modifica le impostazioni di spaziatura della sezione.

• Imbottitura superiore: 200 px
• Imbottitura inferiore: 0px

straripamenti

Per assicurarti che nulla superi il contenitore della sezione e che non avvenga alcuno scorrimento orizzontale nella pagina, nascondi gli overflow della sezione nelle impostazioni di visibilità.

• Overflow orizzontale: nascosto
• Overflow verticale: nascosto

Aggiungi riga

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Colore di sfondo

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica il colore di sfondo della riga.

• Colore di sfondo: #f4f4f4

Dimensionamento

Modifica anche la larghezza massima della riga.

• Larghezza massima: 1000 px

Spaziatura

Quindi, vai alle impostazioni di spaziatura e aggiungi un'imbottitura superiore e inferiore personalizzata.

• Imbottitura superiore: 150 px
• Imbottitura inferiore: 150 px

Frontiera

Stiamo aggiungendo il raggio del bordo di '50px' anche agli angoli in alto a sinistra e a destra della riga.

straripamenti

Completa le impostazioni della riga rendendo visibili gli overflow.

• Overflow orizzontale: visibile
• Overflow verticale: visibile

Aggiungi il modulo Woo Breadcrumb alla colonna

Contenuto dinamico

È ora di iniziare ad aggiungere moduli! Il primo modulo di cui abbiamo bisogno è il modulo Woo Breadcrumb.

• Prodotto: questo prodotto

Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:

• Carattere del testo: testo cremisi
• Peso del carattere del testo: grassetto
• Stile del carattere del testo: maiuscolo
• Dimensione del testo: 20px
• Spaziatura delle lettere del testo: 4px

Link alle impostazioni del testo

Apporta anche alcune modifiche alle impostazioni del testo del collegamento.

• Peso del carattere del collegamento: leggero
• Colore del testo del collegamento: #e02b20

Spaziatura

Quindi, vai alle impostazioni di spaziatura e aggiungi alcuni valori di margine personalizzati su diverse dimensioni dello schermo.

• Margine inferiore: 80 px
• Margine sinistro: 50 px (desktop e tablet), 20 px (telefono)
• Margine destro: 50 px (desktop e tablet), 20 px (telefono)

Aggiungi modulo titolo Woo alla colonna

Contenuto dinamico

Il prossimo e ultimo modulo di cui abbiamo bisogno in questa colonna è il Woo Title Module.

• Prodotto: questo prodotto

Impostazioni del testo del titolo

Modifica le impostazioni del testo del titolo del modulo come segue:

• Carattere del titolo: Montserrat
• Peso del carattere del titolo: pesante
• Allineamento del testo del titolo: al centro
• Colore del testo del titolo: #000000
• Dimensione del testo del titolo: 250 px (desktop), 150 px (tablet), 80 px (telefono)
• Altezza della riga del titolo: 0,9 em

Spaziatura

Aumenta la larghezza del modulo aggiungendo un margine sinistro e destro negativo.

• Margine sinistro: -150 px (desktop), -100 px (tablet), -50 px (telefono)
• Margine destro: -150 px (desktop), -100 px (tablet), -50 px (telefono)

Aggiungi la sezione regolare #2

Spaziatura

Aggiungi un'altra sezione proprio sotto la precedente. Modificare i valori di riempimento della sezione come segue:

• Imbottitura superiore: 0px
• Imbottitura inferiore: 200 px

Aggiungi riga

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Colore di sfondo

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e modifica il colore di sfondo della riga.

• Colore di sfondo: #f4f4f4

Dimensionamento

Aumenta la larghezza massima della riga successiva.

• Larghezza massima: 1000 px

Spaziatura

Aggiungi anche un'imbottitura inferiore personalizzata.

• Imbottitura inferiore: 150 px

Frontiera

Quindi, vai alle impostazioni del bordo e applica il raggio del bordo '50px' agli angoli in basso a sinistra e a destra.

straripamenti

Completa le impostazioni della riga assicurandoti che gli overflow siano visibili.

• Overflow orizzontale: visibile
• Overflow verticale: visibile

Impostazioni colonna 1

Immagine di sfondo dinamica

Una volta completate le impostazioni generali della riga, apri le impostazioni della colonna 1 e aggiungi l'immagine in primo piano del prodotto allo sfondo utilizzando il contenuto dinamico.

• Immagine di sfondo: immagine in primo piano

Spaziatura

Aggiungi un'imbottitura inferiore alla colonna successiva. Ciò consentirà all'immagine di sfondo di mostrare attraverso.

• Imbottitura inferiore: 370 px (desktop), 690 px (tablet), 380 px (telefono)

Aggiungi modulo di testo alla colonna 1

Aggiungi contenuto

È ora di iniziare ad aggiungere moduli! Nella colonna 1, l'unico modulo di cui abbiamo bisogno è un modulo di testo. Aggiungi alcuni contenuti a tua scelta.

Colore di sfondo

Successivamente cambia il colore di sfondo del modulo.

• Colore di sfondo: #E02B20

Impostazioni testo

Passa alla scheda Design e modifica le impostazioni del testo.

• Carattere del testo: Montserrat
• Peso del carattere del testo: Ultra grassetto
• Allineamento del testo: Centro
• Colore del testo: #FFFFFF
• Dimensione del testo: 30px
• Altezza riga di testo: 1em

Dimensionamento

Riduci le dimensioni del modulo nelle impostazioni di dimensionamento successive.

• Larghezza: 280 px

Spaziatura

E trasforma il modulo in un quadrato aggiungendo alcuni valori di riempimento personalizzati. Stiamo anche creando una sovrapposizione in alto e a sinistra utilizzando il margine negativo.

• Margine superiore: -120 px
• Margine sinistro: -120px
• Imbottitura superiore: 110 px
• Imbottitura inferiore: 110 px
• Imbottitura sinistra: 50 px
• Imbottitura destra: 50px

Frontiera

Per trasformare il quadrato in un cerchio, aggiungeremo un raggio di bordo '500px' a ciascuno degli angoli del modulo.

Trasforma Ruota

Ruoteremo anche il modulo.

• Sinistra: 330 gradi

Aggiungi modulo di testo alla colonna 2

Aggiungi contenuto H2

Alla seconda colonna! Lì, il primo modulo di cui abbiamo bisogno è un normale modulo di testo. Inserisci alcuni contenuti H2 a tua scelta.

Impostazioni testo H2

Passa alla scheda Design e modifica le impostazioni del testo H2 come segue:

• Intestazione 2 Carattere: Montserrat
• Titolo 2: Dimensione testo: 35px

Spaziatura

Aggiungi successivamente alcuni valori di margine personalizzati.

• Margine superiore: -70 px (desktop), 100 px (tablet e telefono)
• Margine sinistro: 100 px (desktop), 20 px (tablet e telefono)
• Margine destro: 20 px (tablet e telefono)

Aggiungi il modulo di descrizione di Woo alla colonna 2

Contenuto dinamico

Il secondo modulo di cui abbiamo bisogno nella colonna 2 è il modulo di descrizione di Woo.

• Prodotto: questo prodotto
• Tipo di descrizione: breve descrizione

Impostazioni testo

Modifica di conseguenza le impostazioni del testo del modulo:

• Carattere del testo: testo cremisi
• Dimensione del testo: 19px
• Altezza riga di testo: 1,8 em
• Allineamento del testo: giustifica

Spaziatura

Modificare successivamente i valori di spaziatura del modulo.

• Margine inferiore: 50 px
• Margine sinistro: 100 px (desktop), 20 px (tablet e telefono)
• Margine destro: -100 px (desktop), 20 px (tablet e telefono)

Aggiungi modulo prezzo Woo alla colonna 2

Contenuto dinamico

Al modulo successivo, che è il modulo prezzo Woo.

• Prodotto: questo prodotto

Impostazioni testo prezzo

Modificare le impostazioni del testo del prezzo come segue:

• Carattere prezzo: Montserrat
• Peso del carattere del prezzo: pesante
• Colore testo prezzo: #000000
• Dimensione del testo del prezzo: 50 px

Spaziatura

Modificare le impostazioni di spaziatura successiva.

• Margine inferiore: 50 px
• Margine sinistro: 100 px (desktop), 20 px (tablet e telefono)
• Margine destro: 20 px (tablet e telefono)

Aggiungi Woo Add to Cart Module alla colonna 2

Contenuto dinamico

Il prossimo e ultimo modulo di cui abbiamo bisogno per completare questo progetto è il modulo Woo Add To Cart.

• Prodotto: questo prodotto

Impostazioni testo

Cambia il carattere del testo nelle impostazioni del testo.

• Carattere del testo: Montserrat

Impostazioni dei campi

Modificare le impostazioni dei campi successivamente.

• Colore di sfondo del campo: #ffffff
• Colore testo campi: #000000
• Imbottitura superiore: 66px
• Imbottitura inferiore: 66px
• Carattere dei campi: Montserrat
• Peso del carattere dei campi: pesante

• Tutti gli angoli: 5px
• Larghezza bordo campi inferiori: 3px
• Colore bordo campi: #e02b20

Impostazioni dei pulsanti

Continua stilizzando il pulsante.

• Usa stili personalizzati per il pulsante: Sì
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #E02B20
• Larghezza bordo pulsante: 0px

• Raggio bordo pulsante: 5px
• Carattere pulsante: Montserrat
• Peso del carattere del pulsante: Ultra grassetto
• Stile carattere pulsante: maiuscolo

• Imbottitura superiore: 50px
• Imbottitura inferiore: 50 px
• Imbottitura sinistra: 100 pixel (desktop), 50 pixel (tablet), 20 pixel (telefono)
• Imbottitura destra: 100 px (desktop), 50 px (tablet), 20 px (telefono)
• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: rgba(0,0,0,0.3)

Spaziatura

Completa il design del modulo aggiungendo alcuni valori dei margini sinistro e destro su schermi di dimensioni più piccole e il gioco è fatto!

• Margine sinistro: 20px (tablet e telefono)
• Margine destro: 20 px (tablet e telefono)

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Pensieri finali

In questo post, ti abbiamo mostrato come creare una straordinaria pagina di prodotto in grassetto con un aspetto pulito utilizzando i nuovi moduli WooCommerce di Divi. Le pagine dei prodotti in grassetto hanno un modo unico di mettere il tuo prodotto sotto i riflettori. Sei stato anche in grado di scaricare il file JSON gratuitamente! 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.