De ingebouwde transformatie-opties van Divi hebben bewezen een uiterst nuttige ontwerptool te zijn, waarmee u elk element op een pagina gemakkelijk kunt verkleinen, roteren, scheeftrekken of positioneren. En je kunt er zelfs voor kiezen om items in een zweeftoestand te veranderen voor geweldige zweefeffecten. Daarom laten we u vandaag zien hoe u deze animaties met één klik kunt implementeren.

Deze methode vereist het gebruik van jQuery. Het mooie van deze techniek is dat je de ingebouwde ontwerpparameters van kunt gebruiken Divi om transformatie-eigenschappen op te maken en vervolgens deze transformatie-eigenschappen in te schakelen (of uit te schakelen) met een muisklik. Dit opent een heleboel unieke mogelijkheden om te onthullen inhoud verborgen door items te verplaatsen door te klikken in plaats van te zweven. En het helpt ook de noodzaak om veel CSS te kennen te verminderen.

Laten we beginnen.

Wat je nodig hebt om te beginnen

Voor deze tutorial heb je alleen maar nodig Divi. Ga om te beginnen naar uw WordPress-dashboard. Maak een nieuwe pagina aan, geef je pagina een titel en ga verder met ontwerpen op de Divi builder op de voorgrond. Selecteer de optie ‘Vanaf nul opbouwen’. Nu ben je klaar om te gaan!

Het basisidee uitgelegd

Voordat ik in deze tutorial te gedetailleerd inga, zal ik u in een paar woorden uitleggen hoe deze techniek werkt.

Elke keer dat u een element (sectie, regel of module) in Divi aanpast, voegt u aangepaste CSS toe aan dit element op de achtergrond. Als u bijvoorbeeld de ingebouwde instellingen van Divi gebruikt, kunt u een eigenschap voor transformatierotatie aan een blurb-module toevoegen, zodat deze de module 20 graden langs de Z-as roteert.

Blurb divi-instellingen

Maar achter de schermen maakt u een aangepaste CSS die aan deze tekstmodule wordt toegevoegd en er als volgt uitziet:

.et_pb_text_0 {transform: rotateZ (20deg); }

Simpel genoeg. En laten we zeggen dat je diezelfde hover-transformatieoptie wilde toevoegen. U hoeft alleen de transformatie-eigenschap voor de zweeftoestand toe te passen in de instellingen van Divi Builder.

Divi hover-animatie

En de code ziet er achter de schermen ongeveer zo uit:

.et_pb_text_0: hover {transform: rotateZ (20deg); }

Als u de eigenschap transform bij klikken echter wilt implementeren, moet het iets anders werken. U moet een javascript-code invoeren om een ​​klikgebeurtenis op het element (of tekstmodule) te activeren.

Met ons huidige voorbeeld is ons belangrijkste doel in feite om de transformatie-eigenschap "transform: rotateZ (20deg)" bij klikken in en uit te schakelen. Een gemakkelijke manier om dit te doen is door een aangepaste CSS-klasse te maken met de eigenschap "transformer: none!" Belangrijk ”in de pagina (of externe stijlpagina) instellingen. Het zou er ongeveer zo uitzien.

.toggle-transform-animation {transform: none! important; }

Parameters van de divi-pagina

Met die CSS op zijn plaats. We kunnen de CSS-klasse "toggle-transform-animation" toevoegen aan het blurb-module-element dat onze transformatie-eigenschap heeft.

Samenvatting van parameters

Hierdoor wordt de eigenschap transform uitgeschakeld (overschreven) en wordt voorkomen dat deze in eerste instantie wordt geactiveerd, zelfs als de stijl van de eigenschap transform al eraan is toegevoegd.

Nu hoef je alleen nog maar deze aangepaste CSS-klasse te activeren (toevoegen en verwijderen) wanneer je op het element klikt. Dus elke keer dat we op het element klikken, wordt de klasse verwijderd en worden de transformatie-eigenschappen (degene die je met Divi hebt toegevoegd) geïmplementeerd.

Hier is een eenvoudig voorbeeld van hoe u dit kunt doen. Voeg eerst een andere CSS-klasse toe aan de blurb-module met de naam "transform_target".

Divi Transform Properties op Click

Ga vervolgens naar Divi > Themaopties > Integratie en voeg het volgende jQuery-script toe aan de kop van jouw blog:

jQuery(document).ready(function() { 
    jQuery('.transform_target').click(function(){
        jQuery(this).toggleClass('toggle-transform-animation');
    }); 
});

Voeg divi-integratie sectie toe

Dat is alles ! Elke keer dat u nu op de presentatiemodule klikt, wordt de transformatie-eigenschap die u aan de presentatie in Divi hebt toegevoegd, geactiveerd of gedeactiveerd.

Animatie-opname

Laten we nu een voorbeeld maken, zodat u kunt zien hoe dit nuttig kan zijn voor uw eigen projecten.

Hoe transformatie-eigenschappen in te schakelen op Klik om inhoud in Divi weer te geven

Voor dit voorbeeld houden we het bij een eenvoudig voorbeeld dat hierboven is gebruikt. Vervolgens gaan we hier nog een extra tekst aan toevoegen, zodat wanneer u op de bovenste tekst klikt, deze uit de weg gaat en de tekst zichtbaar wordt. inhoud extra tekst achter het document.

Blurb-modules voor en achter maken

Voeg vervolgens een presentatiemodule toe aan de 1-kolom.

Moduleren divi samenvattingUpdate de inhoud verberg tekst om alleen een titel op te nemen (verwijder de standaard hoofdtekst) en voeg vervolgens een achtergrondtekstpictogram toe.

Pas de Divi-overzichtsmodule aanWerk vervolgens de ontwerpparameters als volgt bij:

Achtergrondkleur: #4c5866
Pictogramkleur: #ffffff
Oriëntatie van tekst: midden
Tekstkleur
: Lichtgewicht aangepaste marge: 0px onderaan
Aangepaste opvulling: 15% bovenaan, 15% onderaan, 10% links, 10% rechts

Wijzig de afstand tussen de divi-modules

We zullen later op deze module terugkomen, maar voor nu moeten we onze tweede Blurb-module maken die zal dienen als een "retour" -module met extra inhoud.

Om dit te doen, dupliceert u de zojuist gemaakte presentatiemodule.

Dubbele divi-overzichtsmodule

Verwijder vervolgens in de tweede module het presentatiepictogram (en de standaardafbeelding) en voeg lichaamsinhoud weer toe aan de module. Werk vervolgens de ontwerpparameters als volgt bij:

Achtergrondkleur: rgba (76,88,102,0.3)
Tekstkleur: zwart
Aangepaste opvulling: 20% bovenaan

Wijzig het divi-lettertype en de achtergrond

Plaats de module vóór Samenvatting

Nu onze twee blurbs gestileerd zijn, moeten we teruggaan naar onze voorste (bovenste) blurb en deze boven de achterste (onderste) blurb plaatsen. Om dit te doen, geven we het een absolute positie met een hoogte van 100% en een breedte van 100%.

Open eerst de instellingen van de bovenste / voorste presentatiemodule en werk het volgende bij:

hoogte: 100%;
breedte: 100%;

Divi Transform Properties op Click

Voeg vervolgens de volgende aangepaste CSS-code toe aan het hoofdelement:

positie: absoluut! belangrijk; overgang: alle .5s;

Werk vervolgens de z-index als volgt bij:

Z-index: 2000

Pas de CSS Divi-module aan

De absolute positie, gecombineerd met 100% hoogte en breedte en de z-index, zorgt ervoor dat de blurb-module bovenop de blurb-module erachter blijft. De transitie-eigenschap is in feite de duur van de transitie van de transformatie-opties die we bij de volgende klik zullen inzetten. En de "cursor: pointer" is om de cursor te veranderen zodat het element klikbaar lijkt voor de gebruiker.

Transformatie-opties en aangepaste klassen toevoegen aan de voorzijde

Dit is het moment om onze transformatie-eigenschappen toe te voegen aan de voorste blurb. We zullen dan de aangepaste CSS-klassen toevoegen die nodig zijn voor onze jQuery om deze eigenschappen bij klikken in te schakelen.

Voeg onder de parameters voor het ontwerp van de voorste afbeelding toe:

X- en y-transformatieschaal: 20%

Divi-transformatie

Transformeer oorsprong: midden bovenaan

Wijziging transformatie divi

Onthoud dat het transformatieontwerp dat u op dit punt ziet, het ontwerp is dat wordt geactiveerd bij een klik. We maken gewoon gebruik van de Divi-bouwer om het gewenste ontwerp te verkrijgen. In dit geval trekt de voorste blurb samen en wordt bovenaan gecentreerd als een klikbaar pictogram.

Als je klaar bent, voeg je de twee CSS-klassen toe die nodig zijn om de frontblurb met jQuery als volgt te richten:

CSS-klasse: toggle-transform-animation transform_target

(zorg ervoor dat elke klassenaam wordt gescheiden door een spatie)

Divi Transform Properties op Click

Voeg vervolgens het volgende aangepaste CSS-codefragment toe dat zal worden gebruikt om transformatie-eigenschappen met jQuery in en uit te schakelen.

.toggle-transform-animation {transform: none! belangrijk; }

Divi-pagina-instellingenU zult merken dat de eerder toegevoegde blurb-transformatie-eigenschappen zijn uitgeschakeld omdat deze klasse erop is toegepast.

Ga nu naar Divi> Thema-opties> Integratie en voeg het volgende jQuery-script toe aan het hoofd van de blog:

jQuery(document).ready(function() { 
    jQuery('.transform_target').click(function(){
        jQuery(this).toggleClass('toggle-transform-animation');
    }); 
});

Voeg divi-integratie sectie toe

Laten we het eindresultaat bekijken.

Animatie divi module blurb

U kunt dit voorbeeld gebruiken om nog indrukwekkender ontwerpen te maken. Aarzel niet om uw mening te geven in het opmerkingengedeelte.