Cum să adăugați informații despre produs în pagina Divi

Modul în care vă proiectați paginile de produse spune multe despre magazinul dvs. în general. Proiectarea paginii dvs. de produs este o parte importantă a experienței de achiziție, așa că merită de multe ori să mergi în plus. Dacă doriți să creați o pagină de produs puțin mai interactivă, vă va plăcea această postare. În acest tutorial, vă vom arăta cum să adăugați informații despre produs în interiorul unui aspect de pagină de produs frumos construit. De asemenea, vom transforma acest aspect într-un șablon de pagină a produsului și 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 GRATUIT șablonul de pagină pentru produsul Slide-In

Pentru a pune mâinile pe șablonul de pagină al produsului, trebuie 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!

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

Detalii produs

Începeți prin a crea un produs nou sau a deschide unul existent. Pentru a obține exact același rezultat în proiectare, va trebui să adăugați următoarele detalii la produsul dvs.:

• Nume
• Descriere
• Imaginea produsului cu fundal transparent
• Preț
• Categorie

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

Activați Divi Builder și modificați aspectul paginii în colțul din dreapta sus.

• Aspect pagină: lățime completă

Treceți la Visual Builder

După ce ați schimbat aspectul paginii, puteți trece la Visual Builder al lui Divi făcând clic pe „Build On The Front End”.

2. Creați informații despre produs Prezentare pagină produs

Eliminați mai multe rânduri de pe pagină

În editorul de pagini al produsului, veți observa diverse elemente relevante pentru produsul dvs. Avem nevoie doar de elementele celui de-al doilea rând, așa că mergeți mai departe și ștergeți primul și ultimul rând din secțiune.

Modificați setările secțiunii

Culoare de fundal

Este timpul să începeți să modificați diferitele elemente pentru a crea aspectul nostru de informații despre produsul slide-in! Deschideți setările secțiunii și schimbați culoarea de fundal.

• Culoare fundal: # ffe4a5

Dimensionare

Adăugați și o înălțime minimă la setările de dimensionare. Acest pas va permite secțiunii să ocupe întreaga înălțime a browserului.

• Înălțime minimă: 100vh

Spațiere

Apoi, accesați setările de spațiere și eliminați toate umpluturile implicite de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Vizibilitate

Ascundeți și debordările secțiunii. Acest lucru vă va asigura că nu apare nicio bară orizontală atunci când au loc animațiile.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Modificați setările rândului

Dimensionare

Apoi, deschideți setările de rând și modificați setările de dimensionare pe diferite dimensiuni de ecran.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100% (desktop), 90% (tabletă și telefon)

Spațiere

Eliminați și umplutura implicită de sus și de jos a rândului.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Poziţie

Apoi, accesați setările de poziție și asigurați-vă că rândul rămâne în partea de jos a secțiunii modificând setările în consecință:

• Poziție: Absolută (desktop), implicită (tabletă și telefon)
• Locație: Centrul de jos

Modificați setările coloanei 2

Culoare de fundal

Apoi, vom face câteva modificări la a doua coloană. Folosiți o culoare de fundal alb.

• Culoare fundal: #FFFFFF

Spațiere

Apoi, adăugați câteva valori de umplere personalizate la setările de spațiere.

• Căptușeală superioară: 10vw
• Căptușeală inferioară: 10vw
• Garnitura stânga: 8vw
• Garnitura dreapta: 8vw

Filtru implicit

Treceți la setările filtrelor coloanei și asigurați-vă că filtrele de luminozitate, inversare și sepia își păstrează valoarea implicită într-o stare normală.

• Luminozitate: 100%
• Inversează: 0%
• Sepia: 0%

Treceți cu mouse-ul pe filtru

Cu toate acestea, la cursă, vom schimba valorile în consecință:

• Luminozitate: 49%
• Inversează: 100%
• Sepia: 100%

Poziţie

De asemenea, ne asigurăm că coloana este plasată în colțul din dreapta jos al containerului rândului, aplicând următoarele setări de poziție:

• Poziție: Absolută (desktop), implicită (tabletă și telefon)
• Locație: în partea dreaptă jos

Modificați modulul Woo Title din coloana 2

Setări text titlu

Este timpul să începeți personalizarea diferitelor module din coloana 2! Deschideți modulul Woo Title și modificați setările de text H1 după cum urmează:

• Titlu Font: Playfair Display
• Culoare text titlu: # 000000
• Dimensiune text titlu: 3vw (desktop), 5vw (tabletă), 7vw (telefon)

Modificați modulul de preț Woo în coloana 2

Setări text preț

Deschideți apoi setările Woo Price Module și modificați setările pentru textul prețului.

• Font de preț: Poppins
• Culoare text preț: # e5bc87
• Preț Dimensiune text: 1,4vw (desktop), 3vw (tabletă), 4vw (telefon)

Spațiere

Adăugați niște margini personalizate în partea de sus și de jos pe diferite dimensiuni ale ecranului.

• Marja superioară: 2vw (desktop), 4vw (tabletă și telefon)
• Marja inferioară: 3vw (desktop), 5vw (tabletă și telefon)

Modificați modulul de descriere Woo în coloana 2

Setări text

Accesați modulul de descriere Woo. Modificați setările de text ale modulului în consecință:

• Font text: Poppins
• Greutatea fontului textului: ușoară
• Dimensiune text: 0,8vw (desktop), 1,8vw (tabletă), 2,7vw (telefon)
• Înălțimea liniei textului: 2.1em

Spațiere

Adăugați și o marjă inferioară receptivă.

• Marja inferioară: 3vw (desktop), 5vw (tabletă și telefon)

Modificați modulul Woo Add to Cart din coloana 2

Setări câmpuri

În continuare avem modulul Woo Add to Cart. Modificați setările câmpurilor modulului.

• Culoare fundal câmpuri: rgba (255,255,255,0)
• Culoare text câmpuri: # 000000
• Câmpuri Font: Poppins
• Dimensiune text câmpuri: 0.9vw (desktop), 2vw (tabletă), 3vw (telefon)

• Toate colțurile: 0 px
• Câmpuri Lățimea marginii inferioare: 1 px
• Câmpuri Culoare margine inferioară: # e5bc87

Setări buton

Treceți la setările butonului și stilizați butonul în consecință:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 0.9vw (Desktop), 2vw (Tabletă), 3vw (Telefon)
• Culoarea textului butonului: #ffffff
• Culoarea degrade 1: # e5bd89
• Culoare gradient 2: # e5bc87
• Tipul gradientului: liniar
• Direcția gradientului: 153 grade
• Lățimea chenarului butonului: 0 px

• Raza chenarului butonului: 1 px
• Buton Font: Poppins

• 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ă: 3vw (desktop), 6vw (tabletă), 9vw (telefon)
• Căptușeală dreaptă: 3vw (desktop), 6vw (tabletă), 9vw (telefon)

Spațiere

Completați setările modulului adăugând o margine de buton pe diferite dimensiuni de ecran.

• Marja inferioară: 2vw (Destkop), 4vw (tabletă și telefon)

Modificați Woo Meta Module în coloana 2

Setări text

Continuați deschizând Woo Meta Module și modificați setările de text.

• Meta Font: Poppins
• Meta Font Greutate: ușoară
• Dimensiune Meta Text: 0,8vw (desktop), 1,8vw (tabletă), 3vw (telefon)

Setări text link

Schimbați și culoarea textului linkului.

• Culoare text link: # e5bc87

Adăugați un modul de cod în coloana 2

Pentru a schimba culoarea de fundal a zoomului modulului Woo Image, vom avea nevoie de un pic de cod CSS pe care îl vom plasa într-un nou modul de cod din coloana 2.

Adăugați cod CSS pentru a schimba culoarea de fundal Woo Image Zoom

Adăugați următoarele linii de cod CSS în modulul de cod:

<style>
.zoomImg {
background-color: #FFE4A5 !important;
}
</style>

3. Adăugați setări de animație sincronizată la containere

Woo Image Module

Acum că am stilat diferitele elemente de pe pagina noastră de produs, este timpul să facem ca efectul de informații despre produs să fie introdus! Pentru a realiza acest lucru, vom folosi setările de animație încorporate ale Divi. Deschideți modulul Woo Image în coloana 1 și aplicați următoarea animație:

• Stil de animație: Slide
• Direcția animației: sus
• Animație Opacitate de pornire: 50%
• Curba de viteză a animației: ușurință

Coloana 1

Deschideți apoi setările coloanei 1 și utilizați următoarele setări de animație:

• Stil de animație: Slide
• Direcția animației: stânga (desktop), sus (tabletă și telefon)
• Întârziere animație: 950 ms (desktop), 0vw (tabletă și telefon)
• Intensitatea animației: 25%
• Animație Opacitate de pornire: 100%
• Curba de viteză a animației: ușurință-intrare-ieșire

Coloana 2

În cele din urmă, aplicați următoarele setări de animație în coloana 2:

• Stil de animație: Slide
• Direcția animației: stânga (desktop), sus (tabletă și telefon)
• Durata animației: 1200 ms
• Întârziere animație: 800 ms (desktop), 0 ms (tabletă și telefon)
• Animație Opacitate de pornire: 100%
• Curba de viteză a animației: ușurință-intrare-ieșire

4. Transformați aspectul paginii produsului în șablon

Salvați aspectul în biblioteca Divi

După ce ați finalizat întregul design al paginii produsului, îl puteți salva în biblioteca Divi. Vom folosi acest aspect al paginii de produs salvate pentru a crea un nou șablon de pagină a produsului.

Accesați Divi Theme Builder și adăugați un șablon nou

Accesați Divi Theme Builder și adăugați un șablon nou.

Utilizați șablonul pentru toate produsele

Utilizați noul șablon pentru toate produsele.

• Utilizare pe: Toate produsele

Încărcați aspectul în corpul șablonului pentru pagina de produs

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

Navigați la „Aspectele dvs. salvate” și selectați aspectul paginii produsului pe care l-ați încărcat în biblioteca Divi.

5. Salvați modificările constructorului de teme și vedeți rezultatul

Odată ce ați încărcat aspectul în noul dvs. șablon de pagină de produs, singurul lucru rămas de făcut este să salvați toate modificările Theme Builder și să vizualizați rezultatul pe site-ul dvs. web!

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ă vă condimentați paginile de produse, arătându-vă cum să proiectați un aspect cu informații despre produs. Aceasta este o modalitate excelentă de a adăuga o interacțiune suplimentară la paginile dvs. de produse. Ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări sau sugestii, 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.