Želite li prikazati modul Divi Fullwidth Header na cijelom zaslonu?
Zaglavlja na cijelom zaslonu zauzimaju cijeli zaslon, bez obzira na veličinu zaslona posjetilac. Ovo je sjajno za privlačenje pažnje korisnika. Srećom, lako je stvoriti zaglavlje preko cijelog zaslona pomoću modula Zaglavlje pune širine od Divi.
U ovom članku pokazat ćemo vam kako izraditi zaglavlje pune širine, prilagoditi ga i prikazati na cijelom zaslonu. Ovaj pristup možete upotrijebiti za izradu bilo kojeg glavnog odjeljka na cijelom zaslonu za svoje stranice.
Počnimo.
pregled
Pogledajmo pregled onoga što ćemo dizajnirati u ovom vodiču.
Biro
tableta
Telefon
Kako svoje Divi zaglavlje pune širine učiniti zaglavljem cijelog zaslona
Započnite dodavanjem odjeljka pune širine na stranicu na kojoj radite.
Zatim dodajte a Modul zaglavlja pune širine na odjeljak pune širine.
Otvaraju se postavke modula. Odaberite karticu dizajn. Aktivirajte opciju tzv Napravi cijeli zaslon
Sada imamo zaglavlje na cijelom zaslonu. To je tako jednostavno.
Omogući ikonu za pomicanje
Također možemo dodati gumb koji govori korisniku da se pomakne prema dolje. Međutim, moramo to omogućiti. Ovaj je gumb uvijek vidljiv u opciji preko cijelog zaslona. Opcija zaglavlja cijelog zaslona uvijek odgovara visini zaslona posjetilac.
- Prikaži gumb za pomicanje prema dolje: DA
Primjer zaglavlja Divi Fullwidth Fullscreen
Parametri modula zaglavlja pune širine
Evo koraka za svaki odjeljak postavki modula Fullwidth Header.
Pročitajte također: Divi: Kako kombinirati pozadinske maske i separatore
Tekstovi
Sve prvo dodajte tekst koji će biti vidljiv u zaglavlju pune širine. To uključuje naslov, podnaslov, sadržaj i tekst gumba.
- Naslov: Stvori blog s Divi
- Podnaslov: Blogpascher
- Burron #1: Sažetak
- Gumb #2: Raspored
- Tijelo: (zadano)
Slike
tada dodaj sliku. Ovo se prikazuje na desnoj strani zaglavlja pune širine, pomičući tekst ulijevo.
- Naslovna slika: vaš izbor
pozadina
Pomaknite se do pozadina i postavite boju na #f6f5ee.
- Boja pozadine: #f6f5ee
raspored
Zatim idite na karticu Dizajn.
- Napravi cijeli zaslon: DA
Ikona za pomicanje prema dolje
- Prikaži gumb za pomicanje prema dolje: DA
- Boja ikone za pomicanje prema dolje: #000000 (stolno računalo i tablet), #ffffff (telefon)
- Veličina ikone za pomicanje prema dolje: 70 px (stolno računalo), 60 px (tablet), 50 px (telefon)
Tekst naslova
Zatim ćemo prilagoditi naslovni tekst.
- Razina naslova: H1
- Font: Inter
- Težina fonta: podebljano
- Poravnanje teksta: središte
- Boja teksta: #000000
- Veličina teksta naslova: 75 px (stolno računalo), 40 px (tablet), 24 px (telefon)
- Visina retka naslova: 1.2 em
Tekst opisa
Zatim se pomaknite dolje do Tekst tijela.
- Font: Open Sans
- Poravnanje: lijevo
- Boja: #000000
- Veličina teksta: 16 px (stolno računalo), 15 px (tablet), 14 px (telefon)
- Visina linije: 1.8 em
titl
Zatim se pomaknite dolje do Tekst podnaslova.
- Font: Inter
- Težina fonta: Podebljano
- Stil: TT
- Poravnanje: Središte
- Boja: #ff5a17
- Veličina: 14px
- Razmak između slova: 1px
- Visina linije: 1.8 em
Gumb #1
Zatim se pomaknite prema dolje do Gumb jedan.
- Koristi prilagođene stilove za gumb: DA
- Veličina teksta: 20 px (stolno računalo), 18 px (tablet), 16 px (telefon)
- Boja teksta: #000000
- Boja pozadine: #ffffff
- Širina obruba: 0 px
- Polumjer ruba: 0px
- Font: Inter
- Težina fonta: Podebljano
- Ikona: vaš izbor
- Boja ikone: #000000
- Položaj: desno
- Prikaži samo ikonu pri lebdenju za prvi gumb: NE
Na kraju se pomaknite prema dolje do opcija Button One Padding.
- Ispuna:
- Radna površina: 20px (gore i dolje), 40px (lijevo i desno)
- Tablet: 16 px (gore i dolje), 40 px (lijevo i desno)
- Telefon: 12px (gore i dolje), 40px (lijevo i desno)
Gumb #2
Na kraju, pomaknite se dolje do Dugme dva.
- Koristite prilagođene stilove za gumb dva: Da
- Veličina teksta: 20 px (stolno računalo), 18 px (tablet), 16 px (telefon)
- Boja teksta: #ffffff
- Boja pozadine: #ff5a17
- Širina obruba: 0px
- Polumjer ruba: 0px
- Font: Inter
- Težina fonta: Podebljano
Odaberite svoju omiljenu ikonu.
- Ikona: vaš izbor
- Boja ikone: #000000
- Postavljanje: lijevo
- Prikaži samo ikonu dok lebdi za gumb dva: NE
Na kraju se pomaknite prema dolje do opcija Ispuna gumba dva.
- Ispuna:
- Radna površina: 20px (gore i dolje), 40px (lijevo i desno)
- Tablet: 16 px (gore i dolje), 40 px (lijevo i desno)
- Telefon: 12px (gore i dolje), 40px (lijevo i desno)
Konačni rezultati
Ovako izgleda naše zaglavlje pune širine na stolnim računalima, tabletima i telefonima.
Također se možete konzultirati: Divi: Kako koristiti efekte sjene i lebdenja za stvaranje interaktivnog sadržaja
Biro
tableta
Telefon
Preuzmite DIVI sada!!!
Zaključak
Ovdje je naš pogled na to kako stvoriti Fullwidth Header s vašim modulom Divi Fullwidth Header.
Postupak je jednostavan i izgleda sjajno na svakom uređaju. Dodavanje gumba Pomaknite se prema dolje je izvrstan vizualni prikaz koji govori korisnicima da se mogu pomicati.
Dizajniranje zaglavlja na cijelom zaslonu slično je dizajniranju odjeljka Hero. Slijeđenje nekoliko jednostavnih smjernica može vam pomoći da stvorite nevjerojatna zaglavlja preko cijelog zaslona pomoću Divi modula Fullwidth Header.
Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.
Također se možete konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
