Dëshironi të krijoni një rrjet me Divi të jetë fluide në hover?
Nëse ju pëlqen ndërtimi i faqeve të internetit me ndërveprimin e përdoruesve në mendje, do t'ju pëlqejë ky tutorial.
Sot do t'ju tregojmë se si të krijoni një rrjet transparent, imazhi i sfondit të të cilit zbulohet sapo dikush rri pezull mbi një nga elementët. Dizajni fillimisht është i thjeshtë dhe i pastër. Kjo rezulton në një përvojë të këndshme fluturimi.
Në këtë tutorial, ne do t'ju ecim në procesin e krijimit hap pas hapi.
Le të shkojnë.
studim
Përpara se të zhytemi në tutorial, le të hedhim një vështrim të shpejtë në rezultatin në madhësi të ndryshme të ekranit.
zyrë
Telefon
Le të fillojmë procesin e krijimit në Divi
Shto një seksion të ri
Ngjyrë e sfondit
Shtoni një seksion të ri në faqen në të cilën po punoni.
Shih gjithashtu: Divi: Si të krijoni një fund të personalizuar
Fillimisht hapni cilësimet e seksionit dhe aplikoni një ngjyrë të bardhë të sfondit.
- Sfondi: #ffffff
Shtoni rreshtin numër 1
Struktura e kolonës
Vazhdoni duke shtuar një rresht të ri duke përdorur strukturën e mëposhtme të kolonës:
sizing
Pa shtuar ende asnjë modul, hapni cilësimet e linjës, shkoni te skeda Projektimi, tërhiqni opsionin sizing dhe modifikoni parametrat e madhësisë si më poshtë:
- Përdorni gjerësinë e ulluqit të personalizuar: PO
- Ullukë me: 1
- Gjerësia: 100%
- Gjerësia maksimale: 100%
ndarje
Pastaj tërhiqni opsionin ndarje dhe ndryshoni cilësimet e mëposhtme:
- Mbushje (lart dhe poshtë): 0 px
kufi
Në opsionin Border, bëni gjithashtu ndryshimet e mëposhtme:
- Stilet e kufirit (lart dhe poshtë): 1 px
- Ngjyra e kufirit (lart dhe poshtë): #d3d3d3
Cilësimet e kolonës 1
Rri pezull sfondin
Më tej, le të personalizojmë cilësimet për kolonën 1. Aplikoni një sfond gradient në varëse.
- Ngjyra 1: rgba (255,255,255,0)
- Ngjyra 2: #000000
- Lloji i gradientit: Linear
- Ngjyra e pozicionit 1: 30%
- Vendosni gradientin mbi imazhin e gradientit: PO
Imazhi i sfondit në rri pezull
Ngarko gjithashtu një imazh të sfondit që do të shfaqet në pozicionin e pezullimit.
- Madhësia e imazhit në sfond: Kopertina
- Pozicioni i imazhit në sfond: Qendër
Klasë CSS
Dhe plotësoni cilësimet e kolonës duke caktuar klasën e mëposhtme CSS në skedën Avancuar :
- Klasa CSS: hover-colon
Shtoni modulin e tekstit #1 në kolonën 1
Shto tekst me madhësi H3 (Titulli 3)
Është koha për të shtuar module, duke filluar me një modul të parë Teksti në kolonën 1. Futni një tekst sipas dëshirës tuaj.
Cilësimet e tekstit H3
Pastaj kaloni në skedën Projektimi të modulit dhe modifikoni parametrat e tekstit H3 si më poshtë:
- Fonti: Oswald
- Pesha e shkronjave Pesha e shkronjave: ultra e lehtë
- Titulli 3 Stili i shkronjave: TT
- Ngjyra e tekstit: #0a0a0a
- Madhësia e tekstit të kreut 3:
- Desktop: 3vw
- Tableti: 7vw
- Telefoni: 14vw
- Hapësira e shkronjave të kreut 3: -2 px
sizing
Ndryshoni gjerësinë në madhësi të ndryshme të ekranit në cilësimet e madhësisë.
- Gjerësia:
- Desktop: 44%
- Tabletat: 48%
- Telefoni: 50%
ndarje
Le të ndryshojmë gjithashtu parametrat e mëposhtëm në opsion ndarje.
- Marzhi (poshtë): 25vh
- Mbushje (sipër dhe poshtë): 5%
- Mbushje (majtas dhe djathtas): 4%
kufi
Më pas, do të shtojmë kufijtë djathtas dhe poshtë.
- Gjerësia e kufirit (djathtas dhe poshtë): 1 px
- Ngjyra e kufirit (djathtas dhe poshtë): #d3d3d3
Klasë CSS
Dhe ne gjithashtu do të plotësojmë cilësimet e modulit duke caktuar klasën e mëposhtme CSS në modulin Tekst:
- Klasa CSS: hover-title
Shtoni modulin e tekstit #2 në kolonën 1
Shto përmbajtje
Shtoni një modul tjetër Teksti pak më poshtë ai i mëparshmi me përmbajtje përshkrimi i zgjedhjes suaj.
Cilësimet e tekstit
Kalo te skeda Projektimi të modulit dhe modifikoni parametrat e tekstit në përputhje me rrethanat:
- Fonti i tekstit: Karla
- Ngjyra e tekstit: #ffffff
- Size:
- Desktop: 0,8 vw
- Tableti: 2vw
- Telefoni: 3.6vw
- Lartësia e linjës: 2,2 em
ndarje
Gjithashtu aplikoni vlerat e marzhit të personalizuar.
- Mbushje (poshtë): 10%
- Mbushje (majtas dhe djathtas): 9%
Klasë CSS
Dhe plotësoni parametrat e modulit duke përdorur klasën e mëposhtme CSS për modulin:
- Klasa CSS: hover-text
Shtoni një modul "Button" në kolonën 1
Shto një përshkrim
Moduli tjetër dhe i fundit që na nevojitet është një modul Buton. Futni një përshkrim sipas zgjedhjes suaj.
Cilësimet e butonit
Ndryshoni parametrat e modulit si më poshtë:
- Përdorni stile të personalizuara për butonin: PO
- Madhësia e tekstit të butonit:
- Desktop: 1vw
- Tableti: 2,5 vw
- Telefoni: 4vw
- Gjerësia e kufirit të butonit: 0 px
- Rrezja e kufirit: 0 px
- Fonti i butonit: Karla
- Ikona e butonit të shfaqjes: PO
- Vendosja e ikonës së butonit: djathtas
- Shfaq vetëm ikonën mbi butonin: JO
ndarje
Shtoni gjithashtu vlerat e hapësirës së personalizuar.
- Marzhi (poshtë): 8%
- Marzhi (majtas dhe djathtas): 9%
- Mbushje (poshtë): 5%
- Mbushje (djathtas): 20%
hije kuti
Tjetra, aplikoni një hije kutie.
- Pozicioni horizontal i hijes së kutisë: 0 px
- Pozicioni vertikal i hijes së kutisë: 2 px
- Ngjyra e hijes: #000000
Klasë CSS
Dhe plotësoni cilësimet e modulit duke caktuar klasën e mëposhtme CSS në butonin:
- Klasa CSS: butoni hover
Ripërdorni kolonën 1
Fshi kolonat 2, 3 dhe 4
Tani që kemi ndërtuar kolonën e parë, mund ta ripërdorim atë. Gjëja e parë që do të bëjmë është të heqim kolonat boshe nga rreshti ynë.
Klononi kolonën 1 tre herë
Ne do ta ripërdorim kolonën 1 duke e klonuar tre herë.
Ndrysho imazhet e sfondit kur rri pezull e kolonave të dyfishta
Pastaj ndryshoni imazhet e sfondit të dyfishtë të kolonës në secilën kolonë të kopjuar.
Redaktoni përmbajtjen e kopjuar
Ndryshoni gjithashtu përmbajtje të modulit në çdo kolonë dublikatë.
Kufijtë unikë të kolonës
Kolona 1
Do të na duhet të aplikojmë cilësime unike të kufirit për secilën kolonë, duke filluar me kolonën 1.
- Gjerësia e kufirit (djathtas):
- Desktop: 1px
- Tableti: 1 px
- Telefoni: 0 px
- Ngjyra (djathtas): #d3d3d3
- Gjerësia e kufirit (poshtë):
- Desktop: 0px
- Tableti: 1 px
- Telefoni: 1 px
- Ngjyra e kufirit (poshtë): #d3d3d3
Kolona 2
Më pas kemi kolonën 2.
Gjerësia e kufirit (djathtas):
- Desktop: 1px
- Tableti: 1 px
- Telefoni: 0 px
Ngjyra (djathtas): #d3d3d3Gjerësia e kufirit (poshtë):
- Desktop: 0px
- Tableti: 1 px
- Telefoni: 1 px
Ngjyra e kufirit (poshtë): #d3d3d3
Kolona 3
Dhe ne do të përdorim cilësimet e mëposhtme të kufirit për kolonën 3:
- Gjerësia e kufirit (djathtas):
- Desktop: 1px
- Tableti: 1 px
- Telefoni: 0 px
- Ngjyra (djathtas): #d3d3d3
- Gjerësia e kufirit (poshtë):
- Desktop: 0px
- Tableti: 1 px
- Telefoni: 1 px
- Ngjyra e kufirit (poshtë): #d3d3d3
Shtoni CSS të personalizuar në cilësimet e faqes
Hap cilësimet e faqes
Tani që i gjithë dizajni është vendosur, gjithçka që mbetet është të shtoni një kod të personalizuar CSS për të ndihmuar në aktivizimin e efekteve të pezullimit në module. Për ta bërë këtë, hapni cilësimet e faqes.
Lexoni gjithashtu udhëzuesin tonë në: Divi: Si të krijoni një footer ngjitës me efektin "Reveal".
Shto kodin CSS
Dhe kopjoni-ngjisni rreshtat e mëposhtëm të kodit CSS:
.hover-column:hover .hover-title {
background-color: #000000;
}
.hover-column:hover .hover-title h3 {
color: white !important;
}
.hover-button {
color: black;
}
.hover-column:hover .hover-button {
color: white !important;
box-shadow: 0px 2px 0px 0px #ffffff;
}
.hover-column:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(180deg,#ffffff 30%,#ffffff 100%);
z-index: -1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
opacity: 1;
}
.hover-column:hover::before {
opacity: 0;
}
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.
zyrë
Telefon
Shkarkoni DIVI Tani!!!
Përfundim
Në këtë artikull, ne ju treguam se si të krijoni një dizajn të bukur hover.
Në mënyrë të veçantë, ne kemi krijuar një rrjet kolonash që fillon e thjeshtë dhe e pastër. Sapo të vizitorët rri pezull mbi një artikull të caktuar të rrjetit, imazhi i sfondit shfaqet dhe stilet e modulit ndryshojnë.
Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar 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.
...
