Tworzenie systemu wielkości i odstępów za pomocą zmiennych projektowych Divi 5

Divi 5 daje ustrukturyzowany sposób na definiowanie, zarządzanie i ponowne wykorzystanie decyzji dotyczących rozmiarów i odstępów w całej witrynie. Korzystając z zmiennych i ustawień projektowych, możesz utworzyć skalowalny system projektowy, który jest łatwy w utrzymaniu, dostosowaniu i replikacji.

W tym poście pokażemy, jak myśleć w systemach, a my przeprowadzimy Cię przez budowę kompleksowego systemu rozmiarów i odstępów.

Divi 5 jest gotowy do użycia na dowolnej nowej witrynie, którą tworzysz, ale sugeruje się, aby powstrzymać migrację istniejących stron (na razie).

Po co używać systemu wielkości i odstępów?

Większość użytkowników Divi chce spójności układów, marginesów i typografii. Ale niewielu poświęca czas na wczesne zdefiniowanie tych standardów. Lub jeśli to zrobisz, prawdopodobnie zrobiłeś to za pomocą motywu dziecięcego o mocno stylizowanej. Teraz możesz:

Subskrybuj nasz kanał YouTube

1. Zdefiniuj zmienną liczbową raz (jak 16px lub zacisk (16px, 4vw, 48px)))
2. Przypisz go do ustawień modułów/elementów
3. Lub ustawienia o grupie opcji (takie jak odstępy lub rozmiar)
4. Zaktualizuj zmienną później i zobacz zmiany odzwierciedlone w całej witrynie
5. Używaj mniej CSS ogólnie dla cieńszych stron

W przypadku innych budowniczych witryn projektanci zwykle opierają się na ramach CSS, aby zastosować spójne odstępy i rozmiar podczas korzystania z systemu, który mogą przejąć z projektu do projektu. Dzięki Divi 5 możesz stworzyć własną „framework projektową”, która działa w interfejsie Divi za pomocą zmiennych projektowych Divi bez konieczności dotknięcia jednej linii kodu.

Rozmiar elementu, wyściółka i margines

Każdy element Web ma trzy komponenty wpływające na ogólny odstęp i rozmiar:

• Rozmiar elementu : rozmiar zawartości rdzenia elementu, zdefiniowany przez szerokość i wysokość.
• Wyściółka : przestrzeń dodana wewnątrz elementu, zwiększając jego klikalność i rozmiar wizualny.
• Margines : Przestrzeń dodana poza elementem, odsuwając go od innych elementów.

Praktyczne przykłady elementów Divi

Ogólnie rzecz biorąc, w ten sposób możesz oczekiwać użycia wyściółki i marginesu w Divi:

• Sekcje zwykle mają wyściółkę górną i dolną (nie margines), aby utworzyć odstępy pionowe na stronie.
• Rzędy często korzystają z wyściółki pionowej, ale w przeciwnym razie pozwalają na ich wypełnienie.
• Kolumny koncentrują się głównie na marginesie zastosowanym do tworzenia luk w kolumnach.
• Moduły często używają dolnego marginesu do wyraźnego oddzielenia elementów ułożonych, ale ilość marginesu zależy od grup wizualnych.

Domyślne wartości odstępów Divi

Początkujący w projektowaniu stron internetowych, którzy korzystają z Divi, prawdopodobnie nawet nie zdają sobie sprawy, że Divi podejmuje decyzje o odstępach dla ciebie poza pudełkiem. Bardziej doświadczeni projektanci często dostosowują ich do swoich celów, ale te wartości domyślne pozwalają większości ludzi szybko rozpocząć swoje projekty.

Te wartości domyślne mogą być pomocne, ale projektanci często wolą ustawiać własne standardy odstępów. Jeśli chcesz zobaczyć, jak wyglądałaby Twoja strona bez domyślnej konfiguracji wyściółki, możesz to zrobić:

1. Przejdź do dowolnego elementu i znajdź grupę opcji odstępów w zakładce projektowej .
2. Otwórz domyślną grupę opcji i ustaw górną i dolną wyściółkę na 0 (zero).
3. Zapisz domyślne ustawione odstępy OG, aby zastosować go w całym miejscu do każdego elementu.

To pokaże, jak wyglądają twoje strony bez domyślnych ustawień Divi. Nie będzie wyglądać tak dobrze, ale zaczniesz widzieć, co musisz zrobić, aby stworzyć własny system projektowy (lub możesz użyć domyślnych domyślnych i wprowadzania zmian według własnego uznania).

Korzystanie z 8-punktowej skali odstępów

Skala 8-punktowa jest schematem układu, w którym wartości odstępów są budowane przy przyrostach 8. Zamiast używania arbitralnych wartości, takich jak 13px lub 27px, trzymasz się wartości takich jak 8, 16, 24, 32, 40, 48 i tak dalej.

Ten system pomaga:

• Zachowaj rytm pionowy i poziomy za pomocą spójnej rubryki rozmiarów
• Upewnij się, że stosy odstępów czysto w punktach przerwania
• Przyspiesz podejmowanie decyzji (mniej wyborów = szybszy projekt)

Możesz użyć skali w PX lub REM, w zależności od preferencji lub rodzaju skali. Na przykład 16px staje się 1M, gdy podstawowy rozmiar czcionki wynosi 16px.

Makieta strony, która grupuje twoją uwagę na wybrane obszary i popycha odwiedzających w dół strony z pionowymi odstępami

Odstępy pionowe mówi czytelnikowi, gdzie się skupić. Elementy skupione razem z mocniejszym odstępem są naturalnie postrzegane jako powiązane ze sobą. Rzeczy oddzielone większą ilością przestrzeni wskazują nowy pomysł.

Jak utworzyć system rozmiarów i odstępów

System dla twoich rozmiarów i przestrzeni składa się z dwóch rzeczy: ustawiania zmiennych lub tokenów, które będą używane w całym projekcie i konsekwentnie wykorzystywania tych zmiennych w całym projekcie witryny. Oto jak możesz to zrobić z Divi.

Krok 1: Utwórz zmienne liczbowe w menedżerze zmiennych projektowych

Divi 5 wprowadza interfejs wizualny do definiowania wartości liczbowych wielokrotnego użytku. Każda zmienna liczbowa obejmuje:

1. Łatwo przywoływa się nazwa (np. Gap-SM, Text-H1), która nie jest zbyt długa
2. Wartość liczbowa lub funkcja calc () lub clamp ()
3. Jednostka CSS (PX, REM, %, VW itp.)

Z powodu menedżera zmiennych nie musisz pisać zmiennych CSS w osobnym arkuszu stylów. Ustawiasz je wszystkie w Menedżerze Zmiennych Design, a następnie wybierasz je z pól wejściowych w wizualnym budowniczym.

Poniżej znajduje się kompletny zestaw początkowy zmiennych liczbowych w celu dopasowania 8-punktowego systemu projektowego. Nie musisz tego używać, ale daje to wyobrażenie o tym, co jest możliwe.

A oto jak to wygląda na wypełnienie tego w menedżerze zmiennym.

Zauważ, że te wartości odstępów będą pomocne w nadchodzącej funkcji FlexBox Divi 5

Krok 2: Planowanie 8-punktowego systemu odstępów

Twoje strony zazwyczaj będą zawierać powtarzające się wzorce elementów. Poszukaj wspólnych grup lub klastrów, takich jak:

• Nagłówek, akapit, przycisk
• Mała nagłówek, duży nagłówek, akapit
• Ikona, akapit
• Karty zawierające wiele elementów

Dzięki początkowym szkieletom (lub projektom zastępczym) będziesz mieć możliwość tworzenia potencjalnych wzorów. Utworzysz również rzeczy, które nie pasują do wzorów, które musisz zdecydować, jak sobie poradzić. Ale to wszystko jest częścią projektowania.

Możesz to zrobić w Figma lub poprzez bezpośrednio tworzenie strony szkieletowej z elementami zastępczymi w Divi. Po prostu zdobądź wszystko, co możesz ułożyć na stronie. Możesz użyć rozszerzenia Chrome o nazwie MIASTO wszystko, aby pomóc Ci wizualizować odstępy (najpierw domyślne odstępy Divi), gdy zaczniesz je dostosowywać.

Aby użyć rozszerzenia, aktywuj go z paska narzędzi rozszerzenia Chrome. Następnie kliknij element na stronie, którą jesteś zainteresowany, koncentrując narzędzie na tym elemencie. Stamtąd przenieś mysz, aby zmierzyć różne aspekty między aktualnie wybranym elementem a innymi elementami podczas unoszenia się nad nimi.

Krok 3: Przypisz zmienne liczbowe do ustawień grupowych opcji

Dzięki szkieletowi skonfigurowanej strony i zmiennej projektowej możesz zacząć wprowadzać odstępy i zmiany związane z rozmiarem na swojej stronie. Najpierw możesz zacząć od grup treści. Skoncentrujmy się na nagłówku, akapicie i guziku w sekcji bohatera.

Szkielet z zawartością zastępczy i rozmiar czcionki/czcionki na miejscu

Pamiętaj, że w tym momencie będziesz chciał już konfigurację pierwszego szkicu typografii. Obejmuje to czcionki, rozmiar czcionki i wysokość linii/odstępy listy. Bez tego najprawdopodobniej przywrócisz równowagę wszystkich swoich wielkości po ustaleniu systemu typograficznego.

Przykład opcji rozmiaru typografii skonfigurowane jako zmienne liczbowe

Teraz chcemy ocenić, jakie domyślne odstępy są stosowane w projekcie. Aby to zrobić, możesz spojrzeć na wykres wcześniej w poście i porównać ją z tym, co dzieje się w sekcji bohatera. Oczywiście istnieje sekcja (nr 1) i dwa rzędy (#2 i#3). W tej chwili ustawimy domyślną wyściółkę górną/dolną na zero.

Następnie mamy dwie opcje odstępu od sekcji: możemy ustawić wyściółkę na zero i ustalić go później, lub możemy ustawić wstępną wyściółkę górną i dolną w domyślnym ustawieniu elementu, aby sekcje wyglądały tak:

• Desiktop : górna i dolna wyściółka ustawiona na space-xxxl
• Tablet : górna i dolna wyściółka ustawiona na Space-XXL
• Mobile : Górna i dolna wyściółka na Space-XL

Ale to, co robisz, zależy całkowicie od Ciebie i zmiennych projektowania odstępów, które ostatecznie konfigurujesz (lub używając domyślnych, jeśli wolisz je adoptować jako własne). To, co mamy teraz (z domyślną wyściółką wiersza na zero i wyściółkę sekcji niestandardowej):

Krok 4: Odstępy modułu

Następną rzeczą do zrobienia jest praca nad odstępem między modułami w sekcjach/wierszach. Kluczem jest wybór spójnego sposobu stosowania odstępów do modułów.

Masz opcje, możesz podzielić odstępy na wiele sposobów:

• Zastosuj odstępy na margines
• Zastosuj odstępy do marginesu
• Zastosuj odstępy równomiernie między marginesem a marginesem

Ważne jest, aby pamiętać, że wiele modułów ma domyślnie zastosowane dno marginesowe, więc polecam pójść z tą konwencją i zacząć od ustawiania paradygmatu odstępów. Na początek możesz ustawić górne/dolne marginesy na zero , aby zobaczyć, jak wyglądają odstępy między modułami, bez zastosowania domyślnych.

W tej sekcji zastosowaliśmy 0px do góry i na dole, aby zobaczyć wszystkie te moduły bez domyślnych odstępów

Teraz możemy zacząć przypisywać zmienne projektowe odstępów do dna marginesu tych modułów, aby utworzyć system odstępów. Zaczniemy od nagłówka i tekstu nadwozia.

Kiedy zaczynasz widzieć wzory z odstępem od modułu, możesz dodać te opcje odstępów do domyślnych ustawień elementów. A ponieważ musisz tworzyć reguły odstępów dla elementów, które odchylają się, możesz tworzyć niestandardowe ustawienia wstępne. Stamtąd nowe elementy będą używać domyślnego ustawienia, ale możesz szybko wybrać ustawienie niestandardowego wstępnego wstępnego elementu do różnych sytuacji.

Jak użyjesz Divi 5 do rozmiaru i odstępów?

Tworzenie systemu odstępów i rozmiarów, z którego jesteś zadowolony, sprowadza się do praktykowania podstaw i pochylania się w ręki. Divi 5 jest w drodze do stworzenia de facto systemu projektowego dla stron internetowych WordPress. Uderza w słodkim miejscu posiadania dużej elastyczności, ale łatwo jest owinąć głowę.

Jeśli nigdy nie zastanawiałeś się nad tworzeniem systemów projektowych, Divi pozwala myśleć o tym ze zmiennej projektowej i poziomu wstępnego, nie tylko na poziomie poszczególnego modułu lub elementu. Pomaga to konsekwentnie stosować podstawowe decyzje projektowe do elementów szybciej niż kiedykolwiek.

Czy wypróbujesz 8-punktowy system, czy masz zaplanowane inne rzeczy? Czy to po raz pierwszy myśleć o domyślnym odstępach Divi? To sprawia, że ​​projektowanie za pomocą Divi automatyczne, ale dla profesjonalnych projektantów możesz chcieć zmienić niektóre z tych domyślnych, aby osiągnąć idealną wizję pikseli.

Divi 5 jest gotowy do użycia na każdej nowej witrynie, którą tworzysz.