Cum să creați un șablon de pagină de produs inspirat din estetica japoneză cu Divi

Publicat: 2019-11-21

Căutați un design de pagină de produs curat și minim pentru magazinul dvs. online? Astăzi avem un design inspirat de estetica japoneză. Acesta este un stil comun pentru revistele și site-urile japoneze minime. Este ușor să citiți textul, să vedeți produsele și să nu vă distrageți atenția. Urmați tutorialul de mai jos pentru a recrea acest șablon pentru propriile produse. Veți putea descărca și șablonul JSON gratuit!

Să ajungem la asta.

previzualizare

Înainte de a începe, să aruncăm o privire asupra aspectului designului pe diferite dispozitive.

Desktop

Mobil

Descărcați GRATUIT șablonul paginii produsului

Pentru a pune mâna pe șablonul de pagină de produs gratuit, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

1. Adăugați / Deschideți produsul Woocommerce

Date despre produs

Deschideți sau creați un nou produs WooCommerce. Pentru a recrea acest design de produs inspirat din estetica japoneză, va trebui să completați următoarele detalii:

Titlu: Set de caligrafie
Descriere: set de caligrafie japoneză cu toate instrumentele de care aveți nevoie pentru a crea o artă frumoasă cu litere. Cerneală neagră India, perie de păr de cal, greutate de piatră, bol de amestecare, foarfece japoneze și hârtie non-sângerare.
Preț: 31
Categorie: Art Supplies
Imagine prezentată: O imagine peisaj a produsului.
Galerie: 4 imagini peisaj în aceleași dimensiuni
Atribute: vezi mai jos

Fila atribute conține informațiile pentru modulul de informații suplimentare woo. Pentru a adăuga aceste informații, selectați fila atribute și creați un atribut personalizat după cum urmează:

Ce este inclus:
- 1 perie
- 1 castron
- 1 sticlă de cerneală
- 1 pereche de foarfece
- 1 Piatră de râu
- 1 Rând de hârtie

Activați Divi Builder și modificați setările paginii

Când toate datele despre produs sunt gata, activați Divi Builder și schimbați aspectul paginii în „lățime completă”.

Treceți la Visual Builder

Acum, treceți la constructorul vizual. Faceți clic pe butonul pe care scrie „build on the front end”.

Ștergeți secțiunea de produs implicită

Deoarece dorim să proiectăm această pagină de produs de la zero, ștergeți întreaga secțiune implicită. Acest lucru vă va oferi o pânză goală pe care să lucrați.

2. Recreați designul stilului japonez

Adăugați o secțiune nouă

Să începem să recreăm pagina produsului estetic japonez! Adăugați o nouă secțiune obișnuită.

fundal

Deschideți setările secțiunii și schimbați culoarea de fundal.

Culoare fundal: Foarte gri deschis # f2f2f2

Dimensionare

Apoi, ajustați dimensiunea.

Lățime: 100%
Lățime maximă: 100%

Spațiere

Apoi, valorile spațierii după cum urmează:

Căptușeală superioară:
- Desktop: 0vw
- Tabletă + telefon: 2vw
Căptușeală inferioară:
- Desktop + Tabletă: 2vw

Adăugați primul rând

Structura coloanei

Adăugați un rând nou și selectați următoarea structură de coloane:

Dimensionare

Înainte de a adăuga module, reglați setările de dimensionare ale rândului după cum urmează:

Lăţime:
- Desktop: 80%
- Tabletă + telefon: 63%

Spațiere

De asemenea, reglați valorile spațierii.

Marja superioară + inferioară: 0vw
Căptușeală sus + jos: 0vw

Adăugați modulul Woo Breadcrumb

Conţinut

Acum, adăugați primul modul; woo pesmetul.

Produs: Acest produs

Text

În fila Design, stilizați textul după cum urmează:

Font: Duru Sans
Stilul fontului: TT
Culoare: Negru # 000000
Mărimea:
- Desktop: 0,7vw
- Tabletă: 1,5vw
- Telefon: 1.7vw
Spațierea literelor: 2 px

Dimensionare

Apoi, ajustați dimensiunea.

Lățime: 100%

Spațiere

În cele din urmă, reglați distanța.

Marja superioară:
- Desktop: 3em
- Tabletă + Telefon: 0em
Marja inferioară:
- Desktop + Tabletă: 1em
- Telefon: 0em
Căptușeală superioară + inferioară: 1em
Căptușeală stângă: 2em

Adăugați al doilea rând

Structura coloanei

Adăugați un al doilea rând folosind următoarea structură de coloane:

Dimensionare

Deschideți setările rândurilor și modificați lățimea pe diferite dimensiuni ale ecranului.

Lăţime:
- Desktop: 80%
- Tabletă + telefon: 65%

Spațiere

Reglați și distanța.

Căptușeală de sus: 0vw

Coloana 1 + 2 Setări

fundal

Continuați cu setările coloanei. Ambele coloane 1 și 2 au același stil. Începeți cu fundalul.

Culoare: alb #ffffff

Frontieră

Și adăugați un stil de margine și la ambele coloane.

Stiluri de frontieră: toate cele patru laturi
Lățimea chenarului: 4 px
Culoare: # 333333

Adăugați modulul Woo Images în coloana 1

Conţinut

E timpul să începeți să adăugați module! Vom avea nevoie de un modul de imagine woo în coloana 1.

Produs: Acest produs

Elemente

Reglați comutatoarele din fila Elemente după cum urmează:

Imagine prezentată: Activată
Afișați imagini din galerie: OFF
Afișați insigna de vânzări: OFF

Adăugați modulul Woo Title la coloana 1

Conţinut

Sub imagine, adăugați un modul de titlu woo. Selectați conținutul.

Produs: Acest produs

Textul titlului

În fila Design, stilizați textul.

Titlu Titlu nivel: H1
Font H1: Droid Sans
Stil font H1: TT
Culoare H1: Foarte gri închis # 333333
Spațierea literelor: 5 px
Înălțimea liniei: 1em

Spațiere

Apoi, ajustați valorile spațierii.

Marja superioară:
- Tabletă + telefon: 0vw
Căptușeală de sus: 0vw
Căptușeală inferioară:
- Desktop: 1,5vw
- Tabletă: 3,5vw
- Telefon: 6vw
Căptușeală stângă:
- Desktop: 2vw
- Tabletă + telefon: 5vw
Garnitura dreapta:
- Desktop + Tabletă: 0vw

Frontieră

Completați setările modulului adăugând un chenar.

Stiluri de margine: margine de jos
Lățime: 4 px
Culoare: Foarte gri închis # 333333

Adăugați modulul de descriere Woo în coloana 1

Conţinut

Continuând, adăugați un modul de descriere woo. Selectați conținutul și tipul de descriere.

Produs: Acest produs
Descriere tip: Descriere

Text

Apoi, stilizați textul după cum urmează:

Font: Duru Sans
Stilul fontului: TT
Culoare: Foarte gri închis # 333333
Mărimea:
- Desktop: 0,8vw
- Tabletă: 1.4vw
- Telefon: 1,8vw
Spațierea literelor: 3 px
Înălțimea liniei: 2em

Spațiere

Completați setările modulului adăugând câteva umpluturi personalizate pe diferite dimensiuni de ecran.

Căptușeală sus + jos: 0vw
Căptușeala stânga + dreapta:
- Desktop: 2vw
- Tabletă + telefon: 5vw

Adăugați modulul de preț Woo în coloana 1

Conţinut

Apoi, adăugați un modul de preț woo în coloană și selectați produsul.

Produs: Acest produs

Textul prețului

Stilizați textul prețului după cum urmează:

Font: Duru Sans
Culoare: Foarte gri închis # 333333
Mărimea:
- Desktop: 1,5vw
- Tabletă: 3.2vw
- Telefon: 4vw
Spațierea literelor: 3 px
Înălțimea liniei: 1em

Spațiere

Reglați și setările de spațiere.

Marja inferioară:
- Desktop: 1vw
- Tabletă: 3vw
- Telefon: 4vw
Căptușeală superioară:
- Desktop: 1vw
- Tabletă: 3.3vw
- Telefon: 5vw
Căptușeală inferioară: 0vw
Căptușeală stângă:
- Tabletă + telefon: 5vw
Garnitura dreapta:
- Desktop: 2vw
- Tabletă + telefon: 3vw

Frontieră

În cele din urmă, adăugați un chenar.

Stiluri de frontieră: Frontieră de sus
Lățimea chenarului: 4 px
Culoare: Foarte gri închis # 333333

Adăugați Woo Add to Cart Module în coloana 1

Conţinut

Sub preț, adăugați un modul add to cart și selectați produsul.

Produs: Acest produs

Elemente

Comutați elementele după cum urmează:

Afișați câmpul de cantitate: OPRIT
Arată stoc: ON

fundal

Adăugați și o culoare de fundal.

Culoare fundal: Foarte gri închis # 333333

Buton

În fila Design, stilizați butonul după cum urmează:

Mărimea textului:
- Desktop: 1vw
- Tabletă: 2.6vw
- Telefon: 3.1vw
Culoare: alb #ffffff
Lățimea chenarului: 0 px
Spațierea literelor: 3 px
Font: Duru Sans
Font: TT

Spațiere

Apoi, reglați spațiul.

Căptușeală superioară + inferioară: 0,5vw
Căptușeală stângă: 1vw

Frontieră

În cele din urmă, adăugați un chenar.

Stiluri de frontieră: Frontieră de sus
Lățime: 4 px
Culoare: Foarte gri închis # 333333

Adăugați modulul de informații suplimentare Woo în coloana 2

Conţinut

Treceți la a doua coloană și adăugați un modul de informații suplimentare. Selectați produsul.

Produs: Acest produs

Elemente

Comutați setările elementelor după cum urmează:

Arată titlul: ON

Text

În fila Design, stilizați textul.

Font: Duru Sans
Stilul fontului: I + TT
Culoare: Foarte gri închis # 333333
Mărimea:
- Desktop: 0,7vw
- Tabletă: 1,5vw
- Telefon: 2.4vw
Spațierea literelor: 2 px
Înălțimea liniei: 1,5em

Textul titlului

Stilează textul titlului în continuare.

Font: Duru Sans
Stilul fontului: TT
Culoare: Foarte gri închis # 333333
Mărimea:
- Desktop: 1vw
- Tabletă: 2vw
- Telefon: 2.2vw
Spațierea literelor: 3 px
Înălțimea liniei: 1,5em

Textul atributului

Nu uitați să stilizați și textul atributului.

Font: Duru Sans
Stilul fontului: TT
Culoare: Foarte gri închis # 333333
Mărimea:
- Desktop: 0,7vw
- Tabletă: 2vw
- Telefon: 2.4vw
Spațierea literelor: 2 px

Spațiere

Apoi, reglați spațiul.

Căptușeală superioară:
- Desktop: 1vw
- Tabletă + telefon: 3vw
Căptușeală inferioară:
- Desktop + Tabletă: 1vw
Căptușeală stângă:
- Desktop: 2vw
- Tabletă + telefon: 5vw
Garnitura dreapta:
- Telefon: 3vw

Adăugați modulul Woo Gallery în coloana 2

Conţinut

Ultimul modul de care avem nevoie pentru a finaliza designul este un modul galerie woo. Selectați produsul.

Produs: Acest produs

Aspect

Treceți la fila de proiectare și schimbați aspectul.

Aspect: glisor

Spațiere

Apoi, ajustați setările de spațiere după cum urmează:

Marja superioară:
- Desktop: -2vw
- Tabletă: -4vw
- Telefon: -6vw
Căptușeală de sus: 0vw

Frontieră

În cele din urmă, adăugați un chenar.

Stiluri de frontieră: Frontieră de sus
Lățime: 4 px
Culoare: Foarte gri închis # 333333

3. Convertiți în șablon pentru Divi Theme Builder

Salvați în biblioteca Divi

Acum că am finalizat proiectarea, este timpul să salvați aspectul paginii produsului în Biblioteca Divi. Dacă nu aveți o categorie pentru aspectele produselor, creați una.

Salvați ca: Aspect
Nume: Maestru de produs în stil japonez
Categorie: Aspecte de produs.

Deschideți Divi Theme Builder și creați un șablon nou

Pentru a utiliza acest design pe toate paginile de produs, trebuie să creați un șablon pentru acesta în generatorul de teme. În pagina de creare a temelor, adăugați un șablon nou. Selectați „toate produsele” din meniul derulant. Dacă doriți să utilizați acest design numai pentru unele dintre produsele dvs., puteți ajusta setările.

Adăugați corp personalizat din biblioteca Divi

Faceți clic pe „adăugați corp personalizat” și selectați „adăugați din bibliotecă” în meniul derulant.

Găsiți aspectul în aspectele salvate și aplicați

În fereastra de machete, faceți clic pe machete salvate și căutați-l pe cel pe care tocmai l-am creat.

Salvați modificările aduse Theme Builder

Nu uitați să salvați modificările în generatorul de teme.

previzualizare

Șablonul se va aplica acum tuturor produselor de pe site-ul dvs. web. Să aruncăm o ultimă privire asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Este o folie!

În această postare, v-am arătat cum să creați o pagină de produs inspirată de estetica japoneză. Stilul este curat și minimal, perfect pentru prezentarea produselor delicate sau realizate manual. De asemenea, v-am arătat cum să transformați aspectul într-un șablon cu generatorul de teme Divi. Încercați acest design cu noul dvs. proiect Divi + WooCommerce și spuneți-ne ce credeți.