使用Divi 5的默認預設為整個網站設計

選項組預設的到來在Divi 5中開放了許多新的可能性。尼克說，這是多年來達到Divi的最重要功能，隨著您對其進行測試，您會確切地看到他為什麼這麼說。

您已經習慣了元素預設，但是選項組預設添加了您永遠不會停止使用的全新設計控制層。但是，兩種類型的預設都支持“默認預設”。這就是我想在以下2000個單詞的過程中向您展示的內容。

Divi 5中的默認預設是什麼？

默認預設是您要在網站上編輯的第一個預設。在許多方面，這些都是主題定制器的全面替代。

您有兩種類型的默認預設，可以在編輯頁面時立即使用- 默認元素預設和默認選項組預設。讓我們首先涵蓋元素預設，因為它更熟悉，但是您需要使用選項組預設開始所有設計。

默認元素預設

元素預設使您可以在網站上多次使用元素進行快速設計。使用元素預設，您可以採用像Blurb模塊之類的模塊並編輯模塊的默認預設。編輯默認預設後，它在向您的網站添加新的Blubs模塊時會使用相同的樣式（因為新項目使用默認設置）。

如何編輯默認元素預設

編輯默認預設很簡單。單擊要更改要更改默認設置的元素（在這種情況下為文本模塊）。在右上角，單擊預設選擇器。

您應該在下拉菜單中至少看到一個預設 - 該元素的默認預設。查找設置（齒輪圖標），然後單擊以將設置選項從特定頁面元素更改為默認預設的設置選項。

當麵包屑（顯示您正在處理的元素的嵌套位置）消失時，您會知道您正在編輯預設，並且“預設”一詞出現在設置面板的左上方。您還會注意到預設選擇器上的“默認預設”，並且變成藍色。從這裡，導航到您要編輯的元素選項組。在這種情況下，我決定轉到“設計”選項卡>文本>文本大小，以編輯此模塊的文本內容的大小。

單擊“保存預設”以進行更改，請持有範圍內的地點。

如果你不知道
如果您已經在Divi待了一段時間，那麼您就會知道模塊預設。元素預設與模塊預設相同，但是將其稱為模塊預設令人困惑，因為預設也可以在非模塊元素（例如各部分和行）上使用。

Divi 5中的頁面的線框視圖。請注意，該行是如何具有預設的，而不符合模塊而不是容器的標準。

只需將不同的自定義元素預設應用於模塊（以下內容）或直接將樣式直接應用於特定的模塊或元素，就可以“覆蓋”默認元素預設。 Divi與CSS一樣，使用特定性規則，在這種情況下，將設置直接應用於模塊的設置比應用於默認元素預設的設置更具體。

但是，該塊上有一個新的預設，您應該先設計Divi網站。

默認選項組預設

Divi的新選項組預設允許您創建跨越可能使用類似選項組的各種模塊和元素的默認樣式。這一切都是通過“默認”選項組預設完成的。如果您對這個期權組的新概念的詳細信息感到模糊，則可以在我們的帖子中閱讀有關它的更多信息，這會告訴您您需要了解的有關它們的所有信息。

了解選項組預設

簡而言之，不同的模塊具有不同的組成（請參見下表，以比較四個不同的元素）。

當一個元素的複合特徵與另一個元素重疊時，它們可以在選項組級別上共享樣式，這意味著您在跨不同模塊和元素設計類似的主題時節省了時間（例如許多模塊的標題文本）。特別是在標題，文本，陰影，動畫，粘性功能，邊界，間距和按鈕的情況下，您將更快地設計網站。

如何編輯默認選項組預設

要編輯默認選項組預設，請轉到模塊或行/部分的設置面板。懸停在可用選項組（文本，標題文本，按鈕，背景等）上。支持預設的選項組將在懸停時在OG字段的右側揭示一個預設圖標。單擊預設圖標以顯示該選項組的默認圖和任何自定義預設。

這是一個視頻，展示了編輯單個模塊的特定方面與使用選項組預設編輯相同方面之間的區別。

您知道，當您僅針對當前正在編輯的選件組，UI從光線變為黑暗時（除非您處於黑暗模式，在這種情況下，在這種情況下是相反的情況）時正在編輯選項組預設。您必須節省更改才能生效。

默認預設和自定義預設有什麼區別？

默認的預設是自動應用於放置在頁面或模板上的任何新元素（模塊/部分/行）的樣式。無論如何，Divi中的每個元素和每個選項組都將具有默認的預設。請參閱下面的默認樣式來源。

自定義預設是其他易於管理和應用默認預設的預設，但不會自動使用（您必須應用這些自定義預設來代替默認設備）。它們用於特殊情況，例如黑暗部分，側邊欄和密集的內容顯示，無論您的設計需求如何。

每個網站應盡可能使用默認選項組預設設計。然後，應創建其他自定義選項組預設，以根據您的設計規範處理類似的情況。這些OG預設未涵蓋的任何內容都可以使用默認元素預設和自定義元素預設設計。您可以將樣式直接應用於單個模塊，以使其剩餘的邊緣案例仍然需要設計。

Divi處於令人興奮的階段，所有新功能都在推出。當高級單元和設計變量下降時，您可以使用所有CSS單元和功能設置CSS變量。從那裡，您可以在所有預設中使用這些CSS變量，從而使您的設計工作流程更加一致，更快。

還有一項計劃的功能，可以允許嵌套選項組預設在元素預設中，從而使您可以使用其中內置的選項組預設的邏輯來創建元素預設。這意味著，當您編輯OG預設時，它還將修改相關元素預設（反之亦然）。

對於Divi 5的設計師和開發人員來說，未來看起來很光明！

如何將自定義預設變成默認預設

我們有默認的預設，也有自定義預設。我們看到瞭如何應用自定義預設，而不是默認預設，但是如果我們非常喜歡它以至於我們想讓它默認情況下該怎麼辦？

好吧，這很容易。轉到元素預設或選項組預設下拉列表。懸停在您要默認的自定義預設上，然後單擊“星圖”圖標。然後保存您的更改。現在，您的預設是整個網站上的默認預設。

默認預設中的樣式從何而來？

未經編輯的默認預設僅繼承主題Customizer中的樣式值。幾乎所有WordPress主題仍然使用主題定制器的某些方面（甚至是封鎖主題），儘管Divi已經完成了它，因此它已連接但不需要使用。將來我們可能會在某個時候替換定制器，但是目前，它是從WordPress Core攜帶的遺物，甚至是現代WordPress主題的怪癖。

假設我使用了財務顧問入門網站（作為一個具體的示例）。在主題定制器中，標題文本大小設置為30px 。

我可以看到默認預設中使用的相同值（30px），通過進入視覺編輯器以獲取頁面，單擊標題或文本模塊的“默認預設”，然後檢查設計>在設計> H1高程的標題文本下。

Divi 5字段中的灰色值意味著它是從主題Customizer繼承的繼承值

但這只是此入門網站設置的默認設置。如果您使用導入的佈局包中的預設或從頭開始，則將在主題Customizer中設置不同的默認值。

如何使用默認預設構建網站

我建議使用幾頁的線框啟動您的構建。將所有內容列出幾頁，並與您所需要的設計。

嘗試依靠最簡單的模塊來完成作業，並在可能的情況下重複使用相同的模塊。考慮如何使用標題，文本，貼合，菜單，圖像，手風琴/切換和視頻模塊來構建頁面的大部分線框。根據需要添加其他模塊，但是在大多數情況下堅持使用一組核心模塊，同時使用選項組和元素默認預設會更快。

此頁面使用各節，行，列，文本，貼合，圖像，按鈕和菜單模塊。通過將內容保持盡可能簡單，我可以減少所需設計的選項組數量。

接下來，您需要使用默認選項組預設開始設計最全面的更改。對於大多數設計，這將是：

1. 截面間距：包括頂/底部邊緣，左/右邊緣以及任何必需的填充。
2. 背景顏色：創建您要在大多數情況下要使用的默認選項組預設，以及用於替代/對比背景顏色的自定義選項組預設。請記住，默認預設到背景選項組預設也可以應用於列的背景。
3. 排版：從您的H1-H6開始。根據您的模塊使用情況，您需要在標題和文本模塊的標題文本下啟動這些默認選項組預設，以及諸如Blurb模塊之類的內容。然後，處理普通文本，重點介紹文本模塊中的文本選項組和Body Text Option Option組，例如Blurb Module之類的內容。
4. 其他設計設置：為邊界，盒子陰影，過濾器（如果您是樣式圖像）和動畫創建選項組預設。為此，我傾向於不使用默認預設，而是創建可以選擇性地應用於頁面元素的自定義預設。
5. 高級設置：這類似於上面的步驟，但是我為過渡和滾動效果等事物創建了選項組預設。我也傾向於不使用默認預設，而是創建可以選擇性地應用於頁面元素的自定義預設。

以這種方式創建默認選項組預設將自動開始在網站上應用您的樣式。每次更新默認的OG時，您網站上的相關元素都會自動接受這些更改。

默認預設將節省您的時間

默認預設（元素和選項組品種）都可以節省大量時間。我等不及您使用Divi 5的Blazing-fast Builder開始建立這些功能的網站。這甚至還不是在Divi 5中推出的新功能的末尾。

借助Divi的新功能，您的指尖將具有名副其實的設計系統。您是否嘗試使用默認預設編輯網站？它怎麼走了？在下面的評論中讓我們知道，並分享您如何使用這些功能。

下載Divi 5了解有關Divi 5的所有知識5嘗試Divi 5演示