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

Divi: najjednoduchšia téma pre WordPress

[/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"] STIAHNUŤ [/vcex_button][/ vc_column][/vc_row]

Divi: Najlepšia WordPress tému všetkých čias!

viac Stahovanie 901.000, Divi je najobľúbenejšia WordPress tému na svete. Je kompletný, ľahko použiteľný a je dodávaný s viac než 62 bezplatnými šablónami.

Vstavané možnosti transformácie Divi sa ukázali ako mimoriadne užitočný nástroj na návrh, ktorý umožňuje ľahkú zmenu, otočenie, naklonenie alebo umiestnenie ľubovoľného prvku na stránke. Môžete si dokonca zvoliť, že prvky zmeníte na stav vznášania, aby ste dosiahli pôsobivé efekty vznášania. Dnes vám teda ukážeme, ako tieto animácie nasadiť jedným kliknutím.

Táto metóda vyžaduje použitie jQuery. Skvelé na tejto technike je, že môžete použiť vstavané návrhové nastavenia Divi na úpravu vlastností transformácie a následné zapnutie (alebo vypnutie) týchto vlastností transformácie kliknutím myši. Tým sa otvorí veľa jedinečných možností odhalenia skrytého obsahu presunutím položiek po kliknutí, a nie umiestnením kurzora myši. Pomáha tiež znížiť potrebu vedieť veľa o CSS.

Začnime.

Čo potrebujete, aby ste začali

Pre tento tutoriál všetko, čo potrebujete, je Divi. Ak chcete začať, prejdite na hlavný panel WordPress. Vytvorte novú stránku, dajte jej názov a pokračujte v dizajne pomocou generátora Divi v popredí. Vyberte možnosť „Vytvoriť od začiatku“. Teraz ste pripravení vyraziť!

Vysvetlená základná myšlienka

Predtým, ako sa v tomto tutoriále uvediem príliš podrobne, niekoľkými slovami vás prevediem tým, ako táto technika funguje.

Zakaždým, keď v Divi upravujete prvok (oddiel, riadok alebo modul), pridáte k tomuto prvku na pozadí vlastné CSS. Napríklad pomocou vstavaných nastavení Divi môžete pridať vlastnosť transformácie otáčania k modulu blurdu tak, aby modul otáčal pozdĺž osi Z o 20 stupňov.

Ručné nastavenie divi

Za scénami však vytvoríte vlastný CSS, ktorý sa pridá do tohto textového modulu a vyzerá takto:

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

Dosť jednoduché. A povedzme, že ste chceli pridať tú istú možnosť transformácie kurzora myši. Musíte len použiť vlastnosť transformácie na stav vznášania sa v nastaveniach Divi Builder.

Animácia umiestnenia kurzora myši na divi

A kód bude vyzerať takto v zákulisí:

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

Ak však chcete nasadiť vlastnosť transformácie po kliknutí, bude to musieť fungovať trochu inak. Ak chcete spustiť udalosť kliknutia na prvok (alebo textový modul), budete musieť zadať kód JavaScriptu.

V našom súčasnom príklade je naším hlavným cieľom v podstate zapnúť a vypnúť vlastnosť transformácie „transform: rotateZ (20deg)“ po kliknutí. Jednoduchý spôsob, ako to urobiť, je vytvoriť si vlastnú triedu CSS s vlastnosťou „transformátor: žiadny!“ Dôležité “v nastaveniach stránky (alebo externej šablóny štýlov). Vyzeralo by to asi takto.

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

Parametre stránky divi

S zavedeným CSS. Môžeme pridať triedu CSS „toggle-transform-animation“ do prvku modulu blurb, ktorý má našu vlastnosť transformácie.

Zhrnutie parametrov

Toto zakáže (prepíše) vlastnosť transformácie a zabráni jej počiatočnej aktivácii, aj keď už bol do nej pridaný štýl vlastnosti transformácie.

Teraz všetko, čo musíte urobiť, je aktivovať (pridať a odstrániť) túto vlastnú triedu CSS, keď kliknete na prvok. Takže zakaždým, keď klikneme na prvok, trieda bude odstránená a budú nasadené transformačné vlastnosti (tie, ktoré ste pridali pomocou Divi).

Tu je jednoduchý príklad, ako to urobiť. Najskôr pridajte ďalšiu triedu CSS do modulu reklama s názvom „transform_target“.

Vlastnosti transformácie Divi na Click

Ľahko vytvorte svoje webové stránky pomocou Elementoru

Elementor vám umožňuje vytvárať Jednoducho a zadarmo akýkoľvek dizajn webovej stránky alebo blogu s profesionálnym vzhľadom. Prestaňte platiť veľa za webovú stránku, ktorú môžete urobiť sami.

Potom choďte na Divi> Možnosti tém> Integrácia a do hlavy svojho blogu pridajte nasledujúci skript jQuery:

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

Pridajte sekciu integrácie divi

To je všetko ! Teraz zakaždým, keď kliknete na prezentačný modul, sa aktivuje alebo deaktivuje vlastnosť transformácie, ktorú ste pridali do prezentácie v Divi.

Animovaný záber

Teraz vytvorme príklad, aby ste videli, ako by to mohlo byť užitočné pre vaše vlastné projekty.

Ako prepnúť vlastnosti transformácie Kliknutím zobrazíte obsah v časti Divi

V tomto príklade zostaneme pri jednoduchom príklade reklamy, ktorý sa používa vyššie. Ďalej za to pridáme nejaké ďalšie reklama, aby sa zakaždým, keď kliknete na hornú reklamu, vytiahla z cesty a odhalila tak ďalšiu reklamu, ktorá sedí za hornou časťou. dokument.

Vytvorenie Blurb modulov spredu a zozadu

Potom pridajte prezentačný modul do stĺpca 1.

Modulujte zhrnutie diviAktualizujte obsah textu rozloženia tak, aby obsahoval iba nadpis (odstráňte predvolený obsah tela), a pridajte ikonu prezentácie.

Prispôsobte si modul súhrnu diviPotom aktualizujte parametre návrhu nasledovne:

Farba pozadia: #4c5866
Farba ikony: #ffffff
Orientácia textu: stred
Farba textu
: Ľahká vlastná marža: 0px dole
Vlastné čalúnenie: 15% hore, 15% dole, 10% zľava, 10% vpravo

Upraviť medzery medzi modulmi divi

K tomuto modulu sa vrátime neskôr, ale zatiaľ musíme vytvoriť náš druhý modul Blurb, ktorý bude slúžiť ako modul „návratu“ s ďalším obsahom.

Ak to chcete urobiť, duplikujte práve vytvorený prezentačný modul.

Duplicitný modul zhrnutia divi

Potom na druhom module odstráňte ikonu prezentácie (a predvolený obrázok) a pridajte späť obsah tela späť do modulu. Potom aktualizujte parametre návrhu takto:

Chcete predávať svoje produkty na internete?

Stiahnite si zadarmo WooCommerce, najlepšie doplnky elektronického obchodu na predaj vašich fyzických a digitálnych produktov na WordPress a jednoduché vytvorenie vášho online obchodu. Ideálne pre začiatočníkov.

Farba pozadia: rgba (76,88,102,0.3)
Farba textu: Čierna
Vlastné polstrovanie: 20% top

Upravte divi písmo a pozadie

Umiestnite modul pred zhrnutie

Teraz, keď sú naše dve rozmazané žiarovky štylizované, sa musíme vrátiť späť k nášmu prednému (hornému) obrysu a umiestniť ho nad zadný (spodný) obrys. Za týmto účelom mu dáme absolútnu pozíciu s výškou 100% a šírkou 100%.

Najskôr otvorte nastavenia prezentačného modulu v hornej / prednej časti a aktualizujte nasledujúce informácie:

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

Vlastnosti transformácie Divi na Click

Potom pridajte do hlavného prvku nasledujúci vlastný kód CSS:

pozícia: absolútna! prechod: všetky .5;

Potom aktualizujte index z takto:

Z index: 2000

Prispôsobte si css divi modul

Absolútna poloha v kombinácii so 100% výšky a šírky a indexom z zaisťuje, že reklamný modul zostane navrchu reklamného modulu za ním. Vlastnosť prechodu je v skutočnosti doba prechodu možností transformácie, ktoré nasadíme pri ďalšom kliknutí. A „cursor: pointer“ má zmeniť kurzor tak, aby sa na používateľa javilo, že na používateľa je možné kliknúť.

Pridanie volieb transformácie a vlastných tried do predného bloku

Teraz je ten správny čas pridať do prednej reklamy naše transformačné vlastnosti. Potom pridáme vlastné triedy CSS potrebné na to, aby náš jQuery tieto vlastnosti po kliknutí prepínal.

V rámci parametrov návrhu prednej masky pridajte nasledujúce vlastnosti transformácie:

Stupnica transformácie X a y: 20%

Divi transformácia

Počiatok transformácie: horný stred

Modifikačná transformácia divi

Pamätajte, že návrh transformácie, ktorý uvidíte v tomto okamihu, bude ten, ktorý sa spustí po kliknutí. Jednoducho využijeme výhodu nástroja Divi builder na získanie požadovaného dizajnu. V takom prípade sa predná reklama zmenší a stane sa v jej strede stred ako ikona, na ktorú je možné kliknúť.

Po dokončení pridajte dve triedy CSS potrebné na zacielenie predného bloku pomocou jQuery takto:

Trieda CSS: toggle-transform-animation transform_target

(nezabudnite oddeliť každý názov triedy medzerou)

Vlastnosti transformácie Divi na Click

Potom pridajte nasledujúci vlastný útržok kódu CSS, ktorý sa použije na povolenie a zakázanie transformačných vlastností pomocou jQuery.

.toggle-transform-animation {transformácia: žiadny! dôležité; }

Nastavenia stránky DiviZistíte, že predtým pridané vlastnosti transformácie blurbu boli zakázané, pretože na túto triedu bola použitá.

Teraz choďte na Divi> Možnosti témy> Integrácia a do hlavy blogu pridajte nasledujúci skript jQuery:

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

Pridajte sekciu integrácie divi

Pozrime sa na konečný výsledok.

Animácia divi modulu

Tento príklad môžete použiť na vytvorenie ešte pôsobivejších návrhov. Neváhajte a podeľte sa o svoj názor v sekcii komentárov.

2 akcie
podiel2
tweet
Registrovať