Želite li kreirati odjeljak za heroje u divi koji je fluidan umjesto tradicionalnog responsive?
Odjeljak heroj a site Web je jedan od najboljih kandidata za fluidni dizajn. Za razliku od tradicionalnog responsive dizajna koji se prilagođava različitim graničnim tačkama, fluidni dizajn se neprimjetno prilagođava pregledniku preglednika i održava dizajn dosljednim na svim uređajima. Uostalom, odeljak Hero je prva stvar koju korisnici vide na a site Web.
U ovom tutorijalu pokazaćemo vam kako da kreirate ceo odeljak fluidnog heroja divi. Ključ za kreiranje ovog fluidnog dizajna je dodavanje veličine fonta fluidnog korijena svakom od korištenih modula, a zatim uključivanje jedinice dužine em (ko je u odnosu na veličinu fonta korijenskog tijela ) u postavkama modula.
Krenimo!
pregled
Evo kratkog pogleda na dizajn koji ćemo kreirati u ovom vodiču.
Obratite pažnju na to kako se fluidni dizajn glatko prilagođava širini prozora pretraživača.
Kreirajte novu stranicu sa Divi Builder-om
Da biste započeli, morat ćete učiniti sljedeće:
Sa WordPress kontrolne table idite na Stranice> Dodaj novo za stvaranje nove stranice.
Dajte mu naslov koji vam ima smisla i kliknite upotreba divi graditelj
Zatim kliknite na Start Building (Gradi od ogrebotina)
Nakon toga imat ćete prazno platno za početak dizajna divi.
Pročitajte takođe: Divi: Kako napraviti odjeljak Hero s modulom Fullwidth Header
Kako dizajnirati odjeljak Fluid Hero u Diviju
Postavke odjeljka
Za početak, ažurirajmo postojeće postavke dizajna za odjeljak. Otvorite postavke odjeljka i ažurirajte sljedeće:
- Gradijent zaustavlja:
- 30%: #ff2000
- 30%: #121212
- Smjer gradijenta: 45 stepeni
Ispod kartice dizajn, ažuriraj padding:
- Padding: 0px gore, 0px dolje
Kreirajte liniju
Zatim dodajte red s jednom kolonom u odjeljak.
Postavke linije
Otvorite postavke linije i ažurirajte sljedeće ispod kartice dizajn :
- Širina oluka: 1
- Širina: 100%
- Maksimalna širina: 1px
- Minimalna visina: 100 vh (stolni računar), ništa (tablet i telefon)
- Padding: 0px (vrh i dno)
Kreirajte tekući tekst zaglavlja s obrubom
Sada kada su odeljak i linija završeni, možemo dodati tekući tekst zaglavlja u odeljak Hero. Također ćemo dodati fluidnu ivicu modulu Tekst za kreativni element dizajna.
Dodajte tekstualni modul
Da biste kreirali tekst naslova i obrub, dodajte novi tekstualni modul u kolonu.
Podešavanja teksta
Ispod kartice sadržaj, ažurirajte ga sadržaja tijela sa sljedećim HTML kodom:
<h1>Fluid Fullscreen Page Design<spanstyle="color: #ff2000;">.</span></h1>
Da bismo elemente dizajna učinili fluidnim, prvo moramo dodati fluidnu veličinu fonta u modul pomoću funkcije CSS Clamp().
Ispod kartice Napredan, zalijepite sljedeći CSS isječak:
font-size: clamp(32px, 4.1vw, 70px);
Ispod kartice dizajn, ažurirajte sljedeće postavke dizajna teksta zaglavlja:
- Tekst naslova:
- Tip: H1
- Font: Montserrat
- Težina fonta: Težak
- Boja: #ffffff
- Veličina: 1em
- Razmak između slova: 0,1em
- Visina linije: 1,2 em
Također ažurirajte mod padding na sljedeći način:
- Padding: 1. (gore, dno, lijevo i desno)
Da kreirate tekući dizajn ivice, ažurirajte sljedeće:
- Širina ivice: 1em
- Boja ivice: #ffffff
- Boja donje ivice: prozirna
- Boja lijeve ivice: prozirna
Kreiranje ivice akcenta
Da bismo kreirali ivicu akcenta, možemo duplirati postojeći tekstualni modul.
Izbriši sadržaja postojećeg tijela i ažurirati parametre dizajna na sljedeći način:
- Maksimalna širina: 6,5 cm
- Visina: 3,25 em
- Širina ivice: 0,5em
- Boja ivice: #ff2000
Da biste postavili ivicu akcenta, dodajte apsolutnu poziciju sa pomakom jednakim širini ivice u modulu Naslov teksta (1em).
Ispod kartice Napredan, ažurirajte sljedeće opcije pozicije:
- Pozicija: Apsolutna
- Lokacija: gore desno
- Vertikalni pomak: 1em
- Horizontalni pomak: 1em
Kreirajte tekst titla
Ispod teksta naslova dodaćemo tečni tekst podnaslova. Pošto je ovaj tekst manji, dodaćemo manju veličinu fonta tečnog korena.
Dodajte novi tekstualni modul
Da biste kreirali tekst naslova, dodajte novi modul teksta ispod postojećeg modula teksta zaglavlja.
Možete dodati neke rečenice za popunjavanje teksta na sljedeći način:
- Sadržaj: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Dodajte fluidnu veličinu fonta
Zatim moramo dodati novu fluidnu veličinu fonta koja bolje funkcionira za mali tekst. Na kartici Napredno, zalijepite sljedeći CSS isječak ispod glavnog elementa:
font-size: clamp(14px, 1.4vw, 24px);
Postavke dizajna teksta
Ispod kartice dizajn, ažurirajte sljedeće:
- Tekst:
- Težina fonta: Semi Bold
- Boja: #ffffff
- Veličina: 1em
- Visina: 1,6 em
Zatim ažurirajte veličinu i razmak na sljedeći način:
- Maksimalna širina: 19 cm
- Margina: 2 em (dolje), auto (lijevo), 5 em (desno)
Kreirajte dugme za fluid
Da biste kreirali dugme fluida, dodajte novi modul dugmeta ispod modula Tekst titla.
Zatim ažurirajte tekst dugmeta tako da glasi "7 Day Free Tral".
Dodajte fluidnu veličinu fonta
Zatim moramo dodati novu fluidnu veličinu fonta prikladnu za dugme.
Ispod kartice Napredan, zalijepite sljedeći CSS isječak ispod glavnog elementa:
font-size: clamp(20px, 2.35vw, 40px);
Postavke dizajna gumba
Ispod kartice dizajn, ažurirajte sljedeće:
- Poravnanje dugmadi: desno
- Koristi prilagođenu veličinu za dugme: DA
- Boja teksta dugmeta: #ff2000
- Gradijent zaustavlja:
- Boja 1 25%: prozirna
- Boja 2 25%: #ffffff
- Smjer gradijenta: 45 stepeni
- Dugme:
- Širina ivice: 0 piksela
- Poluprečnik granice: 0 piksela
- Font: Montserrat
- Težina fonta: debeo
- Stil: kurziv
- Prikaži ikonu dugmeta : DA
- Ikona: strelica u obliku trokuta desno (pogledajte snimak ekrana)
- Položaj ikone: desno
- Margina: 8em (desno)
- Padding: 0,2em (gore i dno), 1,5em (lijevo), 1em (desno)
Kreirajte sliku za odjeljak Heroj
Sa svim sadržaja odeljka Heroja na ispravnu veličinu stranice, spremni smo da dodamo sliku odeljka Heroja na levoj strani. Da biste to učinili, prvo dodajte slikovni modul ispod dugmeta.
Otvorite postavke slike i otpremite sliku.
Postavke dizajna slike
Ispod kartice dizajn, ažurirajte sljedeće postavke:
- Poravnanje slike: lijevo (stolni i tablet), centar (telefon)
- Maksimalna širina: 48% (stoni i tablet), 70% (telefon)
- Ispuna: 4% (lijevo)
Konačno, dajte slici apsolutnu poziciju sa pomakom koristeći jedinicu vmin dužine na sljedeći način:
- Pozicija: apsolutna (stolni i tablet), relativna (telefon)
- Lokacija: gore lijevo (stolni i tablet)
- Vertikalni pomak: 30vmin (stolni i tablet), 0px (telefon)
Konačni rezultat
Evo krajnjeg rezultata na stranici uživo.
Vidi također: Divi: Kako koristiti maske i pozadinske obrasce za odjeljak heroja
Tako se fluidni dizajn glatko prilagođava širini prozora pretraživača.
Preuzmite DIVI sada!!!
zaključak
Dodavanje fluidnog dizajna u odjeljak Hero može biti zgodan način da se osigura da je vrh preklopa lijepo konzistentan u svim veličinama pretraživača, bez potrebe za ažuriranjem dizajna na određenim mjestima ili korištenjem medijskih upita.
Nadamo se da će ova tehnika dodati još jednu korisnu vještinu dizajna za buduće projekte.
Također se nadamo da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. Ako imate bilo kakvih nedoumica ili prijedloga, pronađite nas u odjeljak komentara da razgovaramo o tome.
Takođe možete konsultovati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.
Ne ustručavajte se da konsultujete i naš vodič o Izrada bloga WordPress ili onaj on Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
