Divi termékkörhinta

A Divi és a WooCommerce termékkörhinta kiterjeszti a Divi Builder funkcionalitását, és egy új „Woo Carousel” modullal egészíti ki az alapértelmezett modulokat. A „Woo Carousel” modul lehetővé teszi, hogy gyönyörű és érzékeny körhintákat hozzon létre a WooCommerce termékeihez. Egyszerűen helyezzen be egy modult, illessze be, törölje és húzza át a körhinta elemeit, és állítsa be.

Ez a bővítmény támogatja a WordPress bejegyzéseket és a WooCommerce termékeket is. Teljesen reszponzív, nagymértékben testreszabható, és minden böngészőben zökkenőmentesen működik. A Product Carousel kompatibilis a Divi Theme Builderrel, a Divi Builder beépülő modullal és az Extra témával.

Látogassa meg a termékoldalt itt

Tekintse meg a változásnapló szövegét ehhez az alárendelt témához a következő link követésével: https://divi.space/product/product-carousel-for-divi-and-woocommerce/?changelog=1

Tipp : Ahhoz, hogy a Product Carousel for Divi és a WooCommerce beépülő modul működjön, telepítenie kell a WooCommerce beépülő modult és a Divi , Divi Builder vagy Extra Theme alkalmazást az Elegant Themes alkalmazásból. Ha nincs meg akkor vásároljunk itt .

Követelmények #

• Saját hosztolt WordPress telepítés
• Divi téma az Elegant Themes által
• PHP 7.2 vagy újabb verzió
• memória _ limit 128M
• posta _ max _ mérete 64M
• max végrehajtási _ 180.
• feltölteni _ max _ fájlméret 64M
• max _ bemeneti _ idő 180
• max _ bemenet _ vars 5000
• MySQL 5.6 vagy újabb verzió VAGY MariaDB 10.0 vagy újabb verzió.
• HTTPS támogatás
• Nginx vagy Apache mod _ rewrite modullal
• WooCommerce beépülő modul

Telepítési szám

Miután telepítette a szükséges termékeket:

• WooCommerce
• Divi téma, extra téma vagy Divi Builder beépülő modul

telepítse a Product Carousel for Divi terméket az alábbi két mód egyikével.

WordPress irányítópult #

1. Töltse le a plugin zip fájlját
2. Jelentkezzen be a WordPress irányítópultjába.
3. A bal oldali menüből lépjen a Plugins -> New Add menüpontra

4. Válassza a Feltöltés, majd a Tallózás lehetőséget a zip-fájl kiválasztásához a számítógépéről.
5. Válassza az OK, majd a Telepítés most lehetőséget.
6. Aktiválja a bővítményt.

FTP # használata

1. zip fájl letöltése
2. Csomagolja ki a ZIP-fájlt a számítógépébe
3. Töltse fel a woocommerce-carousel-for-divi könyvtárat a /wp-content/plugins/ könyvtárba, és aktiválja a beépülő modult a Plugin irányítópulton

Aktiválja a # licenckulcsot

A termék használata előtt aktiválnia kell a licenckulcsot. A beépülő modul aktiválásához lépjen a Divi > Product Carousel menüpontra az irányítópult menüjében. Írja be a licenckulcsot, és kattintson az Aktiválás gombra.

Jellemzők #

• Válassza ki az elemeket és a megjelenítési sorrendet – címek, képek, értékelések, ár és gombok
• Dinamikus termékrendezés – állítsa be, hogy milyen termékek jelenjenek meg a közzététel dátuma, kategória, értékelése, ár, elérhetősége stb. alapján
• Termékek számának beállítása – válassza ki, hogy hány elemet tartalmazzon a körhinta
• Egyszerű stílusvezérlők – állítsa be az egyes elemek körüli teret, méretet és párnázást
• Automatikus lejátszás és a felhasználó által vezérelt görgetési beállítások – automatikus forgatás beállítása, valamint ikonok vagy oldalszámozás a kattintással továbblépő vezérlők
• „Vásárlás most” gomb – lehetővé teszi a felhasználók számára, hogy közvetlenül a körhintaból vásároljanak termékeket
• Beépített értékesítési jelvények – testreszabhatja értékesítési kötszereit
• Csillagok besorolása – Az ügyfelek a véleményekre hagyatkoznak, és magasra értékelt termékértékeléseket jelenítenek meg
• Animációk és lebegő effektusok – animált dia- és görgetőfedések
• Divi integrált – Divi alapértelmezett plusz az összes kibővített modulbeállítás

Beépülő modul beállításai #

Tartalom #

1. Woo Carousel elemek
2. Terméknézet típusa
3. Termékek száma
4. Oszlopelrendezés
5. Csúsztatás a csúszkák száma szerint
6. Aktív középső csúszka
7. Hely a diák között
8. Egyenlő magasságú
9. Hurok
10. Automatikus lejátszás
11. Automatikus lejátszási sebesség
12. A csúszka szüneteltetése az egérmutatón
13. Nyíl megjelenítése
14. Elfogyott termékek megjelenítése
15. Vezérlők/oldalszámozás megjelenítése
16. Gomb szövege
17. Link Target
18. Háttér

Tervezés #

1. Cím
2. Ár
3. Eladó jelvény
4. Kép
5. Csillagok értékelése
6. Nyilak
7. Vezérlő/lapozás
8. Nincs rekord szöveg
9. Gomb
10. Méretezés
11. Térköz
12. Határ
13. Doboz-árnyék
14. Szűrők
15. Átalakítani
16. Élénkség

Beállítás és konfiguráció #

Termékkörhinta modul hozzáadása az oldalához #

Ha már vannak termékei a webhelyén, készen áll az első Divi termékkör létrehozására a Woo Carousel Modul beillesztésével az oldalára. A modulok elérésének egyik módja az, hogy a webhely kezelőfelületének bármely oldalára navigál, és a WordPress felső adminisztrációs sávjában kattintson a „Visual Builder engedélyezése” gombra. A Visual Builder engedélyezve lesz.

Miután belépett a Divi Builderbe, a szürke plusz gombra kattintva új modult adhat az oldalához. Keresse meg a „Woo Carousel” modult a modulok listájában. A modul gyors megtekintéséhez beírhatja a „woo” szót is.

És kattintson rá, hogy hozzáadja az oldalához.

Alapértelmezés szerint az összes Woo Carousel tartalmazza az összes körhinta elemet: Cím, Kiárusítási jelvény, Kiemelt kép, Értékelések, Ár és Gomb.

Termékkörhinta elemei #

Döntse el, mely elemeket és milyen sorrendben kívánja megjeleníteni. Törölje az elemeket a Kuka ikonra kattintva. Elemeket is hozzáadhat a Plusz ikonra kattintva, és kiválaszthatja az elem típusát.

Alapértelmezett körhinta beállításai #

A körhinta alapértelmezett színei a téma kiemelő színén és a téma-testreszabó beállításaiban megadott egyéb globális beállításokon alapulnak. A kialakításnak már meg kell egyeznie a webhely kialakításával. Íme egy példa a Divi Ecommerce Pro gyermektéma alapértelmezett körhintajára .

Termék megtekintése Type #

Határozza meg, milyen terméktípust szeretne megjeleníteni:

• Legutóbbi termékek
• Kiemelt Termék
• Legkeresettebb termékek
• Legjobbra értékelt termékek
• Termékkategória
• Minden termék

Ha a Termékkategória van kiválasztva, megjelenik egy jelölőnégyzet lista, amellyel kiválaszthatja, hogy mely kategóriákat kell szerepeltetni. Egyszerűen válassza ki a megjeleníteni kívánt kategóriákat.

Termék szám #

Ez a beállítás határozza meg, hogy hány terméket kíván megjeleníteni. A minimális érték 1, a maximális érték 100.

Rendezés: #

Határozza meg a termékek megjelenítési sorrendjét.

• Dátum szerint (a termékek közzétételének dátuma alapján)
• Ár szerint
• Véletlen
• Elérhető készlet (az első termékek raktáron)

Rendezési irány #

Válassza ki a rendezés irányát: csökkenő vagy növekvő.

Oszlopelrendezés #

Határozza meg a körhinta oszlopainak számát. Más értéket választhat asztali számítógépen, táblagépen és mobileszközön. Példa egy oszlopcsúszka körhintara:

Példa ötoszlopos csúszka körhintara:

Dia a diák száma szerint #

Határozza meg az egyes diaforgatások során elcsúsztatandó termékek számát.

Aktív középső csúszka #

Az aktív diát középre kell helyezni.

Szóköz a diák között #

Határozza meg a diák közötti távolságot px-ben

egyenlő magasság #

Az oszlopmagasságok kiegyenlítése arra kényszeríti az összes oszlopot, hogy a sor legmagasabb oszlopának magasságát vegye fel. Minden oszlop azonos magasságú lesz, így a megjelenése egységes marad.

Tiltva:

Engedélyezve:

hurok #

Az utolsó és az első tétel megkettőzése hurokillúzióhoz

Automatikus lejátszás #

Ezzel az opcióval a csúszkákat egy adott idő elteltével felhasználói beavatkozás nélkül automatikusan átkapcsolhatja. Automatikus lejátszási sebesség: Az az idő, amelyet a csúszka az egyes diákon tölt, mielőtt kikapcsol. Megjegyzés: A körhinta automatikus lejátszása alapértelmezés szerint le van tiltva.

A csúszka szüneteltetése az egérmutatón #

Amikor a csúszkát mozgatja, az automatikus lejátszás szünetel, és a dia nem változik.

A nyíl #

A csúszka nyilak megjelenítése vagy elrejtése.

Elfogyott termékek megjelenítése #

Ha be van jelölve, a körhinta a készleten lévő termékeket is megjeleníti.

Itt található az ellenőrzése / Pagination #

Az alsó vezérlők oldalszámozásának megjelenítése vagy elrejtése

Gomb szövege #

Módosítsa a Termék gomb szövegét az egyénire.

Link Cél #

Módosítsa a termékhivatkozás célját. Nyissa meg a termékoldalt az új lapon vagy ugyanabban az ablakban.

Háttérszín #

A dia háttérszínének módosítása:

Tervezési lehetőségek #

Cím #

Módosítsa a cím HTML-címkéjét h1, h2, h3, h4, h5, h6, p és strong között.

Termék 8 #

Cím tervezési lehetőségek #

• Párnázás
• Árrés
• Betűtípus
• Betűsúly
• Betű stílus
• Szöveg igazítás
• Szöveg szín
• Szövegméret
• Betűtávolságok
• Vonalmagasság
• Szöveg árnyéka

Ár #

• Párnázás
• Árrés
• Betűtípus
• Betűsúly
• Betű stílus
• Szöveg igazítás
• Szöveg szín
• Szövegméret
• Betűtávolságok
• Vonalmagasság
• Szöveg árnyéka

Kiárusítási jelvény #

Pozíció:

• Ne fedje le a termék képét
• Fedvény a termék képén – bal felső sarokban
• Fedvény a termék képén – jobb felső sarokban
• Fedvény a termék képén – balra lent
• Fedvény a termék képén – jobbra lent

• Párnázás
• Árrés
• Betűtípus
• Betűsúly
• Betű stílus
• Szöveg igazítás
• Szöveg szín
• Szövegméret
• Betűtávolságok
• Vonalmagasság
• Szöveg árnyéka

Kép #

• Fedvényszín az egérmutatón
• 
• Párnázás
• Árrés
• Lekerekített sarok
• Szegély stílusok
• Szegély szélessége
• Szegély színe
• Box Shadow

Csillag #

• Csillagértékelési ikon Állítson be egyéni ikont az értékeléshez:

• Igazítás (balra/középre/jobbra)
• Csillag színe
• Helyőrző csillag színe

• Tekintse át az ikonméretet
• Csillagtávolság
• Párnázás
• Árrés

Nyilak #

• Ikon mérete
• Egyéni előző ikon
• Egyéni következő ikon
• Ikon színe
• Nyíl függőleges helyzete: középen / alul
• Nyíl megjelenítése a körhinta mellett
• Háttérszín
• Párnázás
• Árrés
• Lekerekített sarok

Egyéni előző és következő ikonok:

Nyíl függőleges helyzete: középre és nyíl megjelenítése a körhinta mellett

Egyedi lekerekített sarkok és szegélyek.

Lapozási szám szabályozása

• Lapozási háttérszín
• Párnázás
• Árrés

Nincs rögzítési szöveg #

Szabja testre a „No Record Text” beállítást, amely akkor jelenik meg, ha egyetlen termék sem felel meg a megjelenítési feltételeknek.

• Betűtípus
• Betűsúly
• Betű stílus
• Szöveg igazítás
• Szöveg szín
• Szövegméret
• Betűtávolságok
• Vonalmagasság
• Szöveg árnyéka

# gomb

• Szövegméret
• Szöveg szín
• Háttér
• Szegély szélessége
• Szegély színe
• Határ sugara
• Betűtávolságok
• Betűtípus
• Betűsúly
• Betű stílus
• Ikon megjelenítése
• Ikon
• Ikon színe
• Ikonok elhelyezése
• Csak az ikont jelenítse meg, ha az egérmutatót húzza
• Igazítás (balra/középre/jobbra)
• Szöveg árnyék
• Árrés
• Gomb

Speciális beállítások: Egyéni CSS- szám

A Tervezés lapon számos lehetőséget hoztunk létre, így szinte bármit megtehet, amit a CSS-sel megtehet (anélkül, hogy egy kódsort érintene). Ha azonban Ön fejlesztő, érdemes lehet saját kódot írnia az egyéni tervezési vezérlőink használata helyett. Ebben az esetben használhatja a Speciális fület, amely közvetlenül a Tervezés fül mellett található a modulok, sorok és szakaszok modális beállítási ablakában. Itt lebontottuk a modul összes szerkezeti elemét, és megadtuk a szövegmezőket, amelyekbe beírhatja saját CSS-jét. Ezen a panelen alkalmazhatja a CSS-t a modul egyes részeire. Például alkalmazhat egyéni CSS-t közvetlenül egy oldalszámozásra, vagy létrehozhat saját :after pszeudo elemet.

A következő választókkal is megcélozhat bármely elemet

/*Title Wrapper*/.dswc_item_wrapper
/* Title */.dswc_item_wrapper .dswc_title a
/* Sale Badge Wrapper */.sale_badge
/* Sale Badge  */.sale_badge span
/* Star Rating Wrapper  */.star_rating_module_wrapper
/* Star Rating  */.star_rating_module_wrapper .star-rating
/* Price Wrapper  */.dswc_price
/* Price Amount  */.dswc_price .amount
/* Price Regular  */.dswc_price del
/* Price Sale  */.dswc_price ins
/* Price Symbol  */.dswc_price .amount
/* Featured Image Before */ .swiper-slide.dswc_item_wrapper .dswc-featured-image img:before /* Featured Image */ .swiper-slide.dswc_item_wrapper .dswc-featured-image img /* Featured Image Wrapper */ .swiper-slide.dswc_item_wrapper .dswc-featured-image /* Button Wrapper */ .et_pb_button_module_wrapper /* Button  */.et_pb_button_module_wrapper a.et_bt_add_to_cart
/* Button Hover  */.et_pb_button_module_wrapper a.et_bt_add_to_cart:hover
/* Slides  */.swiper-slide.dswc_item_wrapper
/* Arrow Navigation  */.prev_icon, .next_icon
/* Arrow Prev Navigation */.prev_icon
/* Arrow Next Navigation  */.next_icon
/* Controller/Pagination Bullet  */.swiper-pagination .swiper-pagination-bullet

Másolat

Demo elrendezések importálása #

A Divi és a WooCommerce termékkörhinta ingyenes 9 előre elkészített körhinta-elrendezést tartalmaz. Megtalálhatja őket a beépülő modul bemutató oldalán: http://productcarousel.aspengrovestudio.com/ Íme egy lépésről lépésre bemutatott útmutató, hogyan használhatja őket webhelyén:

1. Elrendezések letöltése: itt
2. Jelentkezzen be WordPress webhelyére
3. Keresse meg a Divi > Divi Library elemet
4. Kattintson az „Importálás és exportálás” gombra
5. Válassza az „Importálás” lehetőséget a „Hordozhatóság” előugró ablakban
6. Kattintson a „Fájl kiválasztása” gombra, és válassza ki a JSON-fájlt a számítógépéről
7. A JSON-elrendezés kiválasztása után kattintson az „Import Divi Builder Layouts” elemre, és várja meg, amíg az importálási folyamat befejeződik. Az elrendezések szakaszokként kerülnek exportálásra. Ha importálni szeretné őket a Divi Library-ból, illesszen be egy új részt, és válassza ki a betöltési elrendezést a Divi könyvtárból. Válassza ki az elrendezést, és kattintson az importálásra. Ha bármilyen problémája van, forduljon ügyfélszolgálatunkhoz.