Cum să stivați vertical Woo Galerie imagini în interiorul șablonului dvs. de pagină de produs Divi

În mod implicit, de îndată ce adăugați imagini de galerie la produsele dvs. WooCommerce, acestea vor apărea orizontal sub imaginea prezentată a produsului dvs. pe frontendul designului paginii de produs. În unele modele specifice, stivuirea pe verticală a acestor imagini de galerie Woo ar putea fi mai convenabilă, de exemplu, în proiectele de pagini cu ecran complet, de exemplu. Dacă sunteți în căutarea unei modalități rapide de a stiva pe verticală imagini de galerie woo în șablonul de pagină de produs pe care îl creați cu Divi's Theme Builder, vă va plăcea acest tutorial. Vă vom arăta pas cu pas cum să ajungeți acolo. Vom însoți această abordare cu un șablon de pagină de produs minim pe care îl veți putea descărca gratuit, de asemenea! Acest tutorial funcționează cel mai bine pe paginile de produse care utilizează imagini cu un raport 1: 1.

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 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.

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!

Construiți șablonul de pagină al produsului în cadrul Divi Theme Builder

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

Începeți accesând Divi Theme Builder și faceți clic pe „Adăugați un șablon nou”.

Utilizați șablonul pentru toate produsele

Vom folosi acest șablon pentru toate produsele, dar nu ezitați să modificați condițiile după cum doriți.

Introduceți Editorul de șabloane pentru corp

După ce ați creat șablonul, faceți clic pe „Adăugați corp personalizat” și continuați selectând „Construiți corp personalizat” pentru a fi redirecționat către editorul de șabloane.

Începeți construirea corpului șablonului de pagină pentru categorie

Modificați secțiunea # 1

Culoare de fundal

În editorul de șabloane, veți observa o secțiune. Deschideți acea secțiune și adăugați o culoare de fundal alb.

• Culoare fundal: #ffffff

Spațiere

Treceți la fila de proiectare și eliminați toate umpluturile implicite de sus și de jos.

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

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândurilor, treceți la fila de proiectare și modificați setările de dimensionare în consecință:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lățime: 95%
• Lățime maximă: 2560 px
• Alinierea rândurilor: centru

Spațiere

Vom folosi niște căptușeli personalizate de sus și de jos și pe dimensiuni mai mici de ecran.

• Căptușeală superioară: 100 px (numai tabletă și telefon)
• Căptușeală inferioară: 100 px (numai tabletă și telefon)

Element principal CSS

Pentru a alinia conținutul coloanei pe desktop, vom folosi două linii de cod CSS în elementul principal al rândului. Vom readuce proprietatea afișajului pe tabletă și telefon.

Desktop:

display: flex;
align-items: center;

Tabletă și telefon:

display: block;

Coloana 2 Fundal gradient

Odată ce setările de rând generale sunt realizate, deschideți setările celei de-a doua coloane și aplicați un fundal de gradient radial.

• Culoare 1: # f7f2ef
• Culoare 2: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: centru
• Poziția inițială: 20%
• Poziție finală: 20%

Coloana 2 Spațierea

Treceți la fila de proiectare a coloanei și modificați valorile de umplere personalizate pe diferite dimensiuni ale ecranului.

• Căptușeală superioară: 30% (desktop), 10% (tabletă și telefon)
• Căptușeală inferioară: 10%
• Căptușeală stângă: 5%
• Căptușeală dreaptă: 5%

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

Conținut dinamic

E timpul să adăugați module! Primul modul de care avem nevoie în coloana 1 este un modul Woo Images. Acest tutorial funcționează cel mai bine dacă utilizați o imagine prezentată și imagini de galerie cu un raport 1: 1. În acest fel, vom putea transforma imaginile în cercuri în pașii următori. După ce ați adăugat modulul Woo Images, asigurați-vă că conținutul dinamic este setat la „Acest produs”.

• Produs: Acest produs

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

Adăugați cod CSS

Chiar sub modulul Woo Images, vom adăuga un modul de cod. Codul CSS pe care îl inserăm în acest modul de cod ne va ajuta să stivuim vertical imaginile galeriei Woo din partea stângă a coloanei noastre.

<style>

.single-product div.product .woocommerce-product-gallery .flex-viewport{
width: 80% !important;
float: right;
border-radius: 100vw;
}

.woocommerce-product-gallery__image.flex-active-slide {
width: 12.5% !important;
}

.single-product div.product .woocommerce-product-gallery .flex-viewport img {
width: 100%;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav {
width: 15% !important;
float: left;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li {
width: 100%;
float: none;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li img {
border-radius: 100vw;
}

</style>

Adăugați modulul Woo Title la coloana 2

Conținut dinamic

Treceți la coloana următoare. Acolo, primul 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 antetului după cum urmează:

• Font de titlu: PT Sans
• Greutatea fontului titlului: Bold
• Culoare text titlu: # 000000
• Dimensiune text titlu: 84 px (desktop), 60 px (tabletă), 45 px (telefon)

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

Conținut dinamic

Treceți la următorul modul, care este un modul de descriere Woo.

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

Setări text

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

• Font text: Karla
• Dimensiune text: 17 px (desktop și tabletă), 15 px (telefon)
• Înălțimea liniei textului: 1.9em

Spațiere

Completați setările modulului adăugând niște margini de sus și de jos.

• Marja superioară: 5%
• Marja inferioară: 5%

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

Conținut dinamic

Adăugați un modul de preț Woo chiar sub modulul de descriere Woo.

• Produs: Acest produs

Setări text preț

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

• Preț Font: PT Sans
• Prețul greutății fontului: îndrăzneț
• Culoare text preț: # ce8654
• Preț Dimensiune text: 27 px

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

Conținut dinamic

Următorul și ultimul modul de care trebuie să finalizăm acest tutorial este un modul Woo Add to Cart.

• Produs: Acest produs

Setări câmpuri

Treceți la fila de proiectare și modificați setările câmpurilor după cum urmează:

• Culoarea fundalului câmpurilor: #ffffff
• Culoare text câmpuri: # 000000
• Câmpuri Font: Deschideți Sans

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

Setări buton

Apoi, stilizați butonul în setările butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 0a0201
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 100 px

• Buton Font: PT Sans
• Buton Font Greutate: Bold

• Căptușeală pentru butoane: 20 px
• Căptușeală pentru butoane: 20 px
• Căptușire stânga buton: 50 px
• Căptușire dreaptă buton: 50 px

Spațiere

Și completați setările modulului și acest tutorial, adăugând o marjă superioară la modulul Woo Add to Cart. După ce ați terminat modificarea șablonului de pagină a produsului, asigurați-vă că salvați toate modificările Theme Builder înainte de a vizualiza rezultatul pe paginile dvs. de produse!

• Marja superioară: 5%

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ă deveniți creativi cu paginile de produse pe care le creați folosind Divi's Theme Builder și modulele WooCommerce. Mai precis, v-am arătat cum să stivați vertical imaginile galeriei. Această abordare se potrivește cu un design complet al paginii de produs, dar poate fi util pentru orice tip de șablon de pagină de produs pe care îl creați. 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.