Kompletny przewodnik po tworzeniu płynnych projektów przycisków w Divi

Płynne projektowanie przycisków to proces projektowania przycisku, który płynnie skaluje się do rozmiaru okna przeglądarki (lub rzutni). Polega na zastosowaniu praktyk płynnego projektowania stron internetowych do wszystkich właściwości projektowych przycisku. Dzięki temu projekt przycisku jest przewidywalny i spójny na wszystkich urządzeniach. Jest to odświeżająca alternatywa dla tradycyjnych technik projektowania responsywnego, które obejmują wprowadzanie licznych zmian w projekcie w pewnych punktach przerwania.

W tym samouczku pokażemy, jak przejść przez proces tworzenia projektów płynnych przycisków w Divi. Oto, co omówimy:

• Anatomia przycisku Divi
• Jak zrobić płynny przycisk w Divi
• Zrozumienie jednostki długości em
• Używanie rozmiaru czcionki płynnej (lub skalującej) dla przycisku
• Anatomia przycisku Fluid Divi
• Tworzenie projektów przycisków płynnych w Divi (5 przykładowych projektów)
• Płynne przyciski używające Clamp() dla rozmiaru czcionki

Ponieważ projekt przycisków płynów opiera się na implementacji płynnej typografii, pomocne może być zapoznanie się z naszym kompletnym przewodnikiem po płynnej typografii w Divi.

Zacznijmy!

zapowiedź

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

A oto kod pen, który demonstruje tę koncepcję projektowania płynnych przycisków.

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.

Anatomia przycisku Divi

Domyślnie przycisk Divi będzie miał wbudowane style, które zawierają zarówno jednostki długości px, jak i em (patrz ilustracja powyżej). Właściwości używające jednostki długości w pikselach obejmują:

• Rozmiar czcionki: 20px
• Zaokrąglone rogi: 3px
• Szerokość obramowania: 3px
• Rozmiar czcionki ikony: dziedziczony przez rozmiar czcionki (20px)

Te wartości pikseli są bezwzględne i pozostaną takie same bez względu na to, czy zmienisz rozmiar czcionki, czy rozmiar okna przeglądarki.

Właściwości używające jednostki długości em obejmują:

• Wypełnienie: 0,3 em na górze, 0,3 em na dole, 0.7 em w lewo, 2 em w prawo
• Wysokość linii: 1,7 em
• Ikona Lewy margines: 0.3em

Te wartości em odnoszą się do rozmiaru czcionki elementu (lub przycisku) i zmieniają się (skalują) za każdym razem, gdy zmienia się rozmiar czcionki.

Jak zrobić płynny przycisk w Divi

Zrozumienie jednostki długości em

Kluczem do stworzenia przycisku płynnego w Divi jest zrozumienie, jak działają jednostki długości em. Jednostka długości em jest zależna od rozmiaru czcionki elementu (niezależnie od tego, jaki jest). Zasadniczo wartość em jest wielokrotnością rozmiaru czcionki elementu. Na przykład, jeśli rozmiar czcionki elementu to 20px, 2em to to samo co 2(20px). Oznacza to, że jednostka długości em zmieni się za każdym razem, gdy zmieni się rozmiar czcionki elementu. Jednak jednostka długości w pikselach nie ulegnie zmianie.

Kontynuując nasz domyślny przykład, domyślnym prawym dopełnieniem przycisku jest 2em (lub 2 wielokrotności em). Ponieważ rozmiar czcionki przycisku to 20px, prawe dopełnienie to 2 razy 20px (czyli 40px). Wyściółka górna i dolna to 0.3em. Tak więc górna i dolna część to 6px (0,3 razy 20px równa się 6px).

Zobacz poniższą ilustrację, aby zrozumieć rzeczywistą wartość jednostek długości em na podstawie rozmiaru czcionki.

Używanie rozmiaru czcionki płynnej (lub skalującej) dla przycisku

Projektując płynny przycisk przy użyciu jednostek długości em, wszystko zależy od rozmiaru czcionki przycisku. Mówiąc inaczej, rozmiar czcionki zostanie zastosowany do wartości wszystkich właściwości przy użyciu jednostki długości em przycisku. Tak więc, jeśli chcesz, aby style przycisków stały się płynne, musisz nadać przyciskowi płynny (lub skalowany) rozmiar czcionki. Najczęściej używaną jednostką długości płynu jest jednostka długości vw, która odpowiada szerokości rzutni przeglądarki. Innymi słowy, jednostka długości vw zmienia się wraz ze zmianą szerokości przeglądarki.

Aby utworzyć płynny przycisk, zastąp rozmiar czcionki 20px czymś w rodzaju 2,4vw. Ponieważ wartość ta zmienia się wraz z szerokością przeglądarki, wszystkie właściwości przycisku przy użyciu jednostki długości em będą również skalowane wraz z szerokością przeglądarki.

Anatomia przycisku Fluid Divi

Mówiąc najprościej, budowanie płynnego przycisku Divi obejmuje dwie kluczowe zasady:

1. Użyj płynnej jednostki długości (vw) dla rozmiaru czcionki
2. Użyj wartości jednostek długości em dla wszystkich właściwości stylu przycisku

Oznacza to, że możesz używać jednostek długości em dla szerokości obramowania, promienia obramowania, a nawet cieni.

Oto ilustracja przycisku płynnego, który zawiera płynny rozmiar czcionki (2,4vw) i jednostki długości em dla wszystkich właściwości stylu.

Rzeczywiste wartości każdej właściwości przy użyciu jednostek długości em odziedziczą płynną wartość rozmiaru czcionki i skalę względem szerokości rzutni przeglądarki (vw).

Tworzenie płynnych projektów przycisków w Divi

Teraz, gdy lepiej rozumiemy, jak stworzyć płynny przycisk. Stwórzmy kilka płynnych projektów przycisków w Divi.

#1 Podstawowy przykład

Na początek stwórzmy podstawowy przykład, który zilustrowaliśmy wcześniej.

W Divi Builder utwórz nowy wiersz z jedną kolumną.

W zakładce projekt zaktualizuj rozmiar tekstu przycisku o wartość jednostki długości vw, tak aby skalował się z szerokością rzutni:

• Rozmiar tekstu przycisku: 2.4vw (komputer i tablet), 18,4px (telefon)

Następnie zaktualizuj następujące właściwości o wartość jednostki długości em, która jest zależna od rozmiaru tekstu przycisku:

• Szerokość obramowania przycisku: 0.15em
• Promień obramowania przycisku: 1,3 em
• Odstępy między literami przycisków: 0,05 em
• Wypełnienie: 0,3 em na górze, 0,3 em na dole, 1 em w lewo, 2 em w prawo
• Cień pudełka: patrz zrzut ekranu
• Pozycja pionowa cienia pudełka: 0.15em

Oto ostateczny wynik.

Przycisk płynny #2 z zaokrąglonymi rogami i cieniem w pudełku

Aby rozpocząć, utwórz nowy przycisk i zaktualizuj tekst przycisku, aby brzmiał „Rozpocznij”.

Na karcie projekt zaktualizuj następujące elementy:

• Użyj niestandardowych stylów dla przycisku: TAK
• Rozmiar tekstu przycisku: 2.4vw (komputer i tablet), 18,4px (telefon)
• Kolor tekstu przycisku: #000000
• Kolor tła przycisku: #ffffff (pulpit), #d9f9e9 (najechanie)
• Szerokość obramowania przycisku: 0.15em
• Kolor obramowania przycisku: #d9f9e9
• Promień obramowania przycisku: 1,3 em

• Odstępy między literami przycisków: 0,05 em
• Czcionka przycisku: Jura
• Grubość czcionki przycisku: pół pogrubiona
• Ikona przycisku: strzałka w prawo
• Kolor ikony przycisku: #000000
• Pokaż tylko ikonę po najechaniu na przycisk: NIE

• Wypełnienie: 0,2 em na górze, 0,2 em na dole, 1 em w lewo, 2 em w prawo
• Cień pudełka: patrz zrzut ekranu
• Pozycja pionowa cienia pudełka: 0.3em
• Siła rozmycia cieni w pudełku: 0,5 em
• Siła rozprzestrzeniania się cienia pudełka: -0,3 em

Oto wynik.

#3 Przycisk Płynny z Unikalnym Cieniem Pudełka i Rozmieszczeniem Ikon

W tym kolejnym projekcie przycisków płynnych użyjemy unikalnego cienia pudełka i rozmieszczenia ikon.

Aby rozpocząć, zduplikuj poprzedni przykład #2. Następnie otwórz ustawienia przycisku duplikatu, aby zaktualizować projekt.

Na karcie projekt zaktualizuj następujące elementy:

• Promień obramowania przycisku: 0px
• Kolor ikony przycisku: #ffffff
• Cień pudełka: patrz zrzut ekranu
• Pozycja pozioma cienia pudełka: -1,75 em
• Pozycja pionowa cienia pudełka: 0px
• Kolor cienia: #000000

Na karcie Zaawansowane dodaj następujący niestandardowy kod CSS do elementu After:

margin-right: .3em;
right: 0;

Oto wynik.

#4 Płynny przycisk z trójkolorowym gradientem tła

W tym kolejnym projekcie przycisku płynnego stworzymy unikalny trójkolorowy gradient tła dla przycisku, łącząc gradient tła z unikalnym stylem cieniowania.

Aby utworzyć przycisk, zduplikuj wcześniej zaprojektowany przycisk z przykładu #3.

Następnie otwórz ustawienia przycisku, aby zaktualizować style.

Na karcie Zaawansowane usuń niestandardowy kod CSS w elemencie After.

Na karcie Projekt zaktualizuj następujące elementy:

• Kolor tekstu przycisku: #ffffff
• Kolor lewego gradientu tła przycisku: #f475ee
• Prawy gradient tła przycisku: #9694fc
• Kierunek gradientu: 90 stopni
• Pozycja końcowa: 2,5 em
• Szerokość obramowania przycisku: 0px
• Cień pudełka: patrz zrzut ekranu
• Pozycja pozioma cienia pudełka: -2,5 em
• Pozycja pionowa cienia pudełka: 0px
• Siła rozmycia cieni w pudełku: 1,5 em
• Siła rozprzestrzeniania się cienia pudełka: -1em
• Kolor cienia: #85c6f2

A oto wynik.

#5 Przycisk płynu z niestandardową szerokością płynu

W przypadku tego następnego projektu przycisku płynu dodamy do niego niestandardową szerokość płynu. Umożliwi nam to tworzenie większych przycisków, które płynnie skalują się z szerokością przeglądarki.

Aby utworzyć przycisk, zduplikuj wcześniej zaprojektowany przycisk z przykładu nr 2.

Na karcie Projekt zaktualizuj opcję Wyrównanie przycisku na wyśrodkowane.

Na karcie Zaawansowane dodaj następujący niestandardowy kod CSS do elementu głównego:

Pulpit

display:block;
width: 100%;
max-width: 15em;

Oto wynik.

Ostateczne rezultaty

Teraz zobacz ostateczne wyniki naszych 4 płynnych projektów przycisków.

Płynne przyciski używające Clamp() dla rozmiaru czcionki

Jeśli chcesz mieć większą kontrolę nad minimalnym i maksymalnym rozmiarem przycisku z płynem, możesz użyć funkcji CSS Clamp(), aby ustawić minimalny rozmiar czcionki, rozmiar czcionki skalującej i maksymalny rozmiar czcionki.

Aby to zrobić, musisz zresetować rozmiar tekstu przycisku dla każdego z przycisków, tak aby powrócił do ustawienia domyślnego.

Następnie w zakładce Zaawansowane dodaj następujący kod CSS do elementu głównego każdego z przycisków.

Dzięki temu rozmiar czcionki będzie miał minimalny rozmiar 20 pikseli, rozmiar skalera (lub płynu) 4vw i maksymalny rozmiar 40 pikseli.

Główną zaletą korzystania z clamp() jest to, że możesz zatrzymać skalowanie przycisku przed zbyt dużym lub zbyt małym rozmiarem, zachowując jednocześnie responsywny projekt.

Wyniki końcowe z Clamp()

Ponownie wyniki końcowe

A oto ostateczne spojrzenie na każdą kolekcję przycisków płynów z i bez funkcji clamp() jako rozmiaru czcionki.

Korzystanie z rozmiaru czcionki vw (komputer i tablet) i jednostki długości w pikselach (telefon)

Używanie clamp() do ustawiania minimalnego, skalującego i maksymalnego rozmiaru czcionki

Końcowe przemyślenia

Tworzenie płynnych przycisków w Divi opiera się na dwóch głównych zasadach: (1) Użyj płynnej jednostki długości (takiej jak vw) dla rozmiaru czcionki przycisku oraz (2) użyj wartości jednostek długości em dla wszystkich właściwości stylu przycisku. Kiedy już to zrozumiesz, ważne jest, aby znaleźć odpowiedni rozmiar czcionki płynnej (za pomocą vw, clamp() itp.) i dostosować, a następnie użyć różnych wartości em w pozostałej części projektu przycisku. Dzięki temu przycisk będzie idealnie płynnie skalowany podczas dostosowywania szerokości widocznego obszaru przeglądarki.

Pamiętać. Przyciski płynów tak naprawdę nie działają, gdy ich kontenery nadrzędne również nie są płynne. Na przykład, jeśli masz płynny przycisk w wierszu o wielkości 400 pikseli, przycisk nie będzie miał miejsca na skalowanie, a projekt się zepsuje. Nadanie rzędowi szerokości 80% lub 90vw byłoby bardziej odpowiednie dla projektów z płynnymi przyciskami.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!