Divi: de stijl van verschillende elementen wijzigen tijdens het zweven of na een klik

Wilt u de stijl van verschillende elementen wijzigen? Divi bij hover of na klikken?

In deze zelfstudie laten we u zien hoe u de stijl van meerdere elementen kunt wijzigen door te zweven of in te klikken Divi. 

Ten eerste zullen we profiteren van de ingebouwde ontwerpopties van Divi een sectie-indeling ontwerpen. 

Vervolgens presenteren we een eenvoudig jQuery-fragment dat u kunt gebruiken in combinatie met aangepaste CSS om de stijl van elk element in deze sectie aan te passen wanneer u de muisaanwijzer over of op een knop klikt. 

Dit klinkt misschien ingewikkeld (vooral voor beginners), maar je zult er misschien versteld van staan ​​​​hoe eenvoudig het is om te doen.

Laten we beginnen!

overzicht

Hier is een kort overzicht van het ontwerp dat we in deze tutorial zullen bereiken.

Elementen wijzigen bij de muisaanwijzer

Wijziging van de elementen na het klikken op de knop

Laten we beginnen met het maken van een pagina met Divi Builder

Zie ook: Divi: Hoe maak je een draaiend wiel-menu in hover

Ga vanuit het WordPress-dashboard naar Pagina's> Nieuwe toevoegen om een ​​nieuwe pagina te maken.

Geef het een titel die voor jou logisch is en klik op Gebruik Divi Builder

klik vervolgens op Begin met bouwen (Bouw vanaf het begin)

Daarna heb je een leeg canvas om te beginnen met ontwerpen in Divi.

Deel 1: Ontwerp van sectielay-out

Maak om te beginnen een nieuwe rij met twee kolommen.

Sectie-instellingen

Voordat u modules toevoegt, opent u de sectie-instellingen en werkt u het volgende bij:

• Achtergrond: #ffffff

Laten we een sectiescheidingsteken toevoegen

• Verdeler (Boven)
  • Stijl: zie screenshot
  • Kleur: #ffffff
  • Hoogte: 5vw

• Verdeler (onder)
  • Stijl: zie opname
  • Kleur: #ffffff
  • Hoogte: 5vw
  • Vulling (boven en onder): 6vw

Afbeelding (vóór zweven)

Voeg in de linkerkolom van de rij met twee kolommen een nieuwe afbeeldingsmodule toe.

Upload vervolgens de afbeelding die u wilt markeren. 

Onder het tabblad Design, werk de uitlijning bij en schakel de optie in Kracht volledige breedte.

• Afbeelding uitlijning: gecentreerd
• Sterkte volledige breedte: JA

Afbeelding (bij hover of na klik)

Vervolgens maken we nog een afbeelding die we weergeven als we met de muisaanwijzer op een knop klikken.

Om de afbeelding te maken, dupliceert u de vorige afbeeldingsmodule.

Upload dan een nieuwe afbeelding. De afbeelding moet dezelfde grootte hebben als de andere afbeelding, aangezien deze de andere afbeelding zal vervangen bij muisaanwijzer/klik.

Voor deze afbeelding geven we deze een absolute positie. Hierdoor komt de afbeelding direct boven de andere afbeelding te staan, zonder dat het echt ruimte op de pagina in beslag neemt.

• Positie: Absoluut

Onder het tabblad Design, verander de dekking onder de filteropties zodat de afbeelding volledig onzichtbaar is.

• dekking: 0%

Een tekstmodule toevoegen

Voeg in de rechterkolom een ​​nieuwe tekstmodule toe.

Plak vervolgens de volgende HTML-code in het vak inhoud uit het lichaam:

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

Merk op dat sommige woorden in de tekst omgeven zijn door tags span. Dit is hoe we deze woorden later kunnen targeten en aanpassen met aangepaste CSS.

Onder het tabblad Design, werk de H3-stijlopties als volgt bij:

• Rubriek 3:
  • Lettertype: Montserrat
  • Lettergewicht Lettergewicht: Ultra Bold
  • Stijl: TT
  • Tekstgrootte: 60 px (computer en tablet), 40 px (telefoon)
  • Letterafstand: 0,06em
  • Lijnhoogte: 2 em

In de volgende sectie voegen we de knop toe die we zullen gebruiken om stijlwijzigingen te starten.

Maak een sectie voor de knop

Eerst moeten we een nieuwe reguliere sectie maken onder de huidige sectie.

Voeg vervolgens een rij toe aan een kolom van de sectie.

Voeg een knop

Voeg in de kolom een ​​nieuwe module toe Knop.

Verander de knoptekst om "Vervolg..." te lezen.

Overschakelen naar tabblad Design en werk het knopontwerp als volgt bij:

• Gebruik aangepaste stijlen voor knop: JA
• Tekstgrootte: 16px
• Tekstkleur: #ffffff
• Knopachtergrond (bureaublad): #4b4baf
• Knop Backround (Hover): #67ddc1
• Randbreedte: 0 pixels

Lees ook: Divi: Hoe voeg ik een hamburger icoon toe aan de Menu module

• Knop Letterafstand: 4px
• Lettertype: Montserrat
• Lettergewicht: Semi Vet
• Knop Lettertypestijl: TT

• Marge (onder): 0px
• Vulling (boven en onder): 1.5em
• Vulling (links en rechts): 4em

Deel 2: CSS-klassen toevoegen aan elementen

Nu ons ontwerp klaar is, gaan we de rest van de ontwerpwijzigingen doorvoeren met aangepaste code (CSS en JQuery).

Maar voordat we beginnen met het toevoegen van onze aangepaste code, moeten we CSS-klassen toevoegen aan alle elementen die we willen wijzigen wanneer we de muisaanwijzer/klik op de knop.

Voeg een CSS-klasse toe aan de sectie

Om een ​​CSS-klasse aan de sectie toe te voegen, open je de sectie-instellingen en klik je op het tabblad Geavanceerd. Voer vervolgens de volgende CSS-klasse in:

• CSS-klasse: et-change-style_section

Een CSS-klasse toevoegen aan Afbeeldingsmodules

Open vervolgens de instellingen voor de eerste afbeelding in de linkerkolom en voeg de volgende CSS-klasse toe:

• CSS-klasse: et-before-image

Dit is de afbeelding die wordt weergegeven "vóór" de muisaanwijzer/klik op de knop.

Gebruik de laagmodaal, open de instellingen voor de tweede afbeelding (degene die verborgen is met het dekkingsfilter) en voeg de volgende CSS-klasse toe:

• CSS-klasse: et-na-afbeelding

Dit is de afbeelding die wordt weergegeven "na" zweven / klikken op de knop.

Een CSS-klasse toevoegen aan de tekstmodule

Voeg vervolgens de volgende CSS-klasse toe aan de tekstmodule in de rechterkolom:

• CSS-klasse: et-style-text

Een CSS-klasse toevoegen aan de Button-module

Voeg ten slotte als volgt een aangepaste CSS-klasse toe aan de knop in het onderste gedeelte:

• CSS-klasse: et-toggle-knop

We hebben deze klasse nodig om de knop voor hover/click-functionaliteit in code later te targeten.

Deel 3: Aangepaste code toevoegen om stijlen te wijzigen bij muisaanwijzer of klik

Nu al onze CSS-klassen aanwezig zijn, kunnen we de nodige code toevoegen om de stijl van al deze elementen te wijzigen wanneer u de muisaanwijzer/klikt op de knop.

Een codemodule toevoegen

Om de code toe te voegen, voegt u een codemodule toe onder de knop in het onderste gedeelte.

Plak de jQuery-code

Plak vervolgens de volgende JQuery. Zorg ervoor dat u de code in scripttags plaatst terwijl we de code toevoegen aan een HTML-document (geen JS-bestand).

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

De stijl van elementen wijzigen met aangepaste CSS

Open de codemodule en plak de volgende aangepaste CSS boven het JQuery-script, en zorg ervoor dat u deze in de benodigde stijltags plaatst.

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

Plak vervolgens de volgende aanvullende CSS in de stijltags.

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

Plak vervolgens de rest van de CSS in de stijltags:

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

Deze CSS-fragmenten gebruiken hetzelfde concept om de stijl van het element te wijzigen wanneer de sectie (of knop) de nieuwe klasse heeft.

Eindresultaat (overzicht)

Nadat de code is toegevoegd, slaat u de wijzigingen op en opent u de pagina om het resultaat te bekijken. Merk op hoe de items die we hebben getarget, veranderen wanneer u de muisaanwijzer op de knop plaatst.

Stijlen wijzigen bij klikken

Om klikfunctionaliteit toe te voegen, vervangt u de huidige JQuery door het volgende (zorg er nogmaals voor dat deze is ingepakt in scripttags):

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

Hier is het eindresultaat.

Download DIVI nu!!!

Conclusie

Het is een handige vaardigheid in webdesign om meerdere elementen op een pagina te kunnen targeten en stylen wanneer u de muisaanwijzer op iets plaatst of erop klikt. 

U kunt deze techniek voor verschillende gebruikssituaties gebruiken (voor en na, CTA, enz.)

Natuurlijk helpt het om een ​​beetje CSS en JS/JQuery te kennen. Maar zoals je in deze tutorial hebt gezien, heb je geen diepgaande codeerkennis nodig om verbluffende resultaten te krijgen!

We hopen dat deze tutorial je zal inspireren voor je volgende Divi-projecten. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.

U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.

Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.

...