Gusto mo bang gumawa ng navigation bar sa Divi na malagkit mula sa ibaba hanggang sa itaas ng page?
Sa tutorial Divi Ngayon ay ipapakita namin sa iyo ang hakbang-hakbang kung paano gumawa ng malagkit na bottom-to-top navigation bar sa Divi.
Ito ay magbibigay-daan sa navbar na unang manatili sa ibaba ng pahina para sa isang natatanging layout sa itaas-the-fold. Pagkatapos, sa sandaling mag-scroll ka sa seksyon sa itaas ng page fold, mananatili ang navigation bar sa tuktok ng page at mananatili doon sa buong page.
Maaari mong sabihin na ang page ay "aagawin" sa menu sa ibaba ng screen at magdadala ng magandang epekto sa pakikipag-ugnayan sa iyong pangunahing menu at sa iyong Website.
Magsimula tayo!
pagsisiyasat
Upang matulungan kang mailarawan ang resulta na sinusubukan naming makamit, tingnan natin ang resulta:
I-download ang DIV ngayon!!!
Magsimula tayo sa paggawa ng bagong page gamit ang Divi Builder
Upang makapagsimula, kakailanganin mong gawin ang sumusunod:
Mula sa dashboard ng WordPress, pumunta sa Mga Pahina> Magdagdag ng Bago upang lumikha ng isang bagong pahina.
Bigyan ito ng pamagat na may katuturan sa iyo at i-click Gumamit ng Divi Builder
pagkatapos i-click Simulan ang Pagbuo (Bumuo Mula sa Scratch)
Pagkatapos nito, magkakaroon ka ng isang blangkong canvas upang simulan ang pagdidisenyo sa Divi.
Lumikha ng isang malagkit na ilalim-sa-itaas na bar ng nabigasyon sa Divi
Bahagi 1: Paggawa ng Seksyon at Header sa Itaas ng Waterline
Para sa unang bahagi ng tutorial na ito, gagawin namin ang seksyon at header sa itaas ng fold na magsisilbing pangunahing seksyon ng header ng aming pahina. Ang seksyon ay magiging buong screen sa desktop upang matiyak na ang seksyon ay kukuha ng buong window ng display.
Basahin din ang: Divi: Pumili sa pagitan ng grid at full-width na layout ng Filterable Portfolio module
Magdagdag ng isang hilera
Upang makapagsimula, magdagdag ng isang hilera sa isang haligi sa default na seksyon.
Mga setting ng seksyon
Bago magdagdag ng isang module, buksan ang mga setting ng seksyon at magdagdag ng isang background tulad ng sumusunod:
- Kulay ng Background: #e9f9ff
- Larawan sa Background: [magdagdag ng larawan]
Sa ilalim ng tab Disenyo, i-update ang minimum na taas at padding.
- Min Taas: 100vh (Desktop), auto (Tablet at Telepono)
- Padding: 20vh (Itaas at Ibaba)
Header text
Para gawin ang text ng header, magdagdag ng bagong Text module sa linya.
Pagkatapos ay i-update ang nilalaman na may sumusunod na H1 header:
<h1>Above the Fold</h1>
Mga setting ng teksto
Sa ilalim ng tab Disenyo sa mga setting ng Text module, i-update ang mga estilo ng font ng header gaya ng sumusunod:
- Pamagat:
- Font: Ruby
- Timbang ng Font: Semi Bold
- Estilo: TT
- Text Alignment: nakagitna
- Kulay ng Teksto: #302ea7
- Laki: 130px (Desktop), 70px (Tablet), 40px (Telepono)
- Spacing ng Letter: 2px
- Taas ng Linya: 1,3 em
Bahagi 2: Paglikha ng seksyon sa ibaba ng linya ng tubig
Upang maipakita ang functionality ng sticky navbar, kailangan naming magdagdag ng seksyon sa ibaba ng fold para magkaroon kami ng puwang para mag-scroll.
Upang gawin ang seksyon, i-duplicate ang seksyon sa itaas ng tupi na kakagawa lang namin.
I-update ang background ng seksyong duplicate.
- Kulay ng Background: #f4def1
Pagkatapos ay bigyan ang seksyon ng isang malaking minimum na taas upang magkaroon kami ng puwang upang mag-scroll pababa sa pahina. Ito ay isang seksyon lamang na kukumpletuhin bilang kapalit ng nilalaman tunay na isang pahina.
- Min Taas: 200vh
Pagkatapos ay i-update ang nilalaman ng Text module sa pamamagitan ng pagpapalit ng salita “Ibaba” pagkakapantay “Sa itaas”.
Bahagi 3: Lumikha ng malagkit na bar ng nabigasyon
Upang likhain ang malagkit na bar ng nabigasyon mula sa ibaba hanggang sa itaas, ang aming unang hakbang ay upang lumikha ng isang bagong seksyon na may isang hilera sa isang haligi.
Nagdagdag ng bagong seksyon at linya
Una, magdagdag tayo ng bagong regular na seksyon nang direkta sa ibaba ng seksyon sa itaas ng fold.
Susunod, magdagdag tayo ng isang hanay na hanay sa seksyon.
Seksyon background at padding
Buksan ang mga setting ng seksyon at i-update ang kulay ng background.
- Kulay ng Background: #302ea7
Pagkatapos ay alisin ang tuktok at ibabang padding upang ang navigation bar ay may mas kaunting taas.
- Padding: 0px (Itaas at Ibaba)
Magdagdag ng nakikitang overflow
Upang matiyak na ang mga drop-down na menu ay mananatiling nakikita, i-update ang mga pagpipilian sa kakayahang makita tulad ng sumusunod:
- Horizontal Overflow: Nakikita
- Vertical Overflow: Nakikita
Bigyan ang seksyon ng isang ganap na posisyon sa mobile
Ang mobile drop-down na menu ay magbubukas bilang default sa ilalim ng icon ng hamburger. Kung pananatilihin namin ang navigation bar sa ibaba, itatago nito ang drop-down na menu kung mag-click dito ang user.
Para sa mas magandang karanasan ng user, gusto naming magsimula ang navigation bar sa pinakatuktok ng page sa screen ng tablet at telepono.
Para dito, bigyan ang seksyon ng ganap na posisyon sa tablet at telepono.
- Posisyon: kamag-anak (Desktop), Absolute (Tablet at Telepono)
Magdagdag ng malagkit na posisyon para sa desktop at mobile
Upang idagdag ang malagkit na posisyon sa seksyon ng navigation bar, i-update ang sumusunod:
- Malagkit na Posisyon: Dumikit sa Itaas at Ibaba (Desktop), Dumikit sa Itaas (Tablet at Telepono)
I-update ang padding row
Kapag kumpleto na ang malagkit na seksyon, buksan ang mga setting ng row sa loob ng seksyon at i-update ang padding gaya ng sumusunod:
- Padding: 10px (Itaas at Ibaba)
Lumikha ng menu ng nabigasyon
Sa lugar na seksyon at linya, handa na kaming lumikha ng menu ng nabigasyon.
Magsimula sa pamamagitan ng pagdaragdag ng module ng Menu sa isang hanay na hilera.
Nilalaman ng menu
I-update ang nilalaman ng menu tulad ng sumusunod:
- piliin ang menu mula sa drop-down na listahan
- magdagdag ng imahe ng logo
- alisin ang default na kulay ng background
Sa ilalim ng tab Disenyo, i-update ang sumusunod na teksto ng menu at mga setting ng icon:
- Kulay ng Aktibong Link: #fff
- Font ng Menu: Ruby
- Estilo ng Font ng Menu: TT
- Kulay ng Teksto: #fff
- Laki ng Teksto ng Menu: 16px
- Paghahanay ng Teksto: tama
- Kulay ng Linya ng Dropdown na Menu: #e19dff
- Kulay ng Teksto ng Mobile Menu: #302ea7
- Kulay ng Icon ng Shopping Cart: #fff
- Kulay ng Icon ng Paghahanap: #fff
- Kulay ng Icon ng Menu ng Hamburger: #fff
Paggamit ng isang hangganan upang mabawi ang ganap na posisyon ng navigation bar sa mobile
Dahil ang seksyon ng navigation bar ay may ganap na posisyon sa mobile, ang bar ay uupo sa itaas (at puputulin) sa tuktok na seksyon ng pahina. Upang ayusin ito, kailangan nating i-offset ang tuktok na seksyon gamit ang tuktok na hangganan ng parehong taas ng navigation bar/seksyon.
Suriin ang taas ng seksyon ng bar ng pag-navigate sa mobile
Upang matukoy ang taas ng navigation bar sa mobile, magbukas ng live na bersyon ng page sa isang bagong browser window. Pagkatapos ay maaari mong bawasan ang lapad ng browser sa ibaba 980px upang makita ang menu ng mobile.
Maaari ka ring sumangguni sa: Divi: Paano gumawa ng sticky navigation bar
Mag-right click sa seksyong naglalaman ng menu at piliin ang opsyon suriin ang elemento sa menu ng konteksto ng browser. Dapat kang makakita ng isang kahon outils sa ilalim ng seksyong nagsasaad ng mga sukat (kabilang ang taas) ng seksyon.
Para sa halimbawang ito, ang taas ng seksyong navbar ay 72 pixels.
Magdagdag ng isang tuktok na offset ng hangganan sa seksyon sa itaas ng fold
Ngayon natukoy namin ang taas ng seksyon, buksan ang mga setting para sa tuktok na seksyon (sa itaas ng kulungan).
Sa ilalim ng tab Disenyo, idagdag ang sumusunod na tuktok na hangganan sa tablet at telepono:
- Nangungunang Lapad ng Border: 72 pixels (Tablet at Telepono)
- Kulay ng Nangungunang Border: #302ea7
Dahil ang hangganan ay kapareho ng taas ng seksyon na may ganap na posisyon, hindi mo makikita ang hangganan dahil nagsisilbi lamang itong itulak ang seksyon pababa para hindi ito maputol.
Pangwakas na resulta
Tuklasin ang resulta ng pagtatapos!
I-download ang DIV ngayon!!!
Konklusyon
Ang paggawa ng bottom-to-top sticky navbar ay madaling magawa gamit ang built-in na posisyon ng Divi at malagkit na pagpipilian.
Ang susi ay bigyan ang seksyon sa itaas ng fold ng taas na 100vh, pagkatapos ay idagdag ang seksyong navbar sa ibaba na dumidikit sa ibaba at itaas ng browser. Sana ay nakakatulong ito na magdagdag ng mas kakaiba at nakakaengganyo sa itaas ng fold sa iyong Website.
Ang malagkit na navbar na ito ay pinakamahusay na gumagana para sa isang disenyo ng pahina sa halip na isang pangkalahatang template. Sabi nga, madali mong mapipiling gamitin ito bilang disenyo ng iyong homepage at gumamit ng pandaigdigang header para sa iba pang mga pahina gamit ang Divi theme generator .
Umaasa kami na ang tutorial na ito ay magbibigay inspirasyon sa iyo para sa iyong mga susunod na proyekto ng Divi. Kung mayroon kang anumang mga alalahanin o mungkahi, hanapin kami sa ang seksyon ng mga komento upang talakayin ito.
Maaari ka ring kumonsulta aming mga mapagkukunan, kung kailangan mo ng maraming mga elemento upang maisagawa ang iyong mga proyekto ng paglikha ng mga site sa Internet.
Huwag mag-atubiling kumunsulta din sa aming gabay sa Paglikha ng blog ng WordPress o ang isa sa Divi: ang pinakamahusay na tema ng WordPress sa lahat ng oras.
Ngunit pansamantala, ibahagi ang artikulong ito sa iyong iba't ibang mga social network.
...
