Descărcați o frumoasă pagină cu ecran complet pentru Divi

Deoarece modulele WooCommerce au devenit parte a Divi, v-am arătat câteva modele de pagini de produse pe care le puteți crea folosind opțiunile integrate Divi. Astăzi, adăugăm un nou tutorial la lista respectivă, arătându-vă cum să creați o frumoasă pagină cu ecran complet. Încadrăm tot conținutul produsului într-o singură secțiune, în timp ce creăm un design uimitor. Deși limităm derularea verticală care este necesară pe pagina produsului, designul nu pare în niciun caz copleșitor. De asemenea, ne-am asigurat că designul rămâne frumos și receptiv pe dimensiuni mici ale ecranului. Veți putea descărca gratuit fișierul JSON!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați aspectul produsului pe ecran complet GRATUIT

Pentru a pune mâna pe aspectul gratuit al produsului pe ecran complet, 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.

DESCARCA

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!

Abonați-vă la canalul nostru Youtube

Să începem să recreăm!

Deschideți pagina produsului existent

Primul lucru pe care trebuie să-l faceți este să deschideți o pagină de produs existentă sau să creați una nouă. Pentru acest aspect, am adăugat următoarele elemente pe pagina produsului nostru:

• Titlul produsului
• Imagine prezentată
• Scurta descriere
• Descriere
• Preț

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

Continuați activând Divi și schimbând aspectul paginii în setările paginii.

Treceți la Visual Builder

Odată ce ați terminat, puteți trece la Visual Builder.

Ștergeți secțiunea existentă

În interiorul Visual Builder, veți observa o secțiune cu articolele implicite din pagina produsului. Puteți continua și șterge întreaga secțiune. În următorii pași ai acestei postări, vom recrea propriul nostru design alternativ.

Adăugați o secțiune nouă

Spațiere

E timpul să începi să creezi! Adăugați o nouă secțiune, deschideți setările secțiunii și modificați valorile de umplere de sus și de jos.

• Căptușeală superioară: 5vw
• Căptușeală inferioară: 5vw

Revărsări

Ascundeți și debordările secțiunii.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și reglați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%

Coloana 1

Indicele Z

De asemenea, mărim indexul z al primei coloane în setările de vizibilitate.

• Indicele Z: 10

Coloana 2

Fundal de gradient

Deschideți apoi setările coloanei 2 și adăugați un fundal degradat pe diferite dimensiuni de ecran:

• Culoare 1: # ffcb49
• Culoare 2: #ffffff
• Tipul gradientului: radial
• Direcție radială: centru
• Poziția inițială: 66% (desktop), 50% (tabletă și telefon)
• Poziție finală: 66% (desktop), 50% (tabletă și telefon)

Adăugați modulul Woo Title la coloana 1

Conținut dinamic

E timpul să începeți să adăugați module! În coloana 1, singurul modul de care avem nevoie este un modul Woo Title.

• Produs: Acest produs

Setări text titlu

Treceți la fila de proiectare a modulului și modificați setările pentru textul titlului după cum urmează:

• Titlu Font: Montserrat
• Titlu Greutate font: Ultra ușor
• Alinierea textului titlului: stânga (desktop), centru (tabletă și telefon)
• Dimensiune text titlu: 9vw

Dimensionare

Modificați și dimensiunea modulului.

• Lățime: 50vw (desktop), 100% (tabletă și telefon)

Spațiere

Împreună cu setările de spațiere.

• Marja superioară: 14vw (desktop), 0vw (tabletă și telefon)
• Marja inferioară: 5vw (tabletă și telefon)
• Marja stângă: -11vw (desktop), 2vw (tabletă și telefon)
• Marja dreaptă: 2vw (tabletă și telefon)

Transformare Rotire

Nu în ultimul rând, rotiți întregul modul în setările de transformare.

• Stânga: 270deg (desktop), 0deg (tabletă și telefon)

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

Conținut dinamic

La al doilea modul! Acolo, singurul modul de care avem nevoie este modulul Woo Image.

• Produs: Acest produs

Setări imagine

Treceți la fila de proiectare a modulului și modificați setările imaginii după cum urmează:

• Imagine Colțuri rotunjite: 1vw (Toate colțurile)

• Puterea neclarității umbrei cutiei: 50 px
• Culoare umbră: rgba (0,0,0,0,3)

Dimensionare

Completați setările modulului Woo Image prin schimbarea lățimii și a alinierii modulului în setările de dimensionare.

• Lățime: 35vw
• Alinierea modulului: centru

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

Conținut dinamic

La ultima coloană! Acolo, primul modul de care avem nevoie este modulul de descriere Woo.

• Produs: Acest produs
• Tip Descriere: Descriere Scurtă

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text după cum urmează:

• Font text: Montserrat
• Stil de text text: majuscule
• Dimensiune text: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Spațiere scrisoare text: -0.07vw
• Înălțimea liniei textului: 1,8em

Spațiere

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

• Marja superioară: 9vw
• Căptușire stângă: 2vw (desktop), 5vw (tabletă și telefon)
• Garnitura dreapta: 5vw

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

Conținut dinamic

Treceți la următorul modul, care este modulul Woo Price.

• Produs: Acest produs

Setări text preț

Modificați setările de text ale prețului modulului după cum urmează:

• Preț Font: Montserrat
• Culoare text preț: # 333333
• Preț Dimensiune text: 3vw (desktop), 7vw (tabletă), 10vw (telefon)
• Înălțimea liniei de preț: 1.8em

Spațiere

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

• Marja superioară: 4vw
• Căptușire stângă: 2vw (desktop), 5vw (tabletă și telefon)
• Căptușeală dreaptă: 2vw (desktop), 5vw (tabletă și telefon)

Adăugați modulul Adăugați în coș la coloana 3

Conținut dinamic

Următorul și ultimul modul de care avem nevoie pentru a finaliza acest design este modulul Woo Add To Cart.

• Produs: Acest produs

Setări câmpuri

Modificați setările câmpurilor modulului după cum urmează:

• Culoarea fundalului câmpurilor: # 0a0900
• Culoare text câmpuri: #ffffff
• Fields Font: Montserrat

• Dimensiune text câmpuri: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Colțuri rotunjite: 50vw (toate colțurile)

Setări buton

Joacă-te și cu setările butoanelor.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # ffcb49
• Lățimea chenarului butonului: 0 px

• Buton Font: Montserrat

• Căptușeală superioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Căptușeală inferioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Căptușire stângă: 4vw (desktop), 8vw (tabletă), 10vw (telefon)
• Căptușeală dreaptă: 4vw (desktop), 8vw (tabletă), 10vw (telefon)

Spațiere

Și completați setările modulului prin adăugarea unor valori de spațiere personalizate pe diferite dimensiuni de ecran.

• Marja superioară: 2vw
• Marja stângă: -3vw (desktop), 5vw (tabletă și telefon)
• Marja dreaptă: 5vw (tabletă și telefon)

Transformați pagina produsului în șablon

Salvați aspectul paginii în biblioteca Divi

După ce ați completat pagina de produs pe ecran complet, o puteți folosi pentru fiecare dintre produsele dvs. utilizând Divi's Theme Builder. Pentru aceasta, salvați aspectul pe care tocmai l-ați creat în biblioteca Divi.

Adăugați un șablon nou în Theme Builder

Treceți la Theme Builder în setările Divi și adăugați un șablon nou.

Selectați paginile de produse pe care doriți să apară acest aspect.

Încărcați aspectul în corpul șablonului

Apoi, faceți clic pe „Adăugați un corp global” și selectați „Adăugați din bibliotecă”.

Alegeți aspectul în fila „Aspectele dvs. salvate”.

Și salvați toate modificările!

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să recreați o frumoasă pagină cu ecran complet pe care să o puteți utiliza pentru orice fel de site de comerț electronic pe care îl configurați. Am setat setările diferitelor module woo pentru a crea un rezultat uimitor și pentru a limita derularea verticală care este necesară. Sperăm că acest design vă va inspira să creați și propriile pagini de produse pe ecran complet! Dacă aveți întrebări, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.