Przejdź do głównej treści

Jak tworzyć animowane sekcje, klikając Divi Builder

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 901.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Wbudowane opcje transformacji Divi okazały się niezwykle przydatnym narzędziem do projektowania, umożliwiającym łatwą zmianę rozmiaru, obracanie, pochylanie lub pozycjonowanie dowolnego elementu na stronie. Możesz nawet zmienić stan elementów w stan najechania, aby uzyskać imponujące efekty najechania. Dlatego dzisiaj pokażemy, jak wdrożyć te animacje jednym kliknięciem.

Ta metoda wymaga użycia jQuery. Wspaniałą rzeczą w tej technice jest to, że możesz użyć wbudowanych ustawień projektu Divi, aby nadać styl właściwościom transformacji, a następnie włączyć (lub wyłączyć) te właściwości jednym kliknięciem myszy. Otworzy to mnóstwo unikalnych możliwości ujawnienia ukrytej zawartości poprzez przesuwanie elementów jednym kliknięciem zamiast najechania kursorem. Pomaga także zmniejszyć potrzebę posiadania dużej wiedzy o CSS.

Zacznijmy.

To, czego potrzebujesz, aby zacząć

Do tego samouczka potrzebujesz tylko Divi. Aby rozpocząć, przejdź do pulpitu nawigacyjnego WordPress. Utwórz nową stronę, nadaj swojej stronie tytuł i kontynuuj projekt w generatorze Divi na pierwszym planie. Wybierz opcję „Buduj od podstaw”. Teraz jesteś gotowy do pracy!

Podstawowa idea wyjaśniona

Zanim przejdę do zbyt wielu szczegółów w tym samouczku, w kilku słowach przeprowadzę Cię przez działanie tej techniki.

Za każdym razem, gdy dostosowujesz element (sekcję, linię lub moduł) w Divi, dodajesz niestandardowy CSS do tego elementu w tle. Na przykład, korzystając z wbudowanych ustawień Divi, możesz dodać właściwość obracania transformacji do modułu blurb, tak aby obracał moduł wzdłuż osi Z o 20 stopni.

Blurb divi settings

Ale za kulisami tworzysz niestandardowy CSS, który jest dodawany do tego modułu tekstowego i wygląda następująco:

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

Wystarczająco proste. Powiedzmy, że chcesz dodać tę samą opcję przekształcania po najechaniu kursorem. Wystarczy zastosować właściwość transformacji dla stanu najechania kursorem w ustawieniach Divi Builder.

Animacja Divi Hover

Za kulisami kod będzie wyglądał mniej więcej tak:

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

Jeśli jednak chcesz wdrożyć właściwość transformacji jednym kliknięciem, wszystko będzie musiało działać nieco inaczej. Aby wywołać zdarzenie kliknięcia elementu (lub modułu tekstowego), musisz wprowadzić kod JavaScript.

W naszym obecnym przykładzie naszym głównym celem jest po prostu włączanie i wyłączanie właściwości transformacji „transform: rotateZ (20deg)” po kliknięciu. Prostym sposobem na to jest utworzenie niestandardowej klasy CSS z właściwością „transformer: none!” Ważne ”w ustawieniach strony (lub zewnętrznego arkusza stylów). Wyglądałoby to mniej więcej tak.

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

Parametry strony divi

Z tym CSS na miejscu. Możemy dodać klasę CSS „toggle-transform-animation” do elementu modułu blurb, który ma naszą właściwość transform.

Podsumowanie parametrów

Spowoduje to wyłączenie (zastąpienie) właściwości transform i zapobiegnie jej początkowej aktywacji, nawet jeśli styl właściwości transform został już do niej dodany.

Teraz wszystko, co musisz zrobić, to aktywować (dodać i usunąć) tę niestandardową klasę CSS po kliknięciu elementu. Tak więc za każdym razem, gdy klikniemy element, klasa zostanie usunięta, a właściwości transformacji (te dodane za pomocą Divi) zostaną wdrożone.

Oto prosty przykład, jak to zrobić. Najpierw dodaj kolejną klasę CSS do modułu blurb o nazwie „transform_target”.

Divi Transform Properties na Click

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

Następnie przejdź do Divi> Opcje motywu> Integracja i dodaj następujący skrypt jQuery do nagłówka swojego bloga:

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

Dodaj sekcję integracji divi

To wszystko ! Teraz za każdym razem, gdy klikniesz moduł prezentacji, właściwość transformacji dodana do prezentacji w Divi zostanie aktywowana lub dezaktywowana.

Ujęcie animacji

Zbudujmy teraz przykład, abyś mógł zobaczyć, jak może to być przydatne w twoich projektach.

Jak przełączać właściwości transformacji Kliknij, aby wyświetlić zawartość w Divi

W tym przykładzie będziemy trzymać się prostego przykładu opisowego użytego powyżej. Następnie dodamy za nim kilka dodatkowych notatek, aby za każdym razem, gdy klikniesz górną notkę, wyskoczyła z drogi, aby odsłonić dodatkową treść znajdującą się za nią. dokument.

Tworzenie modułów Blurb z przodu iz tyłu

Następnie dodaj moduł prezentacji do kolumny 1.

Moduluj podsumowanie diviZaktualizuj treść tekstu układu, aby zawierał tylko tytuł (usuń domyślną treść), i dodaj ikonę prezentacji.

Dostosuj moduł podsumowania DiviNastępnie zaktualizuj parametry projektu w następujący sposób:

Kolor tła: #4c5866
Kolor ikony: #ffffff
Orientacja tekstu: środek
Kolor tekstu
: Lekki margines niestandardowy: 0px na dole
Niestandardowe wypełnienie: 15% u góry, 15% u dołu, 10% po lewej stronie, 10% po prawej stronie

Zmodyfikuj odstępy modułów DIVI

Wrócimy do tego modułu później, ale na razie musimy utworzyć nasz drugi moduł Blurb, który będzie służył jako moduł „powrotu” z dodatkową treścią.

W tym celu zduplikuj właśnie utworzony moduł prezentacji.

Zduplikowany moduł podsumowania Divi

Następnie w drugim module usuń ikonę prezentacji (i domyślny obraz) i dodaj treść z powrotem do modułu. Następnie zaktualizuj parametry projektowe w następujący sposób:

Kolor tła: rgba (76,88,102,0.3)
Kolor tekstu: Czarny
Wyściółka niestandardowa: top 20%

Zmodyfikuj czcionkę i tło divi

Ustaw moduł przed Podsumowaniem

Teraz, gdy stylizujemy nasze dwie notki, musimy wrócić do pierwszej (górnej) notki i umieścić ją nad ostatnią (dolną) notką. Aby to zrobić, nadamy mu pozycję bezwzględną o wysokości 100% i szerokości 100%.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

Najpierw otwórz ustawienia górnego / przedniego modułu prezentacji i zaktualizuj następujące elementy:

wysokość: 100%;
szerokość: 100%;

Divi Transform Properties na Click

Następnie dodaj następujący niestandardowy kod CSS do głównego elementu:

pozycja: absolutna! ważna; przejście: wszystkie .5;

Następnie zaktualizuj indeks z w następujący sposób:

Indeks Z: 2000

Dostosuj moduł CSS Divi

Bezwzględna pozycja w połączeniu ze 100% wysokością i szerokością oraz indeksem z zapewnia, że ​​moduł blurb pozostaje na górze modułu blurb za nim. Właściwość przejścia to w rzeczywistości czas trwania przejścia opcji transformacji, które wdrożymy po następnym kliknięciu. A "kursor: pointer" służy do zmiany kursora, tak aby użytkownik wydawał się klikalny.

Dodanie opcji transformacji i niestandardowych klas do przedniego blurbu

Nadszedł czas, aby dodać nasze właściwości transformacji do pierwszej wiadomości. Następnie dodamy niestandardowe klasy CSS niezbędne dla naszego jQuery do przełączania tych właściwości po kliknięciu.

W parametrach projektu przedniego blottu dodaj następujące właściwości transformacji:

Skala transformacji X i Y: 20%

Transformacja Divi

Pochodzenie transformacji: u góry na środku

Modyfikacja transformacji divi

Pamiętaj, że projekt transformacji, który widzisz w tym momencie, będzie uruchamiany po kliknięciu. Po prostu korzystamy z kreatora Divi, aby uzyskać pożądany projekt. W takim przypadku przednia notka kurczy się i zostaje wyśrodkowana u góry jak klikalna ikona.

Gdy skończysz, dodaj dwie klasy CSS potrzebne do ukierunkowania przedniego blurbu za pomocą jQuery w następujący sposób:

Klasa CSS: toggle-transform-animation transform_target

(pamiętaj o oddzieleniu każdej nazwy klasy spacją)

Divi Transform Properties na Click

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

Następnie dodaj następujący niestandardowy fragment kodu CSS, który będzie używany do włączania i wyłączania właściwości transformacji za pomocą jQuery.

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

Ustawienia strony DiviZauważysz, że wcześniej dodane właściwości transformacji blurb zostały wyłączone, ponieważ ta klasa została do niej zastosowana.

Teraz przejdź do Divi> Opcje motywu> Integracja i dodaj następujący skrypt jQuery do nagłówka bloga:

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

Dodaj sekcję integracji divi

Zobaczmy wynik końcowy.

Animacja modułu Divi Blurb

Na tym przykładzie możesz tworzyć jeszcze bardziej imponujące projekty. Nie wahaj się podzielić swoją opinią w sekcji komentarzy.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry