Zarządzanie czcionkami i wielkościami czcionek z Divi 5

Czcionki i typografia nadają ton swojej witrynie. Dobre wykonanie może pomóc Twojej marce i poprawić czytelność. Divi 5 sprawia, że ​​praca z czcionkami jest szybka i łatwa. Dzięki nowym funkcjom Divi, takim jak zmienne projektowe i wstępne ustawienia grup opcji, konfigurowanie czcionek staje się łatwe.

Ten post uczy, jak zarządzać czcionkami i wielkościami czcionek w Divi 5, tworząc responsywną typografię, która pięknie skaluje się na wszystkich urządzeniach.

Divi 5 jest gotowy na nowe kompilacje stron internetowych, ale wykończamy system kompatybilności wstecznej. W międzyczasie wstrzymaj się z aktualizacji witryn zbudowanych na D4. Damy Ci znać, kiedy nastąpi ta zmiana.

Rozważania podczas myślenia przez czcionki nowej strony internetowej

Podczas uruchamiania nowej witryny wybór czcionek kształtują pierwsze wrażenie użytkownika. Rozważ te punkty, aby upewnić się, że typografia obsługuje Twoją treść:

• Czytelność : Wybierz czyste czcionki, szczególnie w przypadku tekstu ciała.
• Spójność : Ogranicz swoje czcionki - dwie lub trzy najlepiej pracują, z co najmniej jednym na nagłówki i jeden dla tekstu.
• Reaktywność : Upewnij się, że czcionki dostosowują się do różnych rozmiarów ekranu (najlepiej od 320px do 1440px).
• Kompatybilność : Wybierz bezpieczne lub popularne czcionki, aby uniknąć problemów z wyświetlaniem.

Jak zarządzać czcionkami i wielkościami czcionek w Divi 5

Użyjmy najważniejszego układu z biblioteki Divi. Wybierzemy układ strony docelowej z pakietu „Business CV” i odnowimy typografię za pomocą nowych funkcji Divi 5. Jeśli masz istniejącą witrynę Divi 5, ale chcesz poprawić jego typografię, możesz wykonać te same kroki bez użycia tego układu.

Krok 1: Wybór par czcionek

Dobre pary czcionek Styl i czytelność. Czcionki Google są również bezpiecznym zakładem, ponieważ są wbudowane w Divi i łatwe w użyciu.

W poniższych przykładach będziemy trzymać się zastosowania poppin przez układy do nagłówków i tekstu nadwozia. Możesz również spróbować parować Lora i Roboto.

Krok 2: Ustawienie czcionek dla pierwotnego nagłówka i ciała

Teraz, gdy wybrałeś czcionki, możemy je dodać do strony internetowej za pomocą Divi. W edytorze wizualnym otwórz menedżer zmiennych w lewym górnym rogu. Zmienne projektowe Divi pozwalają na całym świecie kontrolować czcionki na swojej stronie internetowej.

Istnieją dwie domyślne zmienne czcionek dla pierwotnych czcionek nagłówka i ciała. Przejdź do sekcji czcionek i ustaw „ Poppins ” jako czcionkę nagłówka i „ Roboto ” jako czcionkę ciała.

Ustaw swoje czcionki na wszystko, co odpowiada Twojemu projektowi i wymaganiom marki

W tym momencie dobrym pomysłem może być również upewnienie się, że kolory marki są również ustawione jako zmienne projektowe, szczególnie jeśli planujesz użyć niektórych z tych kolorów w tekście.

Upewnij się, że zapisuje swoje zmienne podczas wprowadzania ich

Krok 3: Tworzenie rozmiarów czcionek

Teraz dla bardziej zaangażowanej części. Najlepiej jest przemyśleć, jak sprawić, by typografia dobrze wyglądała na każdym rozmiarze urządzenia. Z Divi 5 masz dwie opcje. Pierwszą i preferowaną opcją jest użycie Clamp (), a drugą jest wielokrotne ustawienie czcionki w różnych punktach przerwania.

Sposób, w jaki budujesz rozmiary czcionki dla każdego poziomu nagłówka, tekst nadwozia i inne sytuacje tekstowe, zależy całkowicie od Ciebie.

Płyn typogrony z zaciskiem ()

Clamp () pozwala ustawić minimalną wartość, preferowaną wartość i maksymalną wartość. W innym poście zajmujemy się Clamp () i zapewniamy łatwy sposób na ustalenie tych wartości. Ale oto przykład:

Ten układ ma domyślny rozmiar H1 i unikalny (i większy) rozmiar H1 dla imienia osoby w pierwszej sekcji. Przenieśliśmy tę samą zasadę na powyższej tabeli wielkości i dodaliśmy mniejszą zmianę czcionki ciała.

Możesz przetestować rozmiar czcionki w prostym dokumencie HTML, aby zobaczyć rzeczy w izolacji (można to również zrobić w Divi). Oto jak wygląda powyższa rozmiar czcionki przy parowaniu czcionek.

Gdy czujesz się komfortowo z rozmiarami czcionek, możesz je dodać jako zmienne projektowe. Podaj każdemu dostrzegalną nazwę i wklej wartość po prawej stronie.

Naprawiono jednostki z punktami przerwania

Clamp () jest najbardziej wszechstronną opcją do rozmiaru czcionek, ale wielu użytkowników nadal używa stałych wartości, takich jak piksele lub REM. Możesz je używać wraz z konfigurowalnymi punktami przerwania Divi, aby w razie potrzeby skalować czcionkę w górę iw dół.

Ponieważ liczba wartości dla podobnego efektu potrójnie podczas używania go w ten sposób (zamiast 10 wartości zacisków () powyżej, byłoby to 30 indywidualnych wartości). Niekoniecznie zaleca się wypełnienie menedżera zmiennej tymi wartościami, ale możesz, jeśli chcesz,

Możesz zbudować swoją strukturę wielkości dla każdego punktu przerwania i przenieść ją do następnego kroku. Zamiast umieszczać je jako zmienne projektowe, możesz zastosować je bezpośrednio do ustawień opcji i ustawień wstępnych elementów.

Krok 5: Dodanie rozmiarów czcionek z menedżera zmiennego do ustawień wstępnych

Po ustawianiu zmiennych liczbowych (lub przynajmniej sformułowanych) nadszedł czas, aby zastosować je do ustawień wstępnych. Jednym z najlepszych przypadków użycia dla ustawień grupowych opcji jest typografia. Możesz utworzyć siedem (7) wstępnych ustawień opcji nagłówka/tytułu , których można użyć dla dowolnego modułu, który używa pola nagłówka/tytułu (na przykład modułów nagłówkowych, Blurb, Accordion i Person).

To samo dotyczy grupy opcji tekstowych. Mogę ustawić dwa (2) ustawienia wstępne (jeden dla mojego normalnego i jednego dla mojego małego tekstu nadwozia), a każdy moduł korzystający z grupy opcji tekstowych może używać tych stylów. W przypadku stylów nagłówkowych i tekstowych jest to znacznie bardziej wydajne niż stosowanie tych stylów jako wstępnych wstępnych elementów do wszystkich różnych modułów, których możesz użyć na całej swojej witrynie.

Przypisanie ustalonych wartości do punktów przerwania

Poniższy film pokazuje podstawowe kroki, jeśli zdecydowałeś się na ustalone wartości w wielu punktach przerwania. Kliknij moduł tekstowy, przejdź do karty Projekt , unosić się nad grupą opcji tekstowych, kliknij ikonę OG , utwórz nowy ustawienie wstępne i zastosuj style w każdym punkcie przerwy. Przewiń na dno prawego paska bocznego i zapisz swój ustawienie wstępne ( bardzo ważne ). Powtórz to dla tylu wariantów tekstowych, ile wymyśliłeś (jak małe, zwykłe i duże opcje).

Przypisz ustawienie wstępne OG, którego oczekujesz najbardziej jako domyślny ustawienie wstępne dla tej grupy opcji. Jeśli zobaczysz gwiazdę obok niego, to jest Twoja bieżąca domyślna (będzie to miało zastosowanie w całej witrynie, zakładając, że żadne inne style modułu ani wstępne ustawienia elementów nie są stosowane przez cały czas).

Przypisanie funkcji Clamp () (łatwiej)

Proces jest podobny podczas korzystania z zmiennej projektowej z funkcją Clamp (), ale znacznie łatwiej. W poniższym przykładowym filmie ustawiliśmy dwa rozmiary nagłówka na poziomie grupy opcji. Jedyną różnicą od powyższego jest to, że nie wklejamy wartości, ale przy użyciu zmiennych, które ustawiliśmy wcześniej. Podczas konfigurowania ustawień OG, upewnij się, że domyślne czcionki są wybrane i ustaw kolory, jak chcesz. Niektórzy ludzie lubią ustawiać kolory na poziomie modułu, ale to zależy od Ciebie.

Ustawiasz każdy poziom nagłówków H1-H6 jako nowy niestandardowy ustawienie grupy opcji .

Zastosuj te ustawienia wstępne do nagłówków układu za pomocą utworzonych ustawień grup opcji. Piękno ustawień grupowych opcji polega na tym, że działają one w modułach w tej grupie opcji, takich jak moduły tekstowe, Blurb i nagłówek.

Najlepsze praktyki czcionek w Divi 5

Aby zmaksymalizować typografię, pamiętaj o tych wskazówkach:

• Zawsze ustawiaj globalne zmienne czcionek wcześnie.
• Używaj spójnych odstępów i rozmiarów (tak, możesz również ustawić odstępy liter i wysokość linii również jako zmienne projektowe).
• Regularnie podawaj responsywne widoki na rozmiarach ekranu.
• Unikaj zbyt wielu czcionek lub ciężarów czcionek.

Typografia w Divi 5 to powiew świeżego powietrza

Posiadasz teraz kompletny system typograficzny dzięki najnowszym funkcjom Divi.

Czcionki żyją jako zmienne projektowe. To samo z rozmiarami czcionek, gdy używasz Clamp (). Lub jeśli chcesz ćwiczyć wszystkie siedem tych konfigurowalnych punktów przerwania, możesz również wybrać tę trasę.

Presety grup opcji stosują te wybory bez wysiłku w całej witrynie. Poprawienie rozmiarów czcionek w całej kompilacji jest wyjątkowo łatwe, ponieważ są one ustawione jako zmienne projektowe. Bez względu na wszystko, twoje projekty pozostaną ostre, a czas budowy zmniejszy się.

Divi 5 wprowadził na rynek wiele nowych funkcji, które aktualizują system projektowania. Zacznij budować nowe witryny w Divi 5 już dziś, aby skorzystać ze wszystkich najnowszych funkcji. Zalecamy trochę dłużej czekać na migrację istniejących stron internetowych do Divi 5.