Dëshironi të dini se si të vendosni një modul Blurb nga Divi theksuar ndërsa turbullon të tjerët?
Cilido qoftë lloji i Site Web që po ndërtoni, shanset janë që në një moment do të dëshironi të shihni një listë shërbimesh, fazash të ndryshme dhe më shumë.
Një nga mënyrat më të lehta për t'iu qasur krijimit të një liste të tillë në një mënyrë tërheqëse është përdorimi i modulit Blurb nga Divi. Modulet Blurb ju lejojnë të strukturoni bukur përmbajtje nga lista duke ju dhënë mundësi të pafundme dizajni.
Në këtë tutorial, ne do të bëjmë një hap më tej dhe do t'ju tregojmë se si të nënvizoni një modul Blurb në lëvizje dhe të turbulloni të tjerët që keni shfaqur. Është një mënyrë e shkëlqyer për të theksuar një modul Blurb në të njëjtën kohë, pa lejuar që modulet e tjera Blurb të shpërqendrojnë lexuesin.
Le të shkojnë.
studim
Përpara se të zhytemi në këtë tutorial, le të hedhim një vështrim të shpejtë në rezultatin në madhësi të ndryshme të ekranit.
Kompjuter desktop
Versioni celular
Le të fillojmë të dizajnojmë me Divi
Shto një seksion të ri
Ngjyrë e sfondit
Filloni duke shtuar një seksion të rregullt në një faqe të re ose në atë në të cilën po punoni.
Ju gjithashtu mund të konsultoheni: Divi: Si të krijoni një seksion të anëtarëve të ekipit si një karusel
Hapni cilësimet e seksionit dhe ndryshoni ngjyrën e sfondit.
- Sfondi: #eaeaea
ndarje
Gjithashtu shtoni vlerat e ndarjes.
- Marzhi (lart, poshtë, majtas dhe djathtas): 2vw
- Mbushje (lart dhe poshtë): 0 px
Kufi
Plotësoni parametrat e seksionit duke shtuar një rreze kufiri.
- Këndet e rrumbullakosura: 20 px
Shto një rresht të ri
Struktura e kolonës
Vazhdoni duke shtuar një rresht të ri në seksion duke përdorur strukturën e mëposhtme të kolonës:
sizing
Pa shtuar ende asnjë modul, hapni cilësimet e linjës dhe ndryshoni cilësimet e madhësisë.
- Barazoni lartësitë e kolonave: PO
- Gjerësia: 90%
- Gjerësia maksimale: 1 px
- Lartësia minimale: 500 px (Desktop), automatike (Tableti dhe telefoni)
CSS e personalizuar (elementi kryesor)
Rreshtoni përmbajtje të kolonës duke shtuar një rresht të vetëm të kodit CSS në elementin kryesor të rreshtit.
align-items: center;
Shtoni modulin Blurb në kolonën 1
Shto përmbajtje
Moduli i vetëm që përdorim gjatë këtij tutoriali është moduli Blurb.
Megjithatë, ju mund ta zëvendësoni këtë modul me çdo modul të zgjedhjes suaj për sa kohë që shtoni klasën CSS të cilën do ta ndajmë në hapat e ardhshëm.
Shtoni modulin e parë Blurb në kolonën 1 dhe futeni përmbajtje e zgjedhjes suaj.
Zgjidhni ikonën
Pastaj zgjidhni një ikonë.
- Përdorni ikonën: PO
- Ikona: Shiko pamjen e ekranit
Gradient i sfondit (Hover)
Pastaj përdorni një gradient të sfondit vetëm kur rri pezull.
- Ndalesa e gradientit
- 20%: #ffffff
- 80%: #0f1bff
- Lloji i gradientit: Linear
Cilësimet e ikonës (Desktop)
Kalo te skeda Projektimi të modulit dhe ndryshoni cilësimet e ikonës si më poshtë:
- Ngjyra e ikonës: #ffffff
- Imazhi/Ikona qoshet e rrumbullakosura: 50 px
- Gjerësia e kufirit të imazhit/ikonës: 5 px
- Ngjyra e kufirit: #ffffff
- Vendosja e imazhit/ikonës: në krye
- Shtrirja e imazhit/ikonës: majtas
Cilësimet e ikonës së pezullimit
Ndryshoni ngjyrat e ndryshme të ikonave në lëvizje.
- Ngjyra e ikonës (Hover): #0f1bff
- Ngjyra e sfondit të imazhit/ikonës (Hover): #f7f7f7
Cilësimet e tekstit të titullit
Vazhdoni duke ndryshuar cilësimet e tekstit të titullit.
- Fonti i titullit: Source Sans Pro
- Pesha e shkronjave: Bold
- Stili i fontit të titullit: TT (me shkronja të mëdha)
Zhvendos cilësimet e tekstit të titullit
Ndrysho ngjyrën e tekstit të titullit kur rri pezull.
- Ngjyra e tekstit të titullit: #ffffff
Përshkrimi Cilësimet e tekstit (Desktop)
Tjetra janë cilësimet e tekstit të trupit.
- Font Body: Open Sans
- Lartësia e vijës së trupit: 2em
Zhvendos cilësimet e tekstit të përshkrimit
Përdorni një ngjyrë teksti në lëvizje.
- Ngjyra e tekstit të trupit (Hover): #ffffff
ndarje
Më pas, shkoni te cilësimet e ndarjes dhe shtoni vlera të personalizuara të mbushjes.
- Mbushje (sipër, poshtë, majtas dhe djathtas): 50 px
Box Shadow (Desktop)
Ne përdorim gjithashtu një hije kuti.
- Forca e turbullimit të hijes së kutisë: 80 px
- Forca e përhapjes së hijes së kutisë: -20 px
- Ngjyra e hijes: rgba (255,255,255,0.18)
Box Shadow (Hover)
Ndryshoni ngjyrën e hijes së pezullimit.
- Ngjyra e hijes: rgba (0,0,0,0.18)
Klasë CSS
Dhe që efekti i turbullimit të ndodhë, do të na duhet të caktojmë një klasë CSS në modulin tonë Blurb. Më vonë në artikull, ne do të përdorim këtë klasë CSS në kodin JQuery.
- Klasa CSS: artikull blurb
Klononi modulin Blurb dy herë dhe vendosni dublikatat në kolonat e mbetura
Pasi të keni përfunduar modulin Blurb në kolonën 1, mund ta klononi dy herë dhe t'i vendosni dublikatat në kolonat e mbetura të rreshtit.
Klononi të gjithë rreshtin
Mund ta klononi rreshtin sa herë të dëshironi, në varësi të numrit të moduleve Blurb që dëshironi të shfaqni në faqen tuaj.
Personalizo modulet Blurb individualisht
Sigurisht, do t'ju duhet të modifikoni përmbajtjen individuale të secilit modul Blurb.
Shto një rresht të ri
Struktura e kolonës
Shtoni një rresht tjetër në seksion duke përdorur strukturën e mëposhtme të kolonës:
ndarje
Hapni cilësimet e linjës dhe hiqni të gjitha mbushjet e sipërme dhe të poshtme si parazgjedhje. Kjo do të ndihmojë në zvogëlimin e hapësirës së zënë nga kjo rresht.
- Mbushje (lart dhe poshtë): 0 px
Shtoni modulin e kodit në kolonë
Fut kodin JQuery dhe CSS
Shtoni një modul Kodi në kolonën e rreshtit dhe futni disa kode JQuery dhe CSS për të realizuar efektin.
Mos harroni të vendosni kodin JQuery midis etiketave të skriptit dhe kodin CSS midis etiketave të stilit siç mund ta shihni në ekranin e printimit më poshtë.
jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);
$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');
});
});Lexo gjithashtu: Divi: Si të krijoni një seksion Testimoniale në formën e një rrjeti
.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}
studim
Tani që kemi kaluar të gjithë hapat, le të hedhim një vështrim përfundimtar se si duket në madhësi të ndryshme të ekranit.
Kompjuter desktop
Versioni celular
Shkarkoni DIVI Tani!!!
Përfundim
Në këtë artikull, ne ju kemi treguar se si të bëheni krijues me modulet Blurb që ndani në tuaj Site Web.
Në mënyrë të veçantë, ne ju kemi treguar se si të nënvizoni një modul Blurb kur rri pezull duke turbulluar të tjerët që keni shfaqur.
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ë 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.
...
