Kreatywne interaktywne moduły Blurb wykorzystujące opcje transformacji i najechania Divi

Wszyscy uwielbiamy nowe opcje transformacji. Pomagają nam tworzyć niesamowite projekty i mają podgląd w czasie rzeczywistym wprowadzanych przez nas zmian. A w połączeniu z opcjami najechania, możesz z pewnością stworzyć oszałamiające efekty. W tym samouczku pokażemy, jak tworzyć interaktywne moduły notatek, łącząc opcje transformacji i najechania Divi. Zajmiemy się czterema różnymi przykładami, których utworzenie zajmuje niewiele czasu i które można wykorzystać w dowolnym projekcie internetowym.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wynik.

Ogólne kroki

Dodaj nową sekcję

W pierwszej części tego posta omówimy kilka ogólnych kroków, które pomogą nam skoncentrować się na przykładach notatek dotyczących transformacji w dalszej części postu. Zacznij od utworzenia nowej strony lub otwarcia istniejącej i dodania do niej zwykłej sekcji.

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Otwórz ustawienia wiersza i zmień ustawienia rozmiaru na karcie projektu, aby wiersz zajmował całą szerokość ekranu.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Dodaj również niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 150px
• Dolna wyściółka: 150px

Dodaj moduł Blurb do kolumny 1

Dodaj zawartość

Jedynym modułem, którego będziemy potrzebować w tym samouczku, jest moduł Blurb. Po dostosowaniu modułu Blurb użyjemy go ponownie, aby uzyskać wszystkie cztery przykłady, które widzieliście na początku postu. Śmiało, dodaj moduł Blurb do pierwszej kolumny i wprowadź wybraną treść.

Wybierz ikonę

Kontynuuj, wybierając ikonę.

Kolor tła

Następnie dodaj całkowicie białe tło.

• Kolor tła: #ffffff

Domyślne ustawienia ikon

Następnie zmień ustawienia ikony na karcie projektu.

• Kolor ikony: #7a69e6
• Ikona koła: Tak
• Kolor koła: rgba (122,105,230,0.3)
• Umieszczenie obrazu/ikony: góra
• Użyj rozmiaru czcionki ikony: 32px

Ustawienia ikony kursora

Zmodyfikuj zarówno kolor ikony, jak i koła po najechaniu myszą.

• Kolor ikony: #ff758e
• Kolor koła: rgba (255,117,142,0.29)

Ustawienia tekstu tytułu

Kontynuuj, zmieniając ustawienia tekstu.

• Czcionka tytułu: Roboto
• Grubość czcionki tytułu: pogrubiona
• Wyrównanie tekstu tytułu: do środka
• Rozmiar tekstu tytułu: 18px
• Wysokość wiersza tytułu: 1.7em

Ustawienia tekstu podstawowego

I zmodyfikuj również ustawienia tekstu podstawowego.

• Czcionka ciała: Otwórz Sans
• Wyrównanie tekstu podstawowego: do środka
• Rozmiar tekstu ciała: 14px
• Wysokość linii ciała: 1,8 em

Rozmiary

Nieznacznie zmniejszamy też rozmiar modułu dla różnych rozmiarów ekranu.

• Szerokość: 74% (komputer stacjonarny), 85% (tablet i telefon)
• Wyrównanie modułu: Środek

Rozstaw

Dodamy też trochę niestandardowego wypełnienia.

• Górna wyściółka: 30px
• Dolna wyściółka: 40px
• Lewa wyściółka: 20px
• Prawe wypełnienie: 20px

Granica

Kontynuuj, dodając „10px” do każdego z rogów modułu Blurb.

Domyślny cień pudełka

A do tego dodaj subtelny cień pudełkowy.

• Siła rozmycia cieni w pudełku: 70px
• Kolor cienia: rgba (122,105,230,0.3)

Wskaż cień pola

Zmień kolor cienia pola po najechaniu kursorem, aby pasował do ikony najechania i kolorów kół.

• Kolor cienia: rgba (255,117,142,0.29)

Clone Blurb Module dwa razy i umieść duplikaty w pozostałych kolumnach

Po zakończeniu dostosowywania modułu Blurb możesz go sklonować dwukrotnie. Umieść duplikaty w dwóch pozostałych kolumnach.

Dodaj wiersz nr 2

Struktura kolumny

W ostatnim przykładzie potrzebujemy osobnego wiersza. Wybierz następującą strukturę kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmień ustawienia rozmiaru w zakładce projekt.

• Użyj niestandardowej szerokości: Tak
• Jednostka: PX
• Szerokość niestandardowa: 1440px
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Moduł Clone Blurb w poprzednim rzędzie i miejsce w kolumnie 1

Następnie sklonuj jeden z modułów Blurb z poprzedniego rzędu i umieść duplikat w pierwszej kolumnie drugiego rzędu.

Zmień rozmiar

Zmodyfikuj szerokość w ustawieniach rozmiaru nowego modułu Blurb, a gdy to zrobisz, wykonasz ogólne kroki!

• Szerokość: 100% (komputer stacjonarny), 85% (tablet i telefon)

Odtwórz przykład nr 1

Domyślna skala transformacji

Teraz, gdy przeszliśmy przez wszystkie ogólne kroki, możemy zacząć koncentrować się na różnych przykładach i sposobie ich osiągnięcia za pomocą opcji transformacji i najechania Divi. Pierwszy przykład, jak widać w powyższym GIF-ie, zwiększa rozmiar modułu po najechaniu kursorem. Aby to osiągnąć, upewnij się, że wartości skali transformacji pozostają „100%” na wszystkich rozmiarach ekranu.

• Dół: 100% (komputer stacjonarny, tablet i telefon)
• Po prawej: 100% (komputer stacjonarny, tablet i telefon)

Skala przekształcenia najechania

Zmodyfikuj wartości skali transformacji po najechaniu kursorem, aby uzyskać efekt rozszerzania.

• Dół: 132%
• Prawo: 132%

Odtwórz przykład nr 2

Domyślny obrót transformacji

Przejdźmy do drugiego przykładu! Zamierzamy stworzyć efekt odwracania w poziomie, jak widać na powyższym GIF-ie. Aby to zrobić, musimy pobawić się wartościami obrotu transformacji. Używamy „najwyższej” możliwej wartości, zanim obrót zmieni się na 0deg. Umożliwi to efekt odwrócenia.

• W prawo: 359,9 stopni

Po najechaniu na transformację Obrót

Włącz opcje najechania dla opcji obracania transformacji i dodaj „0deg”. To, co w zasadzie robimy, to pozwalanie modułowi na obrót o 360 stopni (technicznie, 359,9).

• Po prawej: 0 stopni

Przejścia

Wydłużymy również czas trwania przejścia na karcie Zaawansowane, aby zapewnić płynne przejście.

• Czas trwania przejścia: 1000 ms

Odtwórz przykład nr 3

Domyślny obrót transformacji

W trzecim przykładzie zrobimy prawie dokładnie to samo, co w poprzednim przykładzie, ale zamiast przerzucania w poziomie, tworzymy przerzucenie w pionie.

• Środek: 359,9 stopni

Po najechaniu na transformację Obrót

Pamiętaj, aby po najechaniu kursorem zmienić zmodyfikowaną wartość z powrotem na „0deg”.

• Środek: 0 stopni

Przejścia

I ponownie zwiększ czas trwania przejścia w ustawieniach przejść.

• Czas trwania przejścia: 1000 ms

Odtwórz przykład nr 4

Domyślna skala transformacji

Przejdźmy do następnego i ostatniego przykładu! Zacznij od przekształcenia skali modułu, ale upewnij się, że moduł pozostaje nienaruszony na mniejszych rozmiarach ekranu.

• Dół: 150% (komputer stacjonarny), 100% (tablet i telefon)
• Po prawej: 150% (komputer stacjonarny), 100% (tablet i telefon)

Skala przekształcenia najechania

Zmień skalę transformacji po najechaniu kursorem, aby moduł powrócił na swoje miejsce na pulpicie.

• Dół: 100%
• Prawo: 100%

Domyślny obrót transformacji

Kontynuuj, zmieniając wartości obrotu transformacji. Ponownie upewnij się, że moduł pozostaje nienaruszony na mniejszych rozmiarach ekranu, odpowiednio modyfikując wartości.

• Po lewej: 322deg (komputer stacjonarny), 0deg (tablet i telefon)
• Po prawej: 59 stopni (komputer stacjonarny), 0 stopni (tablet i telefon)

Po najechaniu na transformację Obrót

Pozwól, aby moduł znalazł się na swoim miejscu po najechaniu myszą, zastępując dodane wartości wartościami „0deg”.

• Lewo: 0 stopni
• Po prawej: 0 stopni

Domyślne pochylenie transformacji

Zmodyfikuj również wartości skosu przekształcenia.

• Dół: 22 stopnie (komputer stacjonarny), 0 stopni (tablet i telefon)
• Po prawej: 22deg (komputer stacjonarny), 0deg (tablet i telefon)

Przekształć po najechaniu kursorem

Przywróć wartości domyślne po najechaniu myszą.

• Dół: 0deg
• Po prawej: 0 stopni

Przejścia

Na koniec zwiększ czas trwania przejścia w ustawieniach przejść.

• Czas trwania przejścia: 500 ms

Clone Blurb Module w kolumnie 1 cztery razy i umieść duplikaty w pozostałych kolumnach

Po zakończeniu ustawień przejścia możesz sklonować moduł Blurb cztery razy. Umieść duplikaty w pozostałych kolumnach i gotowe!

Końcowe przemyślenia

W tym samouczku pokazaliśmy, jak twórczo korzystać z opcji transformacji i najeżdżania Divi. Dokładniej, odtworzyliśmy cztery różne przykłady, które pokazują, jak sprawić, by moduły Blurb były bardziej interaktywne, zachowując jednocześnie pożądany efekt na mniejszych ekranach. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!