Divi: Kako stvoriti odjeljak Fluid Hero

Želite li stvoriti odjeljak Hero u Divi koji je fluidan umjesto tradicionalnog responsive?

Dio heroja a web stranica je jedan od najboljih kandidata za fluidni dizajn. Za razliku od tradicionalnog responzivnog dizajna koji se prilagođava različitim prijelomnim točkama, fluidni dizajn neprimjetno se prilagođava prozoru preglednika i održava dizajn dosljednim na svim uređajima. Uostalom, odjeljak Hero prvo je što korisnici vide na web-stranici web stranica.

U ovom vodiču pokazat ćemo vam kako stvoriti cijeli fluidni herojski odjeljak Divi. Ključ za stvaranje ovog fluidnog dizajna je dodavanje tekuće veličine fonta svakom korištenom modulu i zatim uključivanje jedinice duljine em (tko je u odnosu na veličinu fonta korijenskog tijela ) u postavkama modula.

Započnimo!

pregled

Evo kratkog pregleda dizajna koji ćemo izraditi u ovom vodiču.

Primijetite kako se fluidni dizajn glatko prilagođava širini prozora preglednika.

Stvorite novu stranicu s Divi Builderom

Da biste započeli, morat ćete učiniti sljedeće:

S WordPress nadzorne ploče idite na Stranice> Dodaj novo za stvaranje nove stranice.

Dajte mu naslov koji vam ima smisla i kliknite Koristiti Divi Graditelj

zatim kliknite Počnite graditi (Gradi od ogrebotina)

Nakon toga ćete imati prazno platno na kojem možete početi dizajnirati Divi.

Pročitajte također: Divi: Kako stvoriti 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 zaustavljanja:
  • 30%: #ff2000
  • 30%: #121212
• Smjer gradijenta: 45 stupnjeva

Ispod kartice dizajn, ažurirajte ispunu:

• Ispod: 0px gore, 0px dno

Napravite liniju

Zatim u odjeljak dodajte redak s jednim stupcem.

Postavke linije

Otvorite postavke linije i ažurirajte sljedeće pod karticom dizajn :

• Širina oluka: 1
• Širina: 100%
• Maksimalna širina: 1 px
• Min. visina: 100 vh (stolno računalo), ništa (tablet i telefon)
• Ispod: 0px (gornji i donji dio)

Stvorite tekući tekst zaglavlja s rubom

Sada kada su odjeljak i linija dovršeni, možemo dodati tekući tekst zaglavlja u odjeljak Hero. Također ćemo dodati fluidni obrub tekstualnom modulu za kreativan element dizajna.

Dodajte tekstualni modul

Da biste stvorili tekst naslova i obrub, dodajte novi modul Tekst u stupac.

Postavke teksta

Ispod kartice Sadržaj, ažurirajte ga sadržaj tijela sa sljedećim HTML kodom:

<h1>Fluid Fullscreen Page Design<spanstyle="color: #ff2000;">.</span></h1>

Da bi elementi dizajna bili fluidni, prvo moramo modulu dodati veličinu slova fluidnog korijena pomoću funkcije CSS Clamp(). 

Ispod kartice napredan, zalijepite sljedeći CSS isječak:

font-size: clamp(32px, 4.1vw, 70px);

Ispod kartice dizajnažurirajte sljedeće postavke dizajna teksta zaglavlja:

• Tekst naslova:
  • Vrsta: H1
  • Font: Montserrat
  • Težina fonta: Teška
  • Boja: #ffffff
  • Veličina: 1em
  • Razmak između slova: 0,1 em
  • Visina linije: 1,2 em

Također ažurirajte mod padding na sljedeći način:

• Ispuna: 1. (gore, dolje, lijevo i desno)

Da biste izradili fluidni dizajn obruba, ažurirajte sljedeće:

• Širina obruba: 1em
• Boja obruba: #ffffff
• Boja donjeg ruba: prozirna
• Boja lijevog ruba: prozirna

Izrada akcentnog obruba

Da bismo stvorili obrub s naglaskom, možemo duplicirati postojeći tekstualni modul.

Obriši sadržaj postojećeg tijela i ažurirati parametre dizajna kako slijedi:

• Maksimalna širina: 6,5 cm
• Visina: 3,25 em
• Širina obruba: 0,5 em
• Boja obruba: #ff2000

Za postavljanje obruba naglaska dodajte apsolutni položaj s pomakom jednakim širini obruba u modulu Tekst naslova (1em). 

Ispod kartice napredanažurirajte sljedeće opcije položaja:

• Pozicija: Apsolutna
• Lokacija: gore desno
• Vertikalni pomak: 1em
• Horizontalni pomak: 1em

Napravite tekst podnaslova

Ispod naslovnog teksta dodat ćemo tekući podnaslov. Budući da je ovaj tekst manji, dodat ćemo manju veličinu fonta fluid root.

Dodajte novi tekstualni modul

Da biste stvorili tekst naslova, dodajte novi modul Tekst ispod postojećeg modula Tekst zaglavlja.

Možete dodati neke rečenice teksta za popunjavanje 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 veličinu fonta tekućeg korijena

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 dizajnažurirajte sljedeće:

• Tekst:
  • Težina fonta: polu podebljano
  • 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 (dno), auto (lijevo), 5 em (desno)

Napravite gumb za tekućinu

Da biste stvorili tekući gumb, dodajte novi modul gumba ispod modula Tekst titla.

Zatim ažurirajte tekst gumba tako da glasi "7 dana besplatno putovanje".

Dodajte veličinu fonta tekućeg korijena

Zatim moramo dodati novu fluidnu veličinu fonta prikladnu za gumb. 

Ispod kartice napredan, zalijepite sljedeći CSS isječak ispod glavnog elementa:

font-size: clamp(20px, 2.35vw, 40px);

Postavke dizajna gumba

Ispod kartice dizajnažurirajte sljedeće:

• Poravnanje gumba: desno

• Koristi prilagođenu veličinu za gumb: DA
• Boja teksta gumba: #ff2000
• Gradijent zaustavljanja:
  • Boja 1 25%: prozirna
  • Boja 2 25%: #ffffff
• Smjer gradijenta: 45 stupnjeva

• Dugme :
• Širina obruba: 0 piksela
• Radijus obruba: 0 piksela
• Font: Montserrat
• Težina fonta: debeo
• Stil: kurziv
• Prikaži ikonu gumba: DA
• Ikona: strelica u obliku trokuta udesno (pogledajte snimak zaslona)
• Položaj ikone: desno

• Margina: 8em (desno)
• Ispuna: 0,2 em (gore i dolje), 1,5 em (lijevo), 1 em (desno)

Napravite sliku za odjeljak Hero

Sa svim sadržaj odjeljka Hero na ispravnu veličinu stranice, spremni smo dodati sliku odjeljka Hero na lijevoj strani. Da biste to učinili, prvo dodajte modul slike ispod gumba.

Otvorite postavke slike i prenesite sliku.

Postavke dizajna slike

Ispod kartice dizajnažurirajte sljedeće postavke:

• Poravnanje slike: lijevo (stolno računalo i tablet), središte (telefon)
• Maksimalna širina: 48% (stolno računalo i tablet), 70% (telefon)
• Ispuna: 4% (lijevo)

Na kraju, dajte slici apsolutni položaj s pomakom koristeći vmin jedinicu duljine kako slijedi:

• Pozicija: apsolutna (stolno računalo i tablet), relativna (telefon)
• Lokacija: gore lijevo (stolno računalo i tablet)
• Vertikalni pomak: 30vmin (stolno računalo i tablet), 0px (telefon)

Konačni rezultat

Evo konačnog rezultata na stranici uživo.

Vidi također: Divi: Kako koristiti maske i pozadinske uzorke za herojsku sekciju

Tako se fluidni dizajn glatko prilagođava širini prozora preglednika.

Preuzmite DIVI sada!!!

Zaključak

Dodavanje fluidnog dizajna odjeljku Hero može biti zgodan način da se osigura da je vrh preklopa prekrasno dosljedan u svim veličinama preglednika, bez potrebe za ažuriranjem dizajna na određenim točkama ili za korištenje medijskih upita.

Nadamo se da će ova tehnika dodati još jednu korisnu dizajnersku vještinu za buduće projekte.

Također se nadamo 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 je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.

Ne ustručavajte se također konzultirati naš vodič o 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.

...