Ønsker du å endre stilen på flere elementer Divi på hover eller etter klikk?
I denne opplæringen vil vi vise deg hvordan du endrer stilen til flere elementer når du holder musepekeren eller klikker inn Divi.
Først vil vi dra nytte av de innebygde designalternativene til Divi å designe et seksjonsoppsett.
Deretter vil vi presentere en enkel jQuery-kodebit som du kan bruke i kombinasjon med tilpasset CSS for å justere stilen til ethvert element i denne delen når du holder musepekeren over eller klikker på en knapp.
Dette kan høres komplisert ut (spesielt for nybegynnere), men du kan bli overrasket over hvor enkelt det er å gjøre.
La oss begynne!
undersøkelsen
Her er en kort oversikt over designet som vi vil oppnå i denne opplæringen.
Endre elementer ved å holde knapp
Endring av elementene etter å ha klikket på knappen
La oss starte med å lage en side med Divi Builder
Se også: Divi: Hvordan lage en meny med snurrehjul når du svever
Fra WordPress-dashbordet, gå til Sider> Legg til nye for å opprette en ny side.
Gi den en tittel som gir mening for deg og klikk Bruk Divi Builder
deretter klikker du Begynn å bygge (Bygg fra bunnen av)
Etter det vil du ha et blankt lerret for å begynne å designe i Divi.
Del 1: Utforming av seksjonsoppsett
For å starte, lag en ny rad med to kolonner.
Seksjonsinnstillinger
Før du legger til moduler, åpne seksjonsinnstillingene og oppdater følgende:
- Bakgrunn: #ffffff
La oss legge til en seksjonsseparator
- Avdeler (øverst)
- Stil: se skjermbilde
- Farge: #ffffff
- Høyde: 5vw
- Avdeler (bunn)
- Stil: se fangst
- Farge: #ffffff
- Høyde: 5vw
- Polstring (øverst og bunn): 6vw
Bilde (før pekeren)
Legg til en ny bildemodul i venstre kolonne i raden med to kolonner.
Deretter laster du opp bildet du vil fremheve.
Under fanen utforming, oppdater justeringen og aktiver alternativet Styrke Full bredde.
- Bildejustering: sentrert
- Styrke Full bredde: JA
Bilde (ved pekeren eller etter klikk)
Deretter lager vi et nytt bilde som vi viser når vi holder musepekeren/klikker på en knapp.
Dupliser forrige bildemodul for å lage bildet.
Last deretter opp et nytt bilde. Bildet må ha samme størrelse som det andre bildet, da det vil erstatte det andre bildet ved hover/klikk.
For dette bildet vil vi gi det en absolutt posisjon. Dette vil føre til at bildet sitter rett over det andre bildet uten å ta opp noen reell plass på siden.
- Stilling: Absolutt
Under fanen utforming, endre opasiteten under filteralternativene slik at bildet er helt usynlig.
- Opasitet: 0 %
Legg til en tekstmodul
I høyre kolonne legger du til en ny tekstmodul.
Deretter limer du inn følgende HTML-kode i boksen innhold fra kroppen:
<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>
Merk at noen ord i teksten er omgitt av tagger span. Slik kan vi målrette og tilpasse disse ordene senere med tilpasset CSS.
Under fanen utforming, oppdater H3-stilalternativene som følger:
- Overskrift 3:
- Font: Montserrat
- Skriftvekt Skriftvekt: Ultrafet
- Stil: TT
- Tekststørrelse: 60 px (datamaskin og nettbrett), 40 px (telefon)
- Bokstavavstand: 0,06em
- Linjehøyde: 2 em
I den neste delen legger vi til knappen vi skal bruke for å sette i gang stilendringer.
Opprett en seksjon for knappen
Først må vi opprette en ny vanlig seksjon under den nåværende seksjonen.
Legg deretter til en rad i en kolonne i seksjonen.
Legg en knapp
Legg til en ny modul i kolonnen Button.
Endre knappeteksten til å lese "Fortsettelse...".
Bytt til fane utforming og oppdater knappdesignet som følger:
- Bruk egendefinerte stiler for knapp: JA
- Tekststørrelse: 16px
- Tekstfarge: #ffffff
- Knappebakgrunn (skrivebord): #4b4baf
- Knappbakgrunn (svev): #67ddc1
- Kantbredde: 0 piksler
Les også: Divi: Slik legger du til et hamburgerikon i menymodulen
- Knappens bokstavavstand: 4px
- Font: Montserrat
- Skriftvekt: Semi fet
- Knappskriftstil: TT
- Marg (bunn): 0px
- Polstring (øverst og bunn): 1.5em
- Polstring (venstre og høyre): 4em
Del 2: Legg til CSS-klasser til Elements
Nå som designet vårt er på plass, vil vi gjøre resten av designendringene ved å bruke tilpasset kode (CSS og JQuery).
Men før vi begynner å legge til vår egendefinerte kode, må vi legge til CSS-klasser til alle elementene vi ønsker å endre når vi hover/klikker på knappen.
Legg til en CSS-klasse i delen
For å legge til en CSS-klasse til seksjonen, åpne seksjonsinnstillingene og klikk på fanen Avansert. Skriv deretter inn følgende CSS-klasse:
- CSS-klasse: et-change-style_section
Legg til en CSS-klasse i bildemoduler
Deretter åpner du innstillingene for det første bildet i venstre kolonne og legger til følgende CSS-klasse:
- CSS-klasse: et-before-image
Dette vil være bildet som vil vises "før" sveving/klikk på knappen.
Bruk lagmodalen, åpne innstillingene for det andre bildet (det som er skjult med opasitetsfilteret) og legg til følgende CSS-klasse:
- CSS-klasse: et-etter-bilde
Dette vil være bildet som vises "etter" å holde musepekeren/klikke på knappen.
Legg til en CSS-klasse i tekstmodulen
Deretter legger du til følgende CSS-klasse i tekstmodulen i høyre kolonne:
- CSS-klasse: et-style-text
Legg til en CSS-klasse i Button-modulen
Til slutt, legg til en tilpasset CSS-klasse til knappen i den nederste delen som følger:
- CSS-klasse: et-toggle-knapp
Vi trenger denne klassen for å målrette mot knappen for hover/click-funksjonalitet i kode senere.
Del 3: Legg til egendefinert kode for å endre stiler ved å holde musepekeren eller klikke
Nå som alle våre CSS-klasser er på plass, kan vi legge til den nødvendige koden for å endre stilen til alle disse elementene når du holder musepekeren/klikker på knappen.
Legg til en kodemodul
For å legge til koden, legg til en kodemodul under knappen i den nederste delen.
Lim inn jQuery-koden
Deretter limer du inn følgende JQuery. Sørg for å pakke inn koden i skriptkoder når vi legger til koden i et HTML-dokument (ikke en JS-fil).
(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 );
Endre stilen på elementer med tilpasset CSS
Åpne kodemodulen og lim inn følgende tilpassede CSS over JQuery-skriptet, og pass på å pakke den inn i de nødvendige stiltaggene.
.et_pb_section.et-change-style_section.et-change-style_active {
background-color:#484db0 !important;
}
Deretter limer du inn følgende ekstra CSS i stiltaggene.
.et-change-style_active .et-after-image {
filter: opacity(100%);
}
.et-change-style_active .et-before-image {
filter: opacity(0%);
} 
Deretter limer du inn resten av CSS i stiltaggene:
.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;
}Disse CSS-snuttene bruker det samme konseptet for å endre stilen til elementet når delen (eller knappen) har den nye klassen.
Sluttresultat (oversikt)
Når koden er lagt til, lagre endringene og åpne siden for å se resultatet. Legg merke til hvordan elementene vi målretter mot endres når du holder musepekeren over knappen.
Endre stiler ved klikk
For å legge til klikkfunksjonalitet, erstatt gjeldende JQuery med følgende (igjen, sørg for at den er pakket inn i skriptkoder):
(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 );
Her er det endelige resultatet.
Last ned DIVI nå!!!
konklusjonen
Å kunne målrette og style flere elementer på en side når du holder musepekeren over eller klikker på noe er en nyttig ferdighet i webdesign.
Du kan bruke denne teknikken for en rekke brukstilfeller (før og etter, CTA, etc.)
Selvfølgelig hjelper det å kunne litt CSS og JS/JQuery. Men som du har sett i denne opplæringen, trenger du ikke dyp kodingskunnskap for å få fantastiske resultater!
Vi håper denne veiledningen vil inspirere deg til dine neste Divi-prosjekter. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.
Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
