關於Divi 5的選項組預設，您需要了解的一切

Divi 5中的期權組預設簡化了管理樣式，提供了更高效，更可擴展的設計方法。您不再需要將相同樣式應用於多個元素。使用選項組預設，您可以在多個元素上創建和應用選項組預設（例如邊界，陰影和間距），混合和匹配它們，並輕鬆進行全局更新。

在這篇文章中，我們將更深入地了解選項組如何改變您在Divi 5中的設計方式，探索這種新方法的好處，並向您展示如何使用它。如果您想簡化工作流程並構建更可維護的設計系統，那麼這是一個不想錯過的遊戲規則。

查看以下視頻以查看動作中的新功能。

了解期權組預設的基礎知識

在我們深入實施期權組預設之前，讓我們討論一些基礎知識，以幫助您更好地理解這一新的高級功能。

選項組預設解釋了

Divi 5中的選件組預設允許用戶創建可重複使用的設計樣式，這些設計樣式可以應用於網站上的多個元素。與元素預設（在Divi中存在一段時間）不同，這些預設在所有元素上都起作用，從而為背景，邊界，排版等提供一致的樣式。

它們可以在全球範圍內進行分層，組合和更新，從而使保持凝聚力的設計系統更加容易，同時降低重複的樣式工作。

更全球的控制

在選項組預設之前，Divi中的樣式元素需要手動調整或應用控制特定元素所有設計設置的元素預設（部分，行，列，模塊）。儘管元素預設仍然至關重要並有助於保持一致性，但它們主要關注整個元素而不是樣式本身。該樣式可以應用於任何元素。您無需重複每個元素中的樣式，因為您可以從一個特定的來源中撤回。

使用選項組預設，元素預設變得更加有效。它們可以合併以產生最有效的結果。

您什麼時候應該創建選項組預設？

有不同的方法可以實現選項組預設，但是通常，創建它們越快，越好。從您的網站構建中的選項組預設開始，可以從進行編輯時節省時間。

很快，選項組預設也將能夠生活在元素預設中，因此在建立元素預設之前創建它們會很自然。現在，假設您是從頭開始建立一個全新的網站；您將能夠處理此構建的方式如下：

1. 設計您的第一頁
2. 將樣式變成選項組預設
3. 在您的元素預設中包括選項組預設

這個過程不是線性的，您很可能會發現自己在選項組預設和元素預設之間來回走動，直到您對第一頁草稿感到滿意。

您可以使用選項組預設的樣式

右上角具有選項組預設圖標的任何樣式都可以變成一種樣式。

可以創建選項組預設並將其應用於各種設計設置，包括排版，顏色，背景，邊界，間距，陰影，效果，尺寸，佈局，定位和動畫。這些預設使設計人員能夠創建一個結構化的可重複使用的設計系統，而無需重複進行手動調整。

Divi的選項組預設的一件偉大的事情之一使它與競爭對手有著強烈的區別，它不僅專注於CSS。它還包括使用腳本構建的效果。您可以在Divi提供的更具交互性功能中註意到這一點，例如條件選項，HTML背景視頻，滾動效果等。

您將不止一次使用的任何設計實例都值得將預設變成預設。這將使您的設計更加容易。

如何實施選項組預設

現在，我們已經討論了基礎知識，讓我們專注於期權組預設的實施。為了使所有內容盡可能簡單明了，我們將專注於創建一個簡單的邊框預設。創建任何其他預設的方法與此用例相同。

示例：創建邊框預設

創建選項組預設非常簡單。讓我們逐步創建邊框預設的過程。我們正在使用設計組合佈局包隨附的主頁佈局，但請隨時使用您選擇的任何其他佈局。

步驟1：打開元素的設置（列設置）

在Divi Builder中，選擇要樣式的任何模塊（例如，列）。

步驟2：導航到“設計”選項卡

在模塊設置內，單擊“設計”選項卡。向下滾動並找到邊界部分。

步驟3：添加邊框

從可用選項中選擇邊框樣式。為了使事情變得簡單，我們唯一要做的就是添加一個黑色的1px邊框。

步驟4：作為選項組預設保存

單擊邊框設置右上角的圖標以創建一個新的預設。給您的預設一個描述性名稱（例如，邊框 - 襯裡）。單擊“保存預設”以最終確定。

將邊境預設應用於其他元素

現在，您已經創建了一個選項組預設了，現在該將其應用於其他元素了。無論您是造型部分，行，列還是模塊，預設都可以使您以最少的精力實現統一的設計。請按照以下步驟應用您保存的邊境預設：

步驟1：選擇任何其他元素

打開您要樣式的任何其他模塊（例如，圖像模塊）。在“設計”選項卡中，導航到邊框設置。

步驟2：應用邊境預設

找到選項組預設圖標，然後選擇您在本文上一部分中創建的預設。

將選項組預設與元素預設相結合

在某些情況下，您可能只需要在元素級別上應用某些設置。假設您彼此相鄰有2列，並且您希望它們共享所有相同的設置，但不是相同的邊框。在這種情況下，您可以對這兩個列使用共享列預設，但在每個列上應用不同的邊框預設。

步驟1：創建新列預設

打開第一列，並從右上角的當前樣式創建新的預設。給它一個描述性名稱，然後保存設置。

步驟2：啟用邊框預設與列預設旁邊

現在，導航到行的第二列。我確保第2列沒有任何層面元素級設置。到達那里後，啟用您在上一步中做出的預設。

在這一點上，這兩個列共享相同的元素預設，但只有第一列包含一個附加的邊框預設（您也計劃在將來使用其他元素）。

分配選項組默認值為默認值

選項組預設的另一個不錯的選擇是能夠使其默認。這意味著，一旦添加一個包含特定樣式功能的元素，您選擇的默認樣式就會適用。這對於排版，顏色和按鈕特別有用。

讓我們以按鈕為例。按鈕樣式是幾個模塊的一部分，包括聯繫表單模塊，CTA模塊，電子郵件Optin模塊等。如果您希望一種特定的樣式自動應用於所有這些按鈕，則可以使用選項組預設。讓我們看看如何。

步驟1：打開聯繫人頁面內的聯繫表格模塊

在此特定示例中，我們將使用“設計產品組合佈局”包中包含的聯繫頁面。創建新頁面後，上傳此佈局（或任何其他聯繫佈局）。然後，打開您將在該佈局內找到的觸點表單模塊的設置。

步驟2：從靜態樣式創建選項組預設

創建選項組預設很容易。您有兩個選擇；您可以從頭開始創建一個，也可以將現有靜態樣式變成選項組預設。由於我們在聯繫表單模塊中有一個設計的按鈕，因此我們不必再次設置樣式，而是可以將這些設置重複使用我們的選項組預設。導航到“設計”選項卡並打開按鈕設置。

一旦將該設置組的右上角懸停，您將看到一個圖標。單擊此圖標。

繼續選擇“當前樣式的新預設”，並給您的按鈕一個描述性名稱，例如“主按鈕”。

步驟3：分配按鈕樣式為默認

要使此按鈕樣式成為網站上所有按鈕的默認設置，請切換“分配為默認”選項並保存預設設置。

步驟4：添加新的未風格的電子郵件Optin模塊查看結果

一旦您添加了使用按鈕設置的任何模塊，新的默認設置將應用。這不僅限於我們創建初始選項組預設的觸點表單模塊，但是使用按鈕設置擴展到所有元素。包含按鈕設置的模塊之一是行動模塊。

要查看您的新預設，請在您的聯繫表格模塊下方添加一個未設置的全新電子郵件Optin模塊。

您會看到此新添加的模塊內的按鈕包含我們在本教程上一部分中應用的新默認樣式。

全球編輯預設

讓我們繼續以按鈕預設為例。由於這是整個網站上所有按鈕的默認值，因此更新此按鈕上的樣式可以幫助我們節省大量時間。我們只需要對其進行編輯一次，更改將在整個網站中適用。

要編輯現有的預設，請在其中一個模塊中找到它。

將按鈕預設懸停，然後單擊齒輪圖標。這將打開一個可以進行所有修改的屏幕。例如，讓我們將邊框半徑更改為5PX。您可以注意到在使用此按鈕預設的所有情況下，它如何立即生效。

始終確保單擊“保存預設”，它會給您一個警告，提到它將影響您使用此預設的所有實例。

使用選項組預設的主要好處

一旦開始使用選項組預設，就很難想像您過去從未使用過它們。讓我們討論為什麼您今天應該使用新的選項組預設探索Divi 5。

1。更快，更有效的設計工作流程

使用選項組預設，您不再需要在不同元素上手動重複設計更改。創建預設後，它可以普遍應用。如果需要設計更新，則修改預設會自動更新所有使用它的元素，從而節省時間和精力。

2。可伸縮性

隨著網站的增長，保持一致的設計可能會成為一個挑戰。選項組預設使您可以通過確保所有元素遵循統一樣式來有效地擴展設計。無論您是管理小型企業網站還是大型企業項目，預設都可以幫助維護乾淨，結構化的設計系統。

3。更輕鬆的協作

選項組預設使在同一項目的設計師之間的協作更加順暢。團隊成員可以使用預設快速應用標準化樣式，而不是手動更新多個元素。此外，要求更改的客戶將受益於更簡化的過程，因為可以在預設級別進行編輯，而無需單獨修改單個元素。

4。跨站點元素的一致性

設計一致性對於專業網站至關重要。通過使用選項組預設，您可以確保每個按鈕，標題和背景都遵循相同的設計規則。這消除了矛盾，並有助於在所有頁面上保持品牌標識。

5。輕鬆的全球更新以最少的努力

選項組預設沒有為每個元素手動更新樣式，而是讓您毫不費力地進行全局更改。對預設的單一調整會立即更新所有使用它的元素，從而減少了修訂的時間並確保整個網站的統一性。

今天開始使用Divi 5

選項組預設是Divi 5的有力補充，為管理網站設計提供了一種靈活，有效的方法。通過利用這些預設，您可以簡化工作流程，保持設計一致性並毫不費力地進行全局更新。立即開始使用選項組預設，並在網絡設計項目中體驗新的控制和效率。