Divi bol navrhnutý tak, aby bol kompatibilný s WooCommerce. Integrovať WooCommerce, musíte nainštalovať najnovšiu verziu WooCommerce.

WooCommerce je plugin e-commerce ktorú odporúčame, pretože má najkrajšiu sadu funkcií, rozhranie a dodržiava osvedčené postupy kódovania. Po aktivácii doplnku sa na váš informačný panel WordPress pridajú dve nové sekcie „WooCommerce“ a „Produkty“. Tieto oblasti môžete použiť na úpravu nastavení elektronického obchodu a publikovanie nových produktov. Môžete nájsť dokumentácie kompletné na WooCommerce tu .

Upozorňujeme, že aj keď staviteľ obsahuje rôzne moduly WooCommerce, môžete použiť aj samotný WooCommerce bez toho, aby bol stavač v poriadku. Môžete vytvoriť štandardné stránky pre platby, nákupný košík atď., Ako je uvedené v ich dokumentácii. Môžete tiež odkazovať priamo na svoje kategórie woocommerce alebo použiť Krátke kódy WooCommerce v textovom module Divi. Dáva vám slobodu robiť takmer všetko.

Ako pridať modul obchodu na svoju stránku

Pred pridaním modulu obchodu na svoju stránku musíte najskôr prejsť do Divi Builder. Raz Divi téma nainštalovaný na vašom webe, všimnete si tlačidlo Použite nástroj Divi Builder nad editorom príspevkov vždy, keď vytvoríte novú stránku. Kliknutím na toto tlačidlo aktivujete program Divi Builder a získate prístup ku všetkým modulom Divi Builder. Potom kliknite na tlačidlo Použite Visual Builder na spustenie generátora vo vizuálnom režime. Môžete tiež kliknúť na tlačidlo Použite Visual Builder pri prehliadaní webových stránok v popredí, ak ste pripojení k dashboardu WordPress.

Po zadaní nástroja Visual Builder môžete kliknutím na sivé tlačidlo plus pridať na svoju stránku nový modul. Nové moduly je možné pridávať iba do riadkov. Ak začínate novú stránku, nezabudnite najskôr na svoju stránku pridať riadok. Máme skvelé návody na používanie prvkov Divi's line and section.

Vyhľadajte modul obchodu v zozname modulov a kliknutím naň ho pridajte na svoju stránku. V zozname modulov je možné vyhľadávať, čo znamená, že môžete tiež napísať slovo „shop“ a potom kliknúť na kláves Enter, aby ste automaticky vyhľadali a pridali modul shopu! Po pridaní modulu vás privíta zoznam možností modulu. Tieto možnosti sú rozdelené do troch hlavných skupín: Obsah , Koncepcia et pokročilý .

Príklad použitia: prezentácia najnovších produktov na domovskej stránke pomocou modulu Obchod

V tomto príklade použijem modul obchodu na zobrazenie najnovších produktov na domovskej stránke.

Tu je stránka so štyrmi prezentovanými produktmi.

Začnime.

Pomocou vizuálneho nástroja na pridanie bežnej sekcie s riadkom celej šírky (1 stĺpec). Zmeňte parameter riadku tak, aby bol plný s vlastnou šírkou odkvapu 2.

Potom do riadku pridajte obchodný modul.

Aktualizujte nastavenia modulu nasledovne:

Možnosti obsahu

Typ: Posledné produkty
Počet produktov: 4

Možnosti návrhu

Ikona Umiesť farbu: # ea1d63
Názov Polícia: Otvorené Bez
Veľkosť písma titulu: 24px
Policajná cena: Otvorená bez
Cena Veľkosť písma: 20px

Rozšírené možnosti (vlastné CSS)

Titer:

text-align: center;
pozadie: #fff;
okraj: -10px! významné;

Prix:

text-align: center;
pozadie: #fff;
čalúnenie-down: 15px;

To je všetko! Tu je konečný výsledok.

Možnosti obsahu obchodu

Na karte Obsah nájdete všetky obsahové prvky modulu, napríklad text, obrázky a ikony. Všetko, čo ovláda čo vo vašom module sa vždy nájde na tejto karte.

Typ

Vyberte typ produktov, ktoré chcete zobrazovať v informačnom kanáli produktov. Môžete si vybrať z Nedávnych produktov, ktoré zobrazia všetky vaše produkty v chronologickom poradí, Vybrané produkty, Akciové produkty, Najpredávanejšie produkty alebo Najlepšie hodnotené produkty.

Počet výrobkov

Definujte počet produktov, ktoré chcete zobraziť. Aby ste sa v tomto module mohli objaviť, budete musieť nechať vyrobiť výrobky.

Zahrnúť kategórie

Vyberte kategórie, ktoré chcete zahrnúť.

Počet stĺpcov

Vyberte počet stĺpcov, ktoré sa majú zobraziť v module obchodu. Pre rad s 4 stĺpcom by sa mali použiť 1 stĺpce. 3 stĺpce by sa mali použiť pre stĺpec, ktorý zaberá 3/4 priestoru riadku. Stĺpec 2 by sa mal použiť pre stĺpec, ktorý zaberá 1/2 priestoru svetla. Jeden stĺpec by sa mal použiť pre stĺpec 1/4 riadkovej medzery.

Usporiadať podľa

Vyberte, ako chcete objednať svoje výrobky. Vyberte si predvolené triedenie Zoradiť, Obľúbenosť, Hodnotenie, Dátum, Cena od najnižšej po najvyššiu, Cena od najnižšej po najnižšiu, od najstaršej po najnovšiu, od najnovšej po najstaršiu.

Správcovská značka

Toto zmení štítok modulu v konštruktore na ľahšiu identifikáciu. Keď použijete zobrazenie WireFrame v programe Visual Builder, tieto štítky sa zobrazia v bloku modulu rozhrania Divi Builder.

Možnosti návrhu dielne

Na karte Dizajn nájdete všetky možnosti štýlov modulu, ako sú písma, farby, veľkosť a medzery. Toto je karta, ktorú použijete na zmenu vzhľadu vášho modulu. Každý modul Divi má dlhý zoznam nastavení dizajnu, pomocou ktorých môžete čokoľvek meniť.

Ikona prekrývania

Keď umiestnite kurzor myši na položku v module Shop, zobrazí sa ikona prekrytia. Farbu použitú pre túto ikonu môžete upraviť pomocou výberu farieb v tomto nastavení.

Farba prekrytia

Keď umiestnite kurzor myši na položku v module Shop, v hornej časti obrázka a pod textom a ikonou názvu obchodu sa zobrazí farba prekrytia. Štandardne sa používa polopriehľadná biela farba. Ak chcete použiť inú farbu, môžete farbu upraviť pomocou výberu farieb v tomto nastavení

Ikona selektora

Tu si môžete zvoliť vlastnú ikonu, ktorá sa má zobraziť, keď sa návštevník vznáša nad položkami obchodu v module.

Farba odznaku predaja

Keď je položka v akcii, na obrázku produktu sa zobrazí odznak predaja. Pomocou tohto nastavenia môžete upraviť farbu použitú pre pozadie odznaku.

Písmo názvu

Písmo textu nadpisu môžete zmeniť výberom požadovaného písma v rozbaľovacej ponuke. Divi ponúka desiatky skvelých písiem, ktoré ponúkajú písma Google. Divi predvolene používa pre všetok text na svojej stránke písmo Open Sans. Štýl textu môžete tiež prispôsobiť pomocou možností tučné písmo, kurzíva, veľké písmená a podčiarknutie.

Veľkosť písma názvu

Tu môžete upraviť veľkosť textu nadpisu. Posunutím posúvača rozsahu môžete zväčšiť alebo zmenšiť veľkosť textu alebo priamo zadajte požadovanú hodnotu veľkosti textu do vstupného poľa vpravo od posúvača. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Farba textu titulu

V predvolenom nastavení sa všetky farby textu v Divi zobrazujú ako biele alebo tmavošedé. Ak chcete zmeniť farbu textu svojho nadpisu, zvoľte pomocou tejto možnosti požadovanú farbu vo výbere farieb.

Rozmiestnenie hlavných písmen

Medzery medzi písmenami ovplyvňujú medzeru medzi jednotlivými písmenami. Ak chcete zväčšiť medzeru medzi jednotlivými písmenami v texte nadpisu, pomocou jazdca rozsahu upravte medzeru alebo zadajte požadovanú veľkosť medzery do vstupného poľa vpravo od jazdca. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Výška riadku názvu

Výška riadku ovplyvňuje medzeru medzi každým riadkom textu nadpisu. Ak chcete zväčšiť medzeru medzi jednotlivými riadkami, upravte medzeru pomocou posúvača rozsahu alebo do vstupného poľa zadajte požadovanú veľkosť medzery. sa nachádza napravo od kurzora. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Cenová politika

Písmo cenového textu môžete zmeniť výberom požadovaného písma v rozbaľovacej ponuke. Divi prichádza s desiatkami skvelých typov písma, ktoré používajú písma Google. Divi predvolene používa pre všetok text na svojej stránke písmo Open Sans. Štýl textu môžete tiež prispôsobiť pomocou možností tučné písmo, kurzíva, veľké písmená a podčiarknutie.

Cena Veľkosť písma

Tu môžete upraviť veľkosť textu ceny. Posunutím posúvača rozsahu môžete zväčšiť alebo zmenšiť veľkosť textu alebo priamo zadať požadovanú hodnotu veľkosti textu do vstupného poľa vpravo od posúvača. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Cena farby textu

V predvolenom nastavení sa všetky farby textu v Divi zobrazujú ako biele alebo tmavošedé. Ak chcete zmeniť farbu cenového textu, vyberte pomocou tejto možnosti požadovanú farbu vo výbere farieb.

Rozostup cenových listov

Medzery medzi písmenami ovplyvňujú medzeru medzi jednotlivými písmenami. Ak chcete zväčšiť medzeru medzi jednotlivými písmenami v cenovom texte, pomocou posúvača rozsahu upravte medzeru alebo zadajte požadovanú veľkosť medzery do vstupného poľa vpravo od posúvača. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Výška cenovej línie

Výška riadku ovplyvňuje medzeru medzi každým riadkom cenového textu. Ak chcete zväčšiť medzeru medzi jednotlivými riadkami, upravte medzeru pomocou posúvača rozsahu alebo do vstupného poľa zadajte požadovanú veľkosť medzery. sa nachádza napravo od kurzora. Vstupné polia podporujú rôzne merné jednotky, čo znamená, že môžete zmeniť typ jednotky zadaním „px“ alebo „em“ v závislosti od hodnoty svojej veľkosti.

Rozšírené možnosti obchodu

Na karte rozšírené nájdete možnosti, ktoré by sa mohli hodiť skúsenejším webovým dizajnérom, napríklad vlastné atribúty CSS a HTML. Tu môžete použiť vlastné CSS na ktorýkoľvek z mnohých prvkov modulu. Na modul môžete tiež použiť vlastné triedy a identifikátory CSS, ktoré sa dajú použiť na prispôsobenie modulu v súbore style.css vašej detskej témy.

CSS ID

Zadajte voliteľné ID CSS, ktoré sa použije pre tento modul. ID je možné použiť na vytvorenie vlastného štýlu CSS alebo na prepojenie s konkrétnymi sekciami vašej stránky.

Triedu CSS

Zadajte voliteľné triedy CSS, ktoré sa majú použiť pre tento modul. Na vytvorenie vlastného štýlu CSS je možné použiť triedu CSS. Môžete pridať viac tried oddelených medzerou. Tieto triedy môžete použiť vo svojej podradenej téme Divi alebo vo vlastnej šablóne štýlov CSS, ktorú pridáte na svoju stránku alebo na svoj web pomocou možností témy Divi alebo nastavení na stránke Divi Builder.

Vlastné CSS

Vlastné CSS je možné použiť aj na modul a na ktorékoľvek z jeho vnútorných častí. V sekcii Vlastné CSS nájdete textové pole, kde môžete priamo do každého prvku pridať vlastné šablóny štýlov CSS. Záznamy CSS v týchto nastaveniach sú už zabalené v značkách štýlov. Stačí teda zadať pravidlá CSS oddelené bodkočiarkami.

viditeľnosť

Táto možnosť vám umožňuje ovládať zariadenia, na ktorých sa modul zobrazuje. Môžete sa rozhodnúť deaktivovať svoj modul na tabletoch, smartfónoch alebo stolových počítačoch jednotlivo. To je užitočné, ak chcete používať rôzne módy na rôznych zariadeniach alebo ak chcete zjednodušiť mobilný dizajn odstránením určitých prvkov zo stránky.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" rozšírené "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"] STIAHNUŤ TÉMU DIVI [/ vcex_button] [/ width_column] [»v] » 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 =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right" TEM DOWNLOOWN DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Ďalšie výukové programy spoločnosti Divi

• 5 webové stránky pre použitie v hoteli Divi tému
• Ako pridať text na produktoch Divi WooCommerce
• Ako zmeniť farbu ponuky medzi stránkami Divi
• Ako si prispôsobiť mriežky blogu s Divi
• Ako používať role Divi editor na WordPress
• Ako vytvoriť posuvník Divi na celej obrazovke
• Ako zmeniť farbu ponúk medzi stránkami Divi
• Funkcie, ktoré pravdepodobne neviete o Divi
• Ako používať Divi Builder na WordPress
• Ako používať modul posúvania videa Divi
• Ako používať modul Divi Builder Flip
• Ako pridať modul posudkov na Divi Builder
• Ako používať textový modul Divi
• Ako vytvoriť posúvač na Divi
• Ako upraviť rolu používateľa Divi
• Ako používať modul Divi Social Media
• Ako používať modul obchodu na tému WordPress Divi
• Ako používať modul bočného panela Divi
• Ako používať modul tabuľky cien Divi
• Ako používať titulný modul publikácií Divi
• Ako pridať video modul Divi
• Ako používať navigačný modul článku
• Ako používať vyhľadávací modul Divi
• Ako používať modul peňaľenky Divi
• Ako používať osobný modul na nástroji Divi Builder
• Ako používať modul peňaženky s filtrom Divi
• Ako používať posuvný modul s plnou šírkou
• Ako používať modul obrazu Divi Builder
• Ako používať navigačný modul v celej šírke nástroja Divi Builder
• Ako používať modul galérie obrázkov
• Ako používať modul kariet Divi Builder s plnou šírkou
• Ako používať portálový modul Divi s plnou šírkou
• Ako používať modul záhlavia Divi s plnou šírkou
• Ako používať počítací modul Divi
• Ako používať posúvač článkov v aplikácii Divi Builder
• Ako používať modul Divi Email Optin