Zaprojektuj unikalną sekcję funkcji w Divi z ikonami animowanymi przez liczniki okręgów

Większość stron internetowych potrzebuje dobrze zaprojektowanej sekcji funkcji, aby wyświetlić cechy produktów lub usług. W tym samouczku pokażę ci, jak stworzyć unikalną sekcję funkcji w Divi. Aby to zrobić, uzyskamy trochę kreatywności dzięki modułowi Divi's Circle Counter, aby dodać animację do ikon notatek. Używając niestandardowych odstępów, pokażę Ci, jak łatwo ustawić swoje notki tak, aby ładnie pokrywały się z tłem rozdzielającym. Ostateczny projekt jest zarówno czysty, jak i niepowtarzalny. A z kilkoma drobnymi drobiazgami może być świetnym dodatkiem do twojego następnego projektu.

Zacznijmy!

zapowiedź

Oto mały rzut oka na projekt i gif, aby pomóc zilustrować element animacji.

Tworzenie nowej strony i wdrażanie Visual Builder

Aby rozpocząć, przejdź do pulpitu nawigacyjnego WordPress i wybierz Strony > Dodaj nowy. Następnie nadaj tytuł stronie i kliknij, aby użyć Divi Builder. Następnie kliknij, aby użyć programu Visual Builder. Zostaniesz poproszony o trzy opcje. Wybierz opcję „Buduj od podstaw”.

Twoje puste płótno czeka!

Tworzenie nagłówka sekcji funkcji

Górny nagłówek sekcji funkcji jest dość prosty. Unikalnym elementem jest subtelny cień w kształcie pudełka widoczny pod spodem, aby nadać projektowi nieco głębi.

Aby go utworzyć, wstaw jednokolumnowy wiersz do swojej zwykłej sekcji.

Następnie dodaj moduł tekstowy do wiersza i zaktualizuj ustawienia w następujący sposób:

Zadowolony:

<h1>Our Features</h2>
Everything you need.

Czcionka tekstu: Montserrat
Grubość czcionki tekstu: pół pogrubiona
Rozmiar tekstu: 22px
Orientacja tekstu: Środek
Grubość czcionki nagłówka: Ultra Bold
Rozmiar tekstu nagłówka: 6vw (komputer), 50px (tablet), 30px (smartfon)

Teraz zapisz ustawienia i przejdź do ustawień sekcji i dodaj cień pudełka w następujący sposób:

Cień pudełka: patrz zrzut ekranu
Pozycja pionowa cienia pudełka: 19px
Siła rozmycia cieni w pudełku: 80px
Siła rozprzestrzeniania się cieni w pudełku: -16px
Kolor cienia: rgba (136,150,171,0.13)

Zapisz ustawienia.

Całkiem proste rzeczy. Przejdźmy teraz do zabawnej części.

Tworzenie sekcji głównej funkcji i projektu tła

Musimy dodać nową sekcję, aby przechowywać nasze funkcje. Normalnie możesz po prostu dodać nowy wiersz do poprzedniej sekcji, ale w tym przypadku musimy dodać tło rozdzielające, które jest dostępne w elemencie Section.

Śmiało i dodaj nową sekcję bezpośrednio pod właśnie ukończoną sekcją. Następnie dodaj do rzędu czterokolumnowy układ.

Będziemy dodawać notki do tych kolumn, ale na razie zaktualizujmy ustawienia sekcji.

W tej sekcji musimy nadać jej niestandardową maksymalną szerokość. Jest to ważne, aby projekt pozostał na miejscu w większych przeglądarkach. Musimy również dodać sekcję Przekładka, która będzie służyć jako tło, które pokrywa się z rozmieszczeniem naszych notek (więcej o tym później).

Przejdź do ustawień sekcji i zaktualizuj następujące elementy:

Szerokość: 1080px
Wyrównanie sekcji: Środek
Dzielniki: góra
Styl dzielnika: patrz zrzut ekranu
Kolor dzielnika: rgba (136,150,171,0,07)
Wysokość dzielnika: 52%

Zapisz ustawienia.

Nadanie sekcji niestandardowej szerokości (lub maksymalnej szerokości) 1080px to w zasadzie sposób, w jaki twoje wiersze są domyślnie ustawione w sekcji. Zasadniczo więc zmieniamy całą naszą sekcję na rozmiar domyślnego wiersza.

Dodawanie Blurbs do rzędu czterech kolumn

W tym momencie możemy zacząć dodawać nasze notki do każdej z czterech kolumn. Kliknij szarą ikonę w pierwszej kolumnie, aby dodać swoją pierwszą notkę. Zaktualizuj zawartość w polu, aby zawierała mniej tekstu (2 zdania), a następnie wybierz ikonę zamiast obrazu (ja wybrałem ikonę obrazu).

Na karcie projekt zaktualizuj następujące elementy:

Kolor ikony: #974450
Ikona koła: TAK
Kolor koła: rgba (255,255,255,0,5)
Użyj rozmiaru czcionki ikony: TAK
Rozmiar czcionki ikony: 48px
Orientacja tekstu: Środek

Zapisz ustawienia.

Teraz skopiuj i wklej moduł notatek do każdej z pozostałych kolumn, tak aby w każdej kolumnie znajdowała się jedna notatka.

W tym momencie możesz wrócić i zaktualizować ikony, jeśli chcesz, ale nie musisz.

Dodaj liczniki okręgów do nakładających się ikon rozmycia

Aby dodać animację do naszych ikon notatek, nałożymy na każdą ikonę licznik okręgu, który ma inną wartość liczbową. Spowoduje to, że animacja okręgu będzie się stopniowo zwiększać wraz z każdą ikoną, pokazując postęp. Możesz jednak użyć dowolnej wartości liczbowej z każdym licznikiem okręgu.

Kliknij szarą ikonę „Dodaj nowy moduł” pod modułem notki w pierwszej kolumnie, a następnie dodaj moduł licznika.

Zanim zaczniesz edytować ustawienia modułu okręgu, przeciągnij go nad moduł notki. Teraz możesz zaktualizować ustawienia treści w następujący sposób:

Usuń tekst w polu tytułowym
Liczba: 25

Następnie zaktualizuj ustawienia karty projektu w następujący sposób:

Kolor tła paska: #974450 (ten sam kolor co ikony notatek)
Kolor tekstu liczbowego: rgba(0,0,0,0) (jest to całkowicie przezroczyste, dzięki czemu ukrywa liczbę)
Rozmiar tekstu liczbowego: 0px (aby pozbyć się niechcianego miejsca na tekst w okręgu)
Szerokość: 109px (ustawiono na podstawie rozmiaru ikony, na którą będzie się nakładać)
Wyrównanie modułu: Środek
Margin-bottom: -102px (to idealnie nałoży ikonę)

Zapisz ustawienia.

Teraz wszystko, co musisz zrobić, to skopiować i wkleić moduł licznika okręgów do każdej z pozostałych kolumn, a następnie przeciągnąć go na górę każdej notki. Po umieszczeniu zduplikowanych liczników okręgów zaktualizuj numer drugiego licznika okręgu na 50, numer trzeciego licznika na 75, a czwarty numer licznika na 100. Po zakończeniu animacji wynik powinien wyglądać tak.

Użyj dopełniania wierszy, aby ustawić ikony tak, aby pokrywały się z dzielnikiem

Ostatnim krokiem do tego projektu jest umieszczenie ikon tak, aby pokrywały się z łukiem tła przegrody. Aby to zrobić, musimy dodać niestandardowe wypełnienie wiersza. Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

Ustaw pełną szerokość tego wiersza: TAK
Kolumna 2: Niestandardowe wypełnienie: 9% u góry (komputer), 0% u góry (tablet)
Kolumna 3 Niestandardowe wypełnienie: 9% u góry (komputer), 0% u góry (tablet)

Otóż ​​to!

Sprawdź efekt końcowy.

Zwróć uwagę, że ikony są teraz animowane przez licznik okręgów o różnych wartościach liczbowych. A ikony pokrywają się z tłem rozdzielającym.

Jak wygląda sekcja funkcji na urządzeniach mobilnych

Oto spojrzenie na to, jak projekt wygląda na wyświetlaczach tabletów i smartfonów.

Końcowe przemyślenia

Unikalne elementy tego projektu sekcji funkcji są lekkie i subtelne, co powinno ułatwić włączenie do własnych układów z niewielkimi poprawkami. A jeśli animacje licznika okręgów nie są twoją filiżanką herbaty, możesz je pominąć i po prostu użyć ikony okręgu modułu notki. Możesz też użyć tylko liczników okręgów z wartościami liczbowymi widocznymi w układzie kreacji do prezentowania statystyk. Jeśli już, to mam nadzieję, że podsunie ci to kilka pomysłów do samodzielnego zbadania.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!