Jak wymienić czcionki zmiennymi Divi 5

Aktualizacje czcionek mogą być bólem głowy. Zmień czcionkę tytułową i nagle śledzisz każde miejsce, w którym się pojawia. Przegapić nagłówek lub dwa, a twój projekt od razu się wydaje. Ręczna aktualizacja czcionek zaprasza niespójność.

Divi 5 rozwiązuje to ze zmiennymi czcionkami i ustawieniami wstępnymi. Zamiast ścigać każdą instancję, możesz raz ustawić czcionki i pozwolić systemowi poradzić sobie z resztą. Typografia pozostaje czysta i zjednoczona, bez względu na to, ile używanych modułów. Spójrz, jak proste może być.

Dlaczego czcionki statyczne mogą powodować problemy

Statyczne konfiguracje czcionek tworzą sieć komplikacji, które z czasem pogarszają się. Po dodaniu czcionek bezpośrednio do każdego elementu rozpraszasz wybory typograficzne w setkach różnych miejsc.

Budujesz witrynę za pomocą wyświetlacza PlayFair dla nagłówków i poppinów do tekstu. Kilka miesięcy później chcesz przejść na bardziej nowoczesny stos czcionek. Teraz polujesz przez każdy moduł, każde ustawienie, każde niestandardowe ustawienie, aby znaleźć tam, gdzie mieszkają te czcionki. Miss Nawet jedna na kierunku zakopana głęboko w sekcji referencyjnej, a Twój projekt może wyglądać na zepsutych.

Kiedy ręcznie aktualizujesz czcionki jeden po drugim, możesz przypadkowo użyć różnych rozmiarów lub ciężarów. Aktualizujesz większość nagłówków do 32px, ale przegapisz kilka, które pozostają na 28px. Twój niegdyś powiększony projekt wydaje się teraz niezrównoważony.

Ta rozproszona metoda zamienia proste zmiany czcionki w główne projekty. To, co powinno zająć minuty, rozciąga się na godziny żmudnego polowania i aktualizacji. Spędzasz więcej czasu na zarządzaniu typografią niż faktycznie z nią projektowaniem.

Zamiast tego powinieneś użyć: zmienne projektowe Divi 5

Zmienne projektowe Przechowuj ustawienia projektowe, które można ponownie wykorzystać w dowolnym miejscu. Ustaw raz czcionkę, zapisz ją jako zmienną projektową, a następnie użyj jej w całej stronie. Zmień zmienną później, a wszystkie elementy korzystające z IT aktualizują automatycznie.

Divi oferuje sześć typów zmiennych: liczby, tekst, obrazy, linki, kolory i czcionki. Dwie domyślne zmienne czcionek są gotowe do użycia: jedna dla nagłówków i jedna dla tekstu nadwozia. Menedżer zmiennych znajduje się na lewym pasku bocznym pod ikoną bazy danych.

Zmienne te działają na polach, które ich nie obsługują, takie jak pola liczbowe, pola czcionek i ustawienia odstępów. Kliknij ikonę zmiennej obok dowolnego obsługiwanego pola, aby zobaczyć opcje.

Co robią wstępne ustawienia grupowe opcji

Presety grup opcji zapisują grupy stylowe, takie jak typografia, granice lub odstępy, a nie całe moduły. Na przykład możesz utworzyć ustawienie wstępne tylko do kierowania czcionkami i rozmiarami.

Po zastosowaniu ustawienia grupy opcji zmienia tylko ten obszar stylu. Reszta twojego modułu pozostaje taka sama. Możesz połączyć różne ustawienia wstępne na jednym elemencie bez problemów. Mieszaj zmienne projektowe z ustawieniami z grup opcji, aby uzyskać większą elastyczność. Utwórz ustawienia wstępne, które używają twoich zmiennych. Po aktualizacji zmiennej wszystkie ustawienia wstępne również korzystają z jej aktualizacji.

Przewodnik krok po kroku, aby utworzyć dynamiczny system czcionek z Divi 5

Konfigurowanie zmiennych czcionek zajmuje około dwudziestu minut. Po pracy zmiany czcionek odbywają się natychmiast na całej Twojej witrynie. Oto jak się tam dostać:

1. Utwórz zmienne czcionek dla nowego systemu

Otwórz Menedżer zmiennych, klikając ikonę bazy danych na lewym pasku bocznym. Przejdź do zakładki czcionki. Zobaczysz dwie zmienne domyślne: jedna dla nagłówków i jedna dla tekstu nadwozia.

• Skonfiguruj główne czcionki: kliknij zmienną nagłówka. Wybierz rodzinę czcionki i wagę, a następnie zapisz. Zrób to samo dla tekstu, ale wybierz coś czystego i łatwego do odczytania.
• W razie potrzeby dodaj więcej czcionek: niektóre projekty potrzebują dodatkowych czcionek do cytatów, referencji lub tekstu specjalnego. Kliknij „Dodaj nową zmienną” i nadaj jej jasną nazwę.
• Wypełnij wszystkie szczegóły: Każda zmienna utrzymuje rodzinę czcionki, wagę, styl i inne ustawienia. Używaj odważnych ciężarów do nagłówków, regularnych ciężarów do tekstu i kursywy, gdy chcesz dodać nacisk.
• Upraszcz swoje nazwy: Zamiast mylących etykiet, nazwij je „Cytuj czcionkę” lub „wyróżnij czcionkę”.
• Pamiętaj, aby zapisać: Twoje zmiany nie będą się trzymać, dopóki nie naciśnij przycisku Zapisz.

Większość stron internetowych potrzebuje tylko czcionek nagłówka i ciała. Dodaj tylko dodatkowe zmienne dla specjalnych potrzeb projektowych, a nie drobnych poprawek tekstu. Mniej zmiennych znacznie ułatwia tworzenie nowych treści.

2. Dodaj zmienne liczbowe dla rozmiarów czcionek

Przełącz kartę numerów w menedżerze zmiennym. Tutaj tworzysz zmienne rozmiaru, które działają z twoimi czcionkami. Pomyśl o nich jak o swojej skali typograficznej.

Zacznij od wielkości nagłówka. Utwórz zmienne o nazwie H1, H2, H3 i tak dalej. Ustaw każdy na inny rozmiar, który ma sens dla twojego projektu. Możesz użyć zwykłych wartości pikseli, takich jak 32px lub responsywne jednostki, takie jak clamp () do rozmiarów dostosowujących się do innych ekranów.

Tekst nadwozia również potrzebuje zmiennej rozmiaru. Nazwij to „Rozmiar ciała” i ustaw go na wygodny rozmiar odczytu, zwykle około 16px do 18px.

Możesz także tworzyć zmienne dla specjalnych potrzeb tekstowych. Być może chcesz zmienną „mały tekst” dla podpisów lub zmienną „duży tekst” dla referencji. Wymień je wyraźnie, aby pamiętać, co są później.

Te zmienne liczbowe działają w dowolnym miejscu, w którym potrzebujesz spójnego rozmiaru. Użyj ich do wysokości linii, odstępów lub dowolnego pomiaru, który pojawia się wiele razy w Twojej witrynie. Po aktualizacji zmiennej liczbowej wszystko, co jej używa, zmienia się automatycznie.

Większość stron internetowych potrzebuje tylko czcionek nagłówka i ciała. Dodaj tylko dodatkowe zmienne dla specjalnych potrzeb projektowych, a nie drobnych poprawek tekstu. Mniej zmiennych znacznie ułatwia tworzenie nowych treści.

3. Użyj i wymień, aby zamienić czcionki statyczne

Kliknij prawym przyciskiem myszy dowolne pole czcionki w ustawieniach modułu, aby zobaczyć opcję Znajdź i Wymień. Otwiera to panel, w którym Divi ładuje bieżące ustawienia czcionek automatycznie. Możesz teraz zamienić tę statyczną czcionkę z jedną ze swoich zmiennych projektowych.

Pole elementu źródłowego pokazuje, od którego modułu zacząłeś. Możesz to zmienić, aby wybrać dowolny inny element na swojej stronie jako punkt wyjścia.

Wartość znalezienia wyświetla dowolną czcionkę, którą chcesz wymienić. Zamiast wybierać kolejną statyczną czcionkę, ustaw wartość wymiany na jedną ze zmiennych projektowania czcionki.

Znajdź i zamień prace również dla rozmiarów czcionek. Kliknij prawym przyciskiem myszy dowolne pole wielkości czcionki, aby uzyskać dostęp do tego samego panelu zastępczego. Pozwala to zamienić rozmiary na poziomie elementu, takie jak 24px na zmienne liczbowe.

Poszukaj modułów tekstowych, w których ręcznie ustawiasz rozmiary czcionek. Te rozproszone ustawienia rozmiaru powodują te same problemy jak czcionki statyczne. Kiedy chcesz dostosować swoją skalę typografii, kończysz w każdym module, aby znaleźć każdy rozmiar. Zastąp te statyczne rozmiary na swoje zmienne H1, H2, Rozmiar ciała lub inne.

Ustaw swoje granice zastępcze

Znajdź i zastąp sterowanie lokalizacją, w których zachodzą zmiany. Wybierz „całą stronę”, aby zaktualizować czcionki w całym układzie. Wybierz „obecny element i dzieci”, aby ograniczyć zmiany w tej konkretnej sekcji i wszystkiego zagnieżdżone w nim.

Możesz także ukierunkować kontenery nadrzędne lub określone obszary strony.

Znajdź i zamień typ elementu pomaga skupić się na określonych modułach. Wybierz „Wszystkie elementy”, aby uzyskać pełną wymianę czcionki lub wybierz „moduły”, aby pominąć pojemniki i elementy strukturalne. Możesz być jeszcze bardziej szczegółowy, kierując tylko niektóre typy modułów.

Unikaj przypadkowych zamienników

Opcja „Wymień tylko identyczne pola” zapobiega niechcianym zmianom. Włącz to, gdy chcesz zastąpić czcionki bez wpływu na inne ustawienia, które mogą mieć tę samą wartość.

To utrzymuje promień graniczny na 10px, nawet gdy zastępujesz czcionkę, która akurat nazywa się „10px” lub coś podobnego.

Bez tego ustawienia znajdź i wymień szuka wszystkich docelowych wartości wszędzie. Dzięki jego włączeniu system zmienia tylko rzeczywiste pola czcionek, pozostawiając inne ustawienia projektowe w samej.

4. Przejdź przez swój system czcionek

Potrzebujesz osobnych operacji Znajdź i zamień dla różnych ciężarów czcionek i stylów. Twoja witryna może korzystać z tej samej rodziny czcionek w regularnych i odważnych ciężarach. Obsługuj każdą odmianę indywidualnie, zastępując je odpowiednimi zmiennymi projektowymi utworzonymi wcześniej.

Za każdym razem proces jest taki sam: kliknij prawym przyciskiem myszy pole czcionki, ustaw wartość wymiany na zmienną projektową, wybierz zakres i zastosuj zmiany. Powtórz to dla każdej statycznej czcionki, która wymaga aktualizacji.

5. Utwórz ustawienia wstępne ze swoimi zmiennymi

Uzyskaj dostęp do dowolnego modułu tekstowego i przejdź do zakładki projektowej. Znajdź typografię i kliknij ikonę ustawioną. Wybierz zmienną czcionki nagłówka z menu rozwijanego. Zastosuj zmienną liczbową H1 do wielkości.

Skonfiguruj wartości wysokości linii i odstępy. Nazwij wstępnie „główny nagłówek” i zapisz go. Kliknij ikonę gwiazdy, aby ustawić to jako domyślne. Nowe moduły tekstowe automatycznie przyjmą te ustawienia. Wszystkie istniejące moduły o tym samym znaczniku nagłówka i żadne style również odziedziczą te ustawienia.

Możesz powtórzyć ten proces dla każdego poziomu nagłówka. Każde ustawienie zachowuje spójność podczas służby różnych celów.

Te ustawienia typograficzne działają z dowolnym modułem zawierającym pola tekstowe. Moduły BLURB, zawartość akordeonu, referencje i formularze kontaktowe wszystkie akceptują te same ustawienia wstępne. Ta kompatybilność między modułami eliminuje powtarzające się zadania stylistyczne.

Grupa opcji Wodpusza się wyłącznie docelowe kategorie stylów. Zastosuj ustawienie wstępne do przycisku, jednocześnie utrzymując nienaruszone ustawienia tła i granicy przycisku.

6. Rozszerz swoje nowe zmienne na wszystkie elementy

Kliknij prawym przyciskiem myszy dowolny element za pomocą nowych zmiennych. Wybierz „Rozszerz atrybuty” z menu. Skonfiguruj element źródłowy jako niedawno zaktualizowany moduł.

Ustaw lokalizację na „całą stronę”, aby uzyskać pełne aktualizacje. W ramach typów atrybutów wybierz „Style”, aby skupić się wyłącznie na elementach projektu.

Włącz „Wymień tylko identyczne pola”, aby zapobiec niepożądanym zmianom w wyściółce, marginesach lub innych wartościach liczbowych, które mogą pasować do rozmiarów czcionek. Wybierz „Wszystkie elementy”, aby aktualizować moduły i kontenery lub wybierz „moduły”, aby określić elementy treści.

Przetwarzaj złożone strony w mniejszych sekcjach, a nie aktualizacje całej witryny. Wybierz „Bieżąca sekcja”, aby ograniczyć zmiany w jednym obszarze na raz. Zacznij od sekcji nagłówka. Zastosuj zmienne rozszerzenia, przeglądaj wyniki i przejdź do głównych obszarów treści. Wypełnij sekcję stopki ostatnią.

To metodyczne podejście identyfikuje wczesne formatowanie konfliktów i kontroluje proces aktualizacji.

Divi 5 ułatwia typografię

Kiedyś przełączasz się z wyświetlacza PlayFair na coś nowoczesnego i aktualizować większość nagłówków, ale przegapisz to referencje na stronie trzeciej. Twoja witryna wyglądała na przekrzywioną przez tygodnie.

Zmienne Divi 5 usprawniają typografię Twojej witryny. Zmień zmienną nagłówka z ikony bazy danych na pasku bocznym, a każdy moduł tekstowy natychmiast aktualizuje. Ta stopka formularza kontaktowego jest uwzględniona.

Następnym razem, gdy zmieni się, zaktualizujesz dwie zmienne zamiast kliknąć pięćdziesiąt modułów. Znajdź i zamień narzędzie łapie to, czego normalnie pominąłbyś. Twoja typografia pozostaje ciasna, a weekendy pozostają twoje.