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.

Wbudowane opcje transformacji Divi okazały się niezwykle przydatnym narzędziem do projektowania, pozwalającym z łatwością zmieniać rozmiar, obracać, pochylać lub pozycjonować dowolny element na stronie. Możesz nawet zmienić elementy w stan najechania, aby uzyskać niesamowite efekty najechania. Dlatego dzisiaj pokażemy Ci, 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 parametrów projektowych Divi aby przypisać styl do właściwości transformacji, a następnie aktywuj (lub dezaktywuj) te właściwości transformacji jednym kliknięciem myszy. Otworzy to mnóstwo unikalnych możliwości ujawniania ukrytych treści poprzez przesuwanie przedmiotów po kliknięciu, a nie najechaniu kursorem. Pomaga to również zmniejszyć potrzebę znajomości 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 transformacji i uniemożliwi jej początkowe aktywowanie, nawet jeśli styl właściwości transformacji 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 tworzyć Łatwo i za darmo dowolny projekt strony internetowej lub bloga o profesjonalnym wyglądzie. Przestań płacić dużo za stronę internetową, którą możesz zrobić sam.

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:

Chcesz sprzedawać swoje produkty w Internecie?

Pobierz bezpłatnie WooCommerce, najlepsze wtyczki e-commerce, aby sprzedawać swoje fizyczne i cyfrowe produkty na WordPress i łatwo tworzyć swój sklep internetowy. Idealny dla początkujących.

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

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

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.

%d blogerzy lubią tę stronę: