Jak zastąpić statyczne style zmiennymi projektowymi Divi 5

Jeśli kiedykolwiek ulepszyłeś kolory, wyściółki lub czcionki jedno moduł na raz, prawdopodobnie zdałeś sobie sprawę, jak powolne, podatne na błędy i nudne mogą być zmiany stylu ręcznego.

Divi 5 wprowadza mądrzejszy sposób, aby sobie z tym poradzić. Dzięki zmiennym projektowym oraz znajdź i zamiennik możesz aktualizować statyczne style w całym układzie i budować system projektowania wielokrotnego użytku w kilka minut. Zobaczmy, jak.

Divi 5 jest gotowy do użycia na nowych stronach internetowych.

Co to są „statyczne style”?

Kiedy importujesz układ Divi lub używasz wcześniej zaprojektowanej sekcji, wszystko, takie jak czcionki, kolory, odstępy i granice, jest już ustawione. Jeśli układ nie korzysta z ustawień wstępnych, zauważysz, że wartości te są stosowane na poziomie elementu.

Nagłówek może mieć ręcznie wpisany rozmiar czcionki, przycisk może użyć określonego kodu kolorów, a wyściółka lub odstępy mogą używać liczb stałych. Te bezpośrednio stosowane wartości nazywane są stylami statycznymi.

I chociaż na początku wydają się nieszkodliwe, mogą szybko stać się problemem, gdy chcesz wprowadzić zmiany. Problem ze statycznymi stylami polega na tym, że zajmują więcej czasu na zarządzanie. Jeśli chcesz zmienić kolor wszystkich przycisków lub dostosować odstępy między sekcjami, musisz edytować każdy ręcznie. To jest powolne i frustrujące.

Teraz wyobraź sobie, że aktualizujesz kompletną markę witryny ręcznie lub pracujesz nad złożonym układem pełnym powtarzających się stylów. Wielu projektantów podzieli się, jak frustrujący może być ten proces. Ale przez lata nie było niezawodnego sposobu na naprawę. Dlatego zbudowaliśmy mądrzejsze rozwiązanie w Divi 5.

Jak Divi 5 ułatwia wymiana statycznych stylów

Jednym z naszych celów z Divi 5 jest szybsze i mniej powtarzalne przepływ projektu. Aby w tym pomóc, dodaliśmy dwie potężne funkcje: zmienne projektowe , które pozwalają scentralizować swoje style oraz znaleźć i wymienić , co pozwala ich natychmiast zaktualizować w całym układzie. Rozumiemy je szczegółowo.

Zmienne projektowe pozwalają zdefiniować swoje globalne style

Dzięki Divi 5 możesz wreszcie zbudować własne ramy projektowe wizualnie i użyć go do szybkiej modyfikowania stylów marki.

Zamiast ręcznego stosowania tego samego koloru, czcionki lub odstępów w każdym module, Divi 5 pozwala teraz zapisać te wartości jako zmienne projektowe. Są to wartości wielokrotnego użytku, które możesz odwoływać w całej witrynie, aby Twój projekt był bardziej spójny i łatwiejszy w utrzymaniu.

Wewnątrz wizualnego budowniczego Menedżera zmiennych umożliwia tworzenie i organizowanie zmiennych w sześciu różnych typach: kolory, czcionki, liczby (takie jak odstępy lub rozmiary), tekst, obrazy i linki.

Możesz zapisać każdą zmienną z wyraźną nazwą, taką jak wyściółka sekcji, więc znalezienie i ponowne wykorzystanie jej jest łatwiejsze. W przeciwieństwie do ręcznego pisania zmiennych CSS, interfejs Divi pozwala zarządzać tymi wartościami wizualnie bez dotykania kodu.

Zastosowanie tych zapisanych zmiennych jest również łatwiejsze. Dostosowując moduł, przejdź do ustawień, zlokalizuj ikonę Menedżera zmiennych i wybierz zmienną z listy.

Zobaczysz prawdziwą przewagę, gdy nadejdzie czas, aby wprowadzić zmiany. Załóżmy, że chcesz zmienić wyściółkę wszędzie. Zamiast edytować dziesiątki modułów, po prostu aktualizujesz wartości raz w menedżerze zmiennym i aktualizuje się w całej witrynie.

Zwróć uwagę na zmieniające się wartości w czasie rzeczywistym w stosowanych polach ustawień? To jest siła globalnego systemu projektowania.

Nie ogranicza się to również do stylów projektowania. Aby skutecznie zarządzać powtarzającymi się treścią, możesz również zapisywać tekst, obrazy i linki, takie jak adres, e -mail lub slogan firmy, jako zmienna treści. Nie ma już potrzeby kopiowania, po prostu wstaw ją jak treść dynamiczna, a pozostanie spójna w całej witrynie.

Dowiedz się wszystkiego o zmiennych projektowych

Znajdź i zamień pozwala przełączać się ze stylów statycznych na globalne

Funkcja Find i zastąpienie Divi 5 pozwala szybko aktualizować wartości stylu w całym układzie bez edycji każdego modułu indywidualnie. Został zaprojektowany, aby pomóc Ci zmienić wartości statyczne, takie jak kolory, czcionki, odstępy lub inne ustawienie, które powtarza się między sekcjami z jednego punktu początkowego za pomocą zaledwie kilku kliknięć.

Aby go użyć, kliknij prawym przyciskiem myszy dowolne pola stylowe wewnątrz budowniczego wizualnego lub unosić się nad trzema kropkami. W rozwijaniu zobaczysz opcję Znajdź i zamień .

Otwiera to nowy panel znaleziska i zastąp . Tutaj możesz wprowadzić pożądane zmiany i zastosować je luzem.

• (1.) Element źródłowy: Ustawienie, które kierujesz (na przykład tekst, kolor lub odstępy). Otwórz rozwijanie, a zauważysz, że jest to hierarchia warstw.
• (2.) Znajdź wartość: dokładna wartość, którą chcesz zastąpić, taka jak określona czcionka lub kod koloru.
• (3.) Wymień wartość: nowa wartość lub zmienna, którą chcesz zastosować.
• (4.) Znajdź i wymień w miejscu: Wybierz, gdzie zastosować zmianę. Ten moduł, sekcja lub cała strona.
• (5.) Znajdź i wymień w typu elementu: Zdecyduj, czy zmiana powinna mieć zastosowanie do wszystkich elementów lub tylko określonych typów modułów.
• (6.) Zastąp identyczne pola: po włączeniu wymiany mają miejsce tylko wtedy, gdy zarówno ustawienie, jak i wartość dokładnie pasują.

Oto jak to działa. Powiedzmy, że chcesz zmienić czcionkę nagłówka używaną na stronie. Zamiast moduł według modułu użyjemy panelu Znajdź i Wymień.

Po otwarciu go z ustawień nagłówka element źródłowy jest automatycznie wybrany, więc nie zawsze musisz go wybrać ręcznie.

(Możesz także kliknąć różne elementy, a opcje panelu dostosują się automatycznie.)

W wartości znalezienia wprowadź wartość do wymiany. W naszym przykładzie jest to Medula One, bieżąca stosowana czcionka. W wartości wymiennej wybierz nową wartość, którą chcesz zastosować. Wybierzmy Aclonica.

Następnie wybierz, czy chcesz zaktualizować wszystkie instancje na całej stronie , czy tylko w kolumnie, wierszu lub sekcji w Znajdź i Wymień w miejscu. Zachowaj znalezienie i zastąpienie typu elementu jako wszystkich elementów, ponieważ chcemy celować w wszystkie moduły nagłówka.

I to wszystko. Po prostu naciśnij Znajdź i wymień, aw sekundach zaktualizowano 20 instancji nagłówkowych. Zauważ, że tekst nadwozia i czcionki przycisków pozostają nietknięte? To dlatego, że używają różnych wartości. I tak dokładnie jest system.

Divi stosuje zmiany tylko tam, gdzie znajduje dokładne dopasowanie. Oznacza to, że możesz śmiało posprzątać statyczne style, bez zepsucia projektów, które nie wymagają zmiany. Ale jak pasują tutaj zmienne projektowe?

Są jak wisienka na torcie. Możesz także użyć zmiennych projektowych w polu Wymień . Usuń się nad nim, kliknij ikonę Menedżera zmiennej i wstawiaj zapisaną zmienną.

To łączy twoje style z globalnym systemem wielokrotnego użytku, który jest znacznie łatwiejszy i bardziej wydajny w aktualizacji. W ten sposób zastąpimy wszystkie nasze wartości statyczne zmiennymi projektowymi, aby uzyskać naszą stronę internetową, aby uzyskać łatwiejsze aktualizacje.

Dowiedz się wszystkiego o znalezieniu i wymianie

Obie te funkcje (i wiele innych) są dostępne w Divi 5. Builder został ponownie wyobrażony, aby zapewnić szybszą wydajność, mądrzejsze przepływy pracy i większą kontrolę. Szczerze mówiąc, czytanie o nich jest ekscytujące, ale zauważysz prawdziwą zmianę, gdy doświadczysz tych funkcji dla siebie.

Jak zastąpić statyczne style zapisanymi zmiennymi

Teraz, gdy wiesz, jakich narzędzi użyjemy, nadszedł czas, aby zobaczyć je w akcji.

Aby przeprowadzić cię przez ten proces, jako przykład zaimportowałem układ strony docelowej. Szczegóły projektu tego układu, takie jak czcionki, kolory i odstępy, zastosowano jako style statyczne. Tradycyjny sposób wymaga dostosowania go modułu według modułu. Ale w tym samouczku zastąpimy je krok po kroku za pomocą przepływu pracy, który właśnie omówiliśmy.

Ale zanim zanurzysz się, poświęć chwilę na zeskanowanie układu w poszukiwaniu wzorów. Poszukaj powtarzających się stylów, takich jak ten sam kolor, używany na przyciskach, podobne rozmiary czcionek w nagłówkach, spójne odstępy między sekcjami lub identyczne ustawienia graniczne. Te powtarzające się wartości są Twoimi najlepszymi kandydatami do zmiennych projektowych, zwłaszcza jeśli prawdopodobnie je zmieniasz później.

1. Zapisz zmienne projektowe

Po przeanalizowaniu układu sklepu Pie zidentyfikowałem kilka wartości, które pojawiają się konsekwentnie na całej stronie i chciałbym je zaktualizować o moje preferowane style. Należą do nich:

• Szerokość granicy z rzędu
• Wyściółka przycisków
• Tekst nagłówka
• Tekst nadwozia
• Kolor tekstu nadwozia

W tej chwili są stosowane jako style statyczne. Zamiast powtarzać te same ustawienia ręcznie, przekonwertuję je na zmienne projektowe. Daje mi to prostą, wielokrotnego użytku framework do aktualizacji stylów strony za pomocą zaledwie kilku kliknięć.

Zacznijmy od szerokości granicznej na rzędach. Aby utworzyć i zapisać zmienną, otwórz menedżer zmiennych i wybierz typ. W przypadku szerokości granicy z rzędu wybiorę zmienną liczbową . Następnie nazwij swoją zmienną i przypisz jej wartość. Kliknij Zapisz zmienne.

Po zapisaniu ta zmienna jest gotowa do ponownego użycia za pomocą kliknięcia. Pojawi się w dowolnym miejscu, gdzie można ustawić szerokość granic. Postępuję zgodnie z tym samym procesem dla tekstu nagłówka, czcionki ciała, koloru tekstu i wyściółki przycisków. Te zapisane zmienne stanowią teraz podstawę języka projektowego mojego układu. Robisz to samo.

W ten sposób, jeśli zdecydujesz się dostosować odstępy przycisku lub zmienić czcionkę później, nie będziesz musiał aktualizować każdego modułu jeden po drugim. Po prostu zaktualizuj zmienną, a reszta się zaktualizuje.

2. Użyj znajdź i wymień, aby przełączać style statyczne na zmienne

Przy przygotowaniu naszych zmiennych projektowych następnym krokiem jest zastąpienie wartości statycznych w całym układzie za pomocą Znajdź i Wymień. Zacznijmy od wyściółki przycisków.

W tej chwili każdy przycisk używa ręcznie wpisanego wyściółka: 6px dla góry i dołu oraz 1px dla lewej i prawej. Aby zapewnić spójność i ułatwić aktualizacje, stworzyłem dwie zmienne:

• Button-T = 12px dla wyściółki górnej i dolnej.
• Przycisk-l = 32px dla lewej i prawej wyściółki.

Aby je zastosować, otworzę ustawienia dowolnego przycisku, przejdę do Design> Odstęp> Wyprzedzenie , kliknij prawym przyciskiem myszy wartość wyściółki i wybierz Znajdź i zamień z opcji.

W panelu Znajdź i zamień zastąpię istniejącą wartość statyczną zapisaną zmienną z menedżera zmiennej.

Po kliknięciu Znajdź i zamień , wszystkie pięć instancji przycisków w całej aktualizacji strony natychmiast używają nowych wartości wyściółki.

Możesz wykonać te same kroki dla dowolnych innych statycznych stylów, które zidentyfikowaliśmy wcześniej. Użyj znajdź i zamień, aby zamienić każdą z nich na zapisane zmienne, a skończysz z układem, który jest w pełni podłączony do globalnego systemu projektowania.

3. Konwertuj preferowane style na ustawienia wstępne (opcjonalnie)

Ten krok jest opcjonalny dla zakresu tego artykułu, ale jest to potężny sposób rozszerzenia systemu projektowania.

Po wymianie stylów statycznych zmiennymi możesz zapisać te moduły jako ustawienia o grupie opcji. Na przykład, po przypisaniu zapisanej zmiennej dla szerokości granicy do wiersza, zapisałem ten rząd jako ustawienie granicy.

Korzystanie z zmiennych wewnątrz ustawień wstępnych oznacza wszelkie przyszłe aktualizacje Twojego systemu projektowego, takie jak zmiana wartości zmiennej, automatycznie zastanowi się nad wszystkimi modułami przy użyciu tego ustawienia. Nie trzeba ponownie złożyć ani aktualizować niczego ręcznie.

Tak więc nie tylko aktualizowaliśmy całą stronę o nową markę za pomocą kilku kliknięć, ale także stworzyliśmy elastyczny system, który sprawia, że przyszłe aktualizacje są szybsze, łatwiejsze i w pełni połączone. Jak to działa w prawdziwym układzie? Czas zobaczyć to w akcji.

Aktualizacja stylów strony jest łatwiejsza niż kiedykolwiek

Powód, dla którego przełączamy się ze stylów statycznych na zmienne projektowe, jest prosty: ułatwiają aktualizacje. Dzięki zmiennym projektowym edycja układu staje się niezwykle prosta.

Jeśli kiedykolwiek chcesz zmienić czcionkę nagłówka na swojej stronie, nie musisz edytować każdego modułu jeden po drugim. Po prostu otwórz menedżer zmiennych, zaktualizuj zapisaną wcześniej wartość czcionki, a zmiana ma zastosowanie wszędzie, gdzie stosowana jest zmienna.

Twoje ustawienia wstępne grupy opcji będą również aktualizować automatycznie, jeśli używają zmiennych projektowych. To utrzymuje połączenie twoich stylów, więc nie musisz powtarzać tych samych edycji na różnych modułach lub stronach.

Kiedy wcześniej dostosowałem układ sklepu z ciasta, nie dostosowałem ręcznie każdego przycisku ani nagłówka. Po prostu zredagowałem moje zapisane zmienne. Czcionka, wyściółka i kolory, które zdefiniowałem wcześniej na stronie automatycznie. Układ był zgodny z systemem, który już zbudowałem.

Jasne, ulepszenie wyściółki lub zmiana koloru w jednym module nie jest trudna. Ale kiedy aktualizujesz dziesiątki stylów na całej witrynie, różnica jest ogromna. To nie tylko szybsze, jest czystsze, bardziej niezawodne i znacznie mniej podatne na błędy.

Jest to prawdziwa wartość przełączania na zmienne: cały projekt staje się łatwiejszy w zarządzaniu. A kiedy Twój klient prosi o szybką zmianę brandingu w przyszłym miesiącu? Skończysz, zanim skończą kawę.

Ułatwiaj edycje luzem z znalezieniem i wymianą

Nie musisz zaczynać od zera za każdym razem, gdy zmienia się projekt. Dzięki systemowi Divi 5 aktualizacje wydają się mniej jak obowiązek, a bardziej prostym krokiem naprzód.

Ten przepływ pracy nie jest tylko pomocny podczas konfiguracji. To ułatwia przyszłe aktualizacje. Niezależnie od tego, czy Twój klient prosi o nową czcionkę, czy chcesz przetestować inny kolor marki, możesz wprowadzić zmianę raz i zobaczyć ją wszędzie.

Divi 5 ma na celu wsparcie, w jaki sposób prawdziwi ludzie projektują strony internetowe. A teraz Twój system projektowy może być równie elastyczny jak twoje pomysły.