Jak projektowanie oparte na wstępnie zmienia paradygmat Divi Design

Możliwości projektowe Divi ewoluowały wraz z wprowadzeniem ustawień grup opcji w Divi 5. Podczas gdy ustawienia wstępne od dawna ułatwiają zapisywanie i ponowne wykorzystanie elementów w pełni stylizowanych, nowe ustawienia grup opcji dodają warstwę elastyczności, umożliwiając ponowne wykorzystanie właściwości projektowych, takich jak typografia, odstępstwo i efekty w różnych elementach.

Razem te wbudowane funkcje Divi pomagają przekształcić sposób, w jaki projektanci podchodzą do spójności i wydajności, umożliwiając szybsze iteracje projektowe i łatwiejsze aktualizacje globalne. W tym poście zanurzymy się w tym, jak te wstępne ustawienia współpracujemy, aby przekształcić Twój przepływ pracy Divi 5!

Dwa filary projektowania opartego na wstępnie

Zanim zagłębiamy się w szczegóły, ważne jest, aby zrozumieć dwa główne elementy, które sprawiają, że ustawione projektowanie oparte na Divi są tak potężne. Łącząc ustawienia wstępne elementów i ustawienia grup opcji, możesz stworzyć bardziej wydajny, spójny i skalowalny proces projektowania. Spójrzmy na te dwa filary i to, jak współpracują, aby podnieść twój przepływ pracy.

Presete Element: Pakiety projektowe wielokrotnego użytku

Podstawowe wstępne elementy zapisują całe konfiguracje projektowe dla określonych elementów Divi. Divi ma obecnie 4 różne typy elementów: moduły, kolumny, wiersze i sekcje. A jeśli chodzi o moduły, ustawienia wstępne elementu są również unikalne dla typu modułu (przycisk, tekst, CTA itp.). Po zastosowaniu wstępnego elementu wszystkie powiązane ustawienia, takie jak typografia, kolory, odstępy i efekty, są natychmiast odziedziczone po zastosowaniu. Koncentruje się na ustawieniach wstępnych elementów:

• Zapewnij spójność wizualną na stronach
• Zmniejsz powtarzające się zadania stylistyczne
• Zezwalaj na globalne aktualizacje dotyczące szybszych edycji

Presety grup opcji: Modułowa kontrola konstrukcji

Presety grup opcji koncentrują się na właściwościach stylizacji, takich jak typografia, cienie pudełkowe, granice i efekty przewijania. Działają na wielu elementach, umożliwiając projektantom mieszanie i dopasowywanie stylów bez powiązania z jednym typem elementu. Oznacza to, że możesz na przykład użyć tego samego pudełka Shadow Preset zarówno w wierszu, jak i module. Głównymi korzyściami korzystania z ustawień wstępnych grup opcji to:

• Zastosuj wspólne style do różnych elementów
• Stosowne do zaawansowanego dostosowywania
• Zezwalaj na globalne edycje w czasie rzeczywistym bez wpływu na poszczególne moduły

Tworzenie ustrukturyzowanego przepływu pracy z ustawieniami wstępnymi

Teraz, gdy pokazaliśmy wam dwa filary ustawień wstępnych w Divi i krótko wyjaśniliśmy różnicę, przejdźmy kilka wskazówek dotyczących stworzenia ustrukturyzowanego przepływu pracy.

Krok 1: Zdefiniuj podstawowe style za pomocą ustawień grupowych opcji

Zacznij od ustalenia podstawowych zasad projektowania Twojej witryny. Obejmuje to typografię, kolory, style guzików, odstępy i wiele innych. Te fundamentalne elementy są niezbędne do utrzymania spójności w całej witrynie.

W przypadku stale powtarzających się ustawień możesz ustawić ustawienie grupy opcji jako domyślne. Dobrym przykładem tego jest styl tekstu akapitu i użycie go jako domyślnego.

Podstawowe ustawienia grupy opcji są wszechstronne i wielokrotnego użytku, co pozwala zastosować te ustawienia w wielu elementach. Na przykład po zdefiniowaniu ustawienia o shadow tekstu możesz zastosować ten wstępnie ustawiony na nagłówki wszystkich typów elementów w Twojej witrynie. Na tym etapie kładisz podwaliny pod resztę projektu, a te ustawienia wstępne powinny służyć jako elementy konstrukcyjne Twojej witryny.

Krok 2: Utwórz ustawienia wstępne dla określonych modułów

Po zdefiniowaniu podstawowych stylów następnym krokiem jest utworzenie ustawień wstępnych elementów dla bardziej szczegółowych elementów projektowych. Chociaż podążanie za tym zamówieniem jest najbardziej logiczne w teorii, często tworzysz oba jednocześnie. Podstawowe elementy są kompletnymi pakietami projektowymi dla poszczególnych elementów (sekcje, wiersze, kolumny, moduły) i pozwalają szybko zastosować spójne style na stronie.

Zaprojektuj wstępnie stylizowany przycisk CTA przy użyciu predefiniowanych ustawień grup opcji, koncentrując się na typografii, kolorze tła i naczynia.

Zapisz to jako ustawienie elementu wstępnego do użytku. Zbuduj inne powtarzające się elementy, takie jak moduły referencyjne, sekcje funkcji lub tabele cenowe, i odpowiednio je ułożą. Każdy z tych modułów wstępnie stylizowanych może być zapisywany jako wstępnie ustawiony element, który można zastosować w dowolnym momencie.

Podczas projektowania pomyśl o zapisywaniu układów zawierających te ustawienia wstępne w bibliotece Divi. Umożliwia to zachowanie przeglądu wszystkich twoich projektów, pomagając śledzić każdy ustalony styl, który stworzyłeś. Nie musisz się martwić, że od samego początku wszystko doskonały. Gdy budujesz swoją witrynę, prawdopodobnie ulepszysz te elementy w miarę upływu czasu.

Krok 3: W razie potrzeby zaimplementuj i dostosuj

Po utworzeniu grupy opcji i ustawień wstępnych elementów możesz zastosować je na swojej stronie internetowej. Jeśli budujesz stronę internetową od zera bez wcześniej korzystania z oprogramowania projektowego, szanse są wysokie, że zastosowałeś już ustawienia wstępne podczas kompilacji pierwszej strony.

Podczas pracy może być konieczne wprowadzenie korekt na poziomie elementu. Na przykład, jeśli zastosujesz ustawienie wstępne do modułu referencyjnego, ale musisz zmienić odstępy na określonej stronie, możesz to zrobić bez wpływu na resztę witryny. Ta elastyczność pozwala dostosowywać się w miarę upływu czasu, zapewniając, że projekt pozostaje skalowalny i dostosowalny.

Kluczem tutaj jest myślenie ustawień wstępnych jako narzędzi do tworzenia elastycznego, spójnego systemu projektowania, a nie sztywnej struktury, którą należy dokładnie śledzić. Prawdopodobnie będziesz musiał ulepszyć swoje style podczas dalszego budowania, więc zawsze możesz modyfikować ustawienia wstępne w razie potrzeby i zastąpić je na poziomie elementu. Udoskonalaj swój projekt i w pełni skorzystaj z edycji Divi w czasie rzeczywistym, aby te korekty w locie.

Krok 4: Zorganizuj swoje style w bibliotece Divi

Aby śledzić wszystkie ustawienia i układy, zapisz je w układzie, który możesz zachować w bibliotece Divi.

W miarę rozwoju witryny będziesz mógł dostosować zapisane ustawienia wstępne, aby poprawić swój projekt. Zawsze jesteś w stanie zmodyfikować swoje ustawienia wstępne w elemencie, nad którym pracujesz. Po zaktualizowaniu ustawień wstępnych zaktualizuje się na całej Twojej witrynie.

Krok 5: iteruj i ulepszaj

Jedną z wielkich rzeczy w ustalonym systemie Divi jest możliwość ciągłego doskonalenia i udoskonalania twojego projektu. Podczas tworzenia większej liczby stron i układów ponownie odwiedź grupę opcji i ustawienia elementów, aby dokonać globalnych korekt.

Jeśli zdecydujesz się zmienić kolor główny przycisk lub zaktualizować rozmiar czcionki wszystkich nagłówków, możesz to zrobić raz i mieć odzwierciedlenie go we wszystkich przypadkach, w których zastosowano ten ustawienie.

Kontynuując pracę, uzyskasz głębsze zrozumienie, które elementy działają dobrze, a które wymagają dalszych korekt. Nie bój się modyfikować ustawień wstępnych, i skorzystaj z elastyczności Divi, aby dokonywać niewielkich zmian, które pasują do ewolucyjnej wizji projektowej.

Stale iterowanie i ulepszanie ustawień wstępnych stworzysz witrynę, która jest nie tylko spójna, ale także dostosowana do przyszłych zmian lub trendów projektowych. Pamiętaj, że system wstępny jest narzędziem, które pomaga usprawnić proces - nie jest to zestaw reguł, których musisz przestrzegać od pierwszego dnia.

Korzyści płynące z wstępnego przepływu pracy

Teraz, gdy przeszliśmy przez podstawy tworzenia ustrukturyzowanego przepływu pracy z ustawieniami Divi, omówmy niektóre korzyści związane z tym podejściem.

Szybkość: skróć czas projektowania dzięki gotowym do użycia ustawień wstępnych

Dzięki ustalonemu systemowi Divi możesz drastycznie skrócić czas potrzebny na zaprojektowanie strony internetowej. Zamiast zacząć od zera za każdym razem, gdy trzeba zaprojektować element, po prostu utworzyć i ponownie wykorzystaj wstępne ustawienia elementów i opcji. Niezależnie od tego, czy jest to przycisk CTA, styl nagłówka, czy moduł referencyjny, ustawienia te pozwalają zastosować kompletny pakiet projektowy za pomocą jednego kliknięcia.

Na przykład, po zaprojektowaniu stylu granicznego z ustawieniami grupowymi opcji, możesz stosować go konsekwentnie na wszystkich stronach bez konieczności ponownej pracy.

Presete Elementy oszczędzają jeszcze więcej czasu, umożliwiając ponowne wykorzystanie całych modułów wstępnych. Możesz wdrożyć w pełni zaprojektowany moduł za pomocą tylko jednego kliknięcia, zapewniając, że układ natychmiast pasuje do Twojej wizji.

To gotowe do użycia podejście do projektowania pozwala szybciej budować i skupić się na kreatywnych aspektach projektu zamiast powtarzających się zadań stylizacji poszczególnych elementów.

Spójność: utrzymuj jednolity styl na stronach

Jedną główną zaletą wstępnego przepływu pracy jest spójność. Korzystając z ustawień wstępnych elementów i opcji, upewniasz się, że każda strona w Twojej witrynie jest zgodna z tymi samymi regułami projektowymi, od typografii po odstępy po kolory.

Ustawianie wstępnej grupy opcji jako domyślnie przycisk zapewnia, że ​​rozmiary czcionek i stylów witryny pozostają jednolite, bez względu na to, gdzie się pojawią. Ta spójność wzmacnia tożsamość wizualną witryny i nadaje jej wypolerowany, spójny wygląd.

Zamiast radzić sobie z niespójnymi stylami na różnych stronach, możesz utrzymać zunifikowany system projektowy, który poprawia wrażenia użytkownika i sprawia, że ​​witryna wydaje się bardziej profesjonalna.

Skalowalność: łatwo rozwinąć i aktualizować projekt witryny

Presety sprawiają, że nie jest to niezwykle łatwe do skalowania witryny w miarę rozwoju. Niezależnie od tego, czy dodajesz nowe strony, czy modyfikujesz projekt istniejących, możesz szybko i wydajnie zaktualizować swój projekt. Jeśli chcesz dodać nową stronę, po prostu zastosuj istniejący element i grupy opcji, zapewniając, że nowa strona bezproblemowo pasuje do reszty projektu witryny.

Chcesz dokonywać globalnych aktualizacji? Dzięki ustalonemu systemowi Divi możesz raz zmienić ustawienie wstępne i automatycznie odzwierciedlać go we wszystkich przypadkach, w których zastosowanie jest stosowane. Na przykład, jeśli chcesz zmienić kolor wszystkich przycisków w Twojej witrynie, po prostu zaktualizuj ustawienie wstępne przycisku, a każdy przycisk połączony z tym wstępnym ustawieniem natychmiast zaktualizuje.

Ta skalowalność oznacza, że ​​w miarę ewolucji witryny możesz nadal rozwijać swój projekt bez konieczności przeróbki każdego elementu indywidualnie. Niezależnie od tego, czy dodajesz blog, nowe produkty, czy zupełnie nowe sekcje, Twój projekt pozostanie spójny i spójny.

Elastyczność: Zastąpienie poszczególnych elementów bez łamania systemu

Podczas gdy ustawienia wstępne zapewniają ustrukturyzowane podejście do projektowania stron internetowych, nadal pozwalają na elastyczność. Jeśli chcesz wprowadzić korekty określonego elementu, możesz zastąpić ustawienie wstępne dla tego elementu bez wpływu na resztę projektu.

Na przykład, jeśli zastosujesz ustawienie wstępne elementu do modułu BLURB, ale musisz dostosować rozmiar i ikonę lub odstępy dla określonej instancji, możesz wprowadzić te zmiany bezpośrednio na module bez wpływu na inne wystąpienia wstępnego ustawienia w innym miejscu w Witrynie. W przypadku wstępnych ustawień grup opcji możesz dostosować poszczególne ustawienia, takie jak rozmiar czcionki lub kolor przycisku, dla określonych elementów przy jednoczesnym utrzymaniu podstawowych stylów w witrynie.

Ta elastyczność jest kluczem do osiągnięcia niestandardowego wyglądu unikalnych sekcji Twojej witryny. Umożliwia szczegółowe dostosowywanie bez łamania spójności i struktury, które dostarczają ustawienia wstępne. W miarę ewolucji projektu możesz kontynuować dopracowanie elementów w razie potrzeby, oferując równowagę kontroli i łatwości, która sprawia, że ​​proces ten jest płynniejszy i bardziej elastyczny.

Zacznij projektować mądrzejsze z ustawieniami wstępnymi w Divi 5

Obejmowanie wstępnego przepływu pracy na nowo zdefiniuje sposób, w jaki budujesz strony internetowe z Divi. Wykorzystując razem ustawienia wstępne i grupy opcji, możesz tworzyć oszałamiające wizualnie, wysoce elastyczne i łatwe do zarządzania strony internetowe. Presegs grup opcji są dostępne wyłącznie w Divi 5, więc teraz jest najlepszy czas na zapoznanie się z interfejsem Divi 5!