Cum să adăugați imagini lipicioase de produs la șablonul dvs. de pagină de produs Divi

Când vine vorba de cumpărarea produselor online, imaginile excelente ale produselor sunt esențiale pentru închiderea vânzării. De aceea, majoritatea paginilor de produse au acele imagini ale produsului în partea de sus a paginii, deci este primul lucru pe care cumpărătorii îl văd. Cu toate acestea, pe măsură ce utilizatorul derulează pagina în jos pentru a vizualiza mai multe informații despre produs (descrieri, recenzii etc.), imaginea principală a produsului nu mai este vizibilă. O modalitate de a păstra aceste imagini de produs vizuale este să adăugați o imagine de produs lipicioasă care rămâne vizibilă pe măsură ce un potențial cumpărător răsfoiește informațiile despre produs.

În acest tutorial, vă vom arăta cum să adăugați imagini lipicioase de produs la șablonul dvs. de pagină de produs Divi. Pentru a face acest lucru, putem optimiza modulul de imagine al produsului WooCommerce al lui Divi pentru a se afișa și a rămâne în partea de sus a paginii la fel cum imaginea produsului original se derulează afară din vizualizare.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, 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!

https://youtu.be/vwfPFqyVaNM

Abonați-vă la canalul nostru Youtube

Cum să încărcați șablonul

Accesați Divi Theme Builder

Pentru a încărca șablonul, navigați la Divi Theme Builder în backend-ul site-ului dvs. WordPress.

Încărcați șablonul site-ului web

Apoi, în colțul din dreapta sus, veți vedea o pictogramă cu două săgeți. Faceți clic pe pictogramă.

Navigați la fila de import, încărcați fișierul JSON pe care ați putut să-l descărcați în această postare și faceți clic pe „Importați șabloane Divi Theme Builder”.

Salvați modificările Divi Theme Builder

După ce ați încărcat fișierul, veți observa un nou șablon cu o nouă zonă de corp care a fost atribuită tuturor postărilor. Salvați modificările Divi Theme Builder imediat ce doriți ca șablonul să fie activat.

Să trecem la tutorial, astfel încât să putem învăța să construim acest lucru de la zero, nu-i așa?

Cum să adăugați imagini lipicioase de produs la șablonul dvs. de pagină de produs Divi

Încărcarea șablonului de pagină a produsului pentru pachetul 5 Theme Builder

Pentru a începe, vom obține o repriză în ceea ce privește designul, adăugând unul dintre șabloanele noastre de pagini de produse premade. Pentru a importa șablonul Theme Builder, va trebui să faceți următoarele:

1. Navigați la Generatorul de teme Divi
2. Faceți clic pe pictograma de portabilitate din partea dreaptă sus a paginii.
3. Selectați fila Import în fereastra popup Portabilitate.
4. Descărcați și importați fișierul șablonului de produs Divi Divi Theme Builder 5. După ce descărcați pachetul aici, dezarhivați fișierul și veți găsi fișierul „divi-theme-builder-pack-5-product-page-template.json” pe care va trebui să îl importați.
5. Faceți clic pe butonul Import
6. După importarea șablonului, faceți clic pe pictograma de editare din zona personalizată a șablonului pentru a edita aspectul șablonului.

Adăugați un rând nou

Vrem ca imaginea produsului să se afișeze odată ce utilizatorul a trecut pe lângă secțiunea de sus, care include deja imaginea produsului (nu este nevoie să o afișați acolo). Prin urmare, îl vom adăuga la o nouă secțiune sub secțiunea de sus a aspectului.

Continuați și adăugați o nouă secțiune obișnuită sub secțiunea de sus.

Deschideți setările noii secțiuni și actualizați căptușeala:

• Căptușeală: 0 px sus, 0 px jos

Accesați fila avansată și actualizați indexul z:

• Indicele Z: 13

Astfel, imaginea (elementul copil al acestei secțiuni) va rămâne deasupra celorlalte secțiuni / elemente de pe pagină atunci când derulați.

Adăugați rândul

Apoi, adăugați un rând cu o coloană în secțiune.

Deschideți setările rândului și reglați alinierea rândului și căptușeala:

• Alinierea rândurilor: corect
• Căptușeală: 0 px sus, 0 px jos

Adăugați imaginea produsului

Acum suntem gata să adăugăm imaginea produsului care va rămâne în cele din urmă în partea de sus a paginii pe scroll. Pentru a adăuga imaginea produsului, copiați modulul existent al imaginii produsului în secțiunea de sus și lipiți-l în noul nostru rând.

Setări Woo Images

Deschideți setările pentru noul modul woo images și reglați conținutul după cum urmează:

• Afișați imagini din galerie: OFF
• Afișați insigna de vânzare: OFF

(NOTĂ: puteți păstra imaginile galeriei dacă doriți. Aveți grijă să nu ocupați prea mult spațiu, deoarece acest modul de imagine va plasa peste alte elemente de pe pagină.)

Sub fila Proiectare, actualizați opțiunea Forțare lățime completă la „DA”.

Apoi actualizați următoarele:

• Lățime maximă: 300 px (desktop), 200 px (telefon)
• Alinierea modulului: dreapta

Reglați căptușeala:

• Căptușeală: 10 px sus, 10 px dreapta

Sub fila avansată, actualizați următoarele:

• Indicele Z: 1
• Poziție lipicioasă: lipiți-vă de sus

Acest lucru va face ca imaginea să rămână în partea de sus a paginii odată ce utilizatorul derulează imaginea respectivă.

Odată ce poziția lipicioasă este în poziție, reveniți la fila de proiectare și utilizați opțiunea lipicioasă pentru a actualiza filtrul de opacitate astfel încât să ascundă imaginea până când devine lipicioasă. Puteți implementa opțiunea de stil lipicios trecând peste setare și făcând clic pe pictograma miniatură.

• Opacitate: 0% (desktop), 100% (lipicios)

Eliminați spațiul secțiunii, rândului și coloanei

În acest moment, avem o distanță nedorită pe care o folosește noua imagine a produsului în fluxul aspectului nostru. Pentru a elimina această spațiere, tot ce trebuie să facem este să oferim coloanei o valoare personalizată a înălțimii fie „0”, fie ceva cu adevărat scăzut. Imaginea produsului va fi afișată / debordată în continuare, chiar dacă are o coloană fără nicio înălțime reală.

Deschideți setările coloanei și adăugați următorul CSS personalizat la elementul principal:

height: 15px;

Asta e! Am terminat cu toții.

Rezultat final

Verificați rezultatul final uitându-vă la o postare live pe site-ul dvs.

Gânduri finale

Adăugarea unei imagini lipicioase a produsului la șablonul paginii de produs din Divi este o modalitate rapidă și ușoară de a păstra produsele la vedere, pe măsură ce vizitatorii explorează produsul dvs. De asemenea, puteți alege să lipiți butonul Adăugare la coș de lângă acesta, folosind aceeași tehnică. Oricum, sperăm că acest lucru vă va ajuta cu următorul dvs. proiect.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!