30+ hasznos Divi Header oktatóanyag a Divi számára

Written by redzs

2022.03.24.

Kategóriák

30+ hasznos Divi Header oktatóanyag a Divi számára

A Divi használatának megtanulásának egyik legjobb módja az ezen a blogon található számos oktatóanyag követése. Ha szeretne többet megtudni a Divi-ről, és egyedi fejlécet szeretne tervezni Divi webhelyéhez, ez a cikk Önnek szól. Ebben a cikkben több mint 30 hasznos Divi fejléc-oktatóanyagot tekintünk meg, amelyeket a Divi Theme Builderrel használhat. Az oktatóanyagok asztali és mobil beállításokat tartalmaznak, valamint letölthetők a példafejlécek. Ez megkönnyíti a használatukat.

1. Globális fejléc létrehozása

Globális fejléc létrehozása

Ez az oktatóanyag bemutatja, hogyan használható a Divi Theme Builder globális fejlécek létrehozására. Tartalmaz egy felső sávot és egy navigációs sávot, mindkettő eltérő stílusú. Megmutatja, hogyan adhat hozzá egy felső sávot logóval, közösségi követési ikonokkal és egy CTA gombbal. Az alsó sáv egy navigációs menüt tartalmaz, és lekerekített sarkokkal van kialakítva, hogy elkülönüljön webhelyétől.

Oktatóanyag megtekintése

2. Ragadós fejléc létrehozása

Ragadós fejléc létrehozása

Ez az oktatóanyag bemutatja a megfelelő címsorszerkezetet felső sávval és navigációs sávval egyaránt. Megmutatja, hogyan használhatja a Divi ragadós beállításait, hogy a fejléc a képernyő tetejéhez tapadjon, amikor a felhasználó görget. Azt is bemutatja, hogyan változtathatja meg az elemek stílusát, amikor a felhasználó görget, így a fejléc más megjelenést és érzetet ad.

Oktatóanyag megtekintése

3. Teljes képernyős fejléc létrehozása

Teljes képernyős fejléc létrehozása

Ez az oktatóanyag bemutatja, hogyan hozhat létre egyéni fejlécet, amely teljes képernyőn nyílik meg, ha a hamburger menü ikonjára kattintanak. A menüpontok mindegyike Divi modul, így linkeket vagy mega menüt hozhat létre. JQuery-t használ, és a kód benne van az oktatóanyagban és a letöltési fájlban.

Oktatóanyag megtekintése

4. Becsúsztatható fejléc létrehozása

Becsúsztatható fejléc létrehozása

Ez az oktatóanyag bemutatja, hogyan hozhat létre menüt, amely jobbról csúszik be, ha a hamburger menü ikonjára kattint. A menüpontok Divi modulok, így mega menüt készíthetünk. A kattintási funkció egyéni jQuery-t használ, amely az oktatóanyagban és a letöltési fájlban található.

Oktatóanyag megtekintése

5. Lecsúsztatható fejléc létrehozása

Lecsúsztatható fejléc létrehozása

Ez az oktatóanyag bemutatja, hogyan hozhat létre fejlécet, amely felülről lefelé néz, és lefelé tolja a tartalmat, amikor a hamburger menü ikonjára kattintanak. Ez megakadályozza, hogy a menü elfedje a tartalmat, így továbbra is látható a képernyőn. A kódot az oktatóprogram és a letölthető fájl tartalmazza.

Oktatóanyag megtekintése

6. Függőleges navigáció létrehozása

Függőleges navigáció létrehozása

Ez az oktatóanyag bemutatja, hogyan hozhat létre függőleges navigációs sávot, amely a képernyő bal oldalán található. Megosztja a képernyőt a webhely tartalmával, és a helyén marad, amikor a felhasználó görget. A tartalom területe kisebb a normálnál, így mindkettő ugyanazt a képernyőt oszthatja meg.

Oktatóanyag megtekintése

7. Átlátszó lebegő fejléc létrehozása

Átlátszó lebegő fejléc létrehozása

Ez egy átlátszó fejlécet hoz létre, amely az oldal teteje közelében lebeg. A menü abszolút CSS pozícióval a helyén marad. Tartalmaz egy logót, egy navigációs menüt és egy CTA gombot. Mivel átlátszó, az oldal görgetés közben átlátszik.

Oktatóanyag megtekintése

8. Átlátszó ragadós fejléc készítése

Átlátszó ragadós fejléc létrehozása

Ez az oktatóanyag bemutatja, hogyan lehet létrehozni egy olyan navigációs sávot, amely ragadóssá válik, és megváltoztatja a stílust, amikor a látogató görget. A navigációs menü felett van egy felső sáv, amely nem ragad. Amint a navigációs sáv eléri a tetejét, ragadóssá válik, és megváltozik a színe.

Oktatóanyag megtekintése

9. Egyéni elforgatott fejléc létrehozása

Egyéni elforgatott fejléc létrehozása

Ez egy függőleges fejlécet hoz létre, amely a képernyő bal oldalán helyezkedik el, és átlátszó. A helyén marad, amikor a felhasználó görget, és a webhely háttere megjelenik. A navigációs hivatkozások szintén függőlegesen helyezkednek el. A fejléc mobileszközökön az oldal tetején található.

Oktatóanyag megtekintése

10. E-kereskedelmi Mega Menü létrehozása

E-kereskedelmi Mega Menü létrehozása

Ez az oktatóanyag bemutatja, hogyan hozhat létre Divi modulokkal épített megamenüt. Adjon hozzá annyi modult, amennyit csak szeretne. Még WooCommerce modulokat is beépíthet, így ez a menü nagyszerű választás az e-kereskedelmi webhelyek számára termékei és kategóriái bemutatására. Ez egy speciális oktatóanyag, amely kódot tartalmaz a cikkben és a letölthető fájlokban.

Oktatóanyag megtekintése

11. Legördülő menü létrehozása

Legördülő menü létrehozása

Ez az oktatóanyag bemutatja, hogyan replikálhatja az Elegant Themes legördülő menüt a Divi Theme Builder segítségével. Ez egy fejlett mega menü szöveggel, ikonokkal és CTA-kkal. További modulokat is hozzáadhat saját egyéni változatának létrehozásához az ET menüben.

Oktatóanyag megtekintése

12. Globális fejléc felfedése felfelé görgetés közben és elrejtése lefelé görgetés közben

Globális fejléc felfedése felfelé görgetés közben és elrejtése lefelé görgetés közben

Ez bemutatja, hogyan lehet egyedi fejlécet létrehozni, amely megjelenik, amikor a felhasználó felfelé görget, de elrejti, amikor a felhasználó lefelé görget. Ez lehetővé teszi, hogy több tartalmat jelenítsen meg, amikor lefelé görgetnek, de megvan a ragadós fejléc előnyei, amikor felfelé görgetnek.

Oktatóanyag megtekintése

13. Mobil összecsukható beágyazott menü létrehozása

Mobil összecsukható beágyazott menü létrehozása

Ez az oktatóanyag bemutatja, hogyan hozhat létre kifejezetten mobileszközökre tervezett menüt. A menüpontok egymásba vannak ágyazva. Mobil összecsukható effektust használ a navigációs menühöz. A felhasználók könnyedén megnyithatják vagy összecsukhatják a menüelemeket mobileszközökön.

Oktatóanyag megtekintése

14. Animate a Global Header

Animate a Global Header

Ez bemutatja, hogyan lehet animálni a globális fejléc elemeit, hogy kiemelkedjenek és felkeltsék a figyelmet. Az animált elemek közé tartozik a logóval ellátott navigációs menü, a közösségi média követőikonjai és a CTA gomb. Az elemek egymásra halmozódnak a mobilképernyőkön, és egyenként jelennek meg.

Oktatóanyag megtekintése

15. Tervezze meg a bejelentkezési űrlapot egy globális fejléchez

Tervezze meg a bejelentkezési űrlapot a globális fejléchez

Ha egy soron belüli bejelentkezési űrlapot szeretne létrehozni a fejléchez, akkor erre az oktatóanyagra van szüksége. Hozzáadja a Divi bejelentkezési modult a navigációs menü feletti fejléchez, és néhány extra stílust ad hozzá a CSS-hez. A CSS-t az oktatóanyag és a letöltési fájl tartalmazza.

Oktatóanyag megtekintése

16. Adjon hozzá egymás melletti gombokat a globális fejléchez

Adjon hozzá egymás melletti gombokat a globális fejléchez

Ez az oktatóanyag bemutatja, hogyan lehet egyedi gombkialakítással érdekes CTA-kat létrehozni a fejléchez. A gombok egymás mellett helyezkednek el, így rögzítve vannak. Még mindig mindegyik más gombnak tűnik. Az egyik egy elsődleges, a másik egy másodlagos gomb.

Oktatóanyag megtekintése

17. Helyezze automatikusan a fejlécet az első szakasz alá

A fejléc automatikus elhelyezése az első szakasz alá

Ez az oktatóanyag bemutatja, hogyan helyezheti el automatikusan a fejlécet az első Divi szakasz alá minden oldalon. Ez lehetővé teszi, hogy először az oldal hős része jelenjen meg, majd alatta megjelenik a fejléc a logóval, a navigációs menüvel stb.

Oktatóanyag megtekintése

18. Adjon hozzá egy legördülő kapcsolattartó űrlapot a globális fejléchez

Adjon hozzá egy legördülő kapcsolattartót a globális fejléchez

Ez bemutatja, hogyan adhat hozzá legördülő kapcsolatfelvételi űrlapot a globális fejléchez. A kapcsolatfelvételi űrlap kicsi, és akkor nyílik meg, ha a kapcsolat gombra kattintanak. Ez tisztán tartja a fejlécet, miközben könnyű hozzáférést biztosít a kapcsolatfelvételi űrlaphoz. Tartalmazza a jQuery-t és a CSS-t az oktatóanyagban és a letöltési fájlban.

Oktatóanyag megtekintése

19. Cserélje ki a fejlécet görgetéskor

Cserélje ki a fejlécet görgetéskor

Ha valaha is azt akarta, hogy a fejléc egy másik fejlécre változzon, amikor a felhasználó görget, akkor erre az oktatóanyagra van szüksége. A két fejléc eltérő tartalommal és különböző színekkel rendelkezhet. Tartalmazza a jQuery-t az oktatóanyagban és a letöltési fájlban.

Oktatóanyag megtekintése

20. 5 globális előbeállítás a menümodulhoz

5 globális előbeállítás a menümodulhoz

Az előre beállított beállítások nagyszerű módja annak, hogy időt takarítson meg, és konzisztens dizájnt hozzon létre a Divi Builder segítségével. Ez az oktatóanyag bemutatja, hogyan hozhat létre 5 globális előre beállított értéket a Divi fejlécek létrehozásának folyamatának egyszerűsítéséhez. Annak ellenére, hogy az előbeállításokat a semmiből hozzák létre, letöltheti őket ebből az oktatóanyagból.

Oktatóanyag megtekintése

21. Adjon hozzá egy „Új” vagy „Kiemelt” sarokcímkét egy menüelemhez a fejlécben

Adjon hozzá egy „Új” vagy „Kiemelt” sarokcímkét egy menüelemhez a fejlécben

Az új és a kiemelt címkék nagyszerű módja annak, hogy felhívja látogatói figyelmét termékeire és bejegyzéseire. Jól néznek ki, és segítenek a látogatóknak megtalálni a webhely legfontosabb oldalait. Ez az oktatóanyag bemutatja, hogyan hozhatja létre ezeket a menüelemekhez, hogy felhívja a figyelmet bizonyos hivatkozásokra.

Oktatóanyag megtekintése

22. Adjon hozzá és animáljon SVG logót a globális fejlécén belül

Adjon hozzá és animáljon SVG logót a globális fejlécén belül

Ez az oktatóanyag bemutatja, hogyan használhatja az SVG-fájlokat a logóhoz, így nem korlátozódhat csak PNG-re. Még tovább megy, és megmutatja, hogyan animálható az SVG logó. Az animációt az Anime JS könyvtár kezeli . Használhatja bármilyen logó animálására.

Oktatóanyag megtekintése

23. Keverje össze a fejlécet és a törzset a bejegyzéstartalom modullal és a szakaszelválasztókkal

Keverje össze fejlécét és törzsét a bejegyzési tartalommodullal és a szakaszelválasztókkal

A szakaszelválasztók nagyszerű lehetőséget kínálnak a Divi szakaszok közötti zökkenőmentes átmenet létrehozására. Ez bemutatja, hogyan használhatja a Divi beépített szakaszelválasztóit a fejléc és a törzstartalom közötti átmenet létrehozására.

Oktatóanyag megtekintése

24. Adjon hozzá egy dinamikus webhelycímet és címsort a globális fejléchez

Adjon hozzá dinamikus webhelycímet és címsort globális fejlécéhez

A webhely címe kiválóan helyettesíti a logót, vagy röviden leírja a webhelyet. A dinamikus webhelycímek lehetővé teszik a cím megváltoztatását egy helyen, és az automatikusan megváltozik mindenhol, ahol a dinamikus címet használják. Ez az oktatóanyag bemutatja, hogyan adhat dinamikus webhelycímeket a globális fejléchez.

Oktatóanyag megtekintése

25. Optimalizálja logóképét a globális előbeállításokkal

Optimalizálja logóképét a globális beállításokkal

Ha a webhely logójának képe nincs optimalizálva, előfordulhat, hogy minden oldal lassan töltődik be, vagy nem illeszkedik megfelelően a képernyőre. Ez az oktatóanyag bemutatja, hogyan használhatja a Divi optimalizálási lehetőségeit a megfelelő méret, pozíció és stílus létrehozásához. Azt is bemutatja, hogyan változtathatja beállításait előre és újra felhasználható beállításokká.

Oktatóanyag megtekintése

26. Adjon hozzá egy rögzített „legújabb epizód” hangsávot a fejléchez

Adjon hozzá egy javított „legújabb epizód” hangsávot a fejléchez

A Divi audiomodulja kiválóan alkalmas podcastok fogadására. Ez az oktatóanyag bemutatja, hogyan adhat hozzá hangmodult és szövegmodult, hogy hangsávot adjon a fejléchez a legutóbbi epizóddal. A szöveges modul tartalmaz egy hurokanimációt, amely felhívja a látogató figyelmét.

Oktatóanyag megtekintése

27. 8 késleltetett gombanimáció a fejléc CTA-jához

8 késleltetett gombanimáció a fejléc CTA-jához

A gombanimációk kiválóan alkalmasak arra, hogy felhívják a figyelmet a CTA-kra. Ez az oktatóanyag bemutatja, hogyan hozhat létre 8 késleltetett gombanimációt egyéni fejléc CTA létrehozásához. Az animációk a Divi beállítások egyedi kombinációival készülnek. A webhelyén bárhol használhatók.

Oktatóanyag megtekintése

28. Cserélje le a ragadós logót

Változtassa meg a ragadós logót a görgetésen

Még ha a fejléc ragadós is, lehetséges a logó megváltoztatása, amikor a felhasználó görget. Ez egy nagyszerű módja annak, hogy kiemelje a fejlécet, vagy kiemelje az oldal kialakításától. Ez az oktatóanyag bemutatja, hogyan kell ezt megtenni, valamint a globális fejléc stílusának megváltoztatását görgetéskor.

Oktatóanyag megtekintése

29. Használjon különböző fejléceket különböző sablonokon

Használjon különböző fejléceket a különböző sablonokon

Ez az oktatóanyag azt mutatja be, hogyan lehet konkrét fejléceket használni bizonyos oldalakhoz és bejegyzésekhez. A Divi Theme Builder lehetővé teszi globális fejléc létrehozását, de bármely oldalon vagy bejegyzésben felülírhatja ezt a fejlécet. Igény szerint mindegyik sablonhoz külön fejlécet rendelhet, és csak néhány kattintás szükséges a hozzárendelésükhöz.

Oktatóanyag megtekintése

30. Rejtse el a fejlécét bizonyos oldalakon

Fejléc elrejtése adott oldalakon

Nemcsak más fejlécet használhat a különböző sablonokhoz, amint azt a fenti oktatóanyagban láttuk, hanem elrejthetjük a fejlécet is bizonyos oldalakon. Ez az oktatóanyag bemutatja, hogyan kell ezt megtenni a Divi Theme Builder beállításaival. A fejléc elrejthető az adott oldal, bejegyzés típusa, kategória, címke stb. alapján.

Oktatóanyag megtekintése

31. Adjon hozzá egy háttérképet a fejléchez

Adjon hozzá egy háttérképet a fejléchez

A háttérkép nagyszerű módja annak, hogy fejléce kitűnjön a tömegből. Ez könnyen megtehető a Divi Theme Builder segítségével. Ez az oktatóanyag bemutatja, hogyan adhat hozzá háttérképet a fejléchez, és hogyan állíthatja be a hátsó effektushoz.

Oktatóanyag megtekintése

32. Használjon más fejlécet a kezdőlapon

Használjon más fejlécet a kezdőlapon

Egy másik lehetőség a különböző fejlécek használatára a különböző oldalakon, ha más fejlécet használ a kezdőlapján, mint bárhol máshol. Ez különösen akkor hasznos, ha nyitóoldalt vagy belső oldalt szeretne létrehozni a kezdőlaptól eltérő céllal. Ez az oktatóanyag bemutatja, hogyan kell ezt megtenni a Divi Theme Builder segítségével.

Oktatóanyag megtekintése

33. Adjon hozzá egy gombot a fejléchez

Adjon hozzá egy gombot a fejléchez

A gombok a legjobb CTA-k, amelyeket hozzáadhat a fejléchez. Felhívják a figyelmet, és megkönnyítik a felhasználók kattintását. Ez az oktatóanyag bemutatja, hogyan adhat hozzá gombot a Divi fejlécéhez a teljes webhelyhez vagy bizonyos oldalakhoz. Ezt a tudást arra is felhasználhatja, hogy bárhol elhelyezze őket a webhelyén.

Oktatóanyag megtekintése

34. Takarítson meg helyet a fejlécen a váltó ikonokkal

Takarítson meg helyet a fejlécén a kapcsolóikonokkal

A tartalom váltása nagyszerű módja annak, hogy helyet takarítson meg a fejlécben, és tisztán tartsa a tervezést. Ahelyett, hogy a teljes tartalmat látná, megjeleníthet egy ikont. Amikor a felhasználó rákattint az ikonra, megjelenik a tartalom. Ez az oktatóanyag bemutatja, hogyan kapcsolhatja át a tartalmat a telefonszámhoz, e-mail címhez és közösségi megosztási gombokhoz. Ez az oktatóanyag a CSS-t és a jQuery-t tartalmazza a cikkben és a letöltési fájlban.

Oktatóanyag megtekintése

35. Állítsa keresztbe a logóját a fejlécben található elsődleges és másodlagos menüsorok között

Állítsa be logóját a fejlécben lévő elsődleges és másodlagos menüsorba

Ha a logót a felső sávba vagy a navigációs sávba helyezi, jól néz ki, de korlátozhatja a tervezési lehetőségeket is. Ez az oktatóanyag bemutatja, hogyan helyezheti el az emblémát úgy, hogy az áthaladjon mindkét menüsoron a fejlécen belül. Az oktatóanyag CSS-je megtalálható a cikkben és a letöltési fájlban.

Oktatóanyag megtekintése

36. Hozzon létre egy kompakt ajánlási csúszkát a fejléchez

Hozzon létre egy kompakt ajánlási csúszkát a fejléchez

Ha rövid ismertetőket ad hozzá a fejléchez, ez nagyszerű módja annak, hogy fejlécét egyedivé tegye, és felhívja a figyelmet szolgáltatásaira, bizalmat építsen és hitelességet építsen. Ez különösen jól működik rövid ajánlócsúszkákkal. Ez az oktatóanyag bemutatja, hogyan hozhat létre egy kompakt ajánlási csúszkát a Divi fejlécekhez a rövid ajánlások bemutatásához.

Oktatóanyag megtekintése

Ingyenes Divi fejlécek keresése az Elegant Themes Blogban

Az ET blogon rengeteg ingyenes Divi fejléc található. Egyszerűen keressen rá a

 

„free header”,

 

free divi header

 

vagy hasonló kulcsszavakra. Rengeteg ingyenes fejléc közül választhat.

 

0 hozzászólás

Egy hozzászólás elküldése

Az e-mail címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük

n/a
Wordpress TutoriálokDivi30+ hasznos Divi Header oktatóanyag a Divi számára