Odkrywanie, jak tworzyć i animować kształty CSS w Divi

Tworzenie kształtów za pomocą CSS w projektowaniu stron internetowych w żadnym wypadku nie jest nową koncepcją. W rzeczywistości klasyczna metoda tworzenia kształtów CSS została w dużej mierze przyćmiona przez inne rozwiązania graficzne HTML, takie jak Canvas i SVG. Jednak kształty CSS (przynajmniej te podstawowe) są znacznie łatwiejsze do stworzenia i nadal mogą odgrywać znaczącą rolę w projektowaniu stron internetowych. Dodatkowo, gdy dodasz animację przewijania do tych kształtów, może pojawić się zupełnie nowy element projektu.

W tym samouczku dowiemy się, jak tworzyć i animować kształty CSS w Divi. Gdy zrozumiesz podstawową koncepcję tworzenia kilku kształtów za pomocą wbudowanych opcji Divi, możesz animować te kształty, aby stworzyć unikalne projekty animacji przewijania dla swojej witryny. Zdziwisz się, jak wiele możesz zrobić!

Zacznijmy.

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.

Kliknij przycisk Importuj.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Odkrywanie, jak tworzyć kształty CSS z animacją w Divi

Struktura wierszy i kolumn

Najpierw dodaj jedną trzecią dwie trzecie wiersza kolumny do sekcji.

Zanim zrobimy cokolwiek innego, otwórz ustawienia wiersza i zaktualizuj następujące elementy:

• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: TAK
• Szerokość: 95%
• Maksymalna szerokość: 900px

UWAGA: Te ustawienia są kluczowe dla konfiguracji naszego projektu. Na przykład struktura kolumn jedna trzecia dwie trzecie połączona z wierszem o maksymalnej szerokości 900px bez marginesów (szerokość rynny 1), daje nam znać, że lewa kolumna będzie miała dokładnie 300px szerokości. Co więcej, jeśli zachowam mój projekt w kolumnie o szerokości 300 pikseli, mogę mieć pewność, że będzie dobrze wyglądał również na tabletach i urządzeniach mobilnych.

Dodawanie elementu dystansowego modułu rozdzielającego

Następnie dodaj separator, aby utworzyć odstępy potrzebne dla kolumny, która będzie zawierać nasze kształty CSS.

W tym momencie powinieneś otworzyć modalny widok warstw, aby zarządzać warstwami/modułami w przyszłości, które można znaleźć w menu ustawień Divi Builder.

Otwórz ustawienia dzielnika i zaktualizuj wysokość dzielnika w następujący sposób:

• Pokaż dzielnik: NIE
• Wysokość: 150px

Ponieważ nasze kształty CSS będą pozycjonowane bezwzględnie, rzeczywisty odstęp w obszarze kolumny można łatwo dostosować, dostosowując wysokość separatora. Osobiście uznałem to za łatwiejsze niż próba manipulowania wysokością lub rozstawem kolumny. Dodatkowo daje dodatkowy bonus stylizacji przegrody jako dodatkowego elementu projektu (lub kształtu). Na razie możesz myśleć o tym jako o płótnie dla przyszłych projektów kształtów CSS.

Tworzenie pierwszego kształtu CSS za pomocą opcji obramowania

Aby stworzyć nasz kształt CSS, użyjemy modułu dzielnika. Technicznie używamy tylko obramowań otaczających moduł, a nie obszaru modułu. (Możesz więc użyć innych modułów, takich jak moduły tekstowe lub moduły kodu).

Aby utworzyć kształt CSS, zduplikuj wcześniej utworzony moduł dzielnika.

Następnie wyjmij wysokość i szerokość modułu dzielnika, ustawiając każdy z nich na 0px w następujący sposób:

• Szerokość: 0px
• Wysokość: 0px

Dla pierwszego kształtu utworzymy trójkąt prostokątny, który będzie wskazywał na prawy górny róg. Aby to zrobić, zaktualizuj style obramowania separatora w następujący sposób:

• Kolor obramowania: rgba (245,44,143,0,5)
• Szerokość górnej krawędzi: 150px
• Szerokość lewej krawędzi: 150px
• Lewy kolor obramowania: przezroczysty

Uwaga: Nadanie kolorowi obramowania półprzezroczystości pomoże odsłonić nakładające się kształty dla dodatkowego elementu projektu.

Dobrym pomysłem jest również oznaczenie tej nowej przegrody jako „kształt 1”, aby ułatwić późniejszą identyfikację.

Ponieważ zamierzamy dodać animację przewijania do dodatkowych kształtów, które utworzymy, ważne jest, aby nadać temu kształtowi (i dodatkowym kształtom w tej kolumnie) pozycję bezwzględną, aby układały się jeden na drugim, a zatem miały ten sam punkt wyjścia dla animacji.

Na karcie Zaawansowane zmień pozycję na bezwzględną i zachowaj domyślną lokalizację pozycji w prawym górnym rogu:

• Pozycja: bezwzględna
• Lokalizacja pozycji: u góry po prawej (domyślnie)

UWAGA: Ważne jest, aby lokalizacja pozycji znajdowała się w prawym górnym rogu, ponieważ wszelkie inne lokalizacje, które dodają wyśrodkowane położenie (takie jak u góry na środku lub wyśrodkowane), będą kolidować z opcjami przekształcania, które dodamy później do kształtów CSS.

Gratulujemy stworzenia trójkąta CSS! Chociaż nie jest to samo w sobie imponujące, jest coraz lepiej. Możemy zduplikować ten trójkąt, aby tworzyć wszelkiego rodzaju nowe projekty, gdy przeniesiemy je za pomocą animacji.

Tworzenie kształtu 2 za pomocą animacji przewijania

Aby utworzyć następny kształt (lub w tym przypadku trójkąt), zduplikuj poprzedni moduł dzielnika (kształt 1), aby dodać identyczny trójkąt w prawym górnym rogu, który znajduje się bezpośrednio nad poprzednim kształtem trójkąta.

Następnie oznacz go „kształt 2”.

Otwórz ustawienia dzielnika „shape 2” i dodaj następujący efekt transformacji obrotowej:

• Efekty transformacji przewijania: obracanie
• Włącz obracanie: TAK
• Obrót początkowy: 0° (przy 30%)
• Średni obrót: 45° (przy 45%)
• Obrót końcowy: 90° (przy 60%)

Tworzenie kształtu 3 za pomocą animacji przewijania

Zduplikuj moduł dzielnika „kształt 2” i oznacz duplikat „kształt 3”.

Następnie zaktualizuj ustawienia obrotu transformacji w następujący sposób:

• Średni obrót: 90°
• Zakończenie obrotu: 180 °

Aby utworzyć ostateczny (czwarty) kształt, zduplikuj moduł rozdzielacza kształtu 3 i oznacz go „kształt 4”.

Następnie zaktualizuj ustawienia obrotu transformacji w następujący sposób:

• Średni obrót: 180 °
• Zakończenie obrotu: 270°

W tym momencie powinieneś zobaczyć kwadratowy kształt utworzony przez nakładające się, a teraz obrócone trójkąty.

Testowanie animacji przewijania

Aby przetestować animację przewijania tych kształtów, dodajmy tymczasowe marginesy na górze i na dole sekcji. Otwórz ustawienia sekcji i zaktualizuj następujące elementy:

• Margines: 80vh góra, 80vh dół

Oto jak powinien wyglądać podczas przewijania strony w górę iw dół.

Zanim zaczniemy odkrywać nowe sposoby dostosowywania tych animacji kształtów, uzupełnimy nasz projekt o próbny tytuł w prawej kolumnie. Możesz pominąć ten krok, jeśli chcesz kontynuować projektowanie kształtów.

Dodawanie pozornego tytułu do prawej kolumny (opcjonalnie)

Aby pomóc Ci zorientować się, jak wykorzystać te animowane projekty kształtów na stronie, pomyślałem, że dobrym pomysłem byłoby dodanie fałszywego tytułu do prawej kolumny. Byłby to świetny przykład tego, jak uzupełnić tytuły sekcji strony o oszałamiającą animację projektu przy użyciu kształtów CSS.

Niestandardowy CSS w kolumnie

Zanim dodamy tytuł, możemy upewnić się, że tekst jest wyśrodkowany w pionie w kolumnie, używając właściwości display flex. Otwórz ustawienia dla kolumny 2 i dodaj następujący niestandardowy kod CSS do elementu głównego:

display:flex;
flex-direction:column;
align-items:center;

Po umieszczeniu kolumny CSS dodaj nowy moduł tekstowy do kolumny 2.

Następnie otwórz ustawienia tekstu i zaktualizuj treść treści o nagłówek h2 w następujący sposób:

<h2>elegant design</h2>

Na karcie projekt zaktualizuj następujące elementy:

• Czcionka nagłówka 2: Poppins
• Wyrównanie tekstu nagłówka 2: domyślne (komputer), środek (tablet i telefon)
• Rozmiar tekstu nagłówka 2: 55px (komputer), 45px (tablet), 35px (telefon)
• Szerokość: 100%

Skoro już przy tym jesteśmy, śmiało dodaj następujący efekt przekształcenia przewijania „ruch poziomy” do tekstu w następujący sposób:

• Efekty transformacji przewijania: ruch poziomy
• Włącz ruch poziomy: TAK
• Przesunięcie początkowe: 2 (przy 20%)
• Przesunięcie środkowe: 1 (przy 35%)
• Przesunięcie końcowe: -0,6

Następnie otwórz responsywne karty i zaktualizuj końcowe przesunięcie w następujący sposób:

• Przesunięcie końcowe (tablet i telefon): 0

Poznawanie animacji w kształcie trójkąta w prawym górnym rogu

Kontynuując to, co przerwaliśmy przed dodaniem tekstu tytułu, możemy teraz zbadać możliwości projektowania/animacji dla obecnego kształtu trójkąta w prawym górnym rogu.

Prostym sposobem na to jest użycie multiselect do zaznaczenia wszystkich czterech kształtów CSS (zbudowanych z modułów dzielników).

Następnie otwórz ustawienia jednego z kształtów, aby wyświetlić modalne ustawienia elementów, które zaktualizują projekt wszystkich czterech modułów jednocześnie, aby można było zobaczyć wyniki.

Następnie wybierz kartę projektu i otwórz kartę Źródło transformacji. Ustaw modalny widok warstw i modalny ustawienia elementu po lewej stronie, aby można było zobaczyć zmiany wizualnie w Divi Builder.

Eksplorowanie animacji kształtów kształtów CSS w górę trójkąta

Teraz, gdy masz już konfigurację, możesz odkrywać tworzenie nowych kształtów i sprawdzać, jak wyglądają z obecnymi animacjami przewijania.

W następnym przykładzie utworzymy kształt CSS w kształcie trójkąta w górę (technicznie trójkąta równoramiennego).

Aby to zrobić, upewnij się, że wybrałeś wiele kształtów i zaktualizuj style obramowania dla każdego w następujący sposób:

• Szerokość prawego obramowania: 100px
• Prawy kolor obramowania: przezroczysty
• Szerokość dolnej krawędzi: 100px
• Kolor dolnej krawędzi: rgba (245,44,143,0,5)
• Szerokość lewej krawędzi: 100px
• Lewy kolor obramowania: przezroczysty

Zaktualizuj Transform Origin, aby poznać nowe projekty animacji przewijania

Teraz, gdy mamy nieco nowy kształt/trójkąt, wynikowa animacja obrotu również będzie inna. Aby zbadać różne możliwości projektowania animacji przewijania, upewnij się, że wszystkie cztery kształty są wybierane za pomocą wielokrotnego wyboru, a następnie dostosuj początek przekształcenia, aby wyświetlić wyniki.

Eksploracja animacji Teardrop CSS Shape Design

Do tej pory powinieneś już rozumieć, jak działa ten proces. W następnym projekcie stworzymy kształt łezki, który można wykonać, tworząc trójkąt w prawym dolnym rogu z promieniem obramowania.

Aby to zrobić, upewnij się, że wybrałeś wiele kształtów i zaktualizuj style obramowania dla każdego w następujący sposób:

• Zaokrąglone rogi: 0px górny prawy, 50% górny prawy, 50% dolny prawy, 50% dolny lewy
• Szerokość dolnego obramowania: 150px
• Kolor dolnej krawędzi: rgba (245,44,143,0,5)
• Szerokość lewej krawędzi: 150px
• Lewy kolor obramowania: przezroczysty

Następnie dostosuj wartość początku transformacji, aby zapoznać się z projektami animacji przewijania dla łezki.

Eksplorowanie animacji kształtów CSS dla sektora (lub Pizza Slice)

Do tej pory powinieneś już rozumieć, jak działa ten proces. W tym następnym projekcie stworzymy kształt sektora, który można wykonać, tworząc trójkąt po prawej stronie u dołu z promieniem obramowania.

Aby to zrobić, upewnij się, że wybrałeś wiele kształtów i zaktualizuj style obramowania dla każdego w następujący sposób:

• Zaokrąglone rogi: 0px górny prawy, 0px górny prawy, 50% dolny prawy, 50% dolny lewy
• Szerokość prawego obramowania: 75px
• Prawy kolor obramowania: przezroczysty
• Szerokość dolnego obramowania: 75px
• Kolor dolnej krawędzi: rgba (245,44,143,0,5)
• Szerokość lewej krawędzi: 75px
• Lewy kolor obramowania: przezroczysty

Następnie dostosuj początek transformacji, aby poznać różne projekty animacji przewijania.

Odkrywanie animacji trapezoidalnych kształtów CSS

W naszym ostatecznym projekcie kształtu CSS stworzymy trapezoidalny kształt CSS, który może dodać dodatkową szerokość do trójkąta w górę (lub równoramiennego).

Aby to zrobić, upewnij się, że wybrałeś wiele kształtów i zaktualizuj style obramowania dla każdego w następujący sposób:

• Zaokrąglone rogi: 0px
• Szerokość prawego obramowania: 100px
• Prawy kolor obramowania: przezroczysty
• Szerokość dolnej krawędzi: 100px
• Kolor dolnej krawędzi: rgba (245,44,143,0,5)
• Szerokość lewej krawędzi: 100px
• Lewy kolor obramowania: przezroczysty

Następnie zaktualizuj szerokość kształtów/modułów w następujący sposób:

• Szerokość: 100px

Mając kształt trapezu, możesz ponownie użyć aktualizacji źródła transformacji dla każdego z nich, aby poznać nowe projekty animacji przewijania.

Ostateczne rezultaty

Rzućmy okiem na kilka moich ulubionych projektów, które są możliwe dzięki temu samouczkowi.

Końcowe przemyślenia

Odkrywanie, jak tworzyć i animować kształty CSS w Divi, może być świetnym sposobem na pobudzenie tych kreatywnych soków, gdy poszerzysz swoją perspektywę mocy wbudowanych możliwości projektowych Divi. Sztuką jest zrozumienie, jak używać obramowań do tworzenia różnych kształtów. Następnie możesz dodać animację przewijania do tych kształtów. Ale nie zapomnij o sile źródła transformacji, która zmienia sposób, w jaki te animacje pozycjonują każdy kształt. To oczywiście wierzchołek góry lodowej, gdy pomyślisz o różnych kształtach i animacjach, które możesz łączyć, aby tworzyć niekończące się kreatywne projekty dla swojej witryny.

Mamy nadzieję, że da ci to kilka pomysłów, jak dodać idealną animację kształtu CSS do własnej witryny.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!