De inbyggda transformationsalternativen av Divi har visat sig vara ett extremt användbart designverktyg som låter dig ändra storlek, rotera, snedställa eller placera vilket element som helst på en sida med lätthet. Och du kan till och med välja att förvandla objekt till hovringsläge för fantastiska hoveffekter. Så idag ska vi visa dig hur du distribuerar dessa animationer med ett klick.

Denna metod kräver användning av jQuery. Det fina med denna teknik är att du kan använda de inbyggda designparametrarna för Divi för att utforma transformeringsegenskaper, aktivera (eller inaktivera) sedan dessa transformeringsegenskaper med ett musklick. Detta kommer att öppna upp massor av unika möjligheter att avslöja innehåll döljs genom att flytta objekt på klick snarare än att hålla muspekaren. Och det hjälper också till att minska behovet av att kunna mycket CSS.

Låt oss börja.

Vad du behöver för att komma igång

För den här handledningen är allt du behöver Divi. För att komma igång, gå till din WordPress-instrumentpanel. Skapa en ny sida, ge din sida en titel och fortsätt designa på Divi-byggaren i förgrunden. Välj alternativet "Bygg från grunden". Nu är du redo att gå!

Grundidén förklarad

Innan jag går in för mycket i denna handledning, går jag igenom hur den här tekniken fungerar med några ord.

Varje gång du anpassar ett element (avsnitt, rad eller modul) i Divi lägger du till anpassad CSS till detta element i bakgrunden. Med Divis inbyggda inställningar kan du till exempel lägga till en transformeringsrotationsegenskap i en blurb-modul så att den roterar modulen längs Z-axeln med 20 grader.

Blurb divi-inställningar

Men bakom kulisserna skapar du en anpassad CSS som läggs till i denna textmodul och ser ut så här:

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

Enkelt nog. Och låt oss säga att du ville lägga till samma alternativ för svävtransformation. Du behöver bara använda transform-egenskapen för svävarläget i inställningarna för Divi Builder.

Divi sväva animation

Och koden kommer att se ut så här bakom kulisserna:

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

Men om du vill distribuera transform-egenskapen vid klick måste sakerna fungera lite annorlunda. Du måste ange en javaskriptkod för att utlösa en klickhändelse på elementet (eller textmodulen).

Med vårt nuvarande exempel är vårt huvudmål i princip att aktivera och inaktivera transformegenskapen "transform: rotateZ (20deg)" vid klick. Ett enkelt sätt att göra detta är att skapa en anpassad CSS-klass med egenskapen "transformator: ingen!" Viktigt ”i inställningarna för sidan (eller externt formatmall). Det skulle se ut så här.

.toggle-transform-animation {transform: ingen! viktig; }

Parametrar för divisidan

Med den CSS på plats. Vi kan lägga till CSS-klassen "toggle-transform-animation" till blurb-modulelementet som har vår transformegenskap.

Sammanfattning av parametrar

Detta kommer att inaktivera (åsidosätta) transform-egenskapen och förhindra att den aktiveras initialt även om transform-egenskapens stil redan har lagts till den.

Nu är allt du behöver göra att aktivera (lägga till och ta bort) den här anpassade CSS-klassen när du klickar på elementet. Så varje gång vi klickar på elementet kommer klassen att tas bort och transformationsegenskaperna (de du lagt till med Divi) kommer att distribueras.

Här är ett enkelt exempel på hur du gör detta. Lägg först till en annan CSS-klass i blurb-modulen med namnet "transform_target".

Divi Transform Properties på Click

Gå sedan till Divi > Temaalternativ > Integration och lägg till följande jQuery-skript till huvudet på din blogg:

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

Lägg till divi-integrationsavsnitt

Det är allt ! Nu, varje gång du klickar på presentationsmodulen aktiveras eller inaktiveras transformegenskapen som du lade till presentationen i Divi.

Animationsskott

Låt oss nu bygga ett exempel så att du kan se hur det kan vara användbart för dina egna projekt.

Så byter du transformationsegenskaper på Klicka för att visa innehåll i Divi

För det här exemplet håller vi oss till ett enkelt blurb-exempel som används ovan. Därefter kommer vi att lägga till ytterligare blurb bakom detta så att när du klickar på den översta blurb, kommer den att flytta sig ur vägen för att avslöja innehåll ytterligare blurb som sitter bakom dokumentet.

Skapa Blurb-moduler fram och bak

Lägg sedan till en presentationsmodul i 1-kolumnen.

Modulera divi sammanfattningUppdatera innehåll blurb för att bara inkludera en titel (ta bort standardbrödinnehållet), lägg sedan till en blurb-ikon.

Anpassa divi-sammanfattningsmodulenUppdatera sedan designparametrarna enligt följande:

Bakgrundsfärg: #4c5866
Ikonfärg: #ffffff
Orientering av text: centrum
Textfärg
: Lätt anpassad marginal: 0px längst ner
Anpassad stoppning: 15% längst upp, 15% längst ner, 10% till vänster, 10% till höger

Ändra avståndet mellan divimodulerna

Vi kommer tillbaka till den här modulen senare, men för nu måste vi skapa vår andra Blurb-modul som kommer att fungera som en "retur" -modul med ytterligare innehåll.

Du gör detta genom att duplicera presentationsmodulen du just skapade.

Duplicera divi-sammanfattningsmodul

Ta sedan bort presentationsikonen (och standardbilden) på den andra modulen och lägg till kroppsinnehåll tillbaka till modulen. Uppdatera sedan designparametrarna enligt följande:

Bakgrundsfärg: rgba (76,88,102,0.3)
Textfärg: Svart
Anpassad stoppning: 20% topp

Ändra divi-teckensnitt och bakgrund

Placera modulen före sammanfattningen

Nu när våra två oskärpa är utformade måste vi gå tillbaka till vår främre (övre) blurb och placera den ovanför den bakre (nedre) blurben. För att göra detta kommer vi att ge det en absolut position med en höjd på 100% och en bredd på 100%.

Öppna först inställningarna för modulen för övre / främre presentation och uppdatera följande:

höjd: 100%;
bredd: 100%;

Divi Transform Properties på Click

Lägg sedan till följande anpassade CSS-kod till huvudelementet:

position: absolut! viktigt; övergång: alla .5s;

Uppdatera sedan z-index enligt följande:

Z-index: 2000

Anpassa css divi-modul

Det absoluta läget, kombinerat med 100% höjd och bredd och z-index, säkerställer att blurb-modulen förblir ovanpå blurb-modulen bakom den. Övergångsegenskapen är faktiskt varaktigheten för övergången av transformationsalternativen som vi kommer att distribuera vid nästa klick. Och ”markören: pekaren” är att ändra markören så att elementet visas klickbart för användaren.

Lägga till transformationsalternativ och anpassade klasser på framsidan

Nu är det dags att lägga till våra transformeringsegenskaper i den främre blurb. Vi lägger sedan till de anpassade CSS-klasser som är nödvändiga för att vår jQuery ska växla dessa egenskaper vid klick.

Lägg till följande transformationsegenskaper under de främre designfunktionens parametrar:

X- och y-transformationsskala: 20%

Divi-transformation

Förvandla ursprung: toppcentrum

Modifiering omvandling divi

Kom ihåg att den transformationsdesign du ser vid den här tiden kommer att vara den som utlöses vid klick. Vi utnyttjar helt enkelt Divi-byggaren för att få önskad design. I det här fallet dras den främre blurben samman och blir centrerad längst upp på den som en klickbar ikon.

När du är klar lägger du till de två CSS-klasserna som behövs för att rikta in den främre blurb med jQuery enligt följande:

CSS-klass: växla-transform-animation transform_target

(se till att separera varje klassnamn med ett mellanslag)

Divi Transform Properties på Click

Lägg sedan till följande anpassade CSS-kodavsnitt som kommer att användas för att aktivera och inaktivera transformationsegenskaper med jQuery.

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

Inställningar för Divi-sidaDu kommer att märka att de tidigare tillagda oskärpa transformationsegenskaperna har inaktiverats eftersom den här klassen har tillämpats på den.

Gå nu till Divi> Temaalternativ> Integration och lägg till följande jQuery-skript till bloggens huvud:

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

Lägg till divi-integrationsavsnitt

Låt oss se det slutliga resultatet.

Animerings divi-modul oskärpa

Du kan använda detta exempel för att skapa ännu mer imponerande mönster. Tveka inte att dela din åsikt i kommentarfältet.