Gå till innehållet

Så här skapar du animerade sektioner genom att klicka på Divi Builder

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Divis inbyggda transformationsalternativ har visat sig vara ett extremt användbart designverktyg som gör att du enkelt kan ändra storlek, rotera, luta eller placera något element på en sida. Och du kan till och med välja att förvandla element till svävarläge för imponerande svävareffekter. Så idag visar vi dig hur du distribuerar dessa animationer med ett klick.

Denna metod kräver användning av jQuery. Det fantastiska med den här tekniken är att du kan använda Divis inbyggda designinställningar för att utforma transformationsegenskaperna och sedan aktivera (eller inaktivera) transformationsegenskaperna med ett musklick. Detta öppnar upp massor av unika möjligheter för att avslöja dolt innehåll genom att flytta objekt på klick snarare än att sväva. Och det minskar också behovet av att veta mycket om CSS.

Låt oss börja.

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

För denna handledning ä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 designen på Divi-generatorn 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 inaktiverar (åsidosätter) transformegenskapen och förhindrar att den initialt aktiveras även om transformegenskapsstilen 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

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Gå sedan till Divi> Temalternativ> Integration och lägg till följande jQuery-skript i 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 kommer vi att hålla oss till ett enkelt blurb-exempel som används ovan. Därefter lägger vi till lite extra blurb bakom den så att varje gång du klickar på den övre blurben, drar den sig ur vägen för att avslöja det extra blurbinnehållet som sitter bakom toppen. dokumentera.

Skapa Blurb-moduler fram och bak

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

Modulera divi sammanfattningUppdatera innehållet i layouttexten så att det bara innehåller en titel (ta bort standardkroppsinnehållet) och lägg till en presentationsikon.

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

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

Ö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

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

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.

Tillbaka till toppen
2 aktier
del2
tweet
Enregistrer