[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885px0px !important;border-bottom-width: 0px !important;padding-bottom: 0px !important;}"][vc_column_text]

Divi: nejjednodušší téma WordPress k použití

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] STÁHNOUT [/vcex_button][/ vc_column][/vc_row]

Divi: Nejlepší WordPress téma všech dob!

více Stahování 901.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma.

Integrované možnosti transformace Divi se ukázaly jako mimořádně užitečný návrhový nástroj, který vám umožňuje snadno měnit velikost, otáčet, naklánět nebo umisťovat jakýkoli prvek na stránce. Můžete si dokonce zvolit, že změníte prvky na stav vznášení pro působivé efekty vznášení. Dnes vám tedy ukážeme, jak nasadit tyto animace 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 integrované návrhové nastavení Divi ke stylizaci vlastností transformace a poté tyto vlastnosti transformace zapnout (nebo vypnout) kliknutím myši. Tím se otevře spousta jedinečných možností pro odhalení skrytého obsahu přesunutím položek na kliknutí, nikoli na ukazatel myši. A také pomáhá snížit potřebu vědět hodně o CSS.

Začněme.

Co potřebujete, abyste mohli začít

V tomto tutoriálu potřebujete pouze Divi. Začněte tím, že přejdete na svůj řídicí panel WordPress. Vytvořte novou stránku, pojmenujte ji a pokračujte v návrhu na generátoru Divi v popředí. Vyberte možnost „Vytvořit od začátku“. Nyní jste připraveni jít!

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 transformace a zabráníte jí v počáteční aktivaci, i když k ní již byl přidán styl vlastnosti transformace.

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

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní tvořit Snadno a zdarma jakýkoli design webových stránek nebo blogu s profesionálním vzhledem. Přestaňte platit hodně za web, který si můžete udělat sami.

Pak přejděte na Divi> Možnosti motivu> Integrace a přidejte do skriptu svého 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

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 se budeme držet jednoduchého příkladu reklamy, který se používá výše. Dále za něj přidáme nějakou další reklamu, takže pokaždé, když kliknete na horní reklamu, vytáhne se z cesty a odhalí další reklama, která sedí za horní částí. dokument.

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

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

Modulovat shrnutí diviAktualizujte obsah textu rozvržení tak, aby obsahoval pouze nadpis (odeberte výchozí obsah těla), a přidejte ikonu prezentace.

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:

Chcete prodávat své produkty na internetu?

Stáhněte si zdarma WooCommerce, nejlepší pluginy pro e-commerce pro prodej vašich fyzických a digitálních produktů na WordPress a snadné vytvoření vašeho online obchodu. Ideální pro začátečníky.

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.

2 akcie
podíl2
tweet
Zadat