Jak szybko zmienić style pakietów układu za pomocą Znajdź i Wymień

Aktualizacja projektu pełnego pakietu układu brzmi prosto, dopóki nie zdasz sobie sprawy, że musisz zmienić te same style na pięciu lub sześciu różnych stronach. Ponieważ te style są stosowane jako wartości statyczne, nawet niewielka aktualizacja, taka jak zmiana czcionki lub dostosowanie wyściółki sekcji, staje się czasochłonna po wykonaniu strony po stronie.

Ale co, jeśli możesz zaktualizować wszystkie powtarzające się style za pomocą kilku kliknięć? Właśnie to robi i zamień w Divi 5. Niezależnie od tego, czy wymieniasz czcionki, zastępujesz kolory, czy dostosowujesz odstępy, ta funkcja pomaga natychmiast wprowadzać zmiany w całym układzie. Pokażemy Ci, jak go używać do czyszczenia i przywrócenia całego pakietu układu.

Co to jest i zamień w Divi 5

Znajdź i zamień to funkcja w Divi 5, która pozwala szybko zaktualizować powtarzane wartości stylu w całym układzie. Niezależnie od tego, czy jest to czcionka, kod koloru, wyściółka, czy nawet efekt cienia, możesz teraz zmienić tę wartość i zastosować ją na wiele elementów.

Jak to się naprawdę działa? Zaczyna się od dowolnego modułu w wizualnym budowniczym. Usuń się po polu stylu, takim jak kolor tekstu lub rozmiar czcionki, a zobaczysz ikonę trzech kropek. Kliknij to (lub kliknij prawym przyciskiem myszy pole) i wybierz Znajdź i zamień .

Otwiera to panel, w którym definiujesz wartość zastąpienia, jaka powinna być nowa wartość i gdzie zastosować zmianę. Możesz skupić się na tym module, rozwinąć go do całej sekcji lub przejść do całego układu na całej stronie.

Po doświadczeniu tego przepływu pracy zrozumiesz, dlaczego jest to tak pomocne narzędzie. Zamiast polowań przez dziesiątki modułów, aby zmienić ten sam kolor lub czcionkę, wykonujesz jedną ukierunkowaną aktualizację i obserwujesz, jak faluje cały układ w kilka sekund. Ale aby naprawdę odblokować potencjał Znajdź i zastąpienie, musisz zobaczyć, jak to działa ze zmiennymi projektowymi, które zmienia wszystko.

Jak znaleźć i zamień pomaga szybciej aktualizować style układu

Przejrzymy dwa scenariusze: najpierw podstawowe operacje znaleziska i wymiany, a następnie to samo zadanie przy użyciu zmiennych projektowych (ta tajna broń).

Używając znalezienia i wymiany w Divi 5

Proces jest prosty: wyzwalaj go z dowolnego pola stylu, wybierz, co zastąpić, i zastosuj zmianę w wielu modułach. Przejdźmy przez to z prawdziwym przykładem.

Powiedz, że chcesz zwiększyć rozmiar czcionki wszystkich nagłówków strony. Zacznij od kliknięcia dowolnego modułu nagłówka wewnątrz wizualnego budowniczego. Przejdź do Ustawienia> Projekt> Tekst nagłówka> Tekst nagłówkowy rozmiar czcionki H1. Kliknij prawym przyciskiem myszy lub unosić się, aby znaleźć opcję Znajdź i zastąpienie między innymi.

Otwiera to panel Znajdź i Wymień na wiele opcji:

• (1) Element źródłowy: To określa ukierunkowane ustawienie, takie jak rozmiar tekstu, kolor lub wyściółka. Jest go automatycznie wybierany na podstawie miejsca, w którym otworzyłeś panel.
• (2) Znajdź wartość: bieżąca wartość używana w całym układzie. Może to być rozmiar czcionki, taki jak 30px, kod kolorów, taki jak #000000 lub dowolne inne ustawienie projektowe. Jest to automatycznie dodawane.
• (3) Wymień wartość: nowa wartość, którą chcesz zastosować. Divi szuka dopasowanej wartości i zastępuje ją tym.
• (4) Znajdź i wymień w miejscu: Wybierz, gdzie należy zastosować zmianę. Możesz ograniczyć go do jednego modułu, jego sekcji lub całej strony.
• (5) Znajdź i wymień w typu elementu: Zdecyduj, które moduły powinny wpłynąć na zmianę. Możesz zastosować go do wszystkich modułów lub tylko określonych typów, takich jak przyciski, tekst lub blurbs.
• (6) Wymień tylko identyczne pola: włącz to, aby zaktualizować tylko pola, które dokładnie pasują do wartości znalezienia. Pomaga to uniknąć przypadkowych zmian w niepowiązanych elementach.

Na przykład zastępujemy rozmiar czcionki od 30px na zacisk płynu (20px, 4vw, 50px). Wybraliśmy całą stronę i wszystkie elementy, ponieważ chcemy zaktualizować wszystkie nagłówki na stronie.

Kliknij przycisk Znajdź i wymień i obserwuj, co się stanie. Wszystkie nagłówki o wielkości czcionki 30px mają teraz wartość zacisku płynnego ().

Pozostałe nagłówki pozostały niezmienione, ponieważ Divi aktualizuje tylko wartości, które pasują dokładnie w wybranym zakresie. Nie wymaga ręcznej edycji, a nawet przypadkowych zmian niepowiązanych elementów. Ta dokładność sprawia, że idealnie nadaje się do czyszczenia domyślnych stylów w paczkach układu.

Dowiedz się wszystkiego o znalezieniu i zastąpieniu Divi

Korzystanie z zmiennych projektowych w Find i Wymień

Znajdź i zamień staje się jeszcze mocniejszy w połączeniu ze zmiennymi projektowymi. Zamiast zastępować wartość statyczną inną wartością statyczną, możesz ją zastąpić zapisaną zmienną z menedżera zmiennej. Buduje to spójny system projektowy, który łatwy do aktualizacji jest łatwy do późniejszego aktualizacji.

Kontynuujmy ten sam przykład, aktualizując wszystkie rozmiary czcionek nagłówka. Ale tym razem, zamiast zastępować 30px wartość bezpośredniej zacisku, zastąpimy ją zmienną o nazwie rozmiar czcionki H3.

Najpierw utwórz zmienną. Otwórz menedżer zmiennych z lewego paska bocznego i przejdź do kolumny liczbowej . Nazwij swoją zmienną, przypisz wartość i zapisz.

To sprawia, że zmienna jest dostępna we wszystkich polach wielkości czcionki. Teraz pojawia się magia: możesz go użyć bezpośrednio w panelu Znajdź i zamień, aby przypisać zapisaną zmienną do wszystkich rozmiarów czcionek nagłówka naraz.

Otwórz Znajdź i wymień panel jak poprzednio. W polu Wymień wartość , najedź nad wejściem i kliknij ikonę Menedżera zmiennego . Wybierz zapisaną zmienną, rozmiar czcionki H3 i kontynuuj te same ustawienia.

Kliknij Znajdź i wymień, aby zastosować zmianę. Wszystkie nagłówki, które używają 30px, będą teraz odwoływać się do zmiennej wielkości czcionki H3 zamiast stałej liczby.

Tutaj robi się interesujące. Chcesz później dostosować ten rozmiar czcionki? Przejdź do Menedżera zmiennej , otwórz zmienną wielkości czcionki H3 i zmień wartość. Zaktualizuj zacisk do zacisku (24px, 5vw, 60px) i każde nagłówek za pomocą tych zmiennych aktualizacji automatycznie.

Nie trzeba powtarzać i wymieniać. Za pomocą jednej aktualizacji układ dostosowuje się wszędzie, gdzie używana jest zmienna.

Ta kombinacja zmiennych znaleziska i zastępowania i projektowania sprawia, że aktualizacja całych pakietów układu jest tak wydajna, a my postępujemy zgodnie z tym procesem w tym samouczku. Raz zdefiniujesz swoje zmienne projektowe, a następnie użyj znajdź i zamień, aby przełączać się ze wartości statycznych na zapisane zmienne na wszystkich stronach. Następnie aktualizacja staje się łatwa.

Dowiedz się wszystkiego o zmiennych projektowych Divi

Gotowy, aby wdrożyć to? Potrzebujesz Divi 5, aby użyć zarówno zmiennych Znajdź, jak i zastąpienie i projektowanie. Konstruktor został całkowicie przebudowany w celu szybszej wydajności i mądrzejszych przepływów pracy.

Jak wymienić style na pakiecie układu

Teraz, gdy wiesz, jak działa i zamień i jak sparować je ze zmiennymi projektowymi, załóżmy to w prawdziwym pakiecie układu. W naszym przykładzie zaimportujemy system zarządzania uczeniem się, który obejmuje wiele stron, takich jak dom, kontakt, kontakt, lądowanie kursu i ceny.

Każda strona używa tych samych czcionek, kolorów i odstępów, ale wszystkie jako wartości statyczne. W poniższym samouczku zaktualizujemy je na wszystkich stronach, zamienimy je w zmienne i połączymy wszystko z centralnym systemem projektowym.

1. Audytuj style projektowania układu

Zanim zaczniesz coś zastępować, poświęć kilka minut, aby przejrzeć pakiet układu. Otwórz każdą stronę i szybko wymień wszystkie style projektowania, które powtarzają się, takie jak rozmiary czcionek, kolory przycisków, odstępy tekstowe, wyściełanie sekcji i style graniczne. Oto, co znalazłem po przejrzeniu układu LMS:

• Rozmiary czcionek: 30px jest używane dla wszystkich nagłówków H3 i 48px dla H2S na wielu stronach
• Czcionki: Poppins jest używany konsekwentnie dla wszystkich nagłówków
• Przycisk podstawowy: Kolor tła to #4449e0 z białym tekstem
• Wyściółka: Większość sekcji używa 60px górnego i dolnego
• Ikony BLURB: Rozmiar ikony jest ustawiony na 24px
• Borderów Blurb: Nie nakłada się obramowania do modułów BLURB
• Tła sekcji: Zielony kolor #47be68 pojawia się w sekcji stopki prawie każdej strony

Wszystkie są wprowadzane ręcznie jako wartości statyczne wewnątrz każdego modułu. Na przykład moduł BLURB wykorzystuje #4449E0 dla koloru ikony i szerokości 24px.

Po zidentyfikowaniu takich powtarzających się stylów, dowiesz się dokładnie, co zamienić na zmienne projektowe.

Ten krok audytu stanowi podstawę wszystkiego, co następuje. Pomaga budować systematyczne podejście, które utrzymuje spójność i utrzymanie układu.

2. Zapisz zmienne projektowe

Po kontroli układu i odnotowaniu powtarzających się stylów, następnym krokiem jest tworzenie zmiennych projektowych preferowanych wartości. To pozwala przekształcić zaostrzone style w tokeny wielokrotnego użytku, dzięki czemu układ jest łatwiejszy do aktualizacji później. Po zapisaniu wszystkich naszych wartości zastąpimy bieżące naszą.

Tworzenie zmiennej kolorów

W tym przykładzie stwierdziłem, że ikony BLURB używają koloru #4449E0, ale chcę to zmienić na mój podstawowy kolor marki, #6C012A. Aby to zrobić, utworzę zmienną kolorów.

Przejdź do menedżera zmiennego z lewego paska bocznego, a następnie otwórz kolumnę kolorów .

Przewiń w dół i kliknij opcję + dodaj globalny kolor . Nazwij swoją zmienną i wprowadź wartość. Kliknij Zapisz zmienne i jest to zrobione.

Tworzenie zmiennej liczbowej

Następnie chcę dodać obramowanie 2Px wokół Blurbs, więc potrzebuję zmiennej liczbowej . Proces jest podobny, ale w innej kolumnie. Przejdź do kolumny liczbowej . Kliknij + Dodaj numer globalny, nazwij zmienną, przypisz wartość i zapisz.

Tworzenie zmiennej czcionki

Chcę też zmienić wszystkie czcionki nagłówki na Askhar, moją czcionkę marki. Wymaga to zmiennej czcionki . Przejdź do kolumny czcionki , utwórz nową zmienną, przypisz nazwę, wybierz czcionkę i zapisz.

To jest zrobione. Ta czcionka będzie teraz wybierana we wszystkich polach tekstowych w całym układzie.

Postępuj zgodnie z tym samym procesem dla reszty ustaleń audytu, takich jak wyściółka sekcji, inne rozmiary nagłówka lub dodatkowe kolory marki. Każdy powtarzający się styl z układu może (i powinien) stać się zmienną.

W ten sposób nie musisz pamiętać kodów sześciokątnych, nazwy czcionek ani określonych wartości. Żyją w twoim menedżerze zmiennym i podążają za tobą w modułach i stronach. A co najważniejsze, możesz użyć i wymienić, aby zastosować je w całym układzie, co zrobimy dalej.

3. Użyj i wymień, aby zastosować zmienne

Oto najciekawsza część, na którą czekaliśmy. Przy zapisaniu naszych zmiennych zmiana stylów całego układu jest szybka i łatwa. Zobaczmy, jak.

Zmiana kolorów ikon

Najpierw zmieńmy kolor ikon na naszą zapisaną podstawową zmienną kolorów marki . Przejdź do ustawień Blurb> Projekt> Obraz i ikona. Teraz najedź na opcję kolorów ikon i kliknij trzy kropki. Wybierz Znajdź i zamień .

Na panelu Znajdź i Wymień wszystko, co musisz zrobić, to unosić się, aby zlokalizować ikonę Menedżera zmiennych i wybrać zmienną.

I po prostu wszystkie ikony mają nowy kolor. Mógłbym to również zrobić w drugą stronę, przypisując kolor marki jako wartość statyczną zamiast zapisywać zmienną projektową, ale dodaliśmy dodatkowy krok, aby uprościć przyszłe aktualizacje.

Jak? Wyobraź sobie, że zmodyfikowałeś wszystkie swoje strony układu, ale chcesz zmienić kolor marki. Nie trzeba czuć się przytłoczonym w ponownym przeglądaniu wszystkich stron lub wykonania modułu IT według modułu. Ponieważ zapisałeś już zmienną projektowania kolorów marki, musisz tylko zmienić wartość, aby zaktualizować ją w całej witrynie.

Zmiana czcionki wszystkich nagłówków

Następnie przełączmy wszystkie czcionki na czcionkę mojej marki. Uzyskaj dostęp do ustawień nagłówka> Projekt> Tekst tytułowy. Włóż na czcionkę tytułową i otwórz Znajdź i zamień . W kolumnie Wymień wartość przypisz swoją zmienną czcionki nagłówki marki .

Aktualizacja szerokości granicy wszystkich modułów Blurb

Do aktualizacji szerokości granicy użyję zmiennej modułu BLURB . Proces pozostaje spójny. Przejdź do ustawień granicznych Blurb, otwórz Znajdź i zamień, wybierz zmienną i zastosuj.

Po zmianie wszystkich wartości statycznych ze swoimi zmiennymi projektowymi połączysz style układu bezpośrednio z zmiennymi. Oznacza to, że jeśli kiedykolwiek chcesz zmienić kolor marki, dostosować typografię nagłówka lub dostosować szerokości granic, nie będziesz musiał ponownie powtarzać zamienników. Po prostu zaktualizuj zmienną, a wszystkie połączone elementy natychmiast się dostosują.

Krok bonusowy: Utwórz i zapisz ustawienia wstępne (opcjonalnie)

Podczas gdy znajdź, wymień i projektowanie zmienne dają solidne podstawy, istnieje opcjonalny krok, który jeszcze bardziej opiera się na tym systemie. Presety pozwalają pakować kompletne style i ponownie wykorzystać je w dowolnym miejscu za pomocą jednego kliknięcia.

Gdy będziesz zadowolony ze swoich zmiennych podstawowych, możesz zrobić o krok głębiej i stworzyć ustawienia wstępne dla bardziej szczegółowych stylizacji. Nie jest to konieczne dla podstawowego procesu, przez który właśnie przeszliśmy, ale warto zbadać, jeśli chcesz maksymalną wydajność.

Załóżmy, że lubisz dodać efekt cienia do wszystkich swoich blurów, dzięki czemu zaprojektowałeś idealny styl cienia do modułu Blurb. Zamiast ręcznie kopiować ten styl za każdym razem, możesz go zapisać jako ustawienia wstępne.

Zrobione. Ta ustawienie pojawia się teraz w rozdzielczości ustawień wstępnych każdego modułu. Możesz natychmiast zastosować go do innych modułów; Nie ma potrzeby powracania odstępów, granic, cieni ani żadnych innych poprawek projektowych.

To, co sprawia, że wstępne ustawienia jest jeszcze silniejsze, jest ich elastyczność. Możesz tworzyć ustalone grupy dla różnych kombinacji ustawień w celu lepszej optymalizacji przepływu pracy i kontroli ziarnistej. Na przykład możesz mieć jedną wstępną grupę dla stylów guzików o odmianach, takich jak światło pierwotne, pierwotne i pierwotne światło, z których każda zawiera różne kombinacje tła, granic i odstępów.

W ten sposób utrzymujesz spójność, mając opcje dla różnych kontekstów. Presegs są szczególnie przydatne, gdy układ ma 10+ modułów przy użyciu tego samego stylu. Zamiast polegać na pamięci lub ręcznych edycjach, standaryzujesz wszystko z góry.

Dowiedz się wszystkiego o ustawieniach grup opcji Divi

Po zastosowaniu wszystkich zapisanych zmiennych projektowych, oto jak wyglądają wersje przed i po:

4. Zastosuj ten sam proces na inne strony

Po skonfigurowaniu zmiennych i ustawień projektowych aktualizacja reszty pakietu układu staje się znacznie szybsza.

Weźmy na przykład stronę docelową kursu. Zobaczysz tutaj te same wartości statyczne, czcionki na kierunku, kolory guzików, obramowanie Burbur, kolory ikony i wiele innych. Ponownie, zamiast ręcznie dostosowywać każde ustawienie, otwórz odpowiedni moduł, wyzwala się Znajdź i zamień oraz przypisz zmienną pasującą.

Powtórz ten proces dla każdego powtarzającego się stylu na wszystkich stronach. Po zakończeniu cały pakiet układu będzie podłączony do zmiennych i ustawień wstępnych, co sprawi, że przyszłe edycje są prawie łatwe.

Zaktualizowana strona docelowa kursu za pomocą zmiennych Find & Replain i Divi

Wykonaj edycje obejmujące układ w ciągu kilku sekund z znalezieniem i wymienianiem

Konfigurowanie zmiennych projektowych i uczenie się Znajdź i zastąpienie w Divi 5 może zająć czas z góry. Ale kiedy to zrobisz dla jednego pakietu układu, nigdy nie będziesz chciał wrócić do ręcznego klikania dziesiątek modułów.

Przekształciliśmy cały pakiet układu z rozproszonych wartości statycznych w połączony system projektowy. To, co zajęło nam minuty z Find & Replain, zajęłoby to wiele godzin na stary sposób, moduł według modułu, strony po stronie.

Nie chodzi tylko o oszczędzanie czasu na tym projekcie. Budujesz system projektowy, który sprawi, że każdy przyszły projekt Divi był szybszy i bardziej spójny.