Aftësia për të lidhur vertikalisht përmbajtje kur krijoni një faqe me Divi mund të jetë një shtesë e dobishme për mjetin tuaj të projektimit. Ndonjëherë një dispozitë e caktuar kërkon që përmbajtje është rreshtuar vertikalisht në mënyra të ndryshme (në qendër, poshtë, lart). Nevoja më e zakonshme është të përqendroni veten përmbajtje vertikalisht.
Ai siguron një prekje të shijshme të hapësirës simetrike që ju ndihmon kur përdorni paraqitje të shumta të kolonave për përmbajtjen tuaj. Për më tepër, përmbajtja e përqendruar vertikalisht mbetet e përqendruar në gjerësi të ndryshme të shfletuesit, duke eliminuar sherrin e aplikimit të mbushjes ose kufijve të personalizuar për të arritur një përgjegjshmëri të ngjashme.
Në këtë tutorial, unë do t'ju tregoj se si të shtoni disa copa të vogla CSS në çdo kolonë për të lidhur vertikalisht përmbajtjen. Unë do të përdor disa nga paraqitjet e para-bëra nga Divi për shembuj se si ta bëni këtë. Nëse nuk dini shumë për CSS, nuk keni pse të shqetësoheni. Do të jetë mjaft e lehtë për t'u aplikuar në paraqitjet tuaja në sekonda.
Kuptimi i Flex dhe Divi
Prona css Flex (ose Flexbox) është thjesht një mënyrë për të pozicionuar artikujt në pirgje horizontale dhe / ose vertikale (pak a shumë si një tryezë). Përveç, ndryshe nga tabelat tradicionale, prona flex ju lejon të krijoni kuti që do të përshtaten me madhësinë e përmbajtjes që përmban.
Divi përdor veçorinë flex sa herë që zgjidhni "Equalize Column Heights" si parametër rreshti. Kjo thjesht siguron që madhësia e kolonave tuaja të përshtatet me madhësinë e kolonës me përmbajtjen më të madhe. Dhe meqenëse "Equalize Column Heights" mundëson përkulje për kontejnerin e rreshtit, ju mund të përfitoni lehtësisht prej tij duke shtuar css në kolonat tuaja për të rregulluar përmbajtjen e secilës kolonë (ose zonë).
Për shembull, nëse shtoni "margin: auto" në një kolonë me radhë, përmbajtja e asaj kolone (nëse është një ose më shumë module) do të përqendrohet vertikalisht.
Për më tepër, nëse shtoni "artikuj të linjës: qendër" në linjë tuaj, të gjitha kolonat tuaja (dhe përmbajtja e tyre) do të përqendrohen vertikalisht.
Sigurisht, ka shumë përdorime të tjera për pronën Flex në krijimin e faqeve në internet, si dhe CSS më të përparuara që mund t'i aplikoni në temën tuaj. Por për këtë udhëzues, doja ta mbaja të thjeshtë.
A është vërtet e nevojshme?
Teknikisht, jo. Ju mund të vendosni vertikalisht përmbajtjen / modulet tuaja në një kolonë duke përdorur hapësirën e personalizuar (mbushja dhe marzhi). Për shembull, mund të përdorni opsionet e ndarjes së Divi-t për të dhënë një kolonë të barabartë me mbushjen e sipërme dhe të poshtme për të përqendruar modulin (et) vertikalisht në kolonë. Ju gjithashtu mund të shtoni vetëm mbushjen e sipërme në një kolonë për të rreshtuar përmbajtjen e poshtme. Sidoqoftë, mund të duhet të rregulloni hapësirën kur azhurnoni faqen tuaj me më shumë përmbajtje. Për më tepër, mund të jetë e vështirë të mbash këtë shtrirje në gjerësi të ndryshme të shfletuesit.
Pra, nëse jeni duke kërkuar për një zgjidhje për të rreshtuar vertikalisht përmbajtjen pa pasur nevojë të mendoni për hapësirën me porosi, unë mendoj se do ta gjeni këtë të dobishme.
Le të fillojmë!
Vendosni paraqitjen e paracaktuar në faqen tuaj
Për të filluar, unë do të përdor paraqitjen nga diapazoni i Portofolit të Kompanisë së Dizajnimit të Brendshëm. Për të marrë këtë paraqitje në faqen tuaj, krijoni një faqe të re. Pastaj jepi një titull faqes tënde. Klikoni në "Përdor Ndërtuesin e Divi" pastaj në "Përdor Ndërtuesin Vizual". Pastaj zgjidhni opsionin "Zgjidhni një paraqitje themelore". Pastaj zgjidhni kompletin e paraqitjes së Kompanisë së Dizajnimit të Brendshëm nga dritarja që shfaqet Load from Library. Në fund, zgjidhni faqen Portfolio nga lista e paraqitjeve dhe klikoni "Përdorni këtë paraqitje".
Pasi të jetë ngarkuar faqosja në faqen tuaj, ju jeni gati të shkoni.
Metoda 1: Si të drejtohet vertikalisht përmbajtja duke përdorur Flex dhe Auto Margin
Hapni cilësimet e rreshtit për rreshtin e dytë të faqes (ai direkt poshtë rreshtit me titullin e faqes). Nën Cilësimet e Dizajnit, hapni grupin e opsioneve të madhësisë dhe vini re se "Barazoni lartësitë e kolonës" është tashmë aktive. Kjo do të thotë që linja tani ka shtuar karakteristikën flex ("display: flex;").
Tani shkoni te cilësimet e skedës Advanced për të njëjtën rresht dhe shtoni copën e mëposhtme css nën kutinë e hyrjes së elementit kryesor të kolonës 2.
margin: auto; |
Tani përmbajtja e kolonës së dytë është zhvendosur për t'u përqëndruar vertikalisht.
Bëni përmbajtjen më të ulët të përmbajtjes
Nëse dëshironi të rreshtoni përmbajtjen tuaj në pjesën e poshtme, në mënyrë që të gjitha modulet të grumbullohen në fund të kolonës tuaj, mund të rregulloni vlerën e diferencës si më poshtë:
margin: auto 0; |
Shtrirjen vertikale të përmbajtjes për të gjitha kolonat në rreshtin tënd
Në vend që të shtoni "margin: auto" në secilën kolonë veç e veç, ju gjithashtu mund të përqendroni vertikalisht përmbajtjen e të gjitha kolonave në rreshtin tuaj duke shtuar copën e mëposhtme në elementin kryesor të cilësimeve të rreshtit tuaj.
align-items: center; |
Ose nëse doni që të gjitha përmbajtjet e kolonave tuaja të jenë të vendosura në fund, mund të shtoni këtë fragment:
align-items: flex-end; |
Dhe mos harroni se ju mund të përfitoni nga tipari Extend Styles i Divi-t duke klikuar me të djathtën në elementin kryesor me fragmentin tuaj CSS dhe duke klikuar në "Zgjasni elementin kryesor".
Pastaj, shtrini këtë element kryesor css në të gjitha rreshtat e faqes (ose seksionit) për të përqendruar vertikalisht të gjithë përmbajtjen e secilës kolonë të faqes.
Tani gjithçka është përqendruar vertikalisht.
Por, mund të keni vërejtur se ngjyra e sfondit të kolonës së bardhë nuk mbulon më të gjithë lartësinë e rreshtit. Kjo është për shkak se ne shtuam "margin: auto" në kolonë. Për të zgjidhur këtë çështje, mund të ndryshoni ngjyrën e sfondit të linjës në të bardhë dhe të hiqni mbushjen nga rreshti. Por në vend të kësaj, unë do t'ju tregoj një mënyrë për të përqendruar përmbajtjen tuaj të kolonës pa ndryshuar marzhin.
Metoda 2: Rreshtoni përmbajtjen vertikalisht duke përdorur drejtimin përkulës të kolonës
Në metodën e parë, kemi përfituar nga vetia flex e shtuar në rresht. Kjo e bëri secilën nga kolonat tona një "kuti fleksibël" që mund të rreshtohej vertikalisht thjesht duke rregulluar marzhin.
Por ekziston edhe një mënyrë me drejtim përkulës për të rreshtuar përmbajtjen e kolonës tonë pa humbur efektin "Barazoni lartësinë e kolonës" i cili i mban kolonat tona (dhe sfondet e kolonave) në të njëjtën madhësi. Për ta bërë këtë, ne thjesht do të shtojmë disa rreshta të CSS në kolonën tonë në mënyrë që të gjithë modulet në kolonë të grumbullohen vertikalisht dhe më pas të përqendrohen.
Le të kthehemi te rreshti ynë në shembullin e mëparshëm. Hapni cilësimet e rreshtit dhe hiqni çdo css të personalizuar që mund të keni atje duke klikuar me të djathtën në CSS të personalizuar dhe duke klikuar "Rivendosni stilet e personalizuara të CSS".
Pastaj shtoni CSS-in e mëposhtëm nën kolonën 2, elementi kryesor:
ekran: përkul; drejtimi i përkuljes: kolona; justifikoj-përmbajtjen: qendra;
Ose, nëse do të dëshiroja të rreshtoja përmbajtjen në fund, thjesht zëvendësoni "Justifikoni përmbajtjen: qendrën" me "justifikoni përmbajtjen: flex-end".
Gjëja më e mirë për këtë konfigurim është se nëse përmbajtja ime përqendrohet vertikalisht dhe arrihet gjerësia e linjës, përmbajtja qëndron në qendër.
Bëni turbullira (Përmbledhje) me sasi të ndryshme të tekstit të përafruar vertikalisht
Bërja e përmbajtjes së kolonës suaj në qendër vertikalisht mund të jetë gjithashtu e dobishme për paqartësitë. Siç e dini, jo të gjitha paqartësitë do të përmbajnë sasinë e saktë të tekstit të përdorur për dshkruaj funksion ose shërbim. Përqendrimi i këtyre turbullirave vertikalisht mund të krijojë një dizajn të bukur për paraqitjen tuaj.
Për këtë shembull, unë do t'i rreshtoj vertikalisht mjegullat në paraqitjen e faqes kryesore të Pagesave Dixhitale.
Unë së pari do të shtoj sasi të ndryshme të tekstit të trupit për të dhënë një paraqitje më realiste se si mund të duket një faqe.
Tani më duhet të shkoj në cilësimet e linjës dhe "Harmonizoni lartësitë e kolonës".
Tani mund të shtoj copra CSS për të lidhur përmbajtjen time dhe për të ndryshuar dizajnin.
Nën skedën e avancuar të cilësimeve të rreshtit tuaj, ne mund të përqendrojmë vertikalisht përmbajtjen e kolonave tona duke shtuar sa vijon te Elementi Kryesor:
align-items: center; |
Ose ta ndryshoni atë duke ndjekur për t'i rregulluar ato.
align-items: flex-end; |
Ju gjithashtu mund të rivendosni stilet tuaja të personalizuara të CSS dhe të shtoni marzhet e mëposhtme të personalizuara për të rreshtuar pjesën e poshtme të kolonës dhe pjesën e sipërme të kolonës së rreshtuar.
Koloni 1 elementi kryesor CSS:
margin: auto auto 0; |
Koloni 3 elementi kryesor CSS:
margin: 0 auto auto; |
Po për paraqitjet me kolonë të vetme?
Teknikisht, nuk keni nevojë për ndonjë CSS ose fragment të përkulshëm për të përqendruar vertikalisht përmbajtjen tuaj të kolonës. E vetmja gjë që ju duhet të bëni është të siguroheni që keni hapësirë të barabartë mbi dhe nën përmbajtjen tuaj (ose modulet). Shumicën e kohës, përdoruesit kanë nevojë për përmbajtje vertikale që është e përqendruar në faqosje me shumë kolona sepse ata duan që përmbajtja ngjitur të rreshtohet në mënyrë të përsosur.
Kjo është e gjitha për këtë tutorial i cili ju tregon se si të vendosni elementet në të njëjtën linjë në Divi.
