如何使用 Divi 的效率功能通過 5 個步驟切換到深色佈局

在設計網站時，您有意識或無意識地做出的第一個決定之一就是您要為網站提供的顏色樣式。 我們當中勇敢的人敢於追求完整的充滿活力的調色板，但老實說，這很難實現。 這就是為什麼通常採用淺色或深色佈局更安全的原因。 在 Divi 庫的預製佈局部分，您可以找到大量明暗佈局，您可以在構建任何類型的網站時免費使用這些佈局。 但是，如果您喜歡佈局，但更願意使用較深的調色板，反之亦然，該怎麼辦？

借助 Divi 的高效功能，從淺色到深色佈局包，反之亦然，比以往任何時候都更容易。 在這篇文章中，我們將向您展示如何通過 5 個步驟將淺色佈局變成深色佈局。 如果您使用正確的技術，則進行此轉換所需的時間非常短。 要知道您需要採取的步驟數量始終取決於您正在處理的佈局，但是一旦您掌握了整體方法，您就可以使其適用於您正在處理的任何佈局。

讓我們開始吧！

預覽

只需 5 個步驟，我們就會將 Web Freelancer Layout Pack 的淺色登陸頁面更改為深色頁面。

上傳網絡自由職業者登陸頁面

添加新頁面並啟用 Visual Builder

首先添加一個新頁面，為頁面指定標題並切換到 Visual Builder。

上傳網絡自由職業者佈局包

在屏幕上顯示的三個選項中，選擇上傳預製佈局。

在免費佈局包列表中找到 Web Freelancer Layout Pack 的登錄頁面，然後單擊“使用此佈局”的綠色按鈕進行上傳。

步驟 1：更改整體背景顏色

更改第一部分的部分背景顏色

是時候開始了！ 我們建議您採取的第一步是更改頁面上所有部分的背景顏色。 一旦這樣做，您將很快能夠注意到需要更改哪些設計元素以匹配深色背景顏色。 打開頁面的第一部分並選擇“#0c0c0c”作為部分背景顏色。

將樣式擴展到所有部分

添加背景顏色後，右鍵單擊它並單擊“擴展背景顏色”選項。

完成後，選擇將背景顏色擴展到頁面上的所有部分。

第 2 步：更改文本顏色

打開全角標題模塊並更改文本顏色

您需要採取的下一步是更改正在使用的文本顏色。 您可能知道也可能不知道，Divi 中有一個默認選項，允許您為頁面上的文本選擇淺色或深色調色板。 但是，一旦您選擇了自定義顏色，此選項就會替換為您選擇的自定義顏色。 不要檢查每個元素以查看那裡是否有自定義顏色，而是繼續選擇“Light”作為全角標題模塊中的文本顏色。

將樣式擴展到所有模塊

然後，通過右鍵單擊並選擇“擴展文本顏色”選項來擴展此淺色文本顏色。

將這種新顏色擴展到整個頁面的所有模塊。

使用多選功能更改自定義顏色

如前所述，上一步不適用於預先選擇的顏色。 例如，切換模塊具有自定義標題文本顏色。 不要單獨修改每個開關，而是使用鍵盤上的控制/命令鍵一次選擇所有開關，然後單獨單擊每個模塊。 選擇所有這些後，單擊設置圖標。

現在，您可以同時將更改應用於每個選定的模塊。 在本例中，我們將標題文​​本顏色更改為“#848484”。

第 3 步：更改按鈕

全角頁眉的打開按鈕一設置

確保頁面上的號召性用語與佈局調色板保持匹配非常重要。 在這種情況下，我們有一個在明暗佈局上看起來都很棒的按鈕模塊。 這就是為什麼我們要將其擴展到頁面上的其他按鈕。 繼續並打開全角標題模塊並轉到按鈕一設置。

將按鈕樣式擴展到頁面上的所有按鈕

然後，右鍵單擊按鈕一設置並選擇“擴展按鈕一樣式”選項。

將按鈕樣式擴展到整個頁面中的所有按鈕。

更改英雄部分中的按鈕 2 文本顏色

擴展功能沒有到達全角標題模塊的第二個按鈕，因為它不是一個獨立的模塊。 這就是為什麼我們要打開按鈕二設置並將文本顏色更改為“#ffffff”。

將樣式擴展到頁面上的所有全角標題

為確保此文本顏色應用於頁面上的所有全角標題模塊，我們還將對其進行擴展。

右鍵單擊文本顏色並選擇“擴展按鈕兩種文本顏色”選項後，繼續將其應用於整個頁面的所有全角標題。

第 4 步：刪除自定義邊距並替換為自定義填充

刪除自定義保證金

當切換到深色佈局時，刪除所有給頁面帶來空白的自定義邊距值也很重要。

改用自定義填充

但是，您可以通過將自定義邊距添加為自定義填充來保持之前的距離。

第 5 步：搜索和更改特殊設計設置

確定特殊設計設置

您需要執行的最後一步是針對每個佈局的。 佈局特有的設計元素也需要更改。 這可以包括但不限於以下一些設置：

• 盒子陰影
• 列背景
• 圖標顏色
• 分隔線顏色
• …

在行框陰影顏色上使用查找和替換

對於這個特定的佈局，我們需要更改的一件事是正在使用的行框陰影顏色。 打開行設置並右鍵單擊框陰影而不更改它。 然後，選擇“查找和替換”選項。

如果您想更改整個頁面上的特定顏色代碼，使用“查找和替換”功能是最好的方法。 您可以輕鬆地將其替換為其他顏色代碼，在本例中為“#33302f”。 這將確保您不必探索所有設計元素來準確查看顏色的使用位置。

手動更改一次性設置

但是，佈局中也有一次性重複設計設置。 要更改這些，您必須手動進行。 例如，下面打印屏幕中的行具有尚未在頁面其他地方使用的框陰影顏色。 這就是我們手動將其更改為“#33302f”的原因。

預覽

在完成五個步驟後，讓我們最後看看最終結果。

最後的想法

在這篇文章中，我們引導您通過 5 個步驟將淺色佈局包變成深色佈局包。 您需要採取的步驟數量始終取決於您正在處理的佈局，但總體而言，方法保持不變。 如果您有任何問題或建議，請在下面的評論部分告訴我們！