Dëshiron të shfaqësh modulin Divi Fullwidth Header në ekran të plotë?
Titujt e ekranit të plotë zënë të gjithë ekranin, pavarësisht nga madhësia e ekranit vizitor. Kjo është e shkëlqyeshme për të tërhequr vëmendjen e përdoruesve. Për fat të mirë, është e lehtë të krijosh një kokë në ekran të plotë me modulin Kreu me gjerësi të plotë të Divit.
Në këtë artikull, ne do t'ju tregojmë se si të krijoni një kokë me gjerësi të plotë, ta personalizoni atë dhe ta shfaqni në ekran të plotë. Ju mund ta përdorni këtë qasje për të krijuar çdo seksion të heroit me ekran të plotë për faqet tuaja.
Le të fillojë.
studim
Le të shohim një pamje paraprake të asaj që do të dizajnojmë në këtë tutorial.
zyrë
tablette
Telefon
Si ta bëni kokën tuaj me gjerësi të plotë Divi një titull me ekran të plotë
Filloni duke shtuar një seksion me gjerësi të plotë në faqen në të cilën po punoni.
Më pas shtoni një Moduli i kokës me gjerësi të plotë në seksionin me gjerësi të plotë.
Cilësimet e modulit hapen. Zgjidhni skedën Projektimi. Aktivizoni opsionin e quajtur Bëni ekran të plotë
Tani kemi një titull me ekran të plotë. Është kaq e thjeshtë.
Aktivizo ikonën e lëvizjes
Mund të shtojmë gjithashtu një buton që i thotë përdoruesit të lëvizë poshtë. Megjithatë, ne duhet ta mundësojmë atë. Ky buton është gjithmonë i dukshëm në opsionin e ekranit të plotë. Opsioni i titullit të ekranit të plotë përputhet gjithmonë me lartësinë e ekranit vizitor.
- Shfaq butonin e lëvizjes poshtë: PO
Shembull i titullit të ekranit të plotë Divi me gjerësi të plotë
Parametrat e modulit të kokës me gjerësi të plotë
Këtu janë hapat për çdo seksion të cilësimeve të modulit Fullwidth Header.
Lexo gjithashtu: Divi: Si të kombinohen maskat e sfondit dhe ndarësit
Tekst
Të gjithë së pari, shtoni tekstin e cila do të jetë e dukshme në kokën me gjerësi të plotë. Kjo përfshin titullin, nëntitullin, përmbajtje dhe tekstin e butonit.
- Titulli: Krijo blogun tuaj me Divi
- Titulli: Blogpascher
- Burron #1: Përmbledhje
- Butoni #2: Orari
- Trupi: (i parazgjedhur)
Images
ensuite, shtoni foto. Kjo shfaqet në anën e djathtë të kokës me gjerësi të plotë, duke e zhvendosur tekstin në të majtë.
- Imazhi i kokës: zgjedhja juaj
sfond
Shkoni te Sfond dhe vendosni ngjyrën në #f6f5ee.
- Ngjyra e sfondit: #f6f5ee
natyrë
Tjetra, lundroni te skeda Dizajn.
- Bëni ekran të plotë: PO
Ikona e lëvizjes poshtë
- Shfaq butonin e lëvizjes poshtë: PO
- Ngjyra e ikonës së lëvizjes poshtë: #000000 (Desktop dhe tabletë), #ffffff (Telefon)
- Madhësia e ikonës së lëvizjes poshtë: 70 px (Desktop), 60 px (Tablet), 50 px (Telefon)
Teksti i titullit
Më pas do të rregullojmë teksti i titullit.
- Niveli i titullit: H1
- Fonti: Inter
- Pesha e shkronjave: Bold
- Rreshtimi i tekstit: Qendër
- Ngjyra e tekstit: #000000
- Madhësia e tekstit të titullit: 75px (Desktop), 40px (Tablet), 24px (Telefon)
- Lartësia e linjës së titullit: 1.2em
Teksti i përshkrimit
Më pas lëvizni poshtë te BodyText.
- Fonti: Open Sans
- Shtrirja: majtas
- Ngjyra: #000000
- Madhësia e tekstit: 16px (Desktop), 15px (Tablet), 14px (Telefon)
- Lartësia e linjës: 1.8em
nëntitull
Më pas lëvizni poshtë te Teksti i nëntitullit.
- Fonti: Inter
- Pesha e shkronjave: Bold
- Stili: TT
- Rreshtimi: në qendër
- Ngjyra: #ff5a17
- Madhësia: 14 px
- Hapësira e shkronjave: 1 px
- Lartësia e linjës: 1.8em
Butoni numër 1
Më pas lëvizni poshtë te Butoni Një.
- Përdorni stile të personalizuara për butonin: PO
- Madhësia e tekstit: 20px (Desktop), 18px (Tablet), 16px (Telefon)
- Ngjyra e tekstit: #000000
- Ngjyra e sfondit: #ffffff
- Gjerësia e kufirit: 0 px
- Rrezja e kufirit: 0 px
- Fonti: Inter
- Pesha e shkronjave: Bold
- Ikona: zgjedhja juaj
- Ngjyra e ikonës: #000000
- Vendndodhja: djathtas
- Shfaq vetëm ikonën në lëvizje për butonin Një: JO
Më në fund, lëvizni poshtë te opsionet Mbushje me një buton.
- Mbushje:
- Desktop: 20px (lart dhe poshtë), 40px (majtas dhe djathtas)
- Tableti: 16 px (lart dhe poshtë), 40 px (majtas dhe djathtas)
- Telefoni: 12 px (lart dhe poshtë), 40 px (majtas dhe djathtas)
Butoni numër 2
Më në fund, lëvizni poshtë te Butoni i dytë.
- Përdorni stile të personalizuara për butonin e dytë: Po
- Madhësia e tekstit: 20px (Desktop), 18px (Tablet), 16px (Telefon)
- Ngjyra e tekstit: #ffffff
- Ngjyra e sfondit: #ff5a17
- Gjerësia e Kufirit: 0 px
- Rrezja e kufirit: 0 px
- Fonti: Inter
- Pesha e shkronjave: Bold
Zgjidhni ikonën tuaj të preferuar.
- Ikona: zgjedhja juaj
- Ngjyra e ikonës: #000000
- Vendndodhja: majtas
- Shfaq vetëm ikonën në lëvizje për butonin e dytë: JO
Më në fund, lëvizni poshtë te opsionet Butoni Dy Mbushje.
- Mbushje:
- Desktop: 20px (lart dhe poshtë), 40px (majtas dhe djathtas)
- Tableti: 16 px (lart dhe poshtë), 40 px (majtas dhe djathtas)
- Telefoni: 12 px (lart dhe poshtë), 40 px (majtas dhe djathtas)
Rezultatet përfundimtare
Kështu duket titulli ynë me gjerësi të plotë në desktop, tabletë dhe telefona.
Ju gjithashtu mund të konsultoheni: Divi: Si të përdorni efektet e hijes dhe të pezullimit për të krijuar përmbajtje interaktive
zyrë
tablette
Telefon
Shkarkoni DIVI tani!!!
Përfundim
Këtu është vështrimi ynë se si të krijoni një Header Fullwidth me modulin tuaj Divi Fullwidth Header.
Procesi është i thjeshtë dhe duket i shkëlqyeshëm në çdo pajisje. Shtimi i butonit Shkoni poshtë është një pamje e shkëlqyer që u tregon përdoruesve se mund të lëvizin.
Projektimi i një titulli në ekran të plotë është i ngjashëm me dizajnimin e një seksioni Hero. Ndjekja e disa udhëzimeve të thjeshta mund t'ju ndihmojë të krijoni tituj të mrekullueshëm në ekran të plotë me modulin Divi's Fullwidth Header.
Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.
Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.
...
