Dëshironi të krijoni një seksion Hero në Divi cila është fluide në vend të reagueses tradicionale?
Seksioni Hero i një Site Web është një nga kandidatët më të mirë për dizajn fluide. Ndryshe nga dizajni tradicional i përgjegjshëm që përshtatet në pika të ndryshme ndërprerjeje, dizajni fluid përshtatet pa probleme me pamjen e shfletuesit dhe e mban dizajnin të qëndrueshëm në çdo pajisje. Në fund të fundit, seksioni Hero është gjëja e parë që përdoruesit shohin në a Site Web.
Në këtë tutorial, ne do t'ju tregojmë se si të krijoni një seksion të plotë të heroit fluid Divi. Çelësi për krijimin e këtij dizajni fluid është shtimi i një madhësie të shkronjave rrënjësore fluide në secilin prej moduleve të përdorura dhe më pas inkorporimi i njësisë së gjatësisë em (Kush eshte në lidhje me madhësinë e fontit të trupit rrënjë ) në cilësimet e modulit.
Le të fillojmë!
studim
Ja një vështrim i shpejtë i dizajnit që do të krijojmë në këtë tutorial.
Vini re se si dizajni i lëngut përshtatet pa probleme me gjerësinë e dritares së shfletuesit.
Krijo një faqe të re me Divi Builder
Për të filluar, do t'ju duhet të bëni sa më poshtë:
Nga pulti i WordPress, shkoni te Faqet> Shto të Reja për të krijuar një faqe të re.
Jepini një titull që ka kuptim për ju dhe klikoni përdorim Divi Ndërtues
Pastaj kliko Filloni të ndërtoni (Ndërtoni nga Gërvishtja)
Pas kësaj do të keni një kanavacë bosh për të filluar dizajnimin Divi.
Lexo gjithashtu: Divi: Si të krijoni një seksion Hero me modulin Fullwidth Header
Si të hartoni një seksion të heroit të lëngshëm në Divi
Cilësimet e seksionit
Për të filluar, le të përditësojmë cilësimet ekzistuese të dizajnit për seksionin. Hapni cilësimet e seksionit dhe përditësoni sa vijon:
- Ndalesat e gradientit:
- 30%: #ff2000
- 30%: #121212
- Drejtimi i gradientit: 45 gradë
Nën skedinë Projektimi, përditësoni mbushjen:
- Mbushja: 0px sipër, 0px poshtë
Krijo një linjë
Më pas, shtoni një rresht me një kolonë në seksion.
Cilësimet e linjës
Hapni cilësimet e linjës dhe përditësoni sa vijon nën skedën Projektimi :
- Gjerësia e kanalit: 1
- Gjerësia: 100%
- Gjerësia maksimale: 1 px
- Lartësia minimale: 100 vh (Desktop), asnjë (Tablet dhe telefon)
- Mbushja: 0 px (lart dhe poshtë)
Krijo tekst të rrjedhshëm të kokës me kufi
Tani që seksioni dhe rreshti janë përfunduar, ne mund të shtojmë tekstin rrjedhës të kokës në seksionin Hero. Ne gjithashtu do të shtojmë një kufi të rrjedhshëm në modulin Tekst për një element dizajni krijues.
Shtoni një modul teksti
Për të krijuar tekstin e titullit dhe kufirin, shtoni një modul të ri Teksti në kolonë.
Cilësimet e tekstit
Nën skedinë Përmbajtja, përditësojeni atë përmbajtje të trupit me kodin HTML të mëposhtëm:
<h1>Fluid Fullscreen Page Design<spanstyle="color: #ff2000;">.</span></h1>
Për t'i bërë elementët e dizajnit të lëngshëm, fillimisht duhet të shtojmë një madhësi të fontit të rrjedhshëm të modulit duke përdorur funksionin CSS Clamp().
Nën skedinë Avancuar, ngjitni fragmentin e mëposhtëm CSS:
font-size: clamp(32px, 4.1vw, 70px);
Nën skedinë Projektimi, përditësoni cilësimet e mëposhtme të dizajnit të tekstit të kokës:
- Teksti i titullit:
- Lloji: H1
- Fonti: Montserrat
- Pesha e shkronjave: E rëndë
- Ngjyra: #ffffff
- Madhësia: 1em
- Hapësira e shkronjave: 0,1em
- Lartësia e linjës: 1,2 em
Përditësoni gjithashtu mbushjen e modës si më poshtë:
- Mbushja: 1 (sipër, poshtë, majtas dhe djathtas)
Për të krijuar modelin e kufirit fluid, përditësoni sa vijon:
- Gjerësia e kufirit: 1em
- Ngjyra e kufirit: #ffffff
- Ngjyra e kufirit të poshtëm: e qartë
- Ngjyra e kufirit të majtë: e qartë
Krijimi i kufirit të theksit
Për të krijuar kufirin e theksit, ne mund të dublikojmë modulin ekzistues të tekstit.
Fshije përmbajtje të trupit ekzistues dhe përditësoni parametrat e projektimit si më poshtë:
- Gjerësia maksimale: 6,5 cm
- Lartësia: 3,25 em
- Gjerësia e kufirit: 0,5em
- Ngjyra e kufirit: #ff2000
Për të pozicionuar kufirin e theksit, shtoni një pozicion absolut me një zhvendosje të barabartë me gjerësinë e kufirit në modulin Heading Text (1em).
Nën skedinë Avancuar, përditësoni opsionet e mëposhtme të pozicionit:
- Pozicioni: Absolut
- Vendndodhja: lart djathtas
- Kompensimi vertikal: 1em
- Kompensimi horizontal: 1em
Krijo tekstin e titrave
Nën tekstin e titullit, do të shtojmë tekstin rrjedhës të nëntitullit. Meqenëse ky tekst është më i vogël, ne do të shtojmë një madhësi më të vogël të fontit të rrjedhshëm.
Shto një modul të ri Teksti
Për të krijuar tekstin e titullit, shtoni një modul të ri Teksti poshtë modulit ekzistues Header Text.
Ju mund të shtoni disa fjali teksti mbushës si më poshtë:
- Përmbajtja: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Shtoni madhësinë e shkronjave rrënjësore fluide
Më pas, duhet të shtojmë një madhësi të re të shkronjave fluide që funksionon më mirë për tekst të vogël. Nën skedën Advanced, ngjitni fragmentin e mëposhtëm CSS poshtë elementit kryesor:
font-size: clamp(14px, 1.4vw, 24px);
Cilësimet e hartimit të tekstit
Nën skedinë Projektimi, përditësoni sa vijon:
- Teksti:
- Pesha e shkronjave: Gjysmë e trashë
- Ngjyra: #ffffff
- Madhësia: 1em
- Lartësia: 1,6 em
Pastaj përditësoni madhësinë dhe hapësirën si më poshtë:
- Gjerësia maksimale: 19 cm
- Marzhi: 2 em (poshtë), automatik (majtas), 5 em (djathtas)
Krijoni butonin e lëngut
Për të krijuar butonin fluid, shtoni një modul të ri Buton poshtë modulit Teksti i titrave.
Më pas, përditësoni tekstin e butonit për të lexuar "7 ditë Tral falas".
Shtoni madhësinë e shkronjave rrënjësore fluide
Më pas, duhet të shtojmë një madhësi të re të shkronjave fluide të përshtatshme për një buton.
Nën skedinë Avancuar, ngjitni fragmentin e mëposhtëm CSS poshtë elementit kryesor:
font-size: clamp(20px, 2.35vw, 40px);
Cilësimet e dizajnit të butonave
Nën skedinë Projektimi, përditësoni sa vijon:
- Shtrirja e butonit: djathtas
- Përdorni madhësinë e personalizuar për butonin: PO
- Ngjyra e tekstit të butonit: #ff2000
- Ndalesat e gradientit:
- Ngjyra 1 25%: e qartë
- Ngjyra 2 25%: #ffffff
- Drejtimi i gradientit: 45 gradë
- Butoni:
- Gjerësia e kufirit: 0 piksele
- Rrezja kufitare: 0 piksele
- Fonti: Montserrat
- Pesha e shkronjave: e trashë
- Stili: italik
- Ikona e butonit të shfaqjes: PO
- Ikona: shigjeta në formë trekëndëshi në të djathtë (shih pamjen e ekranit)
- Vendosja e ikonës: djathtas
- Margjina: 8em (djathtas)
- Mbushja: 0,2em (lart dhe poshtë), 1,5em (majtas), 1em (djathtas)
Krijo një imazh për seksionin Hero
Me të gjitha përmbajtje të seksionit Hero në madhësinë e duhur të faqes, ne jemi gati të shtojmë imazhin e seksionit Hero në anën e majtë. Për ta bërë këtë, së pari shtoni një modul Image poshtë butonit.
Hapni cilësimet e imazhit dhe ngarkoni një imazh.
Cilësimet e dizajnit të imazhit
Nën skedinë Projektimi, përditësoni cilësimet e mëposhtme:
- Shtrirja e imazhit: majtas (Desktop dhe tablet), në qendër (Telefon)
- Gjerësia maksimale: 48% (Desktop dhe tablet), 70% (Telefon)
- Mbushje: 4% (majtas)
Së fundi, jepini imazhit një pozicion absolut me një zhvendosje duke përdorur njësinë e gjatësisë vmin si më poshtë:
- Pozicioni: Absolute (Desktop dhe Tablet), Relativ (Telefon)
- Vendndodhja: lart majtas (desktop dhe tablet)
- Kompensimi vertikal: 30vmin (Desktop dhe Tablet), 0px (Telefon)
Rezultati përfundimtar
Këtu është rezultati përfundimtar në një faqe të drejtpërdrejtë.
Shiko gjithashtu: Divi: Si të përdorni maskat dhe modelet e sfondit për një seksion heronj
Kjo është mënyra se si dizajni i lëngut përshtatet pa probleme me gjerësinë e dritares së shfletuesit.
Shkarkoni DIVI tani!!!
Përfundim
Shtimi i një dizajni të lëngshëm në një seksion Hero mund të jetë një mënyrë e dobishme për të siguruar që pjesa e sipërme e palosjes të jetë e qëndrueshme në të gjitha madhësitë e shfletuesit, pa pasur nevojë të përditësoni dizajnin në pika, ndalesa specifike ose të përdorni pyetje mediatike.
Shpresojmë që kjo teknikë të shtojë një aftësi tjetër të dobishme të projektimit për projektet e ardhshme.
Shpresojmë gjithashtu 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ë elementë për të realizuar projektet tuaja të krijimit të faqeve të Internetit.
Mos hezitoni të konsultoheni edhe 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.
...
