Divi: Så här ändrar du stilen på flera element när du håller muspekaren eller efter ett klick

ens Gaetan | Divi, Divi Tutorials

Vill du ändra stilen på flera element Divi på hover eller efter klick?

I den här handledningen kommer vi att visa dig hur du ändrar stilen för flera element när du håller muspekaren eller klickar in Divi. 

Först kommer vi att dra nytta av de inbyggda designalternativen för Divi att utforma en sektionslayout. 

Därefter kommer vi att presentera ett enkelt jQuery-utdrag som du kan använda i kombination med anpassad CSS för att justera stilen för alla element i det här avsnittet när du håller muspekaren över eller klickar på en knapp. 

Detta kan låta komplicerat (särskilt för nybörjare), men du kan bli förvånad över hur enkelt det är att göra.

Låt oss börja!

undersökningen

Här är en kort översikt över designen som vi kommer att uppnå i denna handledning.

Ändra element på knappen svävar

ändra stilen på flera Divi-element när du håller muspekaren eller efter ett klick

Ändring av elementen efter att ha klickat på knappen

ändra stilen på flera Divi-element när du håller muspekaren eller efter ett klick

Låt oss börja med att skapa en sida med Divi Builder

Se även: Divi: Hur man skapar en meny med snurrande hjul när du svävar

Från WordPress-instrumentpanelen, gå till Sidor> Lägg till nytt för att skapa en ny sida.

Divi-linjer konverterade till flikar

Ge den en titel som är vettig för dig och klicka Använd Divi Builder

klicka sedan på Börja bygga (Bygg från grunden)

Divi-linjer konverterade till flikar

Efter det har du en tom duk för att börja designa i Divi.

Del 1: Design av sektionslayout

För att börja skapa en ny rad med två kolumner.

Avsnitt inställningar

Innan du lägger till moduler, öppna avsnittsinställningarna och uppdatera följande:

  • Bakgrund: #ffffff

Låt oss lägga till en sektionsavgränsare

  • Avdelare (överst)
    • Stil: se skärmdump
    • Färg: #ffffff
    • Höjd: 5vw
  • Avdelare (botten)
    • Stil: se fånga
    • Färg: #ffffff
    • Höjd: 5vw
    • Stoppning (topp och botten): 6vw

Bild (före pekaren)

Lägg till en ny bildmodul i den vänstra kolumnen på raden med två kolumner.

Ladda sedan upp bilden du vill markera. 

Under fliken Designa, uppdatera justeringen och aktivera alternativet Styrka Fullbredd.

  • Bildjustering: centrerad
  • Styrka Fullbredd: JA

Bild (med muspekaren eller efter klick)

Därefter skapar vi en annan bild som vi visar när vi svävar/klickar på en knapp.

För att skapa bilden, duplicera föregående bildmodul.

Ladda sedan upp en ny bild. Bilden måste ha samma storlek som den andra bilden eftersom den kommer att ersätta den andra bilden vid hovring/klick.

För den här bilden kommer vi att ge den en absolut position. Detta gör att bilden sitter direkt ovanför den andra bilden utan att ta upp någon verklig plats på sidan.

  • Position: Absolut

Under fliken Designa, ändra opaciteten under filteralternativen så att bilden är helt osynlig.

  • Opacitet: 0 %

Lägg till en textmodul

Lägg till en ny textmodul i den högra kolumnen.

Klistra sedan in följande HTML-kod i rutan innehåll från kroppen:

<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>

Observera att vissa ord i texten är omgivna av taggar span. Så här kan vi rikta in och anpassa dessa ord senare med anpassad CSS.

Under fliken Designa, uppdatera H3-stilalternativen enligt följande:

  • Rubrik 3:
    • Typsnitt: Montserrat
    • Teckensnittsvikt Teckensnittsvikt: Ultrafet
    • Stil: TT
    • Textstorlek: 60 px (dator och surfplatta), 40 px (telefon)
    • Bokstavsavstånd: 0,06 em
    • Linjehöjd: 2 em

I nästa avsnitt lägger vi till knappen vi använder för att initiera stiländringar.

Skapa en sektion för knappen

Först måste vi skapa en ny vanlig sektion under den nuvarande sektionen.

Lägg sedan till en rad i en kolumn i sektionen.

Lägg till en knapp

Lägg till en ny modul i kolumnen Knappen.

Ändra knapptexten till "Fortsättning...".

Byt till flik Designa och uppdatera knappdesignen enligt följande:

  • Använd anpassade stilar för knapp: JA
  • Textstorlek: 16px
  • Textfärg: #ffffff
  • Knappbakgrund (skrivbord): #4b4baf
  • Knappbakgrund (hovra): #67ddc1
  • Kantbredd: 0 pixlar

Läs också: Divi: Hur man lägger till en hamburgerikon till menymodulen

  • Knappbokstavsavstånd: 4px
  • Typsnitt: Montserrat
  • Teckensnittsvikt: Halvfet
  • Knapp teckensnitt: TT
  • Marginal (botten): 0px
  • Vaddering (topp och botten): 1.5 em
  • Vaddering (vänster och höger): 4em

Del 2: Lägg till CSS-klasser till Elements

Nu när vår design är på plats kommer vi att göra resten av designändringarna med hjälp av anpassad kod (CSS och JQuery).

Men innan vi börjar lägga till vår anpassade kod måste vi lägga till CSS-klasser till alla element vi vill ändra när vi hovrar/klickar på knappen.

Lägg till en CSS-klass i avsnittet

För att lägga till en CSS-klass till sektionen, öppna sektionsinställningarna och klicka på fliken Advanced Open water. Ange sedan följande CSS-klass:

  • CSS-klass: et-change-style_section

Lägg till en CSS-klass till bildmoduler

Öppna sedan inställningarna för den första bilden i den vänstra kolumnen och lägg till följande CSS-klass:

  • CSS-klass: et-before-image

Detta kommer att vara bilden som kommer att visas "innan" du håller muspekaren/klicket på knappen.

Använd lagermodalen, öppna inställningarna för den andra bilden (den som är gömd med opacitetsfiltret) och lägg till följande CSS-klass:

  • CSS-klass: et-after-image

Detta kommer att vara bilden som kommer att visas "efter" att ha svävat/klickat på knappen.

Lägg till en CSS-klass i textmodulen

Lägg sedan till följande CSS-klass i textmodulen i den högra kolumnen:

  • CSS-klass: et-style-text

Lägg till en CSS-klass till Button-modulen

Lägg slutligen till en anpassad CSS-klass till knappen i det nedre avsnittet enligt följande:

  • CSS-klass: et-toggle-knapp

Vi behöver den här klassen för att rikta in knappen för hover/click-funktionalitet i kod senare.

Del 3: Lägg till anpassad kod för att ändra stilar när du håller muspekaren eller klickar

Nu när alla våra CSS-klasser är på plats kan vi lägga till den nödvändiga koden för att ändra stilen på alla dessa element när du håller muspekaren/klickar på knappen.

Lägg till en kodmodul

För att lägga till koden, lägg till en kodmodul under knappen i den nedre delen.

Klistra in jQuery-koden

Klistra sedan in följande JQuery. Se till att linda in koden i skripttaggar när vi lägger till koden i ett HTML-dokument (inte 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 );

Ändra stilen på element med anpassad CSS

Öppna kodmodulen och klistra in följande anpassade CSS ovanför JQuery-skriptet, se till att linda in det i de nödvändiga stiltaggarna.

.et_pb_section.et-change-style_section.et-change-style_active {
  background-color:#484db0 !important;
}

Klistra sedan in följande ytterligare CSS i stiltaggarna.

.et-change-style_active .et-after-image {
  filter: opacity(100%);
}
.et-change-style_active .et-before-image {
  filter: opacity(0%);
}

Klistra sedan in resten av CSS i stiltaggarna:

.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;
}

Dessa CSS-snuttar använder samma koncept för att ändra stilen på elementet när avsnittet (eller knappen) har den nya klassen.

Divi-element på svävaren

Slutresultat (översikt)

När koden har lagts till sparar du ändringarna och öppnar sidan för att se resultatet. Lägg märke till hur objekten vi riktade in dig på ändras när du håller muspekaren över knappen.

ändra utseendet på flera Divi-element när du håller muspekaren eller efter ett klick

Ändra stilar vid klick

För att lägga till klickfunktionalitet, ersätt den nuvarande JQuery med följande (igen, se till att den är insvept i skripttaggar):

(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 );

Här är det slutliga resultatet.

ändra stilen på flera Divi-element när du håller muspekaren eller efter ett klick

Ladda ner DIVI nu!!!

Slutsats

Att kunna rikta och styla flera element på en sida när du håller muspekaren över eller klickar på något är en användbar färdighet i webbdesign. 

Du kan använda den här tekniken för en mängd olika användningsfall (före och efter, CTA, etc.)

Självklart hjälper det att känna till lite CSS och JS/JQuery. Men som du har sett i den här handledningen behöver du ingen djup kodningskunskap för att få fantastiska resultat!

Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.

Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.

Poster le commentaire

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.