Używanie domyślnych ustawień Divi 5 do stylizowania całej witryny

Pojawienie się wstępnych ustawień grupowych opcji otworzyło tak wiele nowych możliwości w obrębie Divi 5. Nick powiedział, że jest to najważniejsza cecha, którą można trafić w Divi od lat, a kiedy je testujesz, zobaczysz dokładnie, dlaczego to powiedział .

Jesteś już przyzwyczajony do wstępnych wstępnych elementów, ale ustawienia o opcjach grup dodaje zupełnie nową warstwę kontroli projektowej, której nigdy nie przestaniesz używać. Jednak oba rodzaje ustawień wstępnych obsługują „ domyślne ustawienia wstępne ”. To właśnie chcę ci pokazać w ciągu następujących 2000 słów.

Jakie są domyślne ustawienia wstępne w Divi 5?

Domyślne ustawienia wstępne to pierwsze ustawienia wstępne, które chcesz edytować na swoich stronach internetowych. Pod wieloma względami są to całkowite zamiennik dostosowywania motywów.

Masz dwa rodzaje domyślnych ustawień, z którymi możesz pracować natychmiast po edycji strony - domyślne ustawienia wstępne i domyślne ustawienia o grupie opcji . Najpierw przykryjmy ustawienia elementów, ponieważ jest bardziej znajomy, ale będziesz chciał rozpocząć wszystkie swoje projekty od ustawień grup opcji.

Domyślne ustawienia elementów

Podstawowe elementy wykonują szybką pracę nad projektowaniem elementu, z którego użyjesz wiele razy w swojej witrynie. W przypadku wstępnych wstępnych elementów możesz wziąć moduł taki jak moduł Blurb i edytować domyślne ustawienie wstępne modułu. Po edytowaniu domyślnego ustawienia, używa tych samych stylów podczas dodawania nowego modułu Blub do Twojej witryny (ponieważ nowe elementy używają ustawień domyślnych).

Jak edytować domyślny wstępnie ustawiony element

Edycja domyślnego ustawienia jest prosta. Kliknij element, dla którego chcesz zmienić ustawienia domyślne (w tym przypadku moduł tekstowy). W prawej górnej części kliknij wstępnie ustawiony selektor.

Powinieneś zobaczyć co najmniej jeden ustawienie wstępne w menu rozwijanym - domyślnym ustawieniem ustawień dla tego elementu. Znajdź ustawienia (ikona przekładni) i kliknij, aby zmienić opcje ustawień z określonego elementu strony na opcje ustawień dla domyślnego ustawienia wstępnego.

Będziesz wiedział, że edytujesz ustawienie wstępne, gdy bułka tartą (pokazując zagnieżdżoną pozycję elementu, nad którym pracowałeś) znikają, a słowo „ ustawienie ” pojawia się w lewym górnym rogu panelu ustawień. Zauważysz również, że wstępnie ustawiony selektor mówi „ domyślny preset ” i staje się niebieski. Stąd przejdź do grupy opcji elementu, którą chcesz edytować. W tym przypadku postanowiłem przejść do karty Projekt> Tekst> Rozmiar tekstu , aby edytować rozmiar treści tekstu dla tego modułu.

Kliknij „Zapisz wstępnie”, aby Twoje zmiany zatrzymały się na całej stronie.

Na wypadek, gdybyś nie wiedział
Jeśli przez jakiś czas byłeś w pobliżu Divi, wiesz o ustawieniach modułów . Presegowanie elementów są takie same jak ustawienia wstępne modułów, ale nazywanie ich modułów było mylące, ponieważ ustawienia wstępne można również stosować na elementach innych niż module, takich jak sekcje i wiersze.

Widok szkieletu strony w Divi 5. Zwróć uwagę, w jaki sposób ten wiersz ma ustawienia wstępne, nie odpowiadając kryteriom bycia modułem, ale raczej pojemnikiem.

Domyślne ustawienia o elementach można „zastąpić”, po prostu poprzez zastosowanie innego niestandardowego elementu wstępnego do modułu (więcej na ten temat poniżej) lub poprzez zastosowanie stylów bezpośrednio do określonego modułu lub elementu. Divi, podobnie jak CSS, działa z regułami specyficzności, aw tym przypadku ustawienia zastosowane do modułu są bardziej szczegółowe niż ustawienia stosowane do domyślnego ustawienia elementu.

Ale na bloku jest nowy ustawienie, z którym powinieneś najpierw projektować swoje witryny Divi.

Domyślne ustawienia grupy opcji

Nowe ustawienia grup opcji Divi pozwalają tworzyć domyślne style obejmujące różne moduły i elementy, które mogą korzystać z podobnych grup opcji. Wszystko to odbywa się z ustawieniami „domyślnymi” grupami opcji . Jeśli jesteś rozmyty w szczegółach tej nowej koncepcji grup opcji, możesz przeczytać więcej na ten temat w naszym poście, który mówi ci wszystko, co musisz o nich wiedzieć.

Dowiedz się o ustawieniach grupowych opcji

Krótko mówiąc, różne moduły mają różne kompozycje (patrz poniższa tabela dla przykładu porównujące cztery różne elementy).

Gdy funkcje kompozytowe jednego elementu pokrywają się z innymi, mogą dzielić style na poziomie grupy opcji - co oznacza, że ​​oszczędzasz czas przy projektowaniu podobnych motywów w różnych modułach i elementach (takich jak tekst tytułu dla wielu modułów). Zwłaszcza z nagłówkami, tekstem ciała, cieniami, animacjami, lepkimi funkcjami, granicami, odstępami i przyciskami, będziesz projektować strony internetowe znacznie, znacznie szybciej.

Jak edytować domyślną grupę opcji

Aby edytować domyślne ustawienie grupy opcji, przejdź do panelu ustawień modułu lub wiersza/sekcji. Wpadnij nad dostępnymi grupami opcji (tekst, tekst tytułu, przycisk, tło itp.). Grupy opcji, które obsługują ustawienia wstępne, ujawnią ustawioną ikonę po prawej stronie tego pola OG, gdy się unosi. Kliknij ikonę ustawień wstępnych, aby wyświetlić domyślne i wszelkie niestandardowe ustawienia wstępne dla tej grupy opcji.

Oto film pokazujący różnicę między edycją określonego aspektu jednego modułu a edycją tego samego aspektu z ustawieniem grupy opcji.

Wiesz, że edytujesz ustawienie grupy opcji, gdy interfejs użytkownika zmienia się z światła na ciemność (chyba że byłeś w trybie ciemnym, w takim przypadku jest to odwrotnie) tylko dla grupy opcji, którą obecnie edytujesz. Musisz zaoszczędzić zmiany, aby mogły one obowiązywać.

Jaka jest różnica między ustawieniami domyślnymi a niestandardowymi?

Domyślne ustawienia wstępne to style automatycznie stosowane do dowolnych nowych elementów (moduły/sekcje/wiersze) umieszczone na stronie lub szablonie. Bez względu na wszystko, każdy element i każda grupa opcji w Divi będzie miała domyślne ustawienie wstępne. Zobacz poniżej, skąd pochodzą domyślne style.

Niestandardowe ustawienia wstępne to dodatkowe ustawienia wstępne, które są równie łatwe w zarządzaniu i stosowane, jak domyślne ustawienia wstępne, ale nie będą używane automatycznie (musisz zastosować te niestandardowe ustawienia wstępne zamiast domyślnego). Są one używane w specjalnych sytuacjach, takich jak ciemne sekcje, paski boczne i gęste wyświetlacze treści - niezależnie od tego, co potrzebuje projekt.

Każda witryna powinna być zaprojektowana przy użyciu domyślnych ustawień grup opcji w miarę możliwości. Następnie należy utworzyć dodatkowe niestandardowe ustawienia o grupie opcji, aby obsłużyć podobne sytuacje według specyfikacji projektu. Niezależnie od tego, co nie jest objęte tymi ustawami OG, można zaprojektować z domyślnymi ustawieniami wstępnymi i wstępnymi wstępnymi wstępnymi elementami. Możesz bezpośrednio zastosować style do poszczególnych modułów do pozostałych skrzynek krawędziowych, które nadal muszą być zaprojektowane.

Divi jest na ekscytującym etapie, w którym pojawiają się wszystkie nowe funkcje. Gdy zaawansowane jednostki i zmienne projektowe spadną, możesz ustawić zmienne CSS ze wszystkimi jednostkami i funkcjami CSS. Stamtąd możesz użyć tych zmiennych CSS we wszystkich ustawieniach, dzięki czemu Twój przepływ pracy w projekcie około 10x jest bardziej spójny i szybszy.

Istnieje również planowana funkcja, która umożliwia ustawienia wstępne gniazdowania grupy opcji w ramach ustawień elementów, co pozwala tworzyć ustawienia wstępne z wbudowanymi wbudowanymi ustawieniami grupy opcji. Oznacza to, że kiedy edytujesz ustawienie wstępne OG, modyfikowałoby to również ustawienia o podjęciu powiązanych elementów (i odwrotnie w pewnym stopniu).

Przyszłość wygląda jasno dla projektantów i programistów na Divi 5!

Jak zamienić niestandardowe ustawienie w domyślne ustawienie wstępne

Mamy ustawienia domyślne, a także niestandardowe ustawienia wstępne. Widzieliśmy, jak zastosować niestandardowe ustawienie wstępne zamiast domyślnego, ale co, jeśli tak bardzo nam się spodoba, że ​​chcemy, aby było naszym domyślnym?

Cóż, to łatwe. Przejdź do ustawień wstępnych elementów lub rozdzielczości grupy opcji . Włóż na niestandardowe ustawienie wstępne , które chcesz uczynić domyślną i kliknij ikonę gwiazdy . Następnie zapisz swoje zmiany . Twoje ustawienie jest teraz domyślnym ustawieniem wstępnym na całej Twojej witrynie.

Skąd pochodzą style w domyślnych ustawieniach wstępnych?

Nieedytowane domyślne ustawienia wstępne po prostu dziedziczą wartości stylu znalezione w dostosowywniku motywu. Prawie wszystkie motywy WordPress nadal używają pewnego aspektu dostosowywania motywu (nawet motywów blokowych), chociaż Divi stworzył to tak, aby był połączony, ale nie jest konieczny . Prawdopodobnie w przyszłości zastąpimy dostosowanie w przyszłości, ale na razie jest to relikt przeniesiony z Core WordPress, który jest dziwactwem nawet nowoczesnych motywów WordPress .

Powiedz, że użyłem strony startowej doradcy finansowego (jako jeden konkretny przykład). W dostosowywniku motywu rozmiar tekstu nagłówka jest ustawiony na 30px .

Widzę tę samą wartość (30px) używaną w domyślnych ustawieniach wstępnych, przechodząc do edytora wizualnego dla strony, klikając „ domyślne ustawienie wstępne ” dla modułu nagłówka lub tekstu i sprawdzając pod projektem> Tekst nagłówka dla wysokości H1.

Wartość szarej w polu Divi 5 oznacza, że ​​w tym przypadku jest to dziedziczna wartość odziedziczona po dostosowaniu motywu

Ale to jest po prostu domyślny ustawiony przez tę stronę startową. Jeśli użyłeś ustawień wstępnych z importowanego pakietu układu lub zaczął się od zera, różne wartości domyślne zostaną ustawione w dostosowywniku motywu.

Jak używać domyślnych ustawień wstępnych do budowy strony internetowej

Polecam rozpoczęcie twoich kompilacji z kilkoma stronami szkieletowych. Połóż wszystko na kilku stronach z tym, co wiesz, że musisz mieć zaprojektowanie.

Spróbuj polegać na najprostszych modułach, aby wykonać zadanie i powtórzyć użycie tego samego zestawu modułów, jeśli to możliwe. Zastanów się, w jaki sposób możesz użyć nagłówka, tekstu, mnóstwa, menu, obrazu, akordeonu/przełączania i modułów wideo, aby zbudować większość szkielet na swojej stronie. W razie potrzeby dodaj inne moduły, ale trzymanie się podstawowego zestawu modułów dla większości rzeczy znacznie przyspieszy korzystanie zarówno z ustawień opcji, jak i domyślnych ustawień.

Ta strona używa sekcji, wierszy, kolumn, tekstu, modułów, obrazu, przycisku i menu. Utrzymując tak proste rzeczy, jak to możliwe dla tej konkretnej strony, zmniejszam liczbę grup opcji, z którymi muszę zaprojektować.

Następnie będziesz chciał zacząć projektować swoje najbardziej zamiatające zmiany za pomocą domyślnych ustawień grup opcji. W przypadku większości projektów będzie to:

1. Odstępy od sekcji : Dołącz marginesy górne/dolne, marginesy po lewej/prawej i wszelkie wymagane wyściółki.
2. Sekcja Kolory tła : Utwórz domyślną ustawienie grupy opcji, których chcesz użyć w większości przypadków, oraz niestandardowe ustawienie grupy opcji dla alternatywnego/kontrastowego koloru tła. Pamiętaj, że domyślne ustawienia wstępne do grupy opcji tła można również zastosować do tła kolumn.
3. Typografia : Zacznij od swojego H1-H6. W zależności od użycia modułu będziesz chciał je uruchomić w domyślnych ustawieniach grup opcji w ramach tekstu nagłówka i modułów tekstowych oraz tekstu tytułowego dla modułów BLURB. Następnie pracuj nad normalnym tekstem, koncentrując się na grupie opcji tekstowych w modułach tekstowych i grupach opcji tekstu w takich rzeczach jak moduł Blurb.
4. Inne ustawienia projektowe : Utwórz ustawienia o grupie opcji dla granic, cieni pudełek, filtrów (jeśli stylizujesz obrazy) i animacje. W tym celu nie używam domyślnych ustawień wstępnych, ale tworzę niestandardowe ustawienia wstępne, które mogę selektywnie zastosować do elementów strony.
5. Zaawansowane ustawienia : Jest to podobne do powyższego kroku, ale tworzę ustawienia o grupie opcji dla rzeczy takich jak przejścia i efekty przewijania. Zwykle nie używam domyślnych ustawień wstępnych, ale tworzę niestandardowe ustawienia wstępne, które mogę selektywnie zastosować do elementów strony.

Utworzenie domyślnych ustawień o grupie opcji w tej modie automatycznie zacznie stosować style w całej witrynie. Za każdym razem, gdy domyślny OG jest aktualizowany, odpowiednie elementy na twoich stronach automatycznie akceptują te zmiany.

Domyślne ustawienia wstępne zaoszczędzą godziny

Domyślne ustawienia wstępne, zarówno element, jak i odmiana grupy opcji, zaoszczędzą ogromne ilości czasu. Nie mogę się doczekać, aż zaczniesz budować te funkcje przy użyciu Blazing Fast Builder Divi 5. I to nie jest nawet koniec nowych funkcji wdrażających w Divi 5.

Dzięki nowym i planowanym funkcjom Divi będziesz mieć prawdziwy system projektowy na wyciągnięcie ręki. Czy najpierw próbowałeś edytować witrynę za pomocą domyślnych ustawień wstępnych? Jak poszło? Daj nam znać w komentarzu poniżej i udostępnij sposób korzystania z tych funkcji.

Pobierz Divi 5 Dowiedz się wszystkiego o Divi 5 Wypróbuj demo Divi 5