Tworzenie systemu odstępów opartych na szczelinie z Divi 5

Spójne odstępy są podstawą dopracowanej, profesjonalnej strony internetowej. Zamiast zarządzania marginesami na poszczególnych elementach jeden po drugim, możesz polegać na jednym systemie, który utrzymuje układy w czystości i zrównoważone w całej witrynie.

Dzięki nowym zmiennym projektowym Divi 5 i funkcjom FlexBox możesz teraz zbudować system odstępów oparty na szczelinie bezpośrednio w wizualnym konstruktorze, nie wymaga niestandardowego kodowania. Spójrzmy!

Dlaczego tradycyjne metody odstępów są krótkie

Margines i wyściółki wydają się wystarczająco proste. Dodaj trochę miejsca tutaj, dostosuj tam wyściółkę. Ale takie podejście może łatwo stać się nieuporządkowane. Oto jak to gra w praktyce:

Ustawiasz margines 30px na jednym bloku tekstowym. Następnie potrzebujesz miejsca wokół przycisku, aby dodać 20px.

Kolejny moduł wymaga oddechu, więc wybierasz 40px. Każda decyzja wydaje się w tej chwili, ale budujesz dom kart.

Przełącz się na telefon komórkowy, a wszystko może wyglądać na niezrównoważone. Ci starannie wybrane wartości pikseli nie tłumaczą. Twoje odstępy wyglądają idealnie na komputerze, ale nie są równoważące na mniejszych rozmiarach ekranu. Więc tworzysz wartości specyficzne dla mobilnych, a następnie wartości tabletu.

Teraz zarządzasz trzema różnymi systemami odstępów. To podzielone podejście sprawia, że ​​utrzymanie spójnego rytmu wizualnego w Twojej witrynie jest trudne.

Jak właściwości luki są proste

Właściwości GAP działają inaczej niż tradycyjne marginesy. Nie stosujesz odstępów do każdego elementu indywidualnie. Zamiast tego ustawiasz reguły odstępów na kontenerze nadrzędnym. Pojemnik automatycznie obsługuje odstępy między wszystkimi elementami dziecka.

Dzięki włączonym FlexBox otrzymujesz dwa elementy sterujące szczeliny: poziome i pionowe. Ustaw lukę poziomą na 24px, a wszystkie elementy dziecięce otrzymują 24px przestrzeni między nimi w poziomie. Ustaw pionową lukę na 15px, a elementy ułożone w stosy są 15px przestrzeni pionowej.

Działa to dla dowolnej zawartości w kontenerze Flexbox. Moduły tekstowe, obrazy, przyciski, dzielniki i cokolwiek innego, co tam włożyłeś, mają takie same spójne odstępy. Nie będziesz musiał przeglądać poszczególnych modułów i regulować ich marginesy osobno; Właściwości GAP obsługują matematykę odstępów.

Tradycyjna metoda dokonuje wyborów losowych odstępów: 10px tutaj, 20px tam, 40px gdzie indziej. Te rozproszone wartości powodują niespójności i utrudniają dowiedzieć się, które odstępy mają zastosowanie. Właściwości GAP usuwają zgadywanie, używając jednej spójnej reguły dla wszystkich elementów.

Takie podejście wciąż ma ograniczenia. Nadal musisz pamiętać o każdej użytej wartości i zastosować ją ręcznie, gdziekolwiek jej potrzebujesz. Musisz zgadnąć, jakie wartości działają gdzie. Po ustawieniu tych wartości zmiana zdania oznacza znalezienie każdego z nich i zastąpienie go ręcznie, pozostawiając miejsce na błędy i niespójności.

System odstępów oparty na szczelinie z FlexBox i zmiennymi projektowymi jest znacznie lepszym podejściem.

Jak skonfigurować system luk w Divi 5

Budowanie systemu odstępów opartych na szczelinie brzmi złożone, ale Divi 5 sprawia, że ​​jest zaskakująco prosty. Nie potrzebujesz żadnej wiedzy kodowania ani frameworków zewnętrznych. Wizualny budowniczy obsługuje wszystko poprzez zmienne projektowe i elementy sterujące FlexBox. Przeprowadzimy Cię przez każdy krok, od tworzenia zmiennych odstępów po zapisywanie ustawień wielokrotnego użytku.

1. Utwórz zmienne odstępów

Divi 5 może przechowywać wartości luki wewnątrz budowniczego wizualnego za pomocą zmiennych projektowych. Raz budujesz system odstępów i stosujesz te wartości w dowolnym miejscu, gdzie pojawiają się elementy sterujące Flexbox, nie są potrzebne niestandardowe funkcje CSS.

Zmienny menedżer można znaleźć na lewym pasku bocznym Twojego budowniczego wizualnego. Kliknij tę ikonę, a następnie otwórz kartę liczb, w której można dodać zmienne odstępów.

Tutaj utworzysz wartości, które można używać w całej stronie zamiast pikseli z twardymi. Dostępnych jest kilka zmiennych projektowych; Nie będziemy obejmować tych w tym poście, ale mamy doskonały przewodnik.

Zacznij od podstawowego odstępu. Większość projektantów pracuje z 8-12px jako ich fundament, ale możesz wybrać 4px, 10px lub cokolwiek, co pasuje do twojego rytmu projektowego. Możesz użyć zaawansowanych jednostek tutaj, oprócz tylko pikseli. Na przykład zaczynamy od REM zamiast pikseli (zakładając domyślną przeglądarkę 1rem = 16px):

• Gap XS: 0,75rem (~ 12px dla ścisłych relacji dla kolumn z tylko ikoną i tekstem)
• Gap S: 1.25rem (~ 20px dla kolumn z blokami tekstowymi)
• Gap M: 2rem (~ 32px dla pola funkcji, kolumny serwisowe)
• Gap L: 3 (~ 48px dla głównych sekcji treści, układy paska bocznego)

Te etykiety nie są naprawione; Ty i twój zespół możecie ich nazwać w razie potrzeby. Możesz także dodać więcej zmiennych luk. Jednostki REM skalują się w ustawieniach czcionek przeglądarki, więc goście, którzy zwiększają rozmiar tekstu, otrzymują proporcjonalne odstępy. To poprawia dostępność.

Użyj zacisków, aby dokonać skalowalnych luk

Możemy również użyć Clamp (). Wyjaśnimy krótko, jeśli nie wiesz, co to jest Clamp (). Ale najpierw rozważ dodanie następujących zmiennych liczbowych:

• Pozioma szczelina kolumnowa: Clamp (16px, 2vw, 32px) (dla poziomych szczelin między kartami, funkcjami itp.)
• Pionowa szczelina kolumnowa: Zacisk (16px, 1,5VW, 32px) (dla pionowych szczelin między kartami, funkcjami itp.)

Clamp () to bezpieczna jednostka CSS do użycia. Podajesz trzy wartości: min, preferowane i maksymalne. Przeglądarka próbuje preferowanej wartości, ale jeśli jest zbyt mała, używa min, a jeśli jest zbyt duży, używa maksimum.

Na przykład pozioma szczelina kolumnowa: Clamp (16px, 2vw, 32px). Skalowanie szczeliny o szerokości ekranu (2VW = 2% rzutni). Nie spadnie poniżej 16px na małych ekranach lub powyżej 32 px na dużych ekranach. Utrzymuje to równowagę odstępów bez punktów przerwania lub zapytań medialnych.

Możesz użyć dowolnych wartości. Wybraliśmy tę metodę, ponieważ jest łatwa do utrzymania, dostosowuje się do zmiany i daje bardziej spójne wyniki.

2. Włącz układ FlexBox na swoich sekcjach

Nowe sekcje domyślnie używają FlexBox. W przypadku starszych witryn przekonwertuj sekcję, klikając ikonę Ustawienia, otwierając kartę projektowania, wybierając styl układu pod kartą układu i wybierając „Flex”. Zrób to samo dla swoich wierszy i kolumn.

Po włączeniu FLEX otrzymasz opcje takie jak uzasadnienie treści do wyrównania i dystrybucji. Wyrównaj elementy sterowanie pozwalają ustawić sposób, w jaki elementy zachowują się, gdy miejsce kończy się poziomo.

Tutaj możesz zauważyć elementy sterujące szczeliny, które mają osobne suwaki poziome i pionowe, aby ustawić odstępy między kolumnami lub modułami w rzędu.

3. Zastosuj wartości luki za pomocą zmiennych

Po skonfigurowaniu zmiennych luki w Menedżerze zmiennych Divi zastosowanie ich do ustawień GAP FlexBox staje się proste za pośrednictwem dynamicznego systemu treści. Przejdź do ustawień układu i najedź na etykiety w poziomych lub pionowych polach szczeliny, aby ujawnić dynamiczną ikonę zawartości.

Kliknij ikonę treści dynamicznej, aby otworzyć okno dialogowe wyboru zmiennej. W tym menu pojawiają się zapisane zmienne luki.

Jak zapewne zauważyłeś, dodaliśmy dwa zestawy luk w oparciu o kontekst, w którym będą one używane. Zanurzmy się głębsze, aby zrozumieć, dlaczego:

Zacisk: między kolumnami Flex

Twoje luki zaciskowe działałyby na poziomie „kontenera” poprzez ustawienia FlexBox Divi.

Zastosuj poziomą lukę w kolumnie [Clamp (16px, 2vw, 32px)] Gdy masz kolumny ułożone obok siebie, takie jak trzy karty serwisowe w jednym rzędzie. Po wybraniu Divi automatycznie stosuje go do ustawienia luki. Pole wyświetli nazwę zmiennej, potwierdzając połączenie. Stwarza to proporcjonalne odstępy poziome między kolumną 1, kolumny 2 i kolumną 3, gdy kierunek układu jest ustawiony jako wiersz.

Zastosuj pionową lukę w kolumnie [Clamp (16px, 1,5VW, 32px)] Gdy kierunek układu jest ustawiony na kolumnę, układając pozycje pionowo. Spaceruje to pozycje proporcjonalnie od góry do dołu, gdy kierunek układu zostanie ustawiony jako kolumna.

Gdy kolumny z kierunkiem wiersza otaczają wiele linii, podobnie jak sześć kart ułożonych w trzech kolumnach na rząd, zastosuj obie szczeliny. Pozioma szczelina wyprzedza elementy w każdym rzędzie, podczas gdy pionowe szczeliny spaceruje same rzędy.

Linie podstawowe: zawartość w rzędach

Twoje luki podstawowe kontrolują relacje między elementami zawartości w każdej kolumnie. Gdy po nagłówku następuje akapit i przycisk w tej samej kolumnie, rozważ zastosowanie przerwy XS (0,75rem) między nimi.

Rozważ użycie szczelin (1.25REM) dla grup treści z wieloma elementami tekstowymi lub szczeliną L (3M), jeśli potrzebujesz znacznego odstępu między dwiema kolumnami, szczególnie jeśli kierunek układu kolumny jest ustawiony na wiersz.

Zaleta projektowa przewaga

Zmienne projektowe mają kilka korzyści w porównaniu z wartościami ręcznie pisania. Ponieważ etykiety mogą być kontekstowe, zachowują spójność odstępów bez zapamiętywania wartości pikseli lub REM.

Kiedy zmienisz filozofię odstępów, zaktualizuj zmienną w menedżerze zmiennym, aby zaktualizować każdą lukę używaną na stronie.

Ta wizualna metoda unika również błędów odstępów, gdy członkowie zespołu wprowadzają różne wartości. Zmienne GAP tworzą wspólny język do odstępów, utrzymując układy ustawione z ustawionymi standardami projektowymi. Jest to szczególnie pomocne w dużych projektach z wieloma współpracownikami lub po przekazaniu klienta, gdy klienci edytują lub dodają strony.

4. Skonfiguruj responsywne luki

Telefony komórkowe mają ograniczoną przestrzeń poziomą. Twój trzykolumnowy układ usług wygląda świetnie na pulpicie, ale staje się ciasny i sztywny do odczytania na ekranie telefonu 360px.

Divi 5 daje siedem konfigurowalnych punktów przerwania do pracy: telefon, szeroki telefon, tablet, tablet, komputer, pulpit, szerokoekranowy i bardzo szeroki. Każdy punkt przerwania działa niezależnie. Możesz zmienić kierunek układu, zmienne zmienne szczeliny lub dostosować wyrównanie na urządzeniach mobilnych bez zepsucia pulpitu. Pozwala to ukierunkować dokładne szerokości ekranu, w którym układ musi się zmienić.

Przełącz na punkt przerwania telefonu i zmień kierunek układu z „wiersza” na „kolumnę”. Wyczyść opcję poziomej luki, ponieważ kolumny układają pionowo zamiast walczyć o przestrzeń poziomą.

Pionowa szczelina oparta na zaciskach kurczy się i rośnie automatycznie wraz ze zmianami szerokości rzutni. Na małym ekranie telefonu 2VW równa się około 7px, ale zacisk nie przekroczy minimum 16px. Na większym ekranie 2VW może oznaczać 18px, a na jeszcze większym ekranie 20px.

Odstępy rosną płynnie między tymi granicami, gdy zmienia się rozmiar ekranu. Bez ręcznego ustawiania różnych wartości otrzymujesz ścisłe odstępy na mobilne i hojne odstępy na komputerze.

Base luki mogą nadal wymagać ręcznych poprawek na punkt przerwania. Gap M może czuć się zbyt ciasno na telefonie komórkowym. Przełącz się na punkt przerwania mobilnego i zastosuj lukę L zamiast opcji luki pionowej.

Możesz także tworzyć zmienne specyficzne dla mobilnych, takie jak „Gap Mobile S” lub „Gap Mobile L”, i zastosować je do punktów przerwania telefonu i tabletu. Jednak w większości przypadków podstawowe luki bazowe i zaciskowe działają dobrze.

5. Zapisz swoją konfigurację jako ustawienie wstępne

Twój system GAP działa teraz dobrze. Zmienne projektowe dają kontrolę nad odstępem za pośrednictwem interfejsu wizualnego, z którym pracowałeś. Ale konfigurowanie konfiguracji FlexBox w kółko szybko się starzeje. Musisz dostosować ustawienia kierunku układu, wyrównania i pakowania. Następnie stosujesz zmienne luki do każdej nowej sekcji. Ten proces zjada czas.

Podstawowe grupy opcji rozwiązują ten problem. Przechowuje kompletną konfigurację FlexBox, w tym kierunek układu, wyrównanie, pakowanie, uzasadnienie oraz luki w poziomie i pionowym, które odnoszą się do zmiennych projektowych.

Po skonfigurowaniu wszystkich ustawień FlexBox najedź na panel stylu układu. Zobaczysz ikonę Grupy Opcji.

Kliknij go i wybierz „Utwórz ustawienie wstępne z bieżących stylów”. Nazwij go na podstawie tego, co robi układ: „Siatka z trzema kolumnami”, „Services Grid” lub „Wyświetlanie karty”.

Preset przenosi konfigurację FlexBox do dowolnego kontenera. Nie kopiuje kolorów tła, czcionek ani innych stylizacji wizualnej.

Zastosuj ustawienie „trzech kolumn” do dowolnego wiersza. Automatycznie konfiguruje te same odstępy, wyrównanie i zachowanie owijania. Każdy wiersz lub kolumna zachowuje swój wizualny wygląd, używając tej samej struktury układu.

Spędzasz mniej czasu na odtwarzaniu konfiguracji, które już udoskonaliłeś. Tożsamość wizualna pozostaje unikalna dla każdej sekcji. Podstawa strukturalna pozostaje spójna w całej witrynie. Twój system GAP pozostaje szybko do wdrożenia, a sprawdzone wzorce układu są skutecznie wykorzystywane.

Uzyskaj idealne odstępy za każdym razem z Divi 5

Dzięki nowym FlexBox i zmiennym Divi 5 spójne odstępy stają się łatwe. GAP kontroluje układy równowagi między urządzeniami, podczas gdy zmienne zapewniają odzwierciedlenie aktualizacji w całej witrynie za pomocą jednej zmiany.

Zamiast ciągłych poprawek otrzymujesz jasny system, którym możesz zaufać. Ustaw swoje odstępy raz, ponownie wykorzystaj je wszędzie i skup się na projektowaniu wspaniałych doświadczeń dla odwiedzających.