Cum să încadrați un produs în imaginea dvs. de fundal cu opțiunile coloanei Divi

Cu modulele WooCommerce ale Divi, există o mulțime de modele pe care le puteți realiza folosind Divi. În tutorialul Divi de astăzi, vom încerca să vă inspirăm o altă idee de proiectare pe care o puteți realiza folosind numai opțiunile încorporate ale Divi. Mai precis, vă vom arăta cum să încadrați un produs în imaginea de fundal. Rezultatul depinde în totalitate de imaginea dvs. de fundal, dar dacă parcurgeți acest tutorial, veți ști ce pași trebuie să faceți pentru a personaliza tehnica pentru propriul site web! Veți putea descărca gratuit fișierul JSON al tutorialului!

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 Frame GRATUIT

Pentru a pune mâna pe aspectul produsului cu cadru 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. Configurați secțiunea cu imagine de fundal receptivă

Adăugați o secțiune nouă

Imagine de fundal receptivă

Primul pas pentru a încadra un produs în imaginea de fundal este adăugarea unei noi secțiuni la pagina la care lucrați. Deschideți setările secțiunii și încărcați imagini de fundal receptive. Puteți găsi ambele imagini pe care le-am folosit în dosarul pe care l-ați putut descărca la începutul acestei postări.

• Imagine de fundal: Peisaj
• Dimensiunea imaginii de fundal: potrivită
• Poziția imaginii de fundal: Centrul de sus

• Imagine de fundal: pătrat

Spațiere

Treceți la fila de proiectare și adăugați câteva căptușeli personalizate în partea de sus și de jos pe diferite dimensiuni ale ecranului.

• Căptușeală superioară: 3vw (desktop), 0vw (tabletă și telefon)
• Căptușeală inferioară: 3vw (desktop), 7vw (tabletă), 18vw (telefon)

Frontieră

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

• Lățimea chenarului: 2vw
• Culoare margine: #ffffff

2. Adăugați diferite elemente de cadru în coloană

Adăugați un rând nou

Structura coloanei

Acum, după cum puteți observa în imaginea de fundal, produsul este situat în partea dreaptă a imaginii de fundal. Vom alege o structură de coloană potrivită pentru un rând nou în secțiunea noastră. În acest caz, aceasta este următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului ș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: 100%
• Lățime maximă: 100%

Spațiere

Completați setările rândului adăugând câteva umpluturi personalizate la stânga și la dreapta.

• Căptușeală stângă: 5vw
• Garnitura dreapta: 5vw

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

Lăsați caseta de conținut goală

E timpul să începeți să adăugați module! Pentru a permite produsului să se afișeze, vom folosi un modul de text gol.

Spațiere

Vom crește înălțimea modulului în setările de spațiere următoare.

• Căptușeală superioară: 22vw (desktop), 39vw (tabletă), 35vw (telefon)
• Căptușeală inferioară: 15vw (desktop), 39vw (tabletă), 35vw (telefon)

Frontieră

Și vom adăuga și o margine.

• Lățimea chenarului: 3vw
• Lățimea marginii inferioare: 1vw
• Culoare margine: rgba (255,255,255,0,7)

Adăugați modulul Woo Title la coloana 2

Conținut dinamic

Treceți la modulul următor, care este un modul Woo Title. Selectați un produs la alegere.

• Produs: Găsiți în listă

Culoare de fundal

Utilizați următoarea culoare de fundal:

• Culoare fundal: rgba (255,255,255,0,7)

Setări text titlu

Treceți la fila de proiectare a modulului și modificați setările de text H3 în consecință:

• Titlu Nivel antet: H3
• Titlu Font: Work Sans
• Dimensiune text titlu: 2,5vw (desktop), 5vw (tabletă), 6vw (telefon)

Spațiere

Adăugați și câteva valori de umplere personalizate.

• Căptușeală superioară: 1vw
• Căptușeală inferioară: 1vw
• Garnitura stânga: 3vw
• Garnitura dreapta: 3vw

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

Conținut dinamic

Următorul modul de care avem nevoie este un modul de descriere Woo. Selectați un produs la alegere.

• Produs: Găsiți în listă
• Tip Descriere: Descriere Scurtă

Culoare de fundal

Modificați culoarea de fundal a modulului în consecință:

• Culoare fundal: rgba (255.255.255,0.7)

Setări text

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

• Font text: Deschideți Sans
• Dimensiune text: 0,9vw (desktop), 2,2vw (tabletă), 2,8vw (telefon)
• Înălțimea liniei de titlu: 2.2em

Spațiere

Completați setările modulului adăugând câteva valori de umplere personalizate.

• Căptușeală superioară: 1vw
• Căptușeală inferioară: 1vw
• Garnitura stânga: 3vw
• Garnitura dreapta: 3vw

Adăugați modulul text Woo Price în coloana 2

Conținut dinamic

În continuare, avem modulul text Woo Price. Selectați un produs la alegere.

• Produs: Găsiți în listă

Culoare de fundal

Modificați culoarea de fundal.

• Culoare fundal: rgba (255,255,255,0,7)

Setări text preț

Treceți la fila de proiectare a modulului și modificați setările textului de preț în consecință:

• Font de preț: Work Sans
• Culoare text preț: # 000000
• Preț Dimensiune text: 2vw (desktop), 4vw (tabletă), 5vw (telefon)

Spațiere

Completați setările modulului adăugând câteva valori de umplere personalizate.

• Căptușeală superioară: 2vw
• Căptușeală inferioară: 2vw
• Garnitura stânga: 3vw
• Garnitura dreapta: 3vw

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

Conținut dinamic

La următorul și ultimul modul, care este modulul Woo Add To Cart! Selectați un produs la alegere.

• Produs: Găsiți în listă

Culoare de fundal

Schimbați culoarea de fundal.

• Culoare fundal: rgba (255,255,255,0,7)

Setări câmpuri

Modificați și setările câmpurilor modulului.

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

• Câmpuri Lățimea marginii inferioare: 1 px
• Câmpuri Culoare margine inferioară: # 000000

Setări buton

Continuați stilizând butonul după cum urmează:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1.1vw (desktop), 2.5vw (tabletă), 3.5vw (telefon)
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 000000
• Lățimea chenarului butonului: 0 px

• Raza chenarului butonului: 10vw
• Buton Font: Deschideți Sans

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

Spațiere

Și finalizați setările modulului prin adăugarea unor valori de marjă și umplere personalizate.

• Marja inferioară: 2vw
• Căptușeală superioară: 3vw
• Căptușeală inferioară: 3vw
• Garnitura stânga: 3vw
• Garnitura dreapta: 3vw

3. Coloană Stil, Redimensionare și Repoziționare

Modificați setările coloanei 2

Fundal de gradient

Acum, ultima parte a acestui tutorial ne permite să unim diferitele module. Deschideți setările coloanei 2 și utilizați următorul fundal de gradient pentru aceasta:

• Culoare 1: rgba (43.135.218,0)
• Culoare 2: #ffffff
• Tipul gradientului: liniar
• Start Positon: 39%

Frontieră

Adăugați și câteva colțuri rotunjite.

• Toate colțurile: 1vw

Box Shadow

Creăm o oarecare adâncime adăugând și o umbră de casetă subtilă.

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

Transformă Traducere

Și vom completa setările coloanei modificând valorile de traducere de transformare pe diferite dimensiuni de ecran. Acest pas ne permite să repoziționăm coloana după cum dorim. Când utilizați propria imagine de fundal, vă veți bucura cu siguranță de această opțiune!

• Dreapta: 0 px (desktop), 9vw (tabletă și telefon)
• Partea de jos: -5vw (desktop), 0vw (tabletă și telefon)

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ă încadrați un produs în imaginea de fundal folosind opțiunile încorporate ale Divi și modulele WooCommerce care sunt incluse în Divi Builder. Abordarea pe care o luați depinde de imaginea de fundal pe care o utilizați, dar parcurgerea acestui tutorial vă va ajuta să înțelegeți abordarea generală. Ați putut descărca și fișierul JSON al machetei gratuit! 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.