為您的下一個 Divi 網站設置全局預設樣式指南(免費框架下載!)
已發表: 2020-07-23嘿Divi Nation! 感謝您加入我們每週 Divi 設計計劃的下一部分,每週我們都會贈送全新的免費贈品。 今天,我們分享了一個免費的全局預設樣式指南框架,您可以將其用於您計劃構建的任何網站。 Divi 的全局預設可幫助您立即加快網頁設計過程,讓我們來看看吧!

查看全局預設
下面的風格指南框架
今天免費獲取!

下載全局預設樣式指南框架
要使用免費的全局預設樣式指南框架,您首先需要使用下面的按鈕下載它。 要訪問下載,您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶,您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包! 如果您已經在列表中,只需在下面輸入您的電子郵件地址,然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

免費下載
加入 Divi 時事通訊,我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包,以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨,您將很快成為 Divi 大師。 如果您已經訂閱,只需在下面輸入您的電子郵件地址,然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包!
為您的下一個 Divi 網站設置全局預設樣式指南
什麼是全局預設風格指南?
全局預設樣式指南概述了您將在 Divi 網站中使用的最重要元素。 它由三部分組成:
1. 調色板

2. 文字樣式

3. 模塊樣式

儘管全局預設不僅僅包含模塊——列、行和部分也可以包含全局預設——我們專注於您網站上一些最統一的元素,即上面提到的三個部分。 這個想法是,您將在一個地方設置所有元素的樣式,一旦您對所應用的設計樣式感到滿意,您就可以將不同的文本樣式和模塊樣式轉換為全局預設。
調色板是您可以添加到 Divi 主題選項中的東西,但在後面的文章中有更多內容。 您也可以在設計頁面和模板時將樣式指南保存在單獨的窗口中。 這將幫助您隨時復制和過去漸變背景設置,而不是必須手動逐個應用設置。
何時創建/使用全局預設樣式指南
最好在構建頁面、模板等之前創建並開始使用全局預設樣式指南。其背後的原因是您將能夠在構建設計時立即訪問全局預設,而不必去回到您的設計,在元素級別重置內聯樣式並應用全局預設。
在創建樣式指南後開始 Divi 構建過程可幫助您避免手動更改各個設置中的模塊。 如果您從一開始就使用全局預設,您將能夠在一個地方修改它們,並立即觀察整個網站上的變化。
我們在這篇文章中分享的免費全局預設框架風格指南將幫助您直接進入設計靈感階段。 不必自己構建風格指南,您可以專注於創建和諧平衡的設計風格。 在樣式指南中完成 UI 元素的樣式設置後,您就可以將它們轉換為全局預設並在構建頁面和模板時使用它們。
如何使用全局預設樣式指南
將框架佈局下載並上傳到您的 Divi 庫
首先下載本文中免費的全局預設樣式指南框架佈局。 然後,解壓縮下載文件夾後,導航到網站後端內的 Divi 庫,然後單擊頂部的“導入/導出”。 在那裡,切換到“導入”選項卡並上傳您可以在下載文件夾中找到的樣式指南框架佈局。




為佈局和上傳框架佈局創建一個新的草稿頁面
上傳布局後,您可以在庫中打開它,或為其創建單獨的頁面草稿。 為了保持頁面體驗,我們將採用第二個選項。 添加一個新頁面並在“您保存的佈局”中找到佈局。


設置調色板
進入樣式指南框架後,您將能夠設置您選擇的調色板。 您添加的顏色數量完全取決於您。 為了在我們的樣式指南中直觀地顯示顏色,我們使用了文本模塊的背景設置。 打開該文本模塊,轉到其背景設置並修改背景顏色。 複製您正在使用的十六進制代碼並將其放置在其下方的文本模塊中,這樣您的全局預設樣式指南中也始終有每個十六進制顏色代碼的書面版本。


在 Divi Theme Builder 中使用顏色代碼創建自定義調色板
轉到 Divi 主題選項
樣式指南中的十六進制代碼可用於創建自定義調色板,您可以在 Divi 內部構建時快速訪問該調色板。 我們建議在樣式指南框架內的文本和模塊樣式之前執行此操作。 要添加調色板,請轉到您的 Divi 主題選項。

使用樣式指南中的十六進制代碼自定義調色板
將您選擇的十六進制顏色代碼(您可以在樣式指南中找到)添加到默認調色板中。

添加文本樣式
接下來,您將能夠在樣式指南框架內設置不同文本類型的樣式。 您為每種文本類型提供多少替代方案完全取決於您,僅僅因為其中有“主要”、“次要”和“第三”選項,並不意味著您應該為每種文本類型提供 3 種變體。 隨意刪除或添加更多可能性。

樣式模塊
在樣式指南框架的最後一部分,我們列出了所有最常用的 Divi 模塊。 在這裡,您可以根據您想到的樣式開始修改模塊。 所有模塊都在彼此範圍內,這一事實將幫助您更好地了解設計風格及其平衡。 對於每個流行的模塊,我們還提供了“初級”、“次級”和“三級”選項。 但是,同樣,您可以自行確定您在整個頁面和模板構建過程中使用的每個模塊有多少變體。

將模塊轉換為全局預設(一個一個並帶有選擇的名稱)
一旦所有的文本樣式和模塊樣式都完成了——不要忘記它的響應方面——是時候將模塊變成全局預設了。 為此,您可以在單個級別上打開每個樣式模塊,並從模態頂部的當前樣式創建新預設。 您也可以選擇將主模塊設為默認模塊。 創建全局預設後,請確保為模塊選擇了特定預設,這將幫助您使用樣式指南佈局導入和導出全局預設。



嘗試找到一種簡化的模塊命名方式,這樣您就可以在感到困惑時輕鬆查閱樣式指南。 命名 Blurb 模塊樣式的三種變體的一種好方法可能是:
- 主按鈕
- 輔助按鈕
- 三級按鈕
您可以對轉換為全局預設的每個文本樣式或模塊重複此方法。
嵌套模塊:將嵌套元素也變成全局預設
對於嵌套模塊,例如社交媒體關注模塊,您需要打開模塊內的項目並將該元素也保存為新預設。


導出和導入不同網站上的樣式指南佈局(帶預設)
一旦您將所有模塊轉換為全局預設,並在模塊設置中選擇了這些預設,您就可以導出包含所有預設的佈局。 然後,只要您將佈局上傳到另一個網站,您就可以將預設與佈局一起導入,從而幫助您節省時間。 將您完成的樣式指南佈局(包括預設)保存到您的 Divi 庫中。 然後,導出文件。



轉到您要將新樣式指南上傳到的網站,導航到 Divi 庫並上傳帶有預設的 JSON 文件以開始 Divi 構建過程!

提示:將樣式指南保留在單獨的選項卡中以復制/粘貼特定樣式(漸變/框陰影/邊框/...)
最後但並非最不重要的一點是,始終將樣式指南保存在單獨的選項卡中是一個好主意。 使用 Divi 的內置和跨頁複製粘貼選項將幫助您快速將樣式(如漸變背景)從一個元素轉移到另一個元素!

每週都有新的全球預設風格指南!
我們希望您喜歡這個全局預設樣式指南框架。 您可以將此框架用於您構建的任何類型的網站。 我們期待在下面的評論部分聽到您的意見。 請確保您下週回來查看更多免費贈品!
