Najszybsze sposoby aktualizacji projektu strony za pomocą Divi 5

Divi 5 wprowadza garść nowych inteligentnych narzędzi, które pomogą Ci pracować szybciej i bardziej swobodnie projektować. Ale przy tak dużej mocy na wyciągnięcie ręki łatwo jest poczuć się niepewnie, od czego zacząć, szczególnie przy aktualizacji istniejącego układu.

Prawdopodobnie już wiesz, jak poprawić odstępy, dostosowywać kolory i sprzątać układy, więc ten post nie chodzi o udzielenie podstaw. Chodzi o szybsze robienie ich z Divi 5. W poniższych etapach przechodzimy przez praktyczny przepływ pracy aktualizacji, którą możesz śledzić na dowolnej istniejącej stronie. A jeśli ostatnie zmiany wydawały się przytłaczające, zacznij tutaj. Będziesz złagodzić jasność i pewność siebie.

8 kroków, aby zaktualizować projekt strony za pomocą Divi 5

W tym samouczku korzystamy z strony Business CV Landing z biblioteki pakietów układu Divi.

Subskrybuj nasz kanał YouTube

Przejdziemy przez sposób aktualizacji strony za pomocą nowych narzędzi Divi 5, takich jak znalezienie i wymiana, projektowanie zmiennych i rozszerzanie atrybutów, aby przyspieszyć przepływ pracy i zmniejszyć powtarzające się edycje. Zacznijmy.

1. Optymalizuj deskę rozdzielczą do edycji bez rozrywki

Nawet niewielkie przerwy mogą przełamać skupienie podczas aktualizacji układu. Możesz skakać między sekcjami, wielokrotne otwieranie ustawień i tracą, gdzie się skończyłeś. Tego rodzaju opóźnienia szybko się sumują, szczególnie na dłuższych lub bardziej złożonych stronach.

Divi 5 pomaga zmniejszyć to tarcia o bardziej elastyczne środowisko edycji. Możesz dokować paneli , aby utrzymać widoczne ustawienia klucza, otworzyć wiele modułów w zakładkach i użyć panelu warstw do nawigacji układu bez niekończącego się przewijania. Zamiast klikania modułów, możesz utrzymać wszystko otwarte i dostępne podczas ruchu.

Panel warstw zawiera pełny przegląd strukturalny układu, dzięki czemu możesz natychmiast przejść do dowolnej sekcji, wiersza lub modułu, klikając. Jest to szczególnie przydatne do przeskakiwania na dużych stronach bez przewijania.

Wcześniej przepływ pracy często oznaczał otwarcie modułu, oszczędzanie go, ponowne przewijanie, otwieranie następnego i powtórzenie tego cyklu. Divi 5 pomija to wszystko. Możesz otworzyć kilka modułów z powrotem do tyłu; Każdy pozostaje widoczny jako zakładka w panelu edycji. Ułatwia to porównywanie ustawień lub przełączanie elementów bez wielokrotnego zamykania i ponownego otwarcia ustawień elementu.

Przyzwyczajenie się do nowego przepływu pracy może zająć pewne dostosowanie. Gdy panele zachowują się inaczej, więc przełączanie między modułami nie od razu nie odczuwa drugiej natury. Ale daj mu trochę praktyki, a te małe zmiany zaczynają sumować.

Po wykonaniu poniższych kroków spróbuj inaczej pracować z paneli, dokończ kilka, ułóż kilka zakładek lub zachowaj panel warstw otwartych. Zaczniesz czuć, co najlepiej działa na Twój przepływ.

2. Najpierw ustaw globalne zmienne projektowe

Kiedy zarządzasz pełnym układem, ostatnią rzeczą, jakiej chcesz, jest powtórzenie siebie. Ale właśnie tak się dzieje, gdy każdy styl jest ustawiony ręcznie w każdym module. Na początku może to działać, ale z czasem twoja strona zamienia się w mozaikę rozłączonych wyborów. W końcu coś zawsze tęskni.

Zmienne projektowe pomagają tego uniknąć. Dają ci centralne miejsce do zdefiniowania języka projektowego. Definiujesz wartości wielokrotnego użytku dla czcionek, kolorów, odstępów, obrazów, adresów URL lub linków. Po zastosowaniu wartości te pozostają powiązane z każdym używającym ich modułem.

Oto prosty przykład. Powiedz, że chcesz, aby wszystkie nagłówki korzystały z czcionki lato. Zamiast wybierać lato w każdym module, tworzysz zmienną czcionki . Podaj nazwę, wybierz Lato i zapisz ją. Każdy nagłówek, który wiąże się z tą zmienną, pozostanie teraz zsynchronizowane.

Jeśli chcesz później przejść do innej czcionki, po prostu zaktualizuj zmienną. Każdy podłączony moduł automatycznie odzwierciedla zmianę.

I to tylko jeden przypadek użycia. Możesz także ustawić zmienne dla spójnej wyściółki sekcji, stylów przycisków, kolorów tła lub cokolwiek innego, czego używasz wielokrotnie. Nie musisz zdefiniować wszystkiego jednocześnie, jeśli wydaje się to zbyt przytłaczające. Zacznij od stylów, które wiesz, że ponownie wykorzystasz, i rozszerzasz stamtąd swój system projektowania.

3. Zastąp wartości statyczne zmiennymi projektowymi

Czasami układy mają hardkodowane style, więc aktualizacja ich ręczna sprawia, że proces ten jest niespójny. Dlatego zastępujemy wartości statyczne zmiennymi globalnymi, które właśnie zdefiniowaliśmy.

Nie musisz ich polować indywidualnie. Narzędzie do znalezienia i wymiany Divi ułatwia wymianę wartości statycznych dla zmiennych w zaledwie kilku kliknięciach. Powiedzmy, że wszystkie nagłówki używają ręcznie wybranych czcionek. Otwórz dowolny moduł nagłówka, kliknij pole czcionki i wybierz Znajdź i zamień.

W panelu Wymień wartość , najedź przez pole i otwórz menedżer zmiennych . Wybierz zmienną czcionki All Headings i potwierdź zmianę.

Natychmiast zobaczysz magię: każda instancja tej czcionki w poprzek układu jest od razu zastąpiona. Ta sama metoda działa na kolory, odstępy, style przycisków i wszystko, dla czego ustawisz zmienną.

I nie musisz wszystko zmieniać naraz. Rozpocznij małe, wybierz style, które ponownie wykorzystasz, takie jak tła wyściółka lub przycisk, i najpierw je przełącz. W miarę upływu czasu układ przesuwa się z mozaiki ręcznych edycji na w pełni podłączony system. A kiedy ten system jest na miejscu, każda przyszła zmiana staje się łatwiejsza, szybsza i bardziej spójna.

4. Użyj atrybutów rozszerzonych, aby zastosować aktualizacje w sekundach

Po wprowadzeniu wartości globalnych następnym krokiem jest udoskonalenie. Często znajdziesz małe poprawki do poszczególnych sekcji i żałujesz, że nie możesz przenieść tych zmian w reszcie układu bez ponownego ponownego ponownego przerażenia pracy. Jest to możliwe z rozszerzonymi atrybutami.

Pozwala natychmiastowo kopiować style, treść lub ustawienia wstępne z jednego elementu i zastosować je do innych. Działa również, nawet jeśli moduły nie są tym samym typem. Na przykład, jeśli zaprojektowałeś niestandardową granicę i cień dla jednego obrazu, możesz użyć jej jako odniesienia dla każdego obrazu w sekcji.

Kliknij prawym przyciskiem myszy obraz w stylu i wybierz rozszerzenie atrybutów.

Po otwarciu panelu rozszerzenia dokonaj go na bok, ponieważ prawdopodobnie do niego wrócisz. W rozwijanych rozdzielczości ustaw zakres na sekcję nadrzędną i typ elementu na obraz, a następnie potwierdź.

Ta jedna akcja stosuje twoją aktualizację do każdego obrazu w tej sekcji, bez konieczności dotknięcia ich indywidualnie.

I właśnie tam atrybuty rozszerzenia naprawdę zarabiają swoje miejsce. To wymaga serii ręcznych, powtarzalnych edycji i zamienia je w jeden konsekwentny ruch. Możesz go użyć do sekcji z wieloma podobnymi kolumnami lub modułami, takimi jak galeria obrazów lub blurbs. Jest to najszybszy sposób, aby wnieść poczucie lakieru do twojego projektu bez spalania czasu na każdym module.

5. Zapisz edycje wielokrotnego użytku jako ustawienia o grupie opcji

Gdy udoskonalasz swój układ, prawdopodobnie poprawisz odstępy, granice lub kolory tła, aby wszystko poprawnie. Zamiast powtarzać te korekty za każdym razem, zapisz je jako ustawienia o grupie opcji.

Powiedz, że dostosowałeś odstępy, granicę i tło kolumny. Podoba ci się, jak to wygląda i chcesz go ponownie wykorzystać gdzie indziej. Otwórz ustawienia tej kolumny, przewiń do grupy stylów, którą zmodyfikowałeś (jak odstęp lub obramowanie) i kliknij ikonę wstępnie ustawioną, aby ją zapisać.

Aby zastosować ustawienie wstępne do innych kolumn, kliknij prawym przyciskiem myszy oryginał i wybierz rozszerzenie atrybutów> Rozszerz ustawienia kolumnowe . W panelu ustaw zakres na wiersz nadrzędne, wybierz kolumnę jako typ elementu i naciśnij atrybuty rozszerzania.

Ten wstępny jest teraz stosowany do każdej kolumny w rzędzie w jednym ruchu. Jest to szczególnie przydatne w przypadku układów z powtarzającymi się elementami, takimi jak tabele cenowe, bludy, referencje lub wszędzie tam, gdzie chcesz wizualną spójność bez ręcznego wysiłku. A ponieważ ustawienia wstępne są zapisywane w pakiecie układu, będziesz je gotować również na innych stronach.

6. Użyj kopii/wklejania, aby uzyskać szybkie zmiany jednorazowe

Po przedłużeniu stylów na pełną sekcję lub rząd nadal możesz chcieć dokonać małych, ukierunkowanych poprawek. Może tylko jedna kolumna lub moduł potrzebuje nieco innego wyglądu. Zamiast ponownie przedłużyć ustawienia wstępne, użyj funkcji zarządzania atrybutami.

Na przykład, jeśli dostosowałeś granicę i cień kolumny i chcesz dopasować tylko jedną lub dwa inne, kliknij prawym przyciskiem myszy kolumnę w stylu i wybierz style elementów kopiowania . Następnie kliknij prawym przyciskiem myszy kolumnę, którą chcesz zaktualizować, i wybierz style elementów wklejania .

To nie zastąpi innych ustawień i działa natychmiast, co czyni go idealnym w sytuacjach, w których chcesz zachować elastyczność. Możesz kopiować i wkleić style z prawie każdego elementu i dokładnie zdecydować, co skopiować, czy to odstępy, kolory, granice, czy inne poprawki projektowe.

Rozszerz atrybuty obsługuje edycje masowe, a kopiowanie/wklej obsługuje szczegóły. Jest idealny do dostrojenia układu, który jest w większości wykonany, ale nadal wymaga kilku osobistych akcentów.

7. Przełącz między niestandardowymi punktami przerwania, aby doskonalić responsywny widok

Upewnij się, że układ pulpitu wygląda świetnie na każdym rozmiarze ekranu. Konfigurowalne punkty przerwania Divi 5 ułatwiają to, umożliwiając przełączanie między tabletem, telefonem, a nawet niestandardowymi szerokościami ekranu za pomocą jednego kliknięcia. Ikony urządzenia znajdują się tuż w konstruktorze, dzięki czemu możesz szybko wyświetlić pod uwagę sposób, w jaki sekcje zachowują się na mniejszych ekranach.

W razie potrzeby możesz również zdefiniować własne punkty przerwania, aby uzyskać większą kontrolę.

To idealny czas na sprawdzenie odstępów, rozmiarów czcionek i wyrównania obrazu. Później zajmuje to tylko kilka minut, ale oszczędza Cię przed większymi problemami z układem, szczególnie na stronach ciężkich lub konwersji. I nie musisz zmieniać przepływu pracy. Narzędzia Divi działają równie płynnie w responsywnym widoku, więc dokonaj poprawek, podglądu układu i przejdź dalej.

8. Zaktualizuj zmienne projektowe, aby natychmiast odświeżyć cały układ

Wcześniej konfigurowaliśmy twoje globalne zmienne projektowe i zastąpiliśmy wartości statyczne za pomocą Find i zastąpienie. A teraz twój układ jest w pełni podłączony do scentralizowanego systemu projektowania.

Zmienne projektowe sprawiają, że aktualizacje w całej witrynie są niezwykle łatwe. Powiedzmy, że Twoja marka aktualizuje jej typografię lub główny kolor. Zamiast kopać każdy moduł, aby wielokrotnie wprowadzać te same zmiany, po prostu aktualizujesz zapisaną zmienną. Ta jedna zmiana ma zastosowanie natychmiast w całym twoim układzie.

Aby zobaczyć to w akcji, spójrz na to porównanie obok siebie. Struktura układu pozostaje taka sama, ale proces za nią staje się dramatycznie prostszy i szybszy.

Pomyśl teraz, jak to się skaluje. Wyobraź sobie całą swoją stronę internetową, każdą stronę i sekcję, zbudowaną na tym samym systemie. Nie wycofujesz się już swoich kroków dla każdej zmiany. Pojedyncza poprawka do zmiennej aktualizuje wszystko. Zarządzasz całą marką, zarządzając wartościami za pośrednictwem Menedżera zmiennego.

Tego rodzaju elastyczność jest dokładnie tym, do czego zaprojektowano Divi 5. Nie chodzi tylko o szybsze edycje, ale o zmniejszenie powtarzania, zwiększenie dokładności i zapewnianie większej kontroli przy mniejszym wysiłku.

Dostosuj swój przepływ pracy Divi 5

Do tej pory widziałeś, w jaki sposób narzędzia takie jak zmienne projektowe, rozszerzone atrybuty i wstępne ustawienia grup opcji mogą przekształcić sposób aktualizacji układów. Ale nie ma jednego sposobu na ich użycie.

Ten przewodnik to tylko jedna wersja procesu. Możesz wykonać kroki w innej kolejności, pominąć kilka lub mieszać je we własną rutynę. I to jest całkowicie w porządku, ponieważ celem nie jest przestrzeganie formuły, ale znalezienie rytmu, który wydaje się naturalny i pasuje do tego, jak lubisz pracować.

Trochę eksperymentuj. Im więcej bawisz się narzędziami, tym bardziej zaczniesz rozpoznać, co działa najlepiej dla twojego przepływu. Jeśli sprawy wydają się gładsze, twoje aktualizacje są szybsze, a Twój projekt pozostaje spójny, to twój znak, że działa.

A jeśli zastanawiasz się, czy te narzędzia mogą nadążyć za ewolucją twojego przepływu pracy, absolutnie mogą, ponieważ…

Divi 5 ma na celu dostosowanie się do twojego sposobu pracy

To jest myślenie za każdą funkcją, którą omówiliśmy. Niezależnie od tego, czy chcesz zdefiniować każdy styl z góry, czy wprowadzać zmiany podczas budowania, narzędzia dostosowują się do tego, jak wolisz działać.

Możesz poruszać się szybko lub nie spieszyć się. Zacznij od pustej strony lub udoskonal istniejący układ. Konstruktor nie zmusza cię do sztywnego przepływu pracy. Jest zbudowany w celu zmniejszenia pracy, pominięcia powtarzających się edycji i pomocy w skupieniu się na tym, co właściwie ważne: projektowanie z jasnością, szybkością i pewnością siebie.

Ostatecznie chodzi o budowanie procesu, który wydaje się twój własny i nadąża za tobą w miarę rozwoju twoich projektów i pomysłów. Czy jesteś gotowy na budowę projektu, który się u Ciebie poprawia?