Come creare un modello di pagina del prodotto ispirato all'estetica giapponese con Divi

Pubblicato: 2019-11-21

Stai cercando un design della pagina del prodotto pulito e minimale per il tuo negozio online? Oggi abbiamo un design ispirato all'estetica giapponese. Questo è uno stile comune per riviste e siti web giapponesi minimali. Rende facile leggere il testo, vedere i prodotti e non distrarsi. Segui il tutorial qui sotto per ricreare questo modello per i tuoi prodotti. Potrai anche scaricare gratuitamente il file JSON del modello!

Andiamo ad esso.

Anteprima

Prima di iniziare, diamo un'occhiata a come appare il design su diversi dispositivi.

Desktop

Mobile

Scarica GRATUITAMENTE il modello di pagina del prodotto

Per mettere le mani sul modello di pagina del prodotto 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.

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!

1. Aggiungi/Apri prodotto Woocommerce

Informazioni prodotto

Apri o crea un nuovo prodotto WooCommerce. Per ricreare questo design di prodotto ispirato all'estetica giapponese, dovrai inserire i seguenti dettagli:

Titolo: Set per calligrafia
Descrizione: Set di calligrafia giapponese con tutti gli strumenti necessari per creare bellissime scritte artistiche. Inchiostro di china nero, pennello di crine di cavallo, peso di roccia, ciotola per mescolare, forbici giapponesi e carta non sbiadita.
Prezzo: 31
Categoria: Forniture d'arte
Immagine in evidenza: un'immagine orizzontale del prodotto.
Galleria: 4 immagini di paesaggi delle stesse dimensioni
Attributi: vedi sotto

La scheda degli attributi contiene le informazioni per il modulo di informazioni aggiuntive woo. Per aggiungere queste informazioni, seleziona la scheda attributi e crea un attributo personalizzato come segue:

Cosa è incluso:
- 1 pennello
- 1 ciotola
- 1 bottiglia di inchiostro
- 1 paio di forbici
- 1 pietra di fiume
- 1 risma di carta

Abilita Divi Builder e modifica le impostazioni della pagina

Quando tutti i dati del prodotto sono pronti, abilita Divi Builder e modifica il layout della pagina in "larghezza intera".

Passa a Visual Builder

Ora passa al visual builder. Fare clic sul pulsante che dice "costruisci sul front-end".

Elimina la sezione del prodotto predefinito

Poiché vogliamo progettare questa pagina del prodotto da zero, elimina l'intera sezione predefinita. Questo ti darà una tela bianca su cui lavorare.

2. Ricrea il design in stile giapponese

Aggiungi nuova sezione

Iniziamo a ricreare la pagina del prodotto estetico giapponese! Aggiungi una nuova sezione regolare.

Sfondo

Apri le impostazioni della sezione e cambia il colore di sfondo.

Colore di sfondo: grigio molto chiaro #f2f2f2

Dimensionamento

Quindi, regola le dimensioni.

Larghezza: 100%
Larghezza massima: 100%

Spaziatura

Quindi, i valori di spaziatura come segue:

Imbottitura superiore:
- Desktop: 0vw
- Tablet + Telefono: 2vw
Imbottitura inferiore:
- Desktop + Tablet: 2vw

Aggiungi la prima riga

Struttura della colonna

Aggiungi una nuova riga e seleziona la seguente struttura di colonne:

Dimensionamento

Prima di aggiungere qualsiasi modulo, regola le impostazioni di dimensionamento della riga come segue:

Larghezza:
- Desktop: 80%
- Tablet + Telefono: 63%

Spaziatura

Inoltre, regolare i valori di spaziatura.

Margine superiore + inferiore: 0vw
Imbottitura superiore + inferiore: 0vw

Aggiungi il modulo Pangrattato Woo

Contenuto

Ora aggiungi il primo modulo; il woo breadcrumb.

Prodotto: questo prodotto

Testo

Nella scheda Design, modella il testo come segue:

Carattere: Duru Sans
Stile carattere: TT
Colore: Nero #000000
Taglia:
- Desktop: 0.7vw
- Tablet: 1.5vw
- Telefono: 1.7vw
Spaziatura lettere: 2px

Dimensionamento

Quindi, regola le dimensioni.

Larghezza: 100%

Spaziatura

Infine, regola la spaziatura.

Margine superiore:
- Desktop: 3em
- Tablet + Telefono: 0em
Margine inferiore:
- Desktop + Tablet: 1em
- Telefono: 0em
Imbottitura superiore + inferiore: 1em
Imbottitura sinistra: 2em

Aggiungi la seconda riga

Struttura della colonna

Aggiungi una seconda riga utilizzando la seguente struttura di colonne:

Dimensionamento

Apri le impostazioni della riga e modifica la larghezza tra le diverse dimensioni dello schermo.

Larghezza:
- Desktop: 80%
- Tablet + Telefono: 65%

Spaziatura

Regola anche la spaziatura.

Imbottitura superiore: 0vw