Divi je dizajniran da bude kompatibilan sa WooCommerce. Za integraciju WooCommerce, morate instalirati najnoviju verziju WooCommerce.

WooCommerce je dodatak e-commerce koji preporučujemo jer ima najljepši skup značajki, sučelje i slijedi najbolje prakse kodiranja. Nakon aktivacije dodatka, vidjet ćete dva nova odjeljka "WooCommerce" i "Proizvodi" dodana na vašu WordPress nadzornu ploču. Ova područja možete koristiti za podešavanje postavki e-trgovine i objavljivanje novih proizvoda. Možete pronaći dokumentacija potpun na WooCommerceu ovdje .

Imajte na umu da iako graditelj uključuje razne WooCommerce module, WooCommerce možete koristiti i sami, a da graditelj nije u redu. Možete stvoriti standardne stranice za Checkout, košaricu, itd., Kao što je prikazano u njihovoj dokumentaciji. Također se možete izravno povezati sa svojim kategorijama woocommercea ili koristiti Prečaci WooCommerce u modulu za tekst Divi. Daje vam slobodu da radite gotovo sve.

Kako dodati modul trgovine na svoju stranicu

Prije nego što dodate modul trgovine na svoju stranicu, prvo morate uskočiti u Divi Builder. Jednom Divi tema instaliran na vašoj web stranici, primijetit ćete gumb Koristite Divi Builder iznad uređivača postova kad god izradite novu stranicu. Pritisnite ovaj gumb da biste aktivirali Divi Builder i pristupili svim modulima Divi Builder. Zatim kliknite na gumb Koristite Visual Builder za pokretanje generatora u vizualnom načinu. Također možete kliknuti gumb Koristite Visual Builder kada pregledavate web stranicu u prvom planu ako ste povezani na svoju WordPress nadzornu ploču.

Nakon što uđete u Visual Builder, možete kliknuti sivi gumb plus da biste na svoju stranicu dodali novi modul. Novi moduli mogu se dodavati samo unutar redaka. Ako započinjete novu stranicu, ne zaboravite prvo dodati redak na svoju stranicu. Imamo sjajne vodiče o korištenju Divijevih elemenata crta i odjeljaka.

Pronađite modul trgovine na popisu modula i kliknite ga da biste ga dodali na svoju stranicu. Popis modula je pretraživ, što znači da možete upisati i riječ "trgovina", a zatim kliknuti enter za automatsko pretraživanje i dodavanje modula trgovine! Nakon dodavanja modula, dočekat će vas popis opcija modula. Te su mogućnosti podijeljene u tri glavne skupine: Sadržaj , Začeće et napredan .

Primjer slučaja: prikazivanje najnovijih proizvoda na početnoj stranici pomoću modula Shop

U ovom primjeru koristit ću modul shop za prikaz najnovijih proizvoda na početnoj stranici.

Ovdje je stranica s četiri predstavljena proizvoda.

Počnimo.

Upotrijebite vizualni graditelj za dodavanje redovitog odjeljka s redom pune širine (1 stupac). Promijenite parametar retka tako da postane puna širina s prilagođenom širinom žlijeba od 2.

Zatim dodajte modul trgovine na liniju.

Ažurirajte postavke modula na sljedeći način:

Opcije sadržaja

Vrsta: Najnoviji proizvodi
Broj proizvoda: 4

Mogućnosti dizajna

Ikona za prebacivanje na ikonu: # ea1d63
Naslov Policija: Otvoreno bez
Veličina slova naslova: 24px
Policijska nagrada: Otvoreno bez
Cijena Veličina slova: 20px

Napredne opcije (prilagođeni CSS)

Naslov:

tekst uskladiti: centar;
pozadina: #fff;
margin-top: -10px! značajna;

Prix:

tekst uskladiti: centar;
pozadina: #fff;
presvlake: 15px;

To je sve! Evo konačnog rezultata.

Kupujte opcije sadržaja

Na kartici Sadržaj pronaći ćete sve elemente sadržaja modula, kao što su tekst, slike i ikone. Sve to kontrolira što se pojavljuje u vašem modulu uvijek će se naći na ovoj kartici.

Tip

Odaberite vrstu proizvoda koju želite prikazati u feedu proizvoda. Možete birati između Najnovijih proizvoda koji će prikazati sve vaše proizvode u kronološkom slijedu, Istaknuti proizvodi, Prodajni proizvodi, Najprodavaniji proizvodi ili Najbolje ocijenjeni proizvodi.

Broj proizvoda

Odredite broj proizvoda koji želite prikazati. Morat ćete imati izrađene proizvode da bi se bilo što pojavilo u ovom modulu.

Uključi kategorije

Odaberite kategorije koje želite uključiti.

Broj stupaca

Odaberite broj stupaca za prikaz u vašem modulu trgovine. Za redak od 4 stupca treba koristiti 1 stupca. Za stupac koji zauzima 3/3 prostora retka treba koristiti 4 stupca. Stupac 2 treba koristiti za stup koji zauzima 1/2 svjetlosnog prostora. Jedan stupac treba koristiti za stupac 1/4 prostora retka.

Preuređivanje prema

Odaberite kako želite da se vaši proizvodi naručuju. Odaberite sortiranje prema zadanim postavkama Poredaj, Popularnost, Ocjena, Datum, Cijena od najniže do najviše, Cijena od najviše do najniže, najstarije do najnovije, najnovije do najstarije.

Administratorska oznaka

Ovo će promijeniti oznaku modula u konstruktoru radi lakše identifikacije. Kada koristite prikaz WireFrame u Visual Builderu, ove se oznake pojavljuju u modulnom bloku sučelja Divi Builder.

Mogućnosti dizajna radionice

Na kartici Dizajn pronaći ćete sve mogućnosti oblikovanja modula, poput fontova, boja, veličine i razmaka. Ovo je kartica koju ćete koristiti za promjenu izgleda vašeg modula. Svaki Divi modul ima dugački popis postavki dizajna pomoću kojih možete bilo što promijeniti.

Ikona prekrivanja

Kada zadržite pokazivač iznad stavke u modulu Shop, pojavit će se ikona sloja. Pomoću birača boja u ovoj postavci možete prilagoditi boju koja se koristi za ovu ikonu.

Boja presvlake

Kada mišem zadržite pokazivač iznad stavke u modulu Shop, na vrhu slike i ispod teksta i ikone naslova trgovine pojavit će se prekrivna boja. Prema zadanim postavkama koristi se poluprozirna bijela boja. Ako želite koristiti drugu boju, boju možete prilagoditi pomoću alata za odabir boja u ovoj postavci

Ikona odabirača

Ovdje možete odabrati prilagođenu ikonu koja će se prikazivati ​​kada posjetitelj zadrži pokazivač iznad predmeta trgovine u modulu.

Boja prodajne značke

Kada je artikl u prodaji, na slici proizvoda pojavljuje se značka prodaje. Pomoću ove postavke možete prilagoditi boju pozadine značke.

Font naslova

Font teksta naslova možete promijeniti odabirom željenog fonta s padajućeg izbornika. Divi nudi desetke sjajnih fontova koje nudi Google Fonts. Prema zadanim postavkama Divi koristi font Open Sans za sav tekst na vašoj stranici. Također možete prilagoditi stil teksta koristeći podebljano, kurziv, velika slova i opcije podcrtavanja.

Veličina slova naslova

Ovdje možete prilagoditi veličinu teksta naslova. Možete povući klizač raspona da biste povećali ili smanjili veličinu teksta ili izravno unijeli vrijednost željene veličine teksta u polje za unos s desne strane klizača. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em".

Boja teksta naslova

Prema zadanim postavkama, sve boje teksta u Diviju pojavljuju se u bijeloj ili tamno sivoj boji. Ako želite promijeniti boju teksta u naslovu, odaberite željenu boju iz alata za odabir boja pomoću ove opcije.

Razmak naslovnih slova

Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova u tekstu naslova, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje za unos s desne strane klizača. Polja za unos podržavaju različite mjerne jedinice, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Visina naslovnice

Visina retka utječe na razmak između svakog retka teksta vašeg naslova. Ako želite povećati razmak između svakog retka, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje za unos smješteno desno od kursora. Polja za unos podržavaju različite mjerne jedinice, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Politika cijena

Font teksta cijene možete promijeniti odabirom željenog fonta s padajućeg izbornika. Divi dolazi s desecima izvrsnih fontova koje pokreće Google Fonts. Prema zadanim postavkama Divi koristi font Open Sans za sav tekst na vašoj stranici. Također možete prilagoditi stil teksta koristeći podebljano, kurziv, velika slova i opcije podcrtavanja.

Cijena Veličina slova

Ovdje možete prilagoditi veličinu teksta cijene. Možete povući klizač raspona da biste povećali ili smanjili veličinu teksta ili izravno unijeli željenu vrijednost veličine teksta u polje za unos s desne strane klizača. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Boja teksta cijene

Prema zadanim postavkama, sve boje teksta u Diviju pojavljuju se u bijeloj ili tamno sivoj boji. Ako želite promijeniti boju teksta cijene, odaberite ovu željenu boju iz alata za odabir boja.

Razmak cijena slova

Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova u tekstu cijene, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje za unos s desne strane klizača. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Visina cjenovne linije

Visina retka utječe na razmak između svakog retka vašeg teksta cijene. Ako želite povećati razmak između svakog retka, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje za unos smješteno desno od kursora. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Napredne mogućnosti trgovine

Na naprednoj kartici pronaći ćete opcije koje bi iskusnijim web dizajnerima mogle biti korisne, poput prilagođenih CSS i HTML atributa. Ovdje možete primijeniti prilagođeni CSS na bilo koji od mnogih elemenata modula. Na modul također možete primijeniti prilagođene CSS klase i ID-ove koji se mogu koristiti za prilagodbu modula u datoteci style.css vaše dječje teme.

CSS ID

Unesite neobavezni CSS ID koji ćete koristiti za ovaj modul. ID se može koristiti za stvaranje prilagođenog CSS stila ili za povezivanje na određene odjeljke vaše stranice.

CSS klasa

Unesite neobavezne CSS klase koje ćete koristiti za ovaj modul. CSS klasa može se koristiti za izradu prilagođenog CSS stila. Možete dodati više klasa odvojenih razmakom. Te se klase mogu koristiti u vašoj podređenoj temi Divi ili u prilagođenom CSS listu stilova koji dodate na svoju stranicu ili na svoje web mjesto pomoću opcija teme Divi ili postavki stranice Divi Builder.

Prilagođeni CSS

Prilagođeni CSS također se može primijeniti na modul i bilo koji od unutarnjih dijelova modula. U odjeljku Prilagođeni CSS pronaći ćete tekstualno polje u koje možete dodati prilagođene CSS stilske tablice izravno u svaki element. CSS unosi u ovim postavkama već su omotani stilskim oznakama. Dakle, samo unesite CSS pravila odvojena zarezom.

vidljivost

Ova vam opcija omogućuje upravljanje uređajima na kojima se pojavljuje vaš modul. Možete odabrati da deaktivirate svoj modul na tabletima, pametnim telefonima ili stolnim računalima pojedinačno. To je korisno ako želite koristiti različite modove na različitim uređajima ili ako želite pojednostaviti dizajn mobilnih uređaja uklanjanjem određenih elemenata sa stranice.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expanded "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] PREUZMITE DIVI TEMU [/ vcex_button] [/colu [m»n_colum] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" ravno "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "] ATE DOWNLOAD DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Ostali Divi tutoriali

• 5 web stranice za restoran korištenja Divi temu
• Kako dodati tekst na proizvod Divi WooCommerce
• Kako promijeniti boju izbornika između Divi stranica
• Kako personalizirati rešetke bloga s Divi-jem
• Kako koristiti uređivač uloga Divija na WordPressu
• Kako stvoriti klizač Divi na cijelom zaslonu
• Kako promijeniti boju izbornika između Divi stranica
• Značajke koje vjerojatno ne znate o Divi-ju
• Kako koristiti Divi Builder na WordPressu
• Kako koristiti modul za pomicanje videozapisa Divi
• Kako koristiti modul Divi Builder Flip
• Kako dodati testimonijalni modul na Divi Builderu
• Kako koristiti tekstualni modul Divi
• Kako stvoriti klizač na Divi
• Kako urediti Divi korisničku ulogu
• Kako koristiti modul Divi Social Media
• Kako se koristi modul trgovine na temi WordPress Divi
• Kako koristiti modul Divi bočne trake
• Kako koristiti modul Divi Table Table
• Kako koristiti naslovni modul Divi publikacija
• Kako dodati video modul Divi
• Kako koristiti navigacijski modul članka
• Kako koristiti modul Divi pretraživanja
• Kako koristiti modul Divi wallet
• Kako koristiti modul osobe na Divi Builderu
• Kako koristiti modul lisnice pomoću Divi filtar
• Kako koristiti modul klizača pune širine
• Kako koristiti modul Divi Builder Image
• Kako koristiti navigacijski modul pune širine Divi Buildera
• Kako se koristi modul galerije slika
• Kako koristiti modul Divi Builder za cijelu širinu kartice
• Kako koristiti modul Divi punog širine portfelja
• Kako se koristi Divi zaglavni modul pune širine
• Kako koristiti modul Divi Counter
• Kako koristiti klizač članaka na Divi Builderu
• Kako koristiti modul Divi Email Optin