Wszystko, co musisz wiedzieć o zaawansowanych jednostkach Divi 5

Świetne narzędzia projektowe dają kontrolę nad każdym aspektem Twojej witryny. Niezależnie od tego, czy przybija idealne wyściółki, czy zapewnia nieskazitelnie skalowania tekstu w różnych urządzeniach, każdy szczegół ma znaczenie. Od lat Divi jest zaufanym towarzyszem projektantów, oferując solidne podstawy do budowania profesjonalnych stron internetowych. Divi 5 posuwa się dalej, wprowadzając funkcję o nazwie Advanced Unit.

Zaawansowane jednostki w Divi 5 pomagają poprawić sposób budowania stron internetowych. Od dynamicznych obliczeń calc () po skalowanie płynów zacisków (), pełny zakres jednostek CSS, takich jak VW i REM, oraz elastyczność zmiennych CSS. W tym poście zanurzymy się głęboko w zaawansowanych jednostkach, jak używać ich w wizualnym budowniczym i dlaczego są one konieczne dla każdego użytkownika Divi. Niezależnie od tego, czy dopracowujesz układy, czy śnisz, odważne nowe projekty, zaawansowane jednostki zapewniają jeszcze większą kontrolę nad reakcją projektu.

Zanurzmy się w środku.

Jakie są zaawansowane jednostki w Divi 5?

Zaawansowane jednostki w Divi 5 pozwala kontrolować elementy projektowe za pomocą wielofunkcyjnego pola jednostki. Jest to pojedyncze, potężne pole wejściowe, które akceptuje pełne spektrum jednostek, funkcji i zmiennych CSS.

Jest to niewielka zmiana w budowniczym wizualnym, który obsługuje wszystkie jednostki CSS z nową obsługą zmiennych związanych z dopasowaniem, nieporządkowym, calc (), clamp () i CSS.

Zaawansowane jednostki uwolnią cię od ograniczeń wartości statycznych. Nie musisz odgadnąć stałych rozmiarów pikseli ani zmagania się z punktami przerwania, aby sprawy były dopasowane tak, jak chcesz. Nie opuszczając wizualnego budowniczego, możesz budować układy, które bez wysiłku skalują i skalują się-z płynną typografią, odstępami adaptacyjnymi i projektami świadomymi przez widok. Nie chodzi tylko o więcej opcji; Chodzi o mądrzejszą, bardziej skalowalną kreatywność.

Odkrywanie zaawansowanych jednostek w Divi 5

Funkcja zaawansowanych jednostek Divi 5 oferuje różne opcje projektowe, każde z unikalnymi sposobami kształtowania układów. Sprawdźmy kluczowych graczy i zobaczmy, jak działają.

Jednostki CSS w Divi 5

Zaawansowane jednostki otwierają pełną paletę jednostek CSS, daleko poza pikselami i wartościami procentowymi. Weźmy na przykład szerokość rzutni (VW) - ustaw szerokość sekcji na 80VW , a zawsze zajmie 80% szerokości rzutni (poziomo), doskonale skalowanie od pulpitu na telefon komórkowy.

Root EM (REM) wiąże rozmiary z rozmiarem czcionki głównej witryny - pomysł na spójną typografię, na przykład 4,5rem na nagłówek.

Możesz także wypróbować fit-content, który rozmiar elementu na podstawie jego treści. Na przykład użycie dopasowania do szerokości nagłówka może zapewnić idealnie dostosowanie się. Możesz dodać dopasowanie do pola szerokości w rzędzie, aby utrzymać kompaktowy i proporcjonalny nagłówek, unikając nadmiernej przestrzeni lub przepełnienia przy jednoczesnym utrzymaniu wypolerowanego wyglądu.

Jednostki te dostosowują się do rozmiarów ekranu i kontekstów, dając układy, które wydają się żywe, a nie zablokowane na miejscu.

Calc () to dynamiczny kalkulator

Funkcja CACL () jest jak mini kalkulator wbudowany w Divi. Pozwala mieszać jednostki z operacjami - dodawanie, odejmowanie, mnożenie i podział - dla wyników dynamicznych. Klasycznym przykładem jest Calc (100% - 50px) , który ustawia szerokość sekcji na 100% i odejmuje 50 pikseli. Jeśli twój element jest centralnie wyrównany, 25px z obu stron zostanie zmniejszone.

Możesz użyć calc () do responsywnych odstępów, takich jak ustawienie sekcji lub szerokości wiersza, aby pozostawić idealne rynny z każdej strony. Calc () dostosowuje się w locie w miarę zmiany rzutni, zapewniając, że projekt pozostaje zrównoważony bez wprowadzania ręcznych poprawek.

Clamp () do kontroli płynów

Funkcja Clamp () pomaga kontrolować rozmiary, które płynnie dostosowują się do rozmiarów ekranu. Wykorzystuje trzy wartości: minimalny rozmiar, preferowany rozmiar i maksymalny rozmiar. Dobrym przykładem jest zacisk (36px, 4vw, 48px) .

Oznacza to, że rozmiar zaczyna się od 36px, wzrasta w oparciu o 4% szerokości rzutni, ale nigdy nie przekracza 48px. Jest świetny do tekstu, jak moduł nagłówka, który dobrze wygląda zarówno na małych telefonach, jak i dużych ekranach. Clamp () zapewnia, że ​​projekt pozostaje zrównoważony i czytelny bez względu na urządzenie.

Zmienne CSS dla globalnej elastyczności

Zmienne CSS (lub właściwości niestandardowe) pozwalają zdefiniować wartości wielokrotnego użytku, takie jak –NO-rozmiar: 5em , w opcjach motywów Divi lub w polu CSS. Dodając zmienne CSS w Divi 5, pamiętaj, aby załączyć je w elemencie nadrzędnym w ten sposób:

:root {
--font-size:5em;
}

Po zdefiniowaniu możesz upuścić var ​​(–ONOT-size) do pola rozmiaru tekstu nagłówka, aby go zastosować.

Jest to oszczędność czasu, która utrzymuje konsekwencję i edytować w locie.

Wartości bez jednostki

Zaawansowane jednostki Divi 5 obejmują również wartości początkowe, niezatrzymane i automatyczne. Początkowa właściwość resetuje właściwość CSS na jej wartość domyślną zgodnie z definicją specyfikacji CSS. Na przykład Kolor ustawień: Początkowy w akapicie powraca go do czarnego, ignorując dowolny niestandardowy lub odziedziczony styl. UETET usuwa nieruchomość z powrotem do stanu naturalnego, działając jak początkowe dla nieodpraczanych właściwości lub powracając do dziedzicznych wartości, jeśli dotyczy. Tymczasem Auto pozwala przeglądarce decydować o wartości opartej na kontekście, takim jak rozciąganie wysokości sekcji, aby pasowały do ​​jej zawartości.

Jak działają zaawansowane jednostki w Divi 5

Zaawansowane jednostki w Divi 5 wprowadzają nowy poziom kontroli bezpośrednio do wizualnego budowniczego, co ułatwia tworzenie responsywnych, dynamicznych projektów. Możesz natychmiast wpisać dowolną jednostkę CSS, funkcję lub zmienną - takie jak VW, calc () lub clamp () - i zobaczyć wyniki. Oto jak zaawansowane jednostki działają w Divi.

Responsywna szerokość sekcji z calc ()

Powiedzmy, że chcesz sekcji, która obejmuje 80% wysokości rzutni, ale usuwa trochę wyściółki z góry i dolnej. Przejdź do zakładki projektowej sekcji, zlokalizuj pole wysokości i dodaj Calc (80VH - 60px) do pola.

Obliczenia to pozwala sekcji płynnie skalować z rzutnią, utrzymując 80% wysokości rzutni przy jednoczesnym odejmowaniu 30px od górnej i dolnej.

Typografia płynów z Clamp ()

Clamp () może być przydatny, jeśli potrzebujesz nagłówków, które rosną wraz z rozmiarem ekranu, ale pozostać czytelne. W zakładce konstrukcyjnej modułu nagłówka ustaw rozmiar tekstu nagłówka na zacisk (52px, 2vw, 36px) .

To ustawia tekst na 52px, skaluje się na podstawie 2% szerokości rzutni i ogranicza rozmiar na 36px - bez wysiłku dostarczając responsywną, zrównoważoną typografię.

Rozmiary czcionek napędzanych zmienną

Zmienne CSS Divi 5 to świetny sposób na uzyskanie jednolitości w odstępach, tekstu i innych obszarach. Możesz ustawić zmienne raz, a następnie używać ich wielokrotnie w całym projektach, dodając je do pola modułu, kolumny, wiersza lub sekcji. Załóżmy na przykład, że chcesz spójne rozmiary nagłówka bez ręcznego ich ustawiania lub używania wstępnej grupy opcji, aby je zdefiniować.

Możesz dodać następujące opcje motywu lub ustawienia strony , w ramach Advanced> Custom CSS :

:root{
--text-size-h1: 86px;
--text-size-h2: 60px;
--text-size-h3: 48px;
--text-size-h4: 36px;
--text-size-h5: 28px;
--text-size-h6: 20px;
}

Stamtąd po prostu dodaj zmienną do rozmiaru tekstu nagłówka w dowolnym module nagłówka. Na przykład dla tego nagłówka w naszej sekcji bohaterów po prostu dodajemy var (–Text-size-H1) . Divi rozpozna to jako zmienną i przypisuje odpowiedni styl do nagłówka.

Najlepsze praktyki dla zaawansowanych jednostek

Aby jak najlepiej wykorzystać zaawansowane jednostki w Divi 5, przemyślane podejście może zaoszczędzić czas i zapewnić błyszczenie twoich projektów. Oto kilka najlepszych praktyk, które Cię prowadzą:

Zacznij prosto

Jeśli jesteś nowy w korzystaniu z funkcji i zmiennych CSS, ułatwiaj znane jednostki, takie jak piksele (PX) lub wartości procentowe (%), a następnie eksperymentuj z calc () w celu uzyskania podstawowych regulacji dynamicznych. Na przykład wypróbuj calc (100% - 40px) dla szerokości sekcji przed nurkowaniem do zmiennych CLAMP () lub CSS. To buduje pewność siebie, nie przytłaczając cię wcześnie.

Zmienne dźwigni dla wspólnych stylów

Zdefiniuj zmienne CSS w opcjach motywów dla spójności w całej witrynie. Na przykład ustawienie –Guttera: 30px pozwala ponownie wykorzystać odstępy między sekcjami, wierszami i modułami. Zmienne CSS mogą być również dobre do ustawienia jednolitego rozmiaru tekstu dla wszystkich nagłówków. Jedna edycja aktualizuje wszystko, przyspieszając proces projektowania i utrzymując spójność projektu.

Reaktywność testowa

System responsywny Divi to świetny sposób na zaprojektowanie projektu na wielu rozmiarach ekranu. Po nałożeniu jednostek takich jak VW lub Clamp () przełącz między komputerem stacjonarnym, tabletem i mobilnym widokiem, aby upewnić się, że układ dostosowuje się sprawnie. Ustawienie nagłówka do zacisku (20px, 3vW, 40px) może wyglądać idealnie na komputerze stacjonarnym, ale może wymagać regulacji mniejszych ekranów, więc przetestuj go, aby się upewnić.

Nie stawaj się zbyt skomplikowany

Chociaż możesz gniazdować, takie jak calc (clamp (20px, 5vw, 50px) - 10px), należy przynajmniej trzymać się prostych formuł, przynajmniej podczas nauki. Nadmierna złożoność może spowolnić wydajność i utrudniać rozwiązywanie problemów, gdy rzeczy nie pojawiają się tak, jak powinny. Trzymaj się czystych, celowych obliczeń, aby ułatwić życie.

Dlaczego jednostki zaawansowane podnoszą Divi 5

Zaawansowane jednostki doskonale nadają się do usprawnienia procesu projektowania. Oto niektóre z kluczowych zalet, które zawierają tę nową funkcję:

• Wolność twórcza: mieszanie jednostek, funkcji i zmiennych odblokowuje układy, które były bardziej czasochłonne do osiągnięcia w poprzednich wersjach Divi. Proste formuły pozwalają na dostosowanie wysokości, szerokości, rozmiarów czcionek i innych. Ta elastyczność pozwala lepiej budować i wykonywać szybciej, wszystko w obrębie budowniczego wizualnego.
• Lepsze responsywne projekty: Zaawansowane jednostki przesuwają Divi w kierunku projektów płynnych, które bez wysiłku dostosowują się. Korzystanie z VW lub Clamp () zapewnia naturalne miejsce na dowolnym urządzeniu, zmniejszając potrzebę ręcznych zastępowania i zapewniając dopracowane wrażenia.
• Jest to przyszłe: zaawansowane jednostki są zgodne z misją Divi 5 polegającą na modernizacji konstruktora wizualnego dla dzisiejszej sieci. Obejmując pełną moc CSS, Divi 5 wyposaża narzędzia niezbędne do budowania nowoczesnych stron internetowych. Nie chodzi tylko o utrzymanie; Chodzi o wyprzedzenie krzywej z narzędziami, które odzwierciedlają to, czego używają profesjonalni programiści.

Pobierz najnowszą Divi 5 Alpha

Jednostki zaawansowane jest pomocną funkcją, która została niedawno dodana do Divi 5. Od precyzji calc () do płynności clampa () i wydajności zmiennych CSS, narzędzia te sprawiają, że odstępy, rozmiar i skalowalność bardziej intuicyjnie niż kiedykolwiek. Niezależnie od tego, czy używasz Divi od lat, czy po prostu go odkryłeś, możesz budować responsywne, dynamiczne strony internetowe przy mniejszym wysiłku.

Gotowy, aby to zobaczyć samodzielnie? Pobierz teraz Divi 5 Alpha i zacznij eksperymentować z zaawansowanymi jednostkami. Zagraj w VW i VH w celu odstępu od rzutni, testu () dla typografii lub skonfiguruj zmienne, aby przemyśleć sposób budowania. Jest to szansa, aby dalej popchnąć twoje projekty i odkryć, co jest możliwe.