5 moduri frumoase de a modula modulul magazinului Divi

Bine ați venit în Ziua 75 a maratonului nostru Divi 100. Continuați să vă acordați timp de 100 de zile la rând de resurse minunate Divi, pe măsură ce trecem la versiunea uimitoare a Divi 3.0 în ultima zi a seriei!

---

Modulul Divi Shop este extrem de personalizabil, oferind companiilor posibilitatea de a-și afișa produsele în moduri inovatoare. Având în vedere acest lucru, acest articol vă va ghida pas cu pas prin crearea a cinci stiluri simple Divi Shop. Până la sfârșitul acestui tutorial veți fi mai familiarizați cu posibilitățile oferite de modulul Divi Shop și veți putea crea rapid și simplu o frumoasă vitrină a produselor dvs.

Configurarea lucrurilor Divi este compatibil cu WooCommerce și vă recomandăm să îl utilizați alături de modulul Divi Shop. Dacă nu aveți deja instalat WooCommerce, puteți găsi cea mai recentă versiune aici. După ce ați activat WooCommerce, puteți merge la fila Produs și puteți încărca produsele. Modulul magazin implicit Înainte de a începe, să aruncăm o privire la modul în care arată modulul Divi Shop în mod implicit. Acesta este punctul de plecare pe care îl folosim în fiecare exemplu de mai jos. Pentru a obține aceleași rezultate pe care le-am obținut, pur și simplu urmați instrucțiunile de la fiecare exemplu.

1. Card plat Acest aspect simplist, dar elegant, este rapid realizabil folosind modulul Divi Shop. Iată pașii generali pe care îi vom urma pentru a începe crearea majorității stilurilor din acest articol:

• Accesați Pagini și Pagină nouă
• Faceți clic pe Utilizați Divi Builder
• În Divi Builder aveți rândul obișnuit într-o secțiune
• Faceți clic pe Insert Column (s)
• Selectați prima opțiune (care arată o țiglă mare)
• Faceți clic pe Insert Module (Module) și selectați Shop
• Acest lucru vă va conduce direct la secțiunea de setări a modulului Magazin

• În Tip selectați produsele pe care doriți să le afișați

Notă: dacă doriți o anumită categorie, selectați Categoria produselor și o listă a categoriilor dvs. va apărea automat într-o nouă secțiune sub secțiunea Număr postări .

• Verificați ce categorie doriți să afișați
• În Numărul de mesaje selectați numărul total de mesaje pe care doriți să le accesați pe pagina dvs. de pornire (pentru acest stil am selectat trei)
• În Număr coloane selectați numărul de coloane pe care doriți în acel modul particular (pentru acest stil am selectat trei)
• De asemenea, aveți setarea Comandă prin pentru a selecta modul în care doriți să fie sortate produsele

În fila Advanced Design Settings puteți modifica fontul și dimensiunea titlului și prețului. Pentru acest aspect am folosit dimensiunea 30 Satisfy Font și dimensiunea 20 Lato Font pentru titlu și respectiv preț. Culoarea textului pentru ambele este # ef285a. De asemenea, puteți regla distanța dintre litere și înălțimea liniei pentru aceste elemente.

Pentru a face acest aspect mai interesant, am dorit, de asemenea, să schimbăm culoarea de fundal a cardului și să aliniem centrul fontului. Culoarea de fundal poate fi modificată în fila CSS personalizată introducând următorul cod în caseta Produs: background-color: #ffebee; Codul de culoare poate fi ajustat la culoarea dorită. Alinierea fontului poate fi modificată și în fila CSS personalizată utilizând următoarea linie de cod atât în ​​secțiunea titlu, cât și în preț: text-align: center; Acest aspect este realizat fără a părăsi modulul Divi Shop. Nu au fost necesare modificări ale secțiunii sau setărilor de rând.

2. Cărți materiale Cardul material adaugă interes și textură aspectului cardului plat, utilizând umbre pentru a crea adâncimea imaginii. Pentru a realiza acest design special, am creat mai întâi un modul Divi Shop ca în exemplul de mai sus. De data aceasta, numărul de postări și coloane a fost de șase și respectiv trei. În fila Advanced Design Settings , titlul a fost setat la dimensiunea 18 Font Cantata One și prețul a fost stabilit la dimensiunea 17 Open Sans Font. Acum trebuie să creăm efectul de umbră. Pentru a realiza acest lucru, accesați fila CSS personalizată și adăugați următoarele linii de cod în secțiunea Produs:

-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.4);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.4); Dimensiunea și culoarea umbrei pot fi ajustate prin modificarea numerelor din cod. Joacă-te și vezi ce fel de efecte poți crea! 3. Suprapunere minimă Acest stil își propune să obțină un aspect minimalist în care privitorul să vadă doar imaginea produsului. În plus, atunci când trec pe deasupra imaginii, văd doar o pictogramă. Pentru acest stil am creat din nou un modul Divi Shop similar cu exemplele de mai sus. În fila Setări generale am selectat trei postări și trei coloane. Nu am ajustat setările de titlu și preț de această dată, deoarece acestea nu vor fi vizibile.

Vrem să eliminăm titlul și prețul, astfel încât doar imaginea produsului să fie vizibilă. Pentru a elimina aceste funcții din vizualizare, trebuie să accesați fila CSS personalizată . Sub titlu și imagine, tastați aceeași linie de cod: visibility: hidden; Pentru acest stil, vrem să vedem pictograma de deplasare numai atunci când trecem pe o imagine. Prin urmare, trebuie să eliminăm vizibilitatea suprapunerii. În fila Advanced Design Settings puteți merge la Overlay Color și setați culoarea și transparența astfel încât suprapunerea să fie clară – adică rgba (0,0,0,0) . De asemenea, în această filă puteți modifica imaginea și culoarea pictogramei cu mouse-ul pentru a se potrivi stilului site-ului dvs. Am setat pictograma plutitor pentru a afișa o inimă roz pal.

Efectul general este că, atunci când cineva trece peste un produs, vede doar pictograma noastră selectată: Desigur, puteți utiliza acest efect pentru orice număr de mijloace – este perfect pentru oricine dorește un aspect minimalist. 4. Grila închisă Acest stil de magazin umple întregul ecran cu imagini și poate fi extrem de impactant. Pentru a obține acest aspect, am creat un modul Divi Shop separat pentru fiecare placă. Pentru a face acest lucru, când faceți clic pe Insert Column (s) , selectați-l pe cel care afișează trei dale etichetate „1/3”. În prima coloană, faceți clic pe Inserare modul (module) și selectați Magazin . Veți selecta doar o postare și o coloană. Din nou, nu dorim ca titlul și prețul să fie vizibile pentru acest aspect, așa că accesați fila CSS personalizată și sub titlu și preț introduceți acest cod:

visibility: hidden; Aceste tipuri de grile funcționează adesea bine cu o suprapunere contrastantă. Pentru a modifica setările suprapunerii, accesați fila Setări avansate de design și modificați culoarea și transparența suprapunerii pentru a se potrivi imaginii site-ului dvs. De asemenea, puteți schimba culoarea pictogramei hover pentru a se potrivi mărcii dvs. Apoi puteți clona acest modul de două ori și trageți și plasați copiile în celelalte două coloane. Va trebui doar să accesați fiecare modul pentru a schimba produsul pe care doriți să îl afișați. Pentru a clona modulul, faceți clic pe pictograma din stânga modulului care afișează două dreptunghiuri suprapuse:

Pentru ca plăcile să se întindă pe întreaga lățime a ecranului, trebuie să accesați meniul rând și, în fila Setări generale, selectați Da pentru Make This Row Full Width . Apoi, pentru a elimina spațiul dintre dale, va trebui să selectați Da pentru a utiliza lățimea personalizată a jgheabului . O setare de 1 va elimina spațiul dintre dale. 5. Grilă neregulată Pentru grilele neregulate puteți combina rânduri de module Divi Shop pentru a obține aspectul dorit. Pentru acest stil am stivuit un rând de trei produse deasupra unui rând de cinci produse. Pentru a face acest lucru, creați mai întâi un modul Divi Shop cu setări generale pentru trei postări și trei coloane. Apoi faceți clic pe Adăugați rând sub primul rând. În noul rând, introduceți un modul Divi Shop cu setări generale de cinci postări și cinci coloane. De asemenea, am eliminat titlul și prețul din aceste imagini pentru a-i oferi un aspect mai curat. Pentru a face acest lucru, ca și până acum, accesați fila CSS personalizată și sub titlu și preț, adăugați următorul cod: visibility: none; Spațiul implicit dintre rânduri era prea mare pentru a ne plăcea aici. Pentru a micșora acest spațiu, am intrat în Setările modulului rând (pictograma cu trei linii din stânga modulului rând). Am setat Custom Padding la 0 pentru partea de jos a rândului superior și partea de sus a rândului inferior. Încheierea Deși poate părea o sarcină importantă să proiectezi imaginea și pasiunea mărcii tale într-un magazin online, poți vedea cu modulul magazin Divi că este posibil atât de mult. Utilizând numărul mare de setări ușor de utilizat, puteți crea nenumărate modele frumoase pentru magazinul dvs. Ce idei din acest tutorial vei include? Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi! Imagine în miniatură a articolului de Titov Nikolai / shutterstock.com.