Dëshironi të ndryshoni stilin e disa elementeve Divi në hover apo pas klikimit?
Në këtë tutorial, ne do t'ju tregojmë se si të ndryshoni stilin e elementeve të shumëfishtë kur rri pezull ose klikoni brenda Divi.
Së pari, ne do të përfitojmë nga opsionet e integruara të projektimit të Divi për të hartuar një plan urbanistik të seksionit.
Më pas, ne do të paraqesim një fragment të thjeshtë jQuery që mund ta përdorni në kombinim me CSS të personalizuar për të rregulluar stilin e çdo elementi në këtë seksion kur rri pezull mbi ose klikoni një buton.
Kjo mund të duket e ndërlikuar (veçanërisht për fillestarët), por mund të habiteni se sa e thjeshtë është për ta bërë.
Le të fillojmë!
studim
Këtu është një përmbledhje e shkurtër e dizajnit që do të arrijmë në këtë tutorial.
Ndryshimi i elementeve në lëvizjen e butonit
Modifikimi i elementeve pasi klikoni në butonin
Le të fillojmë duke krijuar një faqe me Divi Builder
Shiko gjithashtu: Divi: Si të krijoni një meny të rrotave rrotulluese në hover
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ërdorni Divi Builder
Pastaj kliko Filloni të ndërtoni (Ndërtoni nga Gërvishtja)
Pas kësaj, ju do të keni një kanavacë të zbrazët për të filluar projektimin në Divi.
Pjesa 1: Dizajni i paraqitjes së seksionit
Për të filluar, krijoni një rresht të ri me dy kolona.
Cilësimet e seksionit
Para se të shtoni module, hapni cilësimet e seksionit dhe përditësoni sa vijon:
- Sfondi: #ffffff
Le të shtojmë një ndarës seksioni
- Ndarës (sipër)
- Stili: shikoni pamjen e ekranit
- Ngjyra: #ffffff
- Lartësia: 5vw
- Ndarës (poshtë)
- Stili: shih kapjen
- Ngjyra: #ffffff
- Lartësia: 5vw
- Mbushje (sipër dhe poshtë): 6vw
Imazhi (Para se të rri pezull)
Në kolonën e majtë të rreshtit me dy kolona, shtoni një modul të ri imazhi.
Më pas, ngarkoni imazhin që dëshironi të nënvizoni.
Nën skedinë Projektimi, përditësoni shtrirjen dhe aktivizoni opsionin Forca me gjerësi të plotë.
- Shtrirja e imazhit: në qendër
- Gjerësia e plotë e forcës: PO
Imazhi (Në pritje ose pas klikimit)
Më pas, ne do të krijojmë një imazh tjetër që do ta shfaqim kur rri pezull/klikojmë një buton.
Për të krijuar imazhin, dubliko modulin e mëparshëm të imazhit.
Pastaj ngarkoni një imazh të ri. Imazhi duhet të jetë i njëjtë me madhësinë e imazhit tjetër sepse do të zëvendësojë imazhin tjetër me hover/klikim.
Për këtë imazh, ne do t'i japim një pozicion absolut. Kjo do të bëjë që imazhi të ulet drejtpërdrejt mbi imazhin tjetër pa zënë ndonjë hapësirë reale në faqe.
- Pozicioni: Absolut
Nën skedinë Projektimi, ndryshoni opacitetin nën opsionet e filtrit në mënyrë që imazhi të jetë plotësisht i padukshëm.
- Perde: 0%
Shtoni një modul teksti
Në kolonën e djathtë, shtoni një modul të ri Teksti.
Pastaj ngjisni kodin e mëposhtëm HTML në kuti përmbajtje nga trupi:
<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>
Vini re se disa fjalë në tekst janë të rrethuara me etiketa hapësirë. Kjo është mënyra se si ne mund t'i synojmë dhe t'i personalizojmë këto fjalë më vonë me CSS të personalizuar.
Nën skedinë Projektimi, përditësoni opsionet e stilit H3 si më poshtë:
- Kreu 3:
- Fonti: Montserrat
- Pesha e shkronjave Pesha e shkronjave: Ultra e trashë
- Stili: TT
- Madhësia e tekstit: 60 px (kompjuter dhe tablet), 40 px (telefon)
- Hapësira e shkronjave: 0,06em
- Lartësia e linjës: 2 em
Në seksionin tjetër, ne do të shtojmë butonin që do të përdorim për të filluar ndryshimet e stilit.
Krijo një seksion për butonin
Së pari ne duhet të krijojmë një seksion të ri të rregullt poshtë seksionit aktual.
Pastaj shtoni një rresht në një kolonë në seksion.
Shto një buton
Në kolonë, shtoni një modul të ri Buton.
Ndryshoni tekstin e butonit për të lexuar "Vazhdo...".
Kalo te skeda Projektimi dhe përditësoni dizajnin e butonit si më poshtë:
- Përdorni stile të personalizuara për butonin: PO
- Madhësia e tekstit: 16 px
- Ngjyra e tekstit: #ffffff
- Sfondi i butonit (Desktop): #4b4baf
- Backround i butonit (Hover): #67ddc1
- Gjerësia e kufirit: 0 piksele
Lexo gjithashtu: Divi: Si të shtoni një ikonë hamburgeri në modulin e Menysë
- Hapësira e shkronjave të butonave: 4 px
- Fonti: Montserrat
- Pesha e shkronjave: Gjysmë e trashë
- Stili i fontit të butonit: TT
- Marzhi (poshtë): 0 px
- Mbushje (sipër dhe poshtë): 1.5em
- Mbushje (majtas dhe djathtas): 4em
Pjesa 2: Shtoni klasa CSS te Elementet
Tani që dizajni ynë është në vend, ne do të bëjmë pjesën tjetër të ndryshimeve të dizajnit duke përdorur kodin e personalizuar (CSS dhe JQuery).
Por përpara se të fillojmë të shtojmë kodin tonë të personalizuar, duhet të shtojmë klasa CSS në të gjithë elementët që duam të ndryshojmë kur rri pezull/klikojmë mbi butonin.
Shtoni një klasë CSS në seksion
Për të shtuar një klasë CSS në seksion, hapni cilësimet e seksionit dhe klikoni në skedën Avancuar. Pastaj futni klasën e mëposhtme CSS:
- Klasa CSS: et-change-style_section
Shtoni një klasë CSS në modulet e imazhit
Tjetra, hapni cilësimet për imazhin e parë në kolonën e majtë dhe shtoni klasën e mëposhtme CSS:
- Klasa CSS: et-para-image
Kjo do të jetë imazhi që do të shfaqet "përpara" që të rri pezull/klikoni butonin.
Duke përdorur modalin e shtresës, hapni cilësimet për imazhin e dytë (ai i fshehur me filtrin e opacitetit) dhe shtoni klasën e mëposhtme CSS:
- Klasa CSS: et-pas-image
Kjo do të jetë imazhi që do të shfaqet "pas" pezullimit/klikimit të butonit.
Shtoni një klasë CSS në modulin Tekst
Më pas, shtoni klasën e mëposhtme CSS në modulin e tekstit në kolonën e djathtë:
- Klasa CSS: et-style-text
Shtoni një klasë CSS në modulin Button
Më në fund, shtoni një klasë të personalizuar CSS në butonin në pjesën e poshtme si më poshtë:
- Klasa CSS: et-toggle-button
Ne kemi nevojë për këtë klasë për të synuar butonin për funksionalitetin hover/kliko në kod më vonë.
Pjesa 3: Shtoni kodin e personalizuar për të ndryshuar stilet kur rri pezull ose kliko
Tani që të gjitha klasat tona CSS janë vendosur, ne mund të shtojmë kodin e nevojshëm për të ndryshuar stilin e të gjithë këtyre elementeve kur ju rri pezull/klikoni butonin.
Shtoni një modul Kodi
Për të shtuar kodin, shtoni një modul Kodi poshtë butonit në pjesën e poshtme.
Ngjit kodin jQuery
Pastaj ngjisni JQuery në vijim. Sigurohuni që ta mbështillni kodin në etiketat e skriptit ndërsa e shtojmë kodin në një dokument HTML (jo një skedar JS).
(function($) {
$(document).ready(function(){
$('.et-toggle-button').hover(function(){
$('.et-change-style_section').toggleClass('et-change-style_active');
var $this = $(this);
$this.toggleClass('et-toggle-button_active');
});
});
})( jQuery );
Ndryshoni stilin e elementeve me CSS të personalizuar
Hapni modulin e Kodit dhe ngjisni CSS-në e mëposhtme të personalizuar mbi skriptin JQuery, duke u siguruar që ta mbështillni atë në etiketat e stilit të nevojshëm.
.et_pb_section.et-change-style_section.et-change-style_active {
background-color:#484db0 !important;
}
Pastaj ngjisni CSS-në e mëposhtme shtesë në etiketat e stilit.
.et-change-style_active .et-after-image {
filter: opacity(100%);
}
.et-change-style_active .et-before-image {
filter: opacity(0%);
} 
Pastaj ngjisni pjesën tjetër të CSS brenda etiketave të stilit:
.et-change-style_active .et-style-text h3, .et-change-style_active .et-style-text p {
color: #ffffff;
}
.et-change-style_active .et-style-text h3 span {
color: #67ddc1;
}
.et-toggle-button_active {
transform: scale(1.1);
background-color: #67ddc1 !important;
}
.et-change-style_active, .et-before-image, .et-after-image, .et-style-text h3 {
transition: all 0.3s;
}Këto fragmente CSS përdorin të njëjtin koncept për të ndryshuar stilin e elementit kur seksioni (ose butoni) ka klasën e re.
Rezultati përfundimtar (përmbledhje)
Pasi të shtohet kodi, ruani ndryshimet dhe hapni faqen për të parë rezultatin. Vini re se si ndryshojnë artikujt që kemi synuar kur rri pezull mbi buton.
Ndryshoni stilet me klikim
Për të shtuar funksionalitetin e klikimeve, zëvendësoni JQuery aktual me sa vijon (përsëri, sigurohuni që të jetë i mbështjellë me etiketa skripti):
(function($) {
$(document).ready(function(){
$('.et-toggle-button').click(function(e){
e.preventDefault();
$('.et-change-style_section').toggleClass('et-change-style_active');
var $this = $(this);
$this.toggleClass('et-toggle-button_active');
if ($this.hasClass('et-toggle-button_active')){
$this.text('Précédent...');
} else {
$this.text('Suite...');
}
});
});
})( jQuery );
Këtu është rezultati përfundimtar.
Shkarkoni DIVI Tani!!!
Përfundim
Të jesh në gjendje të synosh dhe të stilosh elementë të shumtë në një faqe kur rri pezull ose klikoni mbi diçka është një aftësi e dobishme në dizajnimin e uebit.
Ju mund ta përdorni këtë teknikë për një sërë rastesh përdorimi (para dhe pas, CTA, etj.)
Sigurisht, ndihmon të njohësh pak CSS dhe JS/JQuery. Por, siç e keni parë në këtë tutorial, nuk keni nevojë për njohuri të thella të kodimit për të marrë rezultate të mahnitshme!
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ë 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.
...
