A Divi-t úgy tervezték, hogy kompatibilis legyen WooCommerce. Integrálni WooCommerce, telepítenie kell a legújabb verziót WooCommerce.

A WooCommerce a plugin e-commerce amelyet ajánlunk, mivel a legjobb szolgáltatáskészlettel, felülettel rendelkezik, és követi a legjobb kódolási gyakorlatokat. A beépülő modul aktiválása után két új „WooCommerce” és „Termékek” szakasz jelenik meg a WordPress irányítópultján. Ezeken a területeken módosíthatja e-kereskedelmi beállításait, és új termékeket tehet közzé. Megtalálhatod a dokumentáció teljes itt a WooCommerce .

Felhívjuk figyelmét, hogy bár az építő különféle WooCommerce modulokat tartalmaz, a WooCommerce-t önmagában is használhatja anélkül, hogy az építtető csak rendben lenne. Készíthet szabványos oldalakat a Pénztárhoz, a Bevásárlókosárhoz stb., Amint az a dokumentációban található. Hivatkozhat közvetlenül a woocommerce kategóriáira is, vagy használhatja a Rövid kódok WooCommerce egy Divi szövegmodulban. Megadja a szabadságot, hogy bármit megtegyen.

Hogyan adhat hozzá áruházmodult az oldalához

Mielőtt boltmodult adna az oldalához, először be kell ugrania a Divi Builderbe. Egyszer a Divi téma telepítve van a webhelyére, észrevesz egy gombot Használja a Divi Buildert a bejegyzésszerkesztő felett, amikor új oldalt hoz létre. Kattintson erre a gombra a Divi Builder aktiválásához és az összes Divi Builder modul eléréséhez. Ezután kattintson a gombra Használja a Visual Builder alkalmazást hogy a generátort vizuális módban indítsa el. Kattintson a gombra is Használja a Visual Builder alkalmazást amikor az előtérben böngészi a webhelyet, ha csatlakozik a WordPress irányítópultjához.

Miután belépett a Visual Builder programba, a szürke plusz gombra kattintva új modult adhat hozzá az oldalához. Új modulok csak sorok belsejében adhatók hozzá. Ha új oldalt indít, ne felejtse el először hozzáadni egy sort az oldalához. Remek oktatóanyagok vannak a Divi vonal- és szakaszelemeinek használatáról.

Keresse meg az üzlet modult a modulok listájában, és kattintson rá, hogy hozzáadja az oldalához. A modulok listája kereshető, ami azt jelenti, hogy beírhatja a "shop" szót is, majd az Enter gombra kattintva automatikusan megkeresheti és hozzáadhatja a shop modult! A modul hozzáadása után a modul opcióinak listája fogadja. Ezeket az opciókat három fő csoportra osztják: Tartalom , Fogamzás et fejlett .

Használjon példát: a legfrissebb termékek bemutatása egy kezdőlapon a Shop modul segítségével

Ebben a példában a shop modult használom a legfrissebb termékek megjelenítésére egy kezdőlapon.

Itt található az oldal a bemutatott négy termékkel.

Kezdjük.

A vizuális készítő segítségével adjon hozzá egy szabályos szakaszt teljes szélességű sorral (1 oszlop). Módosítsa a sorparamétert úgy, hogy teljes szélességűvé váljon, 2 egyedi csatornaszélességgel.

Ezután adjon hozzá egy üzlet modult a sorhoz.

Frissítse a modul beállításait az alábbiak szerint:

Tartalom opciók

Típus: Legújabb termékek
Termékek száma: 4

Tervezési lehetőségek

Ikon Hover Color: # ea1d63
Cím Rendőrség: Nyitott nélkül
Cím Betűméret: 24px
Rendőrségi díj: Nyílt nélkül
Ár betűméret: 20px

Speciális beállítások (egyedi CSS)

Titre:

text-align: center;
háttér: #fff;
margin-top: -10px! jelentős;

Prix:

text-align: center;
háttér: #fff;
kárpitozás: 15px;

Ez minden! Itt a végeredmény.

Vásároljon tartalmat

A Tartalom fülön megtalálja a modul összes tartalmi elemét, például szöveget, képeket és ikonokat. Minden, ami irányít mi jelenik meg a modulban, mindig megtalálható ezen a lapon.

típus

Válassza ki a termékcsatornában megjeleníteni kívánt termékek típusát. Választhat a Legutóbbi termékek közül, amelyek az összes termékét időrendi sorrendben jelenítik meg, a Kiemelt termékek, az Eladó termékek, A legkeresettebb termékek vagy a Legjobb besorolású termékek közül.

Termékek száma

Adja meg a megjeleníteni kívánt termékek számát. Szüksége lesz termékekre, hogy bármi megjelenhessen ebben a modulban.

Tartalmazza a kategóriákat

Válassza ki a felvenni kívánt kategóriákat.

Az oszlopok száma

Válassza ki az üzlet moduljában megjelenítendő oszlopok számát. 4 oszlopot kell használni egy 1 oszlop sorához. 3 oszlopot kell használni egy olyan oszlop számára, amely a sorterület 3/4-ét foglalja el. A 2. oszlopot arra az oszlopra kell használni, amely a fény tér 1/2-át foglalja el. Egy oszlopot kell használni a sorterek 1/4 oszlopához.

Átrendezés

Válassza ki, hogyan szeretné megrendelni termékeit. Válasszon alapértelmezés szerint Rendezés, Népszerűség, Értékelés, Dátum, Ár legalacsonyabb és legmagasabb, Magas és alacsony ár, legrégebbi és legújabb, legújabb és legrégebbi között.

Admin címke

Ez megváltoztatja a konstruktor modul címkéjét az egyszerű azonosítás érdekében. Amikor a WireFrame nézetet használja a Visual Builder alkalmazásban, ezek a címkék a Divi Builder felület modulblokkjában jelennek meg.

Műhelytervezési lehetőségek

A Tervezés lapon megtalálja a modul összes stíluslehetőségét, például a betűtípusokat, a színeket, a méretezést és a térközt. Ezen a lapon módosíthatja a modul megjelenését. Minden Divi modulnak hosszú a tervezési beállítások listája, amelyek segítségével bármit megváltoztathat.

Overlay ikonra

Amikor a Shop modulban egy elem fölé viszi az egérmutatót, megjelenik egy overlay ikon. Az ikonhoz használt szín beállításához használja a beállítás színválasztóját.

Az átfedés színe

Amikor az egérrel a Shop modul valamelyik elemére viszi az egeret, a kép tetején, valamint az üzlet címének szövege és ikonja alatt megjelenik egy fedőszín. Alapértelmezés szerint félig átlátszó fehér színt használnak. Ha más színt szeretne használni, akkor a színválasztó segítségével beállíthatja a színt ebben a beállításban

Választó ikonra

Itt kiválaszthat egy egyéni ikont, amelyet megjelenít, amikor a látogató lebeg az üzletben lévő elemek felett a modulban.

Az értékesítési jelvény színe

Amikor egy termék eladó, a termék képén eladó jelvény jelenik meg. Ezzel a beállítással beállíthatja a jelvény hátteréhez használt színt.

Cím betűtípus

A cím szövegének betűtípusát úgy módosíthatja, hogy a legördülő menüből kiválasztja a kívánt betűtípust. A Divi több tucat nagyszerű betűtípust kínál, amelyet a Google Fonts kínál. Alapértelmezés szerint Divi az Open Sans betűtípust használja az oldal összes szövegéhez. A szöveg stílusát testreszabhatja félkövér, dőlt, nagybetűs és aláhúzási lehetőségek használatával is.

Cím Betűméret

Itt állíthatja be a cím szövegének méretét. A tartomány csúszkáját húzva növelheti vagy csökkentheti a szöveg méretét, vagy közvetlenül beírhatja a kívánt szövegméret értékét a csúszka jobb oldalán található beviteli mezőbe. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" karaktereket adhat meg az egység típusának megváltoztatásához.

A cím szövegszíne

Alapértelmezés szerint a Divi összes szövegszíne fehér vagy sötétszürke. Ha meg akarja változtatni a cím szövegének színét, válassza ki a kívánt színt a színválasztóból ezzel az opcióval.

Címcímek távolsága

A betűköz befolyásolja az egyes betűk közötti helyet. Ha meg szeretné növelni a cím szövegében az egyes betűk közötti teret, használja a tartomány csúszkáját a szóköz beállításához, vagy írja be a kívánt térköz méretet a csúszka jobb oldalán található beviteli mezőbe. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" karaktereket adhat meg az egység típusának megváltoztatásához.

A címsor magassága

A vonalvastagság befolyásolja a cím szövegének minden sora közötti teret. Ha növelni szeretné az egyes sorok közötti teret, használja a tartomány csúszkáját a szóköz beállításához, vagy írja be a kívánt térköz méretet a beviteli mezőbe a kurzortól jobbra található. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" értéket adhat meg az egység típusának megváltoztatásához.

Árpolitika

Az árszöveg betűtípusát úgy módosíthatja, hogy a legördülő menüből kiválasztja a kívánt betűtípust. A Divi több tucat nagyszerű betűtípussal rendelkezik, amelyeket a Google Fonts szolgáltat. Alapértelmezés szerint Divi az Open Sans betűtípust használja az oldal összes szövegéhez. A szöveg stílusát testreszabhatja félkövér, dőlt, nagybetűs és aláhúzási lehetőségek használatával is.

Ár betűméret

Itt állíthatja be az ár szövegének méretét. A tartomány csúszkáját húzva növelheti vagy csökkentheti a szöveg méretét, vagy közvetlenül megadhatja a kívánt szövegméret értékét a csúszka jobb oldalán található beviteli mezőben. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" karaktereket adhat meg az egység típusának megváltoztatásához.

Ár szöveges színe

Alapértelmezés szerint a Divi összes szövegszíne fehér vagy sötétszürke. Ha meg akarja változtatni az árszöveg színét, ezzel a lehetőséggel válassza ki a kívánt színt a színválasztóból.

Az árlevelek távolsága

A betűköz befolyásolja az egyes betűk közötti helyet. Ha az árszövegben meg szeretné növelni az egyes betűk közötti helyet, használja a tartomány csúszkáját a szóköz beállításához, vagy írja be a kívánt távolságméretet a csúszka jobb oldalán található beviteli mezőbe. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" karaktereket adhat meg az egység típusának megváltoztatásához.

Az árvonal magassága

A sor magassága befolyásolja az árszöveg minden sora közötti helyet. Ha növelni kívánja az egyes sorok közötti teret, a tartomány csúszkájával állítsa be a helyet, vagy írja be a kívánt térköz méretet a beviteli mezőbe a kurzortól jobbra található. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" karaktereket adhat meg az egység típusának megváltoztatásához.

A bolt speciális lehetőségei

A Haladó lapon olyan lehetőségeket talál, amelyeket a tapasztaltabb webtervezők hasznosnak találhatnak, például egyéni CSS és HTML attribútumokat. Itt alkalmazhat egyedi CSS-t a modul számos elemére. Alkalmazhat egyedi CSS osztályokat és azonosítókat is a modulra, amelyek felhasználásával testreszabhatja a modult a gyermek téma style.css fájljában.

CSS azonosító

Adjon meg egy opcionális CSS azonosítót, amelyet ehhez a modulhoz használ. Az azonosító felhasználható egyedi CSS-stílus létrehozására vagy az oldal egyes szakaszaira történő hivatkozásokra.

CSS osztály

Adja meg az ehhez a modulhoz használandó opcionális CSS osztályokat. Egy CSS osztály felhasználható egyedi CSS stílus készítéséhez. Több osztályt is felvehet, szóközzel elválasztva. Ezeket az osztályokat fel lehet használni a Divi gyermek témában, vagy az egyéni CSS stíluslapban, amelyet hozzáad az oldalához vagy a webhelyéhez a Divi téma beállításai vagy a Divi Builder oldal beállításai segítségével.

Egyéni CSS

Az egyedi CSS alkalmazható a modulra és a modul bármely belső elemére is. Az Egyéni CSS részben talál egy szövegmezőt, ahol egyedi CSS stíluslapokat adhat hozzá minden elemhez. Az ezekben a beállításokban található CSS ​​bejegyzések már stíluscímkékbe vannak csomagolva. Tehát csak pontosvesszővel elválasztva adja meg a CSS-szabályokat.

láthatóság

Ez az opció lehetővé teszi azoknak az eszközöknek a vezérlését, amelyeken a modul megjelenik. Választhatja a modul deaktiválását táblagépeken, okostelefonokon vagy asztali számítógépeken egyenként. Ez akkor hasznos, ha különböző modokat szeretne használni különböző eszközökön, vagy ha le akarja egyszerűsíteni a mobil tervezését bizonyos elemek eltávolításával az oldalról.

[vc_row center_row = "igen"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" kibontva "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"] A DIVI TÉMA LETÖLTÉSE [/ vcex_button] [/ width [»v_c_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "üres" layout = "kibontva" igazítás = "középre" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" TE fa-downLOAD "] DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Egyéb Divi oktatóanyagok

• 5 weboldalak éttermi felhasználásra Divi téma
• Hogyan lehet szöveget hozzáadni a Divi WooCommerce termékhez?
• Hogyan változtathatja meg a menü színét a Divi oldalak között
• Hogyan lehet személyre szabni egy blog rácsát a Divi-vel
• Hogyan kell használni a szerepe Divi szerkesztő WordPress
• Hogyan készítsünk teljes képernyős Divi csúszkát?
• Hogyan változtathatja meg a menük színét a Divi oldalak között
• Funkciók, amelyeket valószínűleg nem ismer a Divi-ről
• A Divi Builder használata a WordPress-en
• Hogyan használjuk a Divi video scrolling modult
• A Divi Builder Flip modul használatának módja
• Hogyan adhatunk hozzá egy beszámolót a Divi Builderhez
• A Divi szövegmodul használata
• Hogyan lehet létrehozni egy csúszkát a Divi-n
• A Divi felhasználói szerepkör szerkesztése
• A Divi Social Media használata
• Hogyan lehet használni az üzlet modult a WordPress Divi témában?
• A Divi oldalsáv moduljának használata
• A Divi áratábla modul használatának módja
• A Divi kiadványok címmoduljának használata
• Hogyan adhatunk hozzá egy Divi video modult
• A cikk navigációs moduljának használata
• A Divi keresőmodul használata
• A Divi pénztárca moduljának használata
• A személyi modul használata a Divi Builder-en
• A pénztárca moduljának használata a Divi szűrővel
• A teljes szélességű csúszka modul használata
• A Divi Builder képmodul használata
• A Divi Builder teljes szélességű navigációs moduljának használata
• A képgaléria modul használata
• A Divi Builder teljes szélességű kártya moduljának használata
• A Divi teljes szélességű portfólió moduljának használata
• A Divi teljes szélességű fejléc moduljának használata
• A Divi számláló modul használata
• Hogyan lehet használni a Divi Builder cikkcsúszkáját?
• A Divi Email Optin modul használata