如何使用 Divi 將佈局包樣式轉換為全局默認值

已發表: 2019-07-31

新的 Divi 全局默認更新可幫助您將某些設計樣式應用於整個網站的元素。 它可以節省您的時間,幫助您概覽您的網站並按照您習慣的方式設置每個全局設置的樣式; 在 Divi Builder 內部。

現在,當您為網站使用佈局包時,您很可能希望將佈局包樣式轉換為全局默認值,這樣您就不必來回走動了。 但最好的方法是什麼? 我們將在本週的用例教程中向您展示。 我們將使用網絡安全佈局包來演示它,但請放心,該技術適用於您使用的任何佈局包。

讓我們開始吧!

1.為佈局包中的每個佈局創建新頁面

如果您計劃將佈局包的樣式轉換為全局默認值,您需要做的第一件事就是為佈局包附帶的每個佈局創建一個單獨的頁面。 每個佈局都有一個單獨的頁面將幫助您完成第二步; 掃描整個佈局包中使用的設計元素並將它們轉換為全局默認值。

佈局包樣式

2. 檢測整個佈局中使用的模塊並使它們全局化

為每個佈局創建單獨的頁面後,您可以開始掃描頁面以查找使用的不同模塊。 我們故意跳過部分、行和列設置,因為這些取決於您創建的部分類型。 對於大多數部分和行,設計團隊決定採用 Divi 的默認設置,以便您更輕鬆地設置自己的全局默認值。

我們已經檢測到網絡安全佈局包中包含自定義樣式的最常用模塊。 這些模塊也是 Divi 最受歡迎的模塊之一,幾乎可以在任何佈局包中找到:

  • 文本模塊
  • 主按鈕模塊
  • 分頻器模塊
  • 電子郵件選擇模塊
  • 聯繫表格模塊

將文本模塊正文和標題設置轉換為全局默認值

是時候開始將模塊樣式轉換為全局默認值了! 你需要一個模塊一個模塊地做這個模塊。 我們將從文本模塊開始。 我們建議全局化的唯一設置是標題和正文文本設置。 無論您正在創建什麼設計,這兩個選項組很可能保持不變。 其他設置,例如間距和大小,通常取決於您的文本模塊如何受其他設計的影響並在此過程中進行調整。 我們將完成為這個特定模塊設置全局默認值的過程。 然後,我們將繼續列出我們建議將其轉換為其他模塊的全局默認值的設置。

在整個佈局中,使用了三個文本模塊標題; H1、H2 和 H3。 我們將這三個標題和段落文本設置轉換為全局默認值。 如果你想比 H3 更進一步,你可以在 H3 全局文本設置中手動設置它們的樣式。

在登錄頁面上,您會發現所有這些設置都分佈在不同的文本模塊中。 英雄部分中的第一個文本模塊包含 H1 副本。 打開設置,轉到 H1 文本設置,右鍵單擊 H1 項,然後單擊“使樣式為默認值”。

佈局包樣式

佈局包樣式

接下來找到帶有一些段落內容的文本模塊。 轉到文本設置,右鍵單擊並單擊“使樣式默認”。

佈局包樣式

我們將打開的最後一個文本模塊包含 H2 和 H3 文本樣式。 分別右鍵單擊每個標題項,然後單擊“使樣式為默認值”。 完成這些步驟後,您的文本模塊就可以使用了!

佈局包樣式

您必須為網站上的每個重複模塊重複這些步驟。 讓我們繼續討論其他的。

1. 主按鍵模塊

佈局包樣式

按鈕設置

佈局包樣式

填充

佈局包樣式

2. 模糊模塊

佈局包樣式

圖標設置(需要時)

佈局包樣式

文字設置

佈局包樣式

標題文字設置

佈局包樣式

正文設置

佈局包樣式

3. 分頻器模塊

佈局包樣式

線路設置

佈局包樣式

尺寸設置

佈局包樣式

4. 電子郵件選擇模塊

佈局包樣式

整個模塊除了:邊距 + 調整大小 + 轉換設置

佈局包樣式

5. 聯繫表格模塊

佈局包樣式

整個模塊除了:邊距 + 調整大小 + 轉換設置

佈局包樣式

3. 將重複元素保存為(全局)項目以供重複使用

現在,一旦您為主要使用的模塊設置了全局默認值,您仍然可以考慮重用其他一些元素。 這些元素通常但不限於以下內容:

  • 輔助按鈕
  • 三級按鈕
  • 號召性用語部分
  • 頁腳部分
  • 佈局包細節:具有分區分隔符的圖像模塊/不同樣式的模糊模塊/...

我們建議您將這些元素保存到您的 Divi 庫中,並隨時重複使用。 它有助於將其中一些保存為全局項目而不是常規項目,例如頁腳和 CTA 部分。 建議保存按鈕或不同樣式的模糊模塊等元素而不是全局的,以便您可以在需要時對副本和設計進行特定更改。

您可以通過將元素懸停在 Divi 庫中,單擊“保存到庫”圖標,為您的庫項目命名,選擇是否要將其設為全局,然後單擊“保存到庫”。

佈局包樣式

4. 在 Divi 主題選項中創建默認調色板

一旦您設置了全局默認值並將重複元素保存到您的 Divi 庫中,您就幾乎可以開始使用全局默認值和庫項目從頭開始構建新頁面了。 在您這樣做之前,我們建議您更改 Divi 主題選項中的默認調色板。 這些顏色將出現在您打開的每個設計元素上,並幫助您更改顏色,而無需經常複製和粘貼顏色代碼。 這使您可以專注於真正重要的事情; 創建一個美觀且功能強大的網站。 轉到您的 Divi 主題選項並確保在您的調色板中包含以下顏色類型:

  • 文字顏色
  • 背景顏色
  • 強調色

佈局包樣式

5. 在現有頁面上重置模塊樣式

一旦您設置了全局默認值、保存了庫項目並選擇了默認調色板,您就可以從頭開始創建新頁面並立即查看方法的差異。 但是,如果您在選擇全局默認值之前已經修改了現有頁面,則必須返回並重置模塊樣式以應用全局默認值。 這就是全局默認值的工作方式。 如果您手動更改某個模塊的某些內容,您還必須手動刪除它,以便全局默認值可以顯示出來。 幸運的是,您還可以使用 Divi 提供的擴展樣式功能在整個頁面中擴展重置樣式!

最後的想法

在這篇文章中,我們向您展示瞭如何使用新的 Divi 全局默認更新將佈局包轉換為全局默認。 儘管我們使用了網絡安全佈局包,但您可以將此技術應用於您選擇使用的任何佈局包。 這個用例教程是我們正在進行的 Divi 設計計劃的一部分,我們每週都會嘗試在您的設計工具箱中添加一些額外的東西。 如果您有任何問題或建議,請隨時在下面的評論部分留下它們!

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品,請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道,這樣您將永遠是第一批了解此免費內容並從中受益的人之一。