Cum se schimbă punctul de întrerupere a coloanei mobile a modulului Divi Shop

În mod implicit, de îndată ce treceți la un dispozitiv mobil, modulul magazin se transformă într-un aspect cu o coloană. Acum, dacă doriți să evidențiați fiecare produs în mod individual, este minunat, dar cu dimensiunile mai mari ale ecranului smartphone-ului în zilele noastre, vă recomandăm să permiteți să apară două produse una lângă alta atunci când utilizați modulul magazin. În tutorialul Divi de astăzi, vă vom arăta cum să schimbați punctul de întrerupere mobil al modulului magazinului folosind CSS, permițând două produse să apară una lângă alta pe majoritatea smartphone-urilor moderne. Acesta este un tutorial excelent pe care să-l aveți la îndemână dacă creați un magazin online în viitor! Veți putea descărca gratuit fișierul JSON al designului!

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.

Mobil

Desktop

Descărcați șablonul paginii magazin GRATUIT

Pentru a pune mâna pe șablonul paginii magazinului 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.

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. Accesați Divi Theme Builder și adăugați un șablon nou

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

Începeți accesând Theme Builder al DIvi și adăugați un șablon nou.

Utilizați șablonul pe pagina magazinului

Utilizați acest nou șablon pe pagina magazinului site-ului dvs. web.

• Utilizați pe: Cumpărați

Începeți să construiți corpul șablonului

Și începeți să construiți corpul șablonului magazinului.

2. Începeți să construiți corpul șablonului

Setări secțiune

Fundal de gradient

Odată ajuns în editorul de șabloane, veți observa o secțiune. Deschideți acea secțiune și utilizați următorul fundal de gradient pentru aceasta:

• Culoare 1: # 32ff3d
• Culoare 2: # 29c4a9
• Tipul gradientului: liniar
• Direcția gradientului: 109 grade

Imagine de fundal

Încărcați și o imagine de fundal. Puteți găsi imaginea de fundal pe care o folosim în acest tutorial în dosarul de descărcare pe care l-ați putut descărca la începutul acestei postări.

• Dimensiunea imaginii de fundal: potrivită

Spațiere

Treceți la fila de proiectare a secțiunii și modificați valorile spațierii în consecință:

• Marja superioară: 50 px
• Marja stângă: 50 px
• Marja dreaptă: 50 px
• Căptușeală inferioară: 150 px

Frontieră

Completați setările secțiunii adăugând o rază de margine.

• Toate colțurile: 20 px

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:

Adăugați un modul de text în coloană

Adăugați conținut H1

Adăugați un modul de text în coloana rândului cu un conținut H1 la alegere.

Setări text H1

Modificați setările de text H1 ale modulului în consecință:

• Font de titlu: Prata
• Alinierea textului de antet: centru
• Culoare text antet: #ffffff
• Dimensiune text antet: 80 px (desktop), 60 px (tabletă), 40 px (telefon)

Adăugați secțiunea 2

Indicele Z

Adăugați o altă secțiune chiar sub cea anterioară. Deschideți setările secțiunii și măriți indexul z.

• Indicele Z: 2

Adăugați un rând nou

Structura coloanei

Apoi, adăugați un rând nou folosind următoarea structură de coloane:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândului și adăugați o culoare de fundal.

• Culoare fundal: #ffffff

Dimensionare

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

• Lățime: 100%
• Lățime maximă: 1380 px

Spațiere

Apoi, adăugați câteva valori de spațiere personalizate pe diferite dimensiuni de ecran.

• Marja superioară: 200 px
• Căptușeală superioară: 50 px (desktop), 20 px (tabletă și telefon)
• Căptușeală inferioară: 50 px (desktop), 20 px (tabletă și telefon)
• Căptușire stângă: 100 px (desktop), 20 px (tabletă și telefon)
• Căptușeală dreaptă: 100 px (desktop), 20 px (tabletă și telefon)

Frontieră

De asemenea, adăugăm o anumită rază de margine pe întregul rând.

• Toate colțurile: 25 px

Box Shadow

Completați setările rândului adăugând o umbră de casetă subtilă.

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

Adăugați modulul magazin în coloană

Conţinut

Acum, este timpul să introduceți modulul nostru de magazin. Folosim un aspect cu 4 coloane.

• Aspect coloane: 4 coloane

Acoperire

Treceți la fila de proiectare a modulului și schimbați culorile suprapunerii.

• Culoare pictogramă suprapunere: # 29c6a6
• Culoare fundal suprapunere: rgba (255.255.255,0.75)

Imagine

Modificați și setările imaginii.

• Toate colțurile: 10 px

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

Setări text titlu

Continuați modificând setările textului titlului în consecință:

• Titlu Font: Prata
• Dimensiune text titlu: 30 px (desktop), 25 px (tabletă), 20 px (telefon)

Setări text preț

Apoi, faceți câteva modificări la setările textului de preț.

• Preț Font: Montserrat
• Preț Font Greutate: Mediu
• Preț Dimensiune text: 18 px (desktop), 16 px (tabletă), 14 px (telefon)

Spațiere

Completați setările modulului adăugând câteva căptușeli de top.

• Căptușeală superioară: 50 px

Adăugați un modul de cod în coloană

Odată ce ați finalizat proiectarea generală a modulului magazinului, este timpul să modificați punctul de întrerupere a coloanei mobile a modulului magazinului utilizând CSS. Vom adăuga codul CSS într-un modul de cod din interiorul designului nostru. Continuați și adăugați un nou modul de cod chiar sub modulul magazin.

Introduceți codul CSS

Reducem punctul de întrerupere mobil cu o coloană la lățimea de 300 px. Aceasta înseamnă că majoritatea smartphone-urilor moderne vor afișa două produse una lângă alta în loc de una. Pentru a face acest lucru, vom adăuga următoarele linii de cod CSS în modulul de cod:

<style>
@media (max-width: 479px) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 49% !important;
}
}
@media (max-width: 300px) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 100% !important;
}
}
</style>

3. Salvați toate modificările și rezultatul previzualizării constructorului de teme

După ce ați finalizat proiectarea paginii magazinului și ați adăugat codul CSS pentru a schimba punctul de întrerupere mobil, puteți salva toate modificările Theme Builder și puteți vedea rezultatul pe pagina magazinului dvs.!

previzualizare

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

Mobil

Desktop

Gânduri finale

În această postare, v-am arătat cum să schimbați punctul de întrerupere a coloanei mobile a modulului magazin, care vă permite să afișați două produse una lângă alta pe majoritatea smartphone-urilor moderne din zilele noastre. Acesta este un mod excelent de a reduce derularea mobilă necesară și de a le arăta vizitatorilor mai multe produse simultan. Ați putut descărca gratuit fișierul JSON! 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.