Divi: Det beste WordPress-temaet hele tiden!

mer 901.000 nedlastinger, Divi er det mest populære WordPress-temaet i verden. Den er komplett, enkel å bruke og leveres med mer enn 62 gratis maler.

Ø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 Divis innebygde designalternativer for å designe en seksjonslayout. 

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

endre stilen til flere Divi-elementer ved å holde musepekeren eller etter et klikk

Endring av elementene etter å ha klikket på knappen

endre stilen til flere Divi-elementer ved å holde musepekeren eller etter et klikk

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.

Divi-linjer konvertert til faner

Gi den en tittel som gir mening for deg og klikk Bruk Divi Builder

deretter klikker du Begynn å bygge (Bygg fra bunnen av)

Divi-linjer konvertert til faner

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.

Opprett enkelt nettstedet ditt med Elementor

Elementor lar deg lage Enkelt og gratis ethvert nettsted eller bloggdesign med et profesjonelt utseende. Slutt å betale mye for et nettsted du kan gjøre selv.

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 hovedinnholdsområdet:

<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:

Oppdag de beste verktøyene for nettstedet ditt

Last ned de beste pluginene og WordPress-temaene på Envato, og lag ditt nettsted enkelt. Allerede mer enn 49.720.000 nedlastinger. [EKSKLUSIV]

  • 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.

Divi-elementer på hover

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 utseendet til flere Divi-elementer ved å holde musepekeren eller etter et klikk

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.

endre stilen til flere Divi-elementer ved å holde musepekeren eller etter et klikk

Last ned DIVI nå!!!

konklusjonen

Over 11 millioner verktøy å laste ned

Envato Elements tilbyr de beste ressursene for å lage og utvikle alle aspekter av nettstedet ditt. Du vil finne millioner av WordPress-maler, grafikk, lydressurser og mye mer. Perfekt for nybegynnere.

Å 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.

...

%d bloggere liker denne siden: