Amikor e-kereskedelmi webhelyet készít a Divi és a WooCommerce használatával, rengeteg módja van webhelye általános megjelenésének és hangulatának testreszabására.
A Divi WooCommerce moduljai a Divi Theme Builderrel kombinálva lehetővé teszik, hogy sablonokat készítsen termékoldalaihoz, kategóriaoldalaihoz és sok máshoz.
De amellett, hogy megbizonyosodik arról, hogy webhelye szerkezete és WooCommerce oldalai készen állnak az indulásra, fontos átgondolni a látogatók navigációs élményét is.
Az e-kereskedelmi webhelyhez összeállított menü meghatározza a látogatók vásárlási szokásait a webhelyen.Annak érdekében, hogy e-kereskedelmi webhelye teljes mértékben kiaknázza a benne rejlő lehetőségeket, megmutatjuk, hogyan hozhat létre egyéni e-kereskedelmi mega-menüt a Divi Theme Builder segítségével.
Mindent vizuálisan készítünk, a Divi beépített elemeivel, és az elemeket legördülő menüként használjuk valamilyen kóddal.
Ezzel a megközelítéssel bármilyen e-kereskedelmi megamenüt készíthet az Ön által készített e-kereskedelmi webhelyekhez! Ingyenesen letöltheti a JSON-fájlt is.
Térjünk rá.
Előnézet
Mielőtt belevágnánk az oktatóanyagba, vessünk egy gyors pillantást a különböző képernyőméreteken elért eredményekre.
Asztali
Mobil
Töltse le az eCommerce Mega Menü Elrendezését INGYEN
Az ingyenes eCommerce mega menüelrendezés megismeréséhez először le kell töltenie az alábbi gomb segítségével. A letöltéshez való hozzáféréshez fel kell iratkoznia Divi Daily e-mail listánkra az alábbi űrlap segítségével. Új előfizetőként minden hétfőn még több Divi jóságot és ingyenes Divi Layout csomagot kapsz! Ha már szerepel a listán, egyszerűen írja be alább az e-mail címét, és kattintson a letöltés gombra. Nem lesz „újra feliratkozva”, és nem kap további e-maileket.
A JSON fájl feltöltése
Csomagolja ki a fent letöltött tömörített mappát. Ezután lépjen a WordPress webhelyére > Divi > Divi Library, és töltse fel a JSON-t.
Miután az elrendezést elmentette a Divi Library-be, navigálhat a Divi Theme Builder-be, és importálhatja a mentett elrendezést a „Globális fejléc hozzáadása” vagy az „Egyéni fejléc hozzáadása” lehetőségre kattintva, és a „Globális/Egyéni fejléc létrehozása” lehetőség kiválasztásával. Lépjen a Divi Library „Saved Layouts” (Mentett elrendezései) lapjára, válassza ki az előző lépésben feltöltött elrendezést, és mentse a Divi Theme Builder összes módosítását.
Ahhoz, hogy azonnal működjön a menü, végig kell mennie az alábbi oktatóanyag első részén; a CSS osztályok hozzáadása a menüelemekhez egyéni szinten. Engedélyeznie kell az egyik CSS-osztályt is a kódmodulon belül, amint az az oktatóanyag 5. részében látható. Ha az ikonok nem jelennek meg megfelelően, ellenőrizze az ikonok tartalmát a kódmodulban. Az ikonoknak tartalmazniuk kell a „\4c” és „\21” tartalmat, amint azt az alábbi nyomtatási képernyőn láthatja.
1. Adjon hozzá CSS-osztályokat a menüelemekhez
Lépjen a Megjelenés menüihez
Ennek az oktatóanyagnak az első részében két különböző CSS-osztályt fogunk hozzárendelni azokhoz a menüpontokhoz, amelyekhez egy legördülő megamenüt szeretnénk hozzáadni. Ehhez lépjen a WordPress irányítópult megjelenési beállításaiban található menükbe.
CSS-osztály opció engedélyezése
Győződjön meg arról, hogy a CSS-osztály opció engedélyezve van a képernyőn a képernyőbeállítások váltásával és a CSS-osztályok beállítás engedélyezésével.
Adjon hozzá egymást követő CSS-osztályokat a legördülő menüelemekhez
Mindegyik menüelemhez, amelyhez egy legördülő megamenüt kíván rendelni, két CSS-osztályra van szüksége. Először is, egy általános CSS-osztály, amelyet „első szintűnek” neveznek. A második CSS-osztály egy egymást követő számot tartalmaz a végén, „first-level-1”, „first-level-2”, „first-level-3” stb.
- Az első legördülő menüt tartalmazó menüpont: első szintű első szint-1
- Második legördülő menüt tartalmazó menüpont: első szintű első szint-2
- Harmadik legördülő menüt tartalmazó menüpont: első szintű első szint-3
2. Hozzon létre globális fejlécet a Divi Theme Builder segítségével
Nyissa meg a Divi Theme Builder alkalmazást, és kezdje el a globális fejléc építését
Ha a menüelemek a helyükre kerültek, ideje átváltani a Divi-re. Létrehozunk egy új globális fejlécet a Divi Theme Builder-hez navigálva, és a „Globális fejléc hozzáadása” gombra kattintva. A globális fejlécet a semmiből készítjük.
1. szakasz Beállítások
Térköz
Ha belép a sablonszerkesztőbe, észrevesz egy részt. Nyissa meg ezt a részt, és távolítsa el az összes alapértelmezett felső és alsó párnázást.
- Felső kitöltés: 0 képpont
- Alsó kitöltés: 0 képpont
Láthatóság
A következő szakasz elrejtése táblagépen és telefonon. Ezt a részt csak a nagyobb képernyőméreteknél tartjuk meg annak érdekében, hogy a navigáció a kisebb képernyőméreteken ne legyen túlságosan elsöprő.
1. sor hozzáadása
Oszlop szerkezete
Folytassa egy új sor hozzáadásával a következő oszlopstruktúra használatával:
Méretezés
Modulok hozzáadása nélkül nyissa meg a sorbeállításokat, és módosítsa a méretezési beállításokat az alábbiak szerint:
- Egyedi ereszcsatorna-szélesség használata: Igen
- Ereszcsatorna szélessége: 1
- Oszlopmagasságok kiegyenlítése: Igen
- Szélesség: 95%
- Max szélesség: 100%
Térköz
Ezután távolítsa el az összes alapértelmezett felső és alsó párnázást.
- Felső kitöltés: 0 képpont
- Alsó kitöltés: 0 képpont
Képmodul hozzáadása az 1. oszlophoz
Logó feltöltése
Ideje modulokat hozzáadni, kezdve az 1. oszlopban található képmodullal. Töltse fel logóját.
Térköz
Lépjen tovább a modul tervezési lapjára, és adjon hozzá némi felső margót.
- felső árrés: 3%
Szövegmodul hozzáadása a 2. oszlophoz
Tartalom hozzáadása elemre
Tovább a következő oszlopra. Adjon hozzá egy szövegmodult az Ön által választott tartalommal.
Szöveg beállítások
Lépjen tovább a modul tervezési lapjára, és módosítsa a szövegbeállításokat az alábbiak szerint:
- Szöveg betűtípusa: Oswald
- Szöveg betűsúlya: Közepes
- Szöveg betűstílusa: nagybetűk
- Szöveg színe: #000000
- Szöveg mérete: 19 képpont
Térköz
Adjon hozzá egy kis felső és alsó margót is.
- felső árrés: 5%
- alsó árrés: 5%
Szövegmodul kétszeri klónozása és másolatok elhelyezése a 3. és 4. oszlopban
Másolás módosítása
Miután befejezte a 2. oszlopban található első szövegmodult, kétszer klónozhatja, és a másolatokat a 3. és 4. oszlopba helyezheti. Győződjön meg róla, hogy mindkét duplikált modul tartalmát megváltoztatta.
2. szakasz hozzáadása
Térköz
Adjon hozzá egy másik részt közvetlenül az előző alá. Nyissa meg a szakasz beállításait, és távolítsa el az összes alapértelmezett felső és alsó párnázást.
- Felső kitöltés: 0 képpont
- Alsó kitöltés: 0 képpont
2. sor hozzáadása
Oszlop szerkezete
Folytassa egy új sor hozzáadásával a következő oszlopstruktúra használatával:
Méretezés
Modulok hozzáadása nélkül nyissa meg a sorbeállításokat, és módosítsa a méretbeállításokat az alábbiak szerint:
- Egyedi ereszcsatorna-szélesség használata: Igen
- Ereszcsatorna szélessége: 1
- Szélesség: 100%
- Max szélesség: 100%
Térköz
Ezután távolítsa el az összes alapértelmezett felső és alsó párnázást.
- Felső kitöltés: 0 képpont
- Alsó kitöltés: 0 képpont
Határ
Ezután lépjen a szegélybeállításokhoz, és alkalmazzon felső és alsó szegélyt.
- Felső szegély szélessége:
- Asztali: 2px
- Táblagép és telefon: 0px
- Alsó szegély szélessége: 2 képpont
- Szegély színe: #ff6600
Menümodul hozzáadása az oszlophoz
Válassza a Menü lehetőséget
Adjon hozzá egy menümodult a sor oszlopához, és válassza ki a kívánt menüt.
Logó hozzáadása táblagépen és telefonon
Ezután adjon hozzá logót a táblagépen és a telefonon az adaptív beállítások engedélyezésével és az embléma képfájljának feltöltésével. Hagyja üresen az asztal területét.
Elemek
Engedélyezzük a bevásárlókosarat és a keresőikonokat is.
- Bevásárlókosár ikon megjelenítése: Igen
- Keresés ikon megjelenítése: Igen
Menü Szöveg beállítások
Lépjen tovább a Tervezés lapra, és módosítsa a menü szövegének beállításait az alábbiak szerint:
- A menü betűtípusa: Oswald
- Menü Betűstílus: Nagybetűk
- Menü szövegének színe: #000000
- Menü szöveg mérete: 19 képpont
Legördülő menü Szöveg beállításai
A legördülő menüsor színét is módosítjuk.
- Legördülő menüsor színe: #ffffff
Ikonok Beállítások
Az ikonok beállításaival együtt.
- Bevásárlókosár ikon színe: #ff6600
- Keresésikon színe: #ff6600
- Hamburger menü ikon színe: #ff6600
CSS osztály
Fejezze be a modul beállításait egy CSS-osztály hozzáadásával. Ezt a CSS-osztályt használjuk később az oktatóprogram során, amikor hozzáadjuk a kódot.
- CSS osztály: kategória-menü
3. Építsen legördülő sort a fejléc sablonon belül
Új szakasz hozzáadása (az első menüelem legördülő menüjének szentelve)
Méretezés
Most, hogy elkészült a menü, ideje továbbmenni az oktatóanyag következő részére, amely az e-kereskedelmi megamenü legördülő menüjének létrehozását célozza. Az első legördülő e-kereskedelmi megamenü elkészítéséhez hozzáadunk egy új részt. Nyissa meg a szakaszbeállításokat, és győződjön meg arról, hogy a méretezési beállításoknál a szélesség és a maximális szélesség 100%-ra van állítva.
- Szélesség: 100%
- Max szélesség: 100%
Térköz
Ezután távolítsa el az összes alapértelmezett felső és alsó párnázást.
- Felső kitöltés: 0 képpont
- Alsó kitöltés: 0 képpont
CSS osztály
Ezután adjon hozzá két CSS-osztályt. A második CSS-osztály végén lévő szám megegyezik az oktatóanyag első részének első menüpontjában használt számmal.
- CSS osztály: legördülő menü legördülő menü 1
Új sor hozzáadása a szakaszhoz
Oszlop szerkezete
Folytassa egy új sor hozzáadásával a szakaszhoz a következő oszlopstruktúra használatával:
Háttérszín
Modulok hozzáadása nélkül nyissa meg a sorbeállításokat, és adjon hozzá egy fehér háttérszínt.
- Háttérszín: #ffffff
Méretezés
Lépjen tovább a sor tervezési lapjára, és módosítsa a méretbeállításokat az alábbiak szerint:
- Egyedi ereszcsatorna-szélesség használata: Igen
- Ereszcsatorna szélessége: 1
- Oszlopmagasságok kiegyenlítése: Igen
- Szélesség: 100%
- Max szélesség: 100%
Térköz
Távolítsa el az összes alapértelmezett felső és alsó párnázást is.
- Felső kitöltés: 0 képpont
- Alsó kitöltés: 0 képpont
Határ
És alkalmazzon egy alsó szegélyt.
- Alsó szegély szélessége: 2 képpont
- Alsó szegély színe: #ff6600
1. és 2. oszlop beállításai
Ezután nyissa meg az 1. és 2. oszlop beállításait külön-külön.
Térköz
Adja hozzá a következő reszponzív kitöltési értékeket mindkét oszlophoz:
- Felső párnázás:
- Asztali számítógép és táblagép: 10%
- Telefon: 5%
- Alsó párnázás:
- Asztali számítógép és táblagép: 10%
- Telefon: 5%
- Bal oldali kitöltés: 5%
- Jobb párnázás: 5%
Fő elem CSS
Egy sor CSS-kóddal együtt. Ez segít abban, hogy kisebb képernyőméreteken is egymás mellé helyezzük az oszlopokat.
|
01
|
width: 50% !important |
3. oszlop Beállítások
Színátmenetes háttér
Tovább a 3. oszlop beállításaihoz. Alkalmazza a következő gradiens hátteret:
- 1. szín: rgba(0,0,0,0,08)
- 2. szín: # 0a0a0a
- Helyszínátmenet a háttérkép felett: Igen
Háttérkép
Ezután töltsön fel egy választott háttérképet.
Fő elem CSS
És adjon hozzá egy jobb margót az oszlophoz egy sor CSS-kód használatával.
|
01
|
margin-right: 10px !important; |
Láthatóság
Annak érdekében, hogy a mobil legördülő listánk ne legyen túlságosan elsöprő, ezt az egész oszlopot elrejtjük táblagépen és telefonon.
4. oszlop Beállítások
Színátmenetes háttér
Ezután a negyedik oszlop áll rendelkezésünkre. Adja hozzá ugyanazt a színátmenetes hátteret.
- 1. szín: rgba(0,0,0,0,08)
- 2. szín: # 0a0a0a
- Helyszínátmenet a háttérkép felett: Igen
Háttérkép
Tölts fel ide egy háttérképet is.
Láthatóság
És elrejti az oszlopot a táblagépen és a telefonon.
Szövegmodul hozzáadása az 1. oszlophoz
Adja hozzá a termékkategória nevét a tartalomdobozhoz
Ideje modulokat hozzáadni! Ebben a legördülő listában bármit elhelyezhet, amit szeretne. Szövegmodulokat használunk, kezdve az 1. oszlop első részével. Adjon hozzá egy kategórianevet.
Termékkategória hivatkozás hozzáadása
Ezután adja hozzá a linket ehhez a kategóriához.
Szöveg beállítások
Lépjen tovább a Tervezés lapra, és módosítsa a szövegbeállításokat az alábbiak szerint:
- Szöveg betűtípusa: Oswald
- Szöveg betűstílusa: nagybetűk
- Szöveg színe: #000000
- Szövegméret:
- Asztali: 22px
- Táblagép: 18 képpont
- Telefon: 16px
- Szöveg betűköz: -0,6 képpont
- Szövegsor magassága: 2,4 em
Határ
Adjon hozzá egy alsó szegélyt is.
- Alsó szegély szélessége: 2 képpont
- Alsó szegély színe:
- Alapértelmezett: rgba(0,0,0,0)
- Lebeg: #ff6600
Szövegmodul klónozása és módosítása annyiszor, ahányszor szükséges
Miután befejezte az elsőt, annyiszor klónozhatja, ahányszor csak akarja, és eloszthatja a másolatokat az 1. és 2. oszlopban.
A termékkategóriák címeinek és hivatkozásainak módosítása
Mindenképpen módosítsa az összes termékkategória nevét és hivatkozását.
Szövegmodul hozzáadása a 3. oszlophoz
Adja hozzá a termékkategória nevét
Tovább a harmadik oszlopra. Adjon hozzá egy új szövegmodult, és írja be a termékkategória nevét.
Termékkategória hivatkozás hozzáadása
Add hozzá a linket is.
Szöveg beállítások
Lépjen tovább a modul tervezési lapjára, és módosítsa a szövegbeállításokat az alábbiak szerint:
- Szöveg betűtípusa: Oswald
- Szöveg betűmérete: félkövér
- Szöveg betűstílusa: nagybetűk
- Szöveg színe: #ffffff
- Szöveg mérete: 3.4vw
- Szöveg sor magassága: 1 em
Pozíció
Helyezze át a modult is.
- Pozíció: Abszolút
- Helyszín: balra lent
- Függőleges eltolás: 2%
- Vízszintes eltolás: 2%
Szövegmodul klónozása a 3. oszlopban és duplikáció elhelyezése a 4. oszlopban
A szövegmodult a 3. oszlopban klónozhatja, és a másolatot a 4. oszlopba helyezheti.
Módosítsa a termékkategória nevét és hivatkozását
Ne felejtse el módosítani a termékkategória nevét a hivatkozással együtt.
A teljes szakasz klónozása, hogy legördülő menüként használhassa újra a többi menüelemhez
Amint létrehozta az első szakasz legördülő menüjét, kétszer klónozhatja.
Módosítsa az összes termékkategória nevét és hivatkozását
Módosítsa az összes termékkategória nevét az új legördülő menükben.
Változtassa meg egymást követően a szakasz CSS osztályait
Az utolsó szakasz CSS-osztályával együtt minden duplikátumhoz. Győződjön meg arról, hogy egy egymást követő parancsot követ.
- CSS osztály: legördülő menü legördülő menü 2
- CSS osztály: legördülő menü legördülő menü 3
4. Adjon hozzá CSS- és JQuery-kódot
Új kódmodul hozzáadása a menümodul fölé
Most, hogy minden menüelem a helyén van, ideje elhelyezni az eCommerce mega menüt a menün belül. Ehhez hozzáadunk egy kódot egy új kódmodulhoz. Helyezze ezt a kódmodult közvetlenül a második szekció menümodulja fölé.
CSS kód beszúrása
Nyissa meg a kódmodult, és adja hozzá a következő CSS-kódsorokat a stíluscímkék közé, amint az az alábbi nyomtatási képernyőn látható :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
/* Enable class below once you're done editing the menu */ /*.dropdown-menu {visibility: hidden;}*/ .category-menu .et_pb_menu__menu .dropdown-menu {visibility: hidden;opacity: 0;-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);-moz-transition: 300ms all cubic-bezier(.4,0,.2,1); -o-transition: 300ms all cubic-bezier(.4,0,.2,1); -ms-transition: 300ms all cubic-bezier(.4,0,.2,1); transition: 300ms all cubic-bezier(.4,0,.2,1); position: absolute!important;top: 75px;bottom: auto;left: 0px;right: auto;} .category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {visibility: visible;opacity: 1;}.category-menu .et_pb_menu__menu li {margin-top: 0px !important;} .category-menu .et_pb_menu__menu li>a {margin-top: 0px !important;padding: 30px 20px !important; }.category-menu .et_pb_menu__menu li.first-level>a:hover {background-color: #FF6600; } .category-menu .et_mobile_menu .dropdown-menu {background-color: white; padding-top: 25px;padding-bottom: 5px;} .category-menu .et_mobile_menu li > a {background-color: transparent;position: relative;} .category-menu .et_mobile_menu .first-level > a:after {font-family: 'ETmodules';content: '\4c';color: #FF6600;font-weight: normal;position: absolute;font-size: 16px;top: 13px;right: 10px;} .category-menu .et_mobile_menu .first-level > .icon-switch:after{content: '\21';color: #c9c9c9;} .category-menu .et_mobile_menu .dropdown-menu {display: none;} .category-menu .et_mobile_menu .dropdown-menu.reveal-items {display: block;} .category-menu .et_pb_menu__menu>nav>ul>li {position: static !important;}.category-menu .et_mobile_menu .dropdown-menu {visibility: visible !important;} |
Helyezze be a JQuery kódot
Adja hozzá a JQuery kódot a szkriptcímkék közé, amint azt az alábbi nyomtatási képernyőn is láthatja .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
jQuery(function($){$(document).ready(function(){ $('.dropdown-menu').each(function(i){ i = i + 1; var $dropdown = $('.dropdown-menu-' + i);var $mainMenuItem = $('.first-level-' + i + '>a');$dropdown.insertAfter($mainMenuItem); }); var $firstLevel = $('.et_mobile_menu .first-level > a');var $allDropdowns = $('.et_mobile_menu .dropdown-menu');$firstLevel.off('click').click(function() {$(this).attr('href', '#'); var $thisDropdown = $(this).siblings(); $thisDropdown.slideToggle();$(this).toggleClass('icon-switch');var dropdownSiblings = $allDropdowns.not($thisDropdown); dropdownSiblings.slideUp();var $thisFirstLevel = $(this);var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);$firstLevelSiblings.removeClass('icon-switch'); }); });}); |
5. Ha végzett a menü testreszabásával, engedélyezze a CSS-osztályt
Amint végzett az összes legördülő menü személyre szabásával, egy dolga marad: első látásra elrejti őket. Ez megakadályozza, hogy a legördülő menü megjelenjen az oldal betöltésekor. Miután engedélyezte ezt a CSS-osztályt, a legördülő szakaszok többé nem jelennek meg a Visual Builderben, de hozzáférhet hozzájuk drótváz módban, és/vagy ideiglenesen letilthatja a CSS-osztályt, amikor módosítja a legördülő szakaszokat. Az osztály engedélyezéséhez távolítsa el a ‘/* */’ zárójeleket a CSS-osztály elején és végén.
6. Mentse el a Divi Theme Builder módosításait
Miután befejezte a globális fejlécet, mindenképpen mentse el a Divi Theme Builder összes módosítását, mielőtt megnézné az eredményt a webhelyén!
Előnézet
Most, hogy az összes lépésen keresztülmentünk, vessünk egy utolsó pillantást a végeredményre a különböző képernyőméreteken.
Asztali
Mobil
0 hozzászólás