Konfigurowanie globalnego przewodnika po stylach ustawień wstępnych dla Twojej następnej witryny Divi (BEZPŁATNE pobieranie ramek!)

Opublikowany: 2020-07-23

Hej Divi Nation! Dziękujemy za dołączenie do nas w kolejnej odsłonie naszej cotygodniowej inicjatywy Divi Design, w której co tydzień rozdajemy zupełnie nowe gadżety. Dzisiaj udostępniamy BEZPŁATNĄ strukturę przewodnika po globalnych ustawieniach wstępnych, której możesz użyć w dowolnej witrynie, którą planujesz zbudować. Globalne ustawienia wstępne Divi pomagają przyspieszyć proces projektowania stron internetowych w mgnieniu oka, więc spójrzmy!

układ divi

Sprawdź ustawienia globalne
Ramy przewodnika po stylach poniżej

Pobierz za darmo już dziś!

przewodnik po stylu

Pobierz The Global Presets Style Guide Framework

Aby położyć ręce na bezpłatnej strukturze przewodnika po globalnych ustawieniach wstępnych, najpierw musisz ją pobrać za pomocą poniższego przycisku. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki
Pobierz za darmo

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Konfigurowanie globalnego przewodnika po stylach ustawień wstępnych dla następnej witryny Divi

Co to jest przewodnik po globalnych ustawieniach wstępnych?

Globalny przewodnik po stylach ustawień wstępnych to przegląd najważniejszych elementów, które będziesz stylizować na swojej stronie internetowej Divi. Składa się z trzech części:

1. Paleta kolorów

przewodnik po stylu

2. Style tekstu

przewodnik po stylu

3. Style modułów

przewodnik po stylu

Chociaż globalne ustawienia wstępne sięgają dalej niż tylko moduły – kolumny, wiersze i sekcje mogą również zawierać globalne ustawienia wstępne – skupiamy się na niektórych z najbardziej jednolitych elementów w Twojej witrynie, które są trzema wymienionymi powyżej częściami. Pomysł polega na tym, że stylizujesz wszystkie elementy w jednym miejscu, a gdy tylko będziesz zadowolony z zastosowanego stylu projektu, możesz przekształcić różne style tekstu i style modułów w globalne ustawienia wstępne.

Paleta kolorów to coś, co będziesz mógł dodać do swoich opcji motywu Divi, ale więcej o tym w dalszej części postu. Będziesz mógł trzymać przewodnik stylu w osobnym oknie podczas projektowania stron i szablonów. Pomoże to skopiować i wkleić ustawienia gradientu tła w miarę postępu, w przeciwieństwie do konieczności ręcznego stosowania ustawień jeden po drugim.

Kiedy tworzyć/używać globalnego przewodnika po stylach ustawień wstępnych?

Najlepiej, jeśli utworzysz i zaczniesz korzystać z przewodnika po globalnych ustawieniach wstępnych przed budowaniem swoich stron, szablonów itp. Powodem tego jest to, że będziesz mieć natychmiastowy dostęp do swoich globalnych ustawień wstępnych podczas tworzenia projektów, zamiast iść wróć do swojego projektu, zresetuj style wbudowane na poziomie elementu i zastosuj globalne ustawienie wstępne.

Rozpoczęcie procesu budowania Divi po utworzeniu przewodnika po stylu pomaga uniknąć konieczności ręcznego wprowadzania zmian w modułach w ich indywidualnych ustawieniach. Jeśli od początku pracujesz z globalnymi ustawieniami wstępnymi, będziesz mógł je modyfikować w jednym miejscu i obserwować, jak zmiany rozwijają się jednocześnie w całej witrynie.

Bezpłatny przewodnik po globalnych ustawieniach wstępnych, który udostępniamy w tym poście, pomoże Ci przejść od razu do fazy inspiracji projektowej. Zamiast samodzielnie tworzyć przewodnik po stylu, możesz skupić się na tworzeniu stylu projektowania z harmonią i równowagą. Gdy tylko skończysz stylizować elementy interfejsu użytkownika w przewodniku stylu, będziesz mógł przekształcić je w globalne ustawienia wstępne i używać ich podczas tworzenia stron i szablonów.

Jak korzystać z przewodnika po globalnych ustawieniach wstępnych?

Pobierz i prześlij układ ramowy do swojej biblioteki Divi

Zacznij od pobrania bezpłatnego układu ramowego przewodnika po globalnych ustawieniach wstępnych w tym poście. Następnie, po rozpakowaniu folderu pobierania, przejdź do biblioteki Divi w zapleczu witryny i kliknij „Importuj / eksportuj” u góry. Na miejscu przejdź do zakładki „Importuj” i prześlij układ struktury przewodnika stylu, który możesz znaleźć w folderze pobierania.

przewodnik po stylu

przewodnik po stylu

przewodnik po stylu

Utwórz nową stronę roboczą dla układu i prześlij układ ramowy

Po przesłaniu układu możesz go otworzyć w samej bibliotece lub utworzyć dla niego osobną wersję roboczą strony. Aby kontynuować działanie strony, wybierzemy drugą opcję. Dodaj nową stronę i znajdź układ w „Twoich zapisanych układach”.

przewodnik po stylu

przewodnik po stylu

Skonfiguruj paletę kolorów

Gdy znajdziesz się w ramach przewodnika po stylu, będziesz mógł ustawić wybraną paletę kolorów. Liczba dodanych kolorów zależy wyłącznie od Ciebie. Aby wizualnie wyświetlić kolory w naszym przewodniku stylu, używamy ustawień tła modułu tekstowego. Otwórz ten moduł tekstowy, przejdź do jego ustawień tła i zmień kolor tła. Skopiuj kod szesnastkowy, którego używasz, i umieść go w module tekstowym poniżej, aby zawsze mieć pisemną wersję każdego kodu szesnastkowego w przewodniku stylów globalnych ustawień wstępnych.

przewodnik po stylu

przewodnik po stylu

Twórz niestandardową paletę kolorów z kodami kolorów w swoim kreatorze motywów Divi

Przejdź do opcji motywu Divi

Kody szesnastkowe w przewodniku stylu można wykorzystać do stworzenia niestandardowej palety kolorów, do której będziesz mieć szybki dostęp podczas budowania w Divi. Zalecamy zrobienie tego przed stylizacją tekstu i modułów w ramach swojego przewodnika po stylu. Aby dodać paletę kolorów, przejdź do opcji motywu Divi.

przewodnik po stylu

Dostosuj paletę kolorów za pomocą kodów szesnastkowych w przewodniku po stylach

Dodaj wybrane szesnastkowe kody kolorów, które znajdziesz w przewodniku stylistycznym, do domyślnej palety kolorów.

przewodnik po stylu

Dodaj style tekstu

Następnie będziesz mógł stylizować różne typy tekstu w ramach swojego przewodnika stylu. To, ile alternatyw podasz dla każdego typu tekstu, zależy wyłącznie od Ciebie, tylko dlatego, że jest tam opcja „podstawowa”, „drugorzędna” i „trzeciorzędna”, nie oznacza, że ​​powinieneś mieć 3 odmiany dla każdego typu tekstu. Możesz usunąć lub dodać więcej możliwości.

przewodnik po stylu

Moduły stylów

W ostatniej części przewodnika po stylu wymieniliśmy wszystkie najczęściej używane moduły Divi. Tutaj możesz zacząć modyfikować moduły zgodnie ze stylem, który masz na myśli. Fakt, że wszystkie moduły są tak blisko siebie, pomoże Ci uzyskać lepszy przegląd stylu projektowania i jego równowagi. Dla każdego popularnego modułu zapewniliśmy również opcję „podstawową”, „wtórną” i „trzeciorzędną”. Ale znowu możesz samodzielnie określić, ile odmian każdego modułu używasz w całym procesie tworzenia strony i szablonu.

przewodnik po stylu

Zmień moduły w globalne ustawienia wstępne (jeden po drugim i z wybraną nazwą)

Po ukończeniu wszystkich stylów tekstu i stylów modułów — nie zapominaj o responsywnym aspekcie tego wszystkiego — nadszedł czas, aby przekształcić moduły w globalne ustawienia wstępne. Aby to zrobić, możesz otworzyć każdy stylizowany moduł na indywidualnym poziomie i utworzyć nowe ustawienie z bieżących stylów u góry modu. Możesz także ustawić swój moduł podstawowy jako domyślny. Po utworzeniu globalnego ustawienia wstępnego upewnij się, że dla modułu jest wybrane konkretne ustawienie wstępne. Pomoże to w importowaniu i eksportowaniu globalnych ustawień wstępnych przy użyciu układu przewodnika stylu.

przewodnik po stylu

przewodnik po stylu

przewodnik po stylu

Postaraj się również znaleźć uproszczony sposób nadawania nazw modułom, dzięki czemu będziesz mógł łatwo zapoznać się z przewodnikiem stylu, jeśli będziesz zdezorientowany. Dobrym podejściem do nazywania trzech odmian stylu Blurb Module może być:

  • Główny przycisk
  • Dodatkowy przycisk
  • Przycisk trzeciorzędowy

Możesz powtórzyć to podejście dla każdego stylu tekstu lub modułu, który zmienisz w globalne ustawienie wstępne.

Moduły zagnieżdżone: Zamień również zagnieżdżone elementy w globalne ustawienia wstępne

W przypadku modułów zagnieżdżonych, takich jak moduł Social Media Follow, musisz otworzyć element wewnątrz modułu i zapisać ten element również jako nowe ustawienie wstępne.

przewodnik po stylu

przewodnik po stylu

Eksportuj i importuj układ przewodnika stylów (z ustawieniami wstępnymi) w innej witrynie

Gdy tylko zmienisz wszystkie moduły w globalne ustawienia wstępne i wybierzesz te ustawienia w ustawieniach modułu, będziesz mógł wyeksportować układ ze wszystkimi ustawieniami wstępnymi. Następnie, gdy tylko prześlesz układ do innej witryny, uzyskasz możliwość zaimportowania ustawień wstępnych wraz z układem, co z kolei pomoże Ci zaoszczędzić czas. Zapisz gotowy układ przewodnika stylu, w tym ustawienia wstępne, w swojej bibliotece Divi. Następnie wyeksportuj plik.

przewodnik po stylu

przewodnik po stylu

przewodnik po stylu

Przejdź do witryny, do której chcesz przesłać nowy przewodnik po stylu, przejdź do Biblioteki Divi i prześlij plik JSON z ustawieniami wstępnymi, aby rozpocząć proces budowania Divi!

przewodnik po stylu

Wskazówka: zachowaj przewodnik po stylach w osobnej karcie, aby skopiować/wkleić określone style (Gradienty/Cień ramki/Obramowanie/…)

Wreszcie, świetnym pomysłem jest trzymanie przewodnika stylu zawsze w osobnej zakładce. Korzystanie z wbudowanej i wielostronicowej opcji kopiowania i wklejania Divi pomoże Ci szybko przenieść style, takie jak tła gradientowe, z jednego elementu do drugiego!

przewodnik po stylu

Co tydzień nowe globalne przewodniki po stylach ustawień wstępnych!

Mamy nadzieję, że spodoba Ci się ten globalny przewodnik po stylach ustawień wstępnych. Możesz użyć tego frameworka do każdego rodzaju witryny, którą tworzysz. Czekamy na Wasze opinie w sekcji komentarzy poniżej. Upewnij się, że zajrzysz w przyszłym tygodniu po więcej gratisów!