Vestavěné možnosti transformace divi se ukázaly jako mimořádně užitečný nástroj pro návrh, který vám umožňuje snadno měnit velikost, otáčet, zkosit nebo umístit jakýkoli prvek na stránce. A můžete se dokonce rozhodnout převést předměty do stavu vznášení pro úžasné efekty vznášení. Dnes vám tedy ukážeme, jak tyto animace nasadit jedním kliknutím.

Tato metoda vyžaduje použití jQuery. Skvělá věc na této technice je, že můžete použít vestavěné konstrukční parametry divi upravte vlastnosti transformace a poté tyto vlastnosti transformace aktivujte (nebo deaktivujte) kliknutím myši. To otevře spoustu jedinečných možností pro odhalení obsah skryté přesouváním položek při kliknutí, nikoli po najetí myší. A také to pomáhá snížit potřebu znát spoustu CSS.

Začněme.

Co potřebujete, abyste mohli začít

Pro tento tutoriál potřebujete pouze divi. Chcete-li začít, přejděte na hlavní panel WordPress. Vytvořte novou stránku, pojmenujte ji a pokračujte v navrhování na Divi builderu v popředí. Vyberte možnost „Stavět od začátku“. Nyní jste připraveni vyrazit!

Základní myšlenka vysvětlena

Než se v tomto tutoriálu dostanu do příliš podrobností, provedu vás několika slovy tím, jak tato technika funguje.

Pokaždé, když v Divi upravujete prvek (řez, linii nebo modul), přidáte k tomuto prvku na pozadí vlastní CSS. Například pomocí vestavěného nastavení Divi můžete přidat vlastnost rotace transformace do blurb modulu, aby modul otočil podél osy Z o 20 stupňů.

Blur divi nastavení

Za scénami ale vytvoříte vlastní CSS, které se přidá do tohoto textového modulu a vypadá takto:

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

Dost jednoduché. A řekněme, že jste chtěli přidat stejnou možnost transformace přechodu. Musíte pouze použít vlastnost transformace pro stav vznášení v nastavení Divi Builder.

Animace přechodu Divi

A kód bude vypadat něco podobného za scénami:

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

Pokud však chcete nasadit vlastnost transformace po kliknutí, bude to muset fungovat trochu jinak. Budete muset zadat nějaký kód javascript, abyste spustili událost kliknutí na element (nebo textový modul).

V našem aktuálním příkladu je naším hlavním cílem v podstatě zapnout a vypnout vlastnost transformace „transform: rotateZ (20deg)“ po kliknutí. Snadný způsob, jak to udělat, je vytvořit vlastní třídu CSS s vlastností „transformátor: žádný!“ Důležité “v nastavení stránky (nebo externí šablony stylů). Vypadalo by to asi takto.

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

Parametry stránky divi

S tímto CSS na místě. Můžeme přidat třídu CSS "toggle-transform-animation" do prvku modulu blurb, který má naši vlastnost transformace.

Souhrn parametrů

Tím zakážete (přepíšete) vlastnost transform a zabráníte její počáteční aktivaci, i když do ní již byl přidán styl vlastnosti transform.

Nyní vše, co musíte udělat, je aktivovat (přidat a odebrat) tuto vlastní třídu CSS, když kliknete na prvek. Takže pokaždé, když klikneme na prvek, třída bude odstraněna a budou transformovány vlastnosti transformace (ty, které jste přidali pomocí Divi).

Zde je jednoduchý příklad, jak to udělat. Nejprve přidejte další třídu CSS do modulu reklamy s názvem „transform_target“.

Vlastnosti transformace Divi na Click

Dále přejděte na Divi > Možnosti motivu > Integrace a přidejte následující skript jQuery do hlavy váš blog:

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

Přidejte sekci integrace divi

To je vše ! Nyní pokaždé, když kliknete na modul prezentace, bude vlastnost transformace, kterou jste přidali do prezentace v Divi, povolena nebo zakázána.

Animovaný snímek

Nyní vytvoříme příklad, abyste viděli, jak by to mohlo být užitečné pro vaše vlastní projekty.

Jak přepnout vlastnosti transformace na Klepnutím zobrazíte obsah v Divi

V tomto příkladu zůstaneme u jednoduchého příkladu reklamy použitého výše. Dále za to přidáme další reklamu, takže kdykoli kliknete na horní reklamu, přesune se z cesty a odhalí obsah další reklama sedí za dokumentem.

Vytvoření modulů Blurb vpředu a vzadu

Poté přidejte prezentační modul do sloupce 1.

Modulovat shrnutí diviAktualizujte obsah blurb, chcete-li zahrnout pouze název (odstranit výchozí obsah těla), pak přidejte ikonu blurb.

Přizpůsobte modul souhrnu diviPoté aktualizujte návrhové parametry následujícím způsobem:

Barva pozadí: #4c5866
Barva ikony: #ffffff
Orientace textu: střed
Barva textu
: Lehká vlastní marže: 0px dole
Vlastní výplň: 15% v horní části, 15% v dolní části, 10% vlevo, 10% vpravo

Upravte rozteč divi modulů

K tomuto modulu se vrátíme později, ale prozatím musíme vytvořit náš druhý modul Blurb, který bude sloužit jako „návratový“ modul s dalším obsahem.

Chcete-li to provést, duplikujte právě vytvořený prezentační modul.

Duplicitní modul souhrnu divi

Poté na druhém modulu odeberte ikonu prezentace (a výchozí obrázek) a přidejte obsah těla zpět do modulu. Poté aktualizujte návrhové parametry následujícím způsobem:

Barva pozadí: rgba (76,88,102,0.3)
Barva textu: Černá
Vlastní padding: 20% top

Upravte divi písmo a pozadí

Umístěte modul před shrnutí

Nyní, když jsou naše dvě rozostřenky stylizované, musíme se vrátit zpět do naší přední (horní) reklamy a umístit ji nad zadní (spodní) reklama. Za tímto účelem mu dáme absolutní pozici s výškou 100% a šířkou 100%.

Nejprve otevřete nastavení prezentačního modulu horní / přední a aktualizujte následující:

výška: 100%;
width: 100%;

Vlastnosti transformace Divi na Click

Pak přidejte následující vlastní kód CSS do hlavního prvku:

pozice: absolutní! přechod: všechny .5;

Poté aktualizujte index z následujícím způsobem:

Z index: 2000

Přizpůsobte si css divi modul

Absolutní poloha v kombinaci se 100% výškou a šířkou a indexem z zajišťuje, že modul reklamy zůstane nad modulem reklamy za sebou. Vlastnost přechodu je ve skutečnosti doba trvání přechodu možností transformace, které nasadíme při příštím kliknutí. A „cursor: pointer“ má změnit kurzor tak, aby na prvek uživatel mohl kliknout.

Přidání možností transformace a vlastních tříd do předního bloku

Nyní je čas přidat naše vlastnosti transformace do přední reklamy. Poté přidáme vlastní třídy CSS potřebné pro to, aby náš jQuery tyto vlastnosti po kliknutí přepnul.

Pod parametry návrhu předního blurbu přidejte následující vlastnosti transformace:

Měřítko transformace X a y: 20%

Divi transformace

Počátek transformace: horní střed

Modifikace transformace divi

Nezapomeňte, že návrh transformace, který uvidíte v tomto okamžiku, bude ten, který se spustí po kliknutí. Jednoduše využijeme výhod nástroje Divi builder k získání požadovaného designu. V takovém případě se přední reklama zmenší a stane se vycentrována v její horní části jako klikací ikona.

Až budete hotovi, přidejte dvě třídy CSS potřebné k zacílení předního blupu pomocí jQuery takto:

Třída CSS: toggle-transform-animation transform_target

(nezapomeňte oddělit každý název třídy mezerou)

Vlastnosti transformace Divi na Click

Poté přidejte následující vlastní fragment kódu CSS, který bude použit k povolení a zakázání transformačních vlastností pomocí jQuery.

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

Nastavení stránky DiviZjistíte, že dříve přidané vlastnosti transformace blurbu byly deaktivovány, protože na ni byla použita tato třída.

Nyní přejděte do Divi> Možnosti motivu> Integrace a přidejte do skriptu blogu následující skript jQuery:

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

Přidejte sekci integrace divi

Uvidíme konečný výsledek.

Animace divi modul reklama

Tento příklad můžete použít k vytvoření ještě působivějších návrhů. Neváhejte se podělit o svůj názor v sekci komentáře.