Želite li stvoriti globalno zaglavlje s modulom izbornika cijelog zaslona u Diviju?
Zaglavlje je jedan od najvažnijih elemenata svakog web stranica i nalazi se u srcu korisničko iskustvo. Navigacijski izbornik daje vašim korisnicima ideju o tome što mogu očekivati da će pronaći na vašem web stranica i pomaže im pronaći informacije koje su im potrebne.
Osim toga, sekundarna traka izbornika može biti idealan prostor za isticanje poziva na radnju ili na unaprijediti ponuda. Da ne spominjemo da je zaglavlje jedan od najvažnijih dijelova vašeg web stranica, jer se obično pojavljuje na svakoj stranici. Ovo je izvrsna prilika da predstavite svoju marku i stvorite zaglavlje koje je u skladu s dizajnom ostatka vaše web stranice.
Divi's Theme Builder opcije omogućuju vam stvaranje prilagođenog globalnog zaglavlja i prilagođavanje izgleda vašeg zaglavlja i modula izbornika na cijeloj web stranici.
U ovom vodiču pokazat ćemo vam kako stvoriti globalno zaglavlje koristeći Divijev modul izbornika preko cijelog zaslona.
Krenimo!
pregled
Evo pregleda globalnog zaglavlja koje ćemo dizajnirati.
Otvorite graditelj tema
Budući da u ovom primjeru gradimo globalno zaglavlje, prijeđimo na "Theme Builder", koji možete pronaći u izborniku WordPress Divi. Odaberite Dodaj globalno zaglavlje, a zatim odaberite Stvori globalno zaglavlje.
Napravite sekundarnu traku izbornika
Kada prvi put otvorite globalni izgled zaglavlja, ono dolazi s unaprijed učitanim redovnim odjeljkom. Izmijenit ćemo ovo da bude naša sekundarna traka izbornika, koja će se nalaziti iznad našeg izbornika pune širine i uključivati tekst poziva na radnju i gumb.
Prvo otvorite postavke odjeljka i dodajte boju pozadine.
- Pozadina: #92A8A1
Zatim, margina odjeljka.
- Unutarnji rubni vrh: 0px
- Donja unutarnja margina: 0px
Sada umetnite red. Za ovaj primjer koristit ćemo izgled prikazan u nastavku.
U postavkama reda, u odjeljku Veličina kartice Stil, uskladite visine stupaca.
- Uskladiti visine stupaca: DA
Zatim postavite gornju i donju marginu na sljedeći način:
- Gornja unutarnja margina: 5px
- Donja unutarnja margina: 5px
Budući da želimo da naši sekundarni elementi zaglavlja budu poravnati okomito, dodat ćemo neki prilagođeni CSS elementu glavnog retka.
1.
align-items:center;
Sada kada je naša linija konfigurirana, možemo umetnuti module za našu sadržaj. Prvo umetnite tekstualni modul s lijeve strane.
Izmijenite sadržaj teksta. Ovo je savršeno mjesto za uključivanje poziva na akciju ili na unaprijediti ponuda.
- Tekst: "Pridružite se našoj mailing listi kako biste dobili 10% popusta na svoju narudžbu!" »
Pristupite kartici Stil u modulu Tekst i promijenite parametre na sljedeći način:
- Font "Tekst": Poppins
- “Text” Prigušeno svjetlo: srednje
- Boja teksta "Tekst": #FFFFFF
Zatim dodajte modul Button s desne strane.
Dodaj tekst gumba.
- Tekst: "Nabavite besplatnu ponudu"
Na kartici Stil poravnajte gumb u sredini.
- Poravnanje gumba: središte
Sada prilagodimo izgled gumba.
- Koristite prilagođene stilove za "Gumb": Da
- Veličina teksta gumba: 14px
- Boja teksta gumba: #FFFFFF
- Pozadinski gumb: #2F5349
- Širina obruba gumba: 0px
- Gumb radijusa obruba: 50px
- Razmak između slova: 1px
- Font gumba: Poppins
Dodajte modul izbornika preko cijelog zaslona
Sada kada je osmišljen sekundarni izbornik, možemo prijeći na glavni izbornik. Napravit ćemo izbornik pomoću modula izbornika preko cijelog zaslona. Dodajte novi odjeljak za cijeli zaslon u globalno zaglavlje.
Odaberite i umetnite modul izbornika preko cijelog zaslona
Zatim ćemo prilagoditi postavke izbornika preko cijelog zaslona.
- Boja aktivne veze: #2F5349
- Izbornik fonta: Poppins
- Izbornik prigušenog svjetla: polupodebljan
- Izbornik stila kopiranja: TT
- Boja teksta izbornika: #000000
- Boja teksta izbornika pri pokazivaču miša: #2F5349
- Veličina teksta izbornika: 15px
- Razmak između slova izbornika: 2px
Promijenite boju ikone izbornika hamburgera u crnu.
- Boja ikone izbornika za hamburger: #000000
Prije nego što dodamo logotip u naš izbornik, promijenimo opcije veličine. Koristit ćemo Divi ugrađene responzivne opcije za postavljanje različite maksimalne visine za PC i mobilni uređaj.
- Maksimalna visina logotipa na računalu: 3vw
- Maksimalna visina logotipa na mobitelu: 6vw
Sada dodajte svoj logotip u izbornik preko cijelog zaslona.
Konačno, želimo da glavni izbornik ostane na vrhu zaslona kada korisnik skroluje kroz web stranicu, pa ćemo za to koristiti Divi-jeve ugrađene sticky sticky postavke.
- Ljepljivi položaj: Zalijepite na vrh
Time je naš globalni dizajn zaglavlja gotov.
Napravite novu stranicu s unaprijed definiranim izgledom
Da bismo vidjeli zaglavlje i izbornik pune širine u akciji, napravimo novu stranicu s unaprijed definiranim izgledom iz Divi biblioteke. Za ovaj primjer koristit ćemo početnu stranicu Flooring iz paketa raspored poda.
Dodajte novu stranicu na svoju web stranicu i dajte joj naslov, a zatim odaberite opciju Koristi Divi Builder.
Za ovaj primjer koristimo unaprijed izrađeni izgled iz Divi biblioteke, pa odaberite Odaberi izgled.
Pronađite i odaberite izgled "Početna stranica podova".
Odaberite "Odaberi izgled" da biste izgled dodali na svoju stranicu.
Sada je dizajn gotov!
Konačni rezultat
Zaključak
Kao što smo već rekli, zaglavlje i navigacijski izbornik u središtu su korisničkog iskustva vaše web stranice. Sada ste vidjeli kako je jednostavno dizajnirati zapanjujuće cjelokupno zaglavlje s Divijevim modulom "Full Screen Menu".
Srećom, Diviov program za izradu tema daje vam kontrolu nad svakim aspektom izbornika i zaglavlja vaše web stranice, a možete kreirati potpuno prilagođene i jedinstvene dizajne sa samo nekoliko klikova.
Jeste li koristili Divi globalne opcije zaglavlja za prilagođavanje zaglavlja i navigacijskog izbornika? Recite nam što mislite u komentarima!
