Ønsker du at ændre stilen på flere elementer Divi på hover eller efter klik?
I denne vejledning viser vi dig, hvordan du ændrer stilen for flere elementer, når du svæver eller klikker ind Divi.
Først vil vi drage fordel af de indbyggede designmuligheder af Divi at designe et sektionslayout.
Dernæst vil vi præsentere et simpelt jQuery-uddrag, som du kan bruge i kombination med tilpasset CSS til at justere stilen for ethvert element i dette afsnit, når du holder musemarkøren over eller klikker på en knap.
Dette lyder måske kompliceret (især for begyndere), men du kan blive overrasket over, hvor nemt det er at gøre.
Lad os starte!
undersøgelse
Her er en kort oversigt over det design, vi vil opnå i denne tutorial.
Ændring af elementer ved knapsvævning
Ændring af elementerne efter klik på knappen
Lad os starte med at oprette en side med Divi Builder
Se også: Divi: Sådan opretter du en menu med drejehjul, når du svæver
Fra WordPress-dashboardet, gå til Sider> Tilføj nyt for at oprette en ny side.
Giv den en titel, der giver mening for dig, og klik Brug Divi Builder
klik derefter på Begynd at bygge (Byg fra skrammer)
Derefter har du et tomt lærred til at begynde at designe i Divi.
Del 1: Sektionslayoutdesign
For at starte skal du oprette en ny række med to kolonner.
Sektionsindstillinger
Før du tilføjer moduler, skal du åbne sektionsindstillingerne og opdatere følgende:
- Baggrund: #ffffff
Lad os tilføje en sektionsseparator
- Skillevæg (øverst)
- Stil: se skærmbillede
- Farve: #ffffff
- Højde: 5vw
- Skillevæg (bund)
- Stil: se optagelse
- Farve: #ffffff
- Højde: 5vw
- Polstring (top og bund): 6vw
Billede (før musemarkøren)
Tilføj et nyt billedmodul i venstre kolonne i rækken med to kolonner.
Upload derefter det billede, du vil fremhæve.
Under fanen Design, opdater justeringen og aktiver indstillingen Styrke Fuldbredde.
- Billedjustering: centreret
- Styrke Fuld bredde: JA
Billede (ved svæv eller efter klik)
Dernæst opretter vi et andet billede, som vi viser, når vi svæver/klikker på en knap.
For at oprette billedet skal du duplikere det forrige billedmodul.
Upload derefter et nyt billede. Billedet skal have samme størrelse som det andet billede, fordi det vil erstatte det andet billede ved at svæve/klik.
For dette billede vil vi give det en absolut position. Dette vil få billedet til at sidde direkte over det andet billede uden at optage nogen reel plads på siden.
- Stilling: Absolut
Under fanen Design, ændre opaciteten under filterindstillingerne, så billedet er helt usynligt.
- Opacitet: 0 %
Tilføj et tekstmodul
Tilføj et nyt tekstmodul i højre kolonne.
Indsæt derefter følgende HTML-kode i boksen indhold fra kroppen:
<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>
Bemærk, at nogle ord i teksten er omgivet af tags span. Sådan kan vi målrette og tilpasse disse ord senere med tilpasset CSS.
Under fanen Design, opdater H3-stilindstillingerne som følger:
- Overskrift 3:
- Skrifttype: Montserrat
- Skrifttypevægt Skrifttypevægt: Ultra fed
- Stil: TT
- Tekststørrelse: 60 px (computer og tablet), 40 px (telefon)
- Bogstavafstand: 0,06em
- Linjehøjde: 2 em
I det næste afsnit tilføjer vi den knap, vi skal bruge til at starte stilændringer.
Opret en sektion til knappen
Først skal vi oprette en ny almindelig sektion under den nuværende sektion.
Tilføj derefter en række til en kolonne i sektionen.
Tilføj en knap
Tilføj et nyt modul i kolonnen Button.
Skift knapteksten til at læse "Fortsat...".
Skift til fanen Design og opdater knapdesignet som følger:
- Brug brugerdefinerede stilarter til knap: JA
- Tekststørrelse: 16px
- Tekstfarve: #ffffff
- Knapbaggrund (skrivebord): #4b4baf
- Knapbaggrund (hover): #67ddc1
- Kantbredde: 0 pixels
Læs også: Divi: Sådan tilføjer du et hamburgerikon til menumodulet
- Knapbogstavafstand: 4px
- Skrifttype: Montserrat
- Skrifttypevægt: Semi fed
- Knap skrifttypestil: TT
- Margen (bund): 0px
- Polstring (top og bund): 1.5 em
- Polstring (venstre og højre): 4em
Del 2: Tilføj CSS-klasser til Elements
Nu hvor vores design er på plads, laver vi resten af designændringerne ved hjælp af tilpasset kode (CSS og JQuery).
Men før vi begynder at tilføje vores brugerdefinerede kode, skal vi tilføje CSS-klasser til alle de elementer, vi vil ændre, når vi svæver/klikker på knappen.
Tilføj en CSS-klasse til sektionen
For at tilføje en CSS-klasse til sektionen skal du åbne sektionsindstillingerne og klikke på fanen Avanceret. Indtast derefter følgende CSS-klasse:
- CSS-klasse: et-change-style_section
Tilføj en CSS-klasse til billedmoduler
Åbn derefter indstillingerne for det første billede i venstre kolonne og tilføj følgende CSS-klasse:
- CSS-klasse: et-before-image
Dette vil være det billede, der vil blive vist "før" du svæver/klikker på knappen.
Brug lagmodalen, åbn indstillingerne for det andet billede (det der er skjult med opacitetsfilteret) og tilføj følgende CSS-klasse:
- CSS-klasse: et-after-image
Dette vil være det billede, der vil blive vist "efter" at have svævet/klikket på knappen.
Tilføj en CSS-klasse til tekstmodulet
Tilføj derefter følgende CSS-klasse til tekstmodulet i højre kolonne:
- CSS-klasse: et-style-text
Tilføj en CSS-klasse til Button-modulet
Tilføj endelig en tilpasset CSS-klasse til knappen i den nederste sektion som følger:
- CSS-klasse: et-toggle-knap
Vi har brug for denne klasse til at målrette knappen for at hover/klik-funktionalitet i kode senere.
Del 3: Tilføj tilpasset kode for at ændre stilarter, når du svæver eller klikker
Nu hvor alle vores CSS-klasser er på plads, kan vi tilføje den nødvendige kode for at ændre stilen på alle disse elementer, når du svæver/klikker på knappen.
Tilføj et kodemodul
For at tilføje koden skal du tilføje et kodemodul under knappen i den nederste sektion.
Indsæt jQuery-koden
Indsæt derefter følgende JQuery. Sørg for at pakke koden ind i script-tags, da vi tilføjer koden til 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 );
Skift stilen på elementer med tilpasset CSS
Åbn kodemodulet, og indsæt følgende tilpassede CSS over JQuery-scriptet, og sørg for at pakke det ind i de nødvendige stiltags.
.et_pb_section.et-change-style_section.et-change-style_active {
background-color:#484db0 !important;
}
Indsæt derefter følgende ekstra CSS i style tags.
.et-change-style_active .et-after-image {
filter: opacity(100%);
}
.et-change-style_active .et-before-image {
filter: opacity(0%);
} 
Indsæt derefter resten af CSS'en i stiltagsene:
.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-uddrag bruger det samme koncept til at ændre elementets stil, når sektionen (eller knappen) har den nye klasse.
Slutresultat (oversigt)
Når koden er tilføjet, skal du gemme ændringerne og åbne siden for at se resultatet. Læg mærke til, hvordan de emner, vi målrettede mod, ændres, når du holder markøren over knappen.
Skift stilarter ved klik
For at tilføje klikfunktionalitet skal du erstatte den nuværende JQuery med følgende (igen, sørg for, at den er pakket ind i script-tags):
(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 resultat.
Download DIVI nu!!!
Konklusion
At være i stand til at målrette og style flere elementer på en side, når du holder musemarkøren over eller klikker på noget, er en nyttig færdighed i webdesign.
Du kan bruge denne teknik til en række forskellige brugssager (før og efter, CTA osv.)
Det hjælper selvfølgelig at kende lidt til CSS og JS/JQuery. Men som du har set i denne tutorial, behøver du ikke dyb kodningsviden for at få fantastiske resultater!
Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
