Divi 主題定制器的終極指南

Divi Theme Customizer 是一款功能強大且方便的工具，可用於對 Divi 主題進行自定義。 與 Visual Builder 一樣，Divi Theme Customizer 允許視覺前端自定義和設計更改，從而將猜謎遊戲從自定義過程中解脫出來。 如果有效使用，此工具可以為未來的項目節省大量時間和啟動器。

今天的帖子旨在幫助您更好地了解主題定制器的工作原理，以便您可以使用它來提高未來項目的生產力。 我涵蓋了主題定制器中幾乎所有可用的選項，並重點介紹了特定於 Divi 的那些選項。 在某種程度上，這篇文章可以作為一個文檔，在此過程中提供一些深入的解釋和設計技巧。 我還將向您展示如何導出定制器設置以在您的下一個項目中使用。

我們有很多東西要講，所以讓我們從頭開始。

以 WordPress 為基礎構建

主題定制器是在 WordPress 3.4 中引入的。 這個方便的功能允許 WordPress 用戶實時預覽他們對主題所做的更改，然後一鍵保存這些更改。 過去需要多個窗口和無數次刷新，現在可以在一個瀏覽器窗口中快速完成。

以下是主題“TwentySeventeen”上的“主題定制器”選項示例：

如您所見，以前駐留在 WordPress 後端不同頁面中的許多 WordPress 功能（站點標識、菜單、小部件等）現在可以在此前端定制器中集中訪問。

另一方面，Divi 主題定制器是作為該主題定制器的增強版本而構建的，具有各種特定於 Divi 的選項。 對於用戶來說，這使得自定義 Divi 的過程變得更加容易。 事實上，您可以在編輯時（同時）實際看到自定義設置，這使其成為一種方便的設計工具。

Divi 主題定制器仍然有許多標準的 WordPress 定制器選項，但它還有更多。

如您所見，Divi 主題定制器中添加了更多設置。 現在讓我們開始更深入地探索這些。

通用設置

當您開始自定義您的主題時，我認為最好從常規設置的頂部開始，然後按照您的方式進行。

站點標識

這部分不是 Divi 獨有的。 這是更改站點標題和標語的方便位置。 您還可以輸入用於瀏覽器和應用程序的站點圖標，不同於您可以在 Divi 主題選項中添加的網站圖標。

佈局設置

佈局設置允許您通過確定部分和行之間有多少空間以及主要內容部分的最大寬度來調整主題的框架。

啟用盒裝佈局

在這裡，您可以將您的網站更改為框式佈局，該佈局將您的網站內容框起來並顯示可自定義的背景。

網站內容寬度

您可以在此處設置內容部分的最大寬度。 由於您的內容採用響應式佈局，它會調整為較小的尺寸，但不會擴展到超過此處設置的最大寬度。

默認設置為 1080 像素。 對於大多數標準筆記本電腦和台式機來說，這是一個很好的寬度。

網站裝訂線寬度

裝訂線寬度對應於每行中列之間的水平空間（邊距）量。

裝訂線寬度的可選值範圍為 1 到 4。

1 表示列之間的零邊距。
2 表示列之間有 3% 的右邊距。
3 表示列之間的右邊距為 5.5%。
4 表示列之間有 8% 的右邊距。

使用自定義邊欄寬度

這會為您的主題設置默認的側邊欄寬度。 這適用於您的主題中具有側邊欄且不是使用 Divi Builder 構建的所有頁面。

截面和行高

這些選項調整每個部分和行的垂直間距（頂部和底部填充）量。

默認情況下，頂部和底部的部分填充為50px 。 對於行，頂部和底部的默認填充為30px 。 但是，通過使用定制器更改部分或行填充，填充值會變成與主題定制器上選項撥盤上的數字相對應的百分比。

例如，“0”代表頂部和底部填充的 0%，“1”代表頂部和底部填充的 1%，“2”代表 2%，依此類推。 填充的百分比基於容器的寬度（部分或行）。 因此，如果該部分的實際寬度為 1080px 並且您已將部分高度設置為 1，這意味著您將...

1080 像素 x 0.01 = 10.8 像素

... 10.8px 的頂部和底部填充。

選項範圍從 0 到 10，因此您可以擁有多達 10% 的填充。

主題強調色

在開始更改其他元素的顏色之前，您應該先更改它。 更改後，保存並發佈設置並刷新頁面。 現在更新的主題強調色應該自動填充其他元素。

更新主題強調色也會更新以下內容：

• 車身鏈接顏色
• 小部件標題顏色
• 小部件項目符號顏色
• 頁腳社交圖標懸停顏色
• 圖標的默認顏色
• 頁腳菜單活動鏈接顏色
• 二級菜單背景色
• 滑入和全屏標題樣式背景顏色
• 移動菜單顏色的漢堡菜單圖標
• 主菜單活動鏈接顏色
• 下拉菜單行顏色
• 二級菜單背景色
• 二級下拉菜單背景顏色
• 二級菜單背景色
• 活動主菜單鏈接顏色
• 頁腳菜單活動鏈接顏色

排版

這是您網站最重要的方面之一，但往往被用戶和開發人員忽視。 不要犯忽略這些選項的錯誤。 正確處理這些細節可以產生很大的不同。 從長遠來看，花時間為主題設置默認排版也可以節省時間，因為您不必在模塊級別進行自定義。

正文大小

這會更改主題的默認正文文本。 默認大小為 14px。

設計提示：對於標準的正文大小來說，14px 似乎有點太小了。 對於基本級別的正文字體大小，您確實不應該小於 16px。 我們這些接近 40 歲及以上的人會感謝你。 甚至大多數瀏覽器都使用 16px 作為它們的標準基本字體大小。

車身高度

每行文本的行高。

設計提示：行高以長度值“em”來衡量。 Divi 的正文默認為 1.7em。 這個 em 值優於像素 (px) 值，因為它基於元素的當前字體大小，因此它與父行內值（或在我們的例子中，當前字體大小）一起縮放。 值“1.7em”基本上代表當前字體大小的 1.7 倍。 因此，如果您當前的字體大小為 16 像素，則行高將為 27.2 像素。 這為您提供了頂部 5.6 像素和底部 5.6 像素的額外空間。 這似乎是提高可讀性的一個很好的引導（副本行之間的空格）。

頁眉文字大小

Divi 允許您在此處設置默認的 h1 標題文本大小。 這會影響 Divi 的元素，例如 Fullwidth Header Module 標題。 如果你想調整其他標題級別（h2、h3 等）的大小，那麼我建議在附加 CSS 中添加它們（這將在後面的文章中介紹）。

設計提示：在大多數情況下，每頁只有一個頁眉，所以要算數。 把它想像成一本書封面上的標題。 這是一個人注意到的第一件事。 而且，與流行的口號相反，人們仍然通過封面來判斷書籍，尤其是在這種情況下。

標題文本大小的默認值為 30 像素。 這是一個很好的安全尺寸。 特別是因為某些標題需要更長的副本。 但是，我傾向於使用更大的標題尺寸以適應不斷增長的顯示器尺寸。 此外，大多數客戶需要具有簡單和簡短標題的網站，例如“關於我們”和“聯繫我們”，使用較大的字體看起來更好。 我喜歡將我的 h1 標頭設置為至少 48px 。

標題字母間距

字母間距調整字母之間的水平間距。 標題字母間距值影響所有標題級別（h1、h2、h3、h4、h5、h6）、塊引用和幻燈片標題。

設計提示：對於較大的文本減少字母間距並為較小的文本增加字母間距是一種很好的設計技巧。 在標題方面，具有更大字體粗細（粗體）的較大文本可以通過減小 -1px 的字母間距看起來更好。

但是，如果您將相同的標題以大寫形式放置，您可能會發現將字母間距增加到 1-2 像素會更好看。

標題線高度

就像字母間距值一樣，標題行高度值影響所有標題級別（h1、h2、h3、h4、h5、h6）、塊引用和幻燈片標題。 由於字體較大，1em 是默認設置。 我認為 1em 和 1.3em 之間的行高看起來不錯，尤其是當標題變為兩行或更多行時。

標題字體樣式

使用這些選項來更改標題的字體樣式。

標題和正文字體

Divi 中的默認字體是Open Sans ，但 Divi Theme Customizer 有近百種字體可供選擇！ 利用這些內置字體並測試哪些字體最適合您的主題。

設計提示：有關字體配對的靈感，您可以查看 fontpair.co，它有助於將 Google 字體配對在一起。 Divi 不會開箱即用地支持所有這些字體，但您可以搜索 Divi 支持的字體，以查看可以很好地協同工作的配對。

體鏈顏色

正文鏈接顏色由您的主題強調色繼承。 但是您可以隨時在此處更改它。

設計提示：如果需要，您可以使用其他 CSS 為所有正文鏈接添加下劃線屬性（請參閱文章末尾）。

正文顏色

您可以在此處更改正文的顏色。 紐約時報和 Smashing Magazine 等熱門博客使用#333333作為正文顏色。 在我看來，這往往在白色背景下讀起來更好。

標題文字顏色

您可以在此處更改標題的顏色。 如果你堅持使用黑色陰影，我會比正文更暗一點，以使其突出一點。 像#121212這樣的東西會起作用。

背景

此選項為您的主題設置背景。 對於 Divi 主題，此選項實際上僅適用於框佈局。 默認背景顏色為白色 (#ffffff)，除非您在此處更改。 如果您願意，還可以添加背景圖像。

這就是佈局設置。 佈局到位後，您可以開始查看更具體的元素。

標題和導航

標題和導航菜單可能是您主題中最重要的元素。 本節有很多選項可以創建您想要的幾乎任何類型的標題。

標題格式

標題樣式

只需單擊一下，四種標題樣式就可以讓您的網站煥然一新。 這些樣式包括居中、居中內嵌徽標、滑入式和全屏。

您還可以向您的網站添加垂直導航，這可能是一項獨特的功能。 並且，您可以選擇在滾動之前隱藏導航。 這對於想要突出顯示首屏更多內容而不干擾導航欄的單頁站點非常有用。

主菜單欄

您的主菜單欄是網站標題內的主菜單。 您可以完全自定義主菜單的外觀。

設計提示：在開始使用 Divi 主題定制器完善菜單之前，您確實需要知道菜單鏈接將是什麼。 不要忘記您將要設計一個響應式菜單的樣式，所以請花時間確保菜單在所有屏幕尺寸上看起來都很棒。 您可以通過單擊定制器底部的設備圖標或簡單地調整瀏覽器的大小來執行此操作。 如果您有興趣，可以在此處了解如何修復響應式導航。

製作全寬

這將菜單擴展到瀏覽器窗口的整個寬度。

隱藏徽標圖像

如果需要，您可以在此處完全隱藏菜單中的徽標圖像。

菜單高度

在這裡，您可以將菜單高度更改為您想要的任何高度。 儘管如此，請注意不要使菜單高度過大，因為您可能會在菜單而不是主頁內容上浪費寶貴的空間。

徽標最大高度

在這裡，您可以增加或減少徽標的最大寬度百分比以使其更大或更小。

文字大小、字母間距、字體、字體樣式、文字顏色、活動鏈接顏色

這些選項允許您以任何方式自定義菜單鏈接。

背景顏色

這允許您更改主菜單的背景顏色。

設計提示：如果您為標題使用半透明（或完全透明）顏色，Divi 將自動將標題與下方的部分無縫重疊。 這創造了一個非常酷的效果。 例如，這是一個居中的標題樣式，具有透明背景和正下方的全角標題。 注意 Divi 如何自動調整背景圖像以很好地適應標題後面：

下拉菜單設置

您的下拉菜單不必繼承主菜單的樣式。 在這裡，您可以為下拉菜單創建獨特的設計。 您甚至可以在顯示下拉菜單時添加自定義動畫。

二級菜單欄

您可以在此處使用提供的選項自定義二級菜單欄。

啟用後，二級菜單欄位於瀏覽器最頂部的主菜單欄上方。 它可以包含其他元素，包括電子郵件地址、社交媒體鏈接和二級菜單。

默認情況下，二級菜單將保持隱藏，除非您進入二級菜單或在標題元素部分下添加元素。 您可能需要保存並刷新主題定制器才能看到菜單。

固定導航設置

固定導航是指當用戶向下滾動頁面時菜單被“固定”或卡在瀏覽器窗口頂部的狀態。 默認情況下，固定導航會縮小高度以提供更大的視口來顯示站點內容。

設計提示：您還可以將固定主菜單背景顏色設置為半透明顏色，以顯示其背後的一些內容。 這使得它的侵入性更低，但仍然可以訪問。

標題元素

標題元素是您可以添加到標題的附加元素。 這些元素包括社交圖標、搜索圖標、電話號碼和電子郵件。 除了搜索圖標外，所有這些元素都將顯示在二級菜單中。

社交圖標

默認情況下，Divi 顯示 Facebook、Twitter、Google+ 和 RSS 的圖標。 您可以在 Divi 的主題選項中編輯這些配置文件。

頁腳

默認情況下，頁腳部分是隱藏的，除非由內容填充。 此外，頁腳不應與底部欄混淆，底部欄默認顯示在網站的最底部，包括頁腳信用和社交圖標。

佈局

您可以在此處為頁腳部分選擇 5 種佈局。

您還可以設置默認設置為#222222 的頁腳背景顏色。

設計提示：此部分將顯示在您網站的所有頁面上（除非您選擇空白頁面模板）。 因此，使顏色更中性以匹配您網站的所有頁面是有意義的。

小工具

如果您向頁腳部分添加了小部件，您可以在此處設置這些小部件的樣式。

小部件並不是 Divi 獨有的。 這些內置於 wordpress 中，可以在Appearance > Widgets下的 wordpress 儀表板中找到。 在那裡您可以看到四個頁腳區域，您可以在其中添加小部件。 您添加到這些部分的任何小部件都將顯示在頁腳區域中。

但是，您也可以訪問小部件區域而無需離開主題定制器（這是我最喜歡的事情之一）。

頁腳元素

在這裡，您可以選擇在底部欄上顯示您的社交圖標，就像在二級菜單中一樣。

頁腳菜單

如果您有頁腳菜單，則可以在此處設置樣式。

底欄

底部欄位於您網站的最底部，默認情況下會顯示您的頁腳積分和社交圖標。 您可以在此處自定義這些元素的樣式，包括更改社交圖標的字體大小和顏色。

編輯頁腳積分

您還可以使用此框中所需的任何 html 替換默認的頁腳信用。

鈕扣

此部分控制您想要的默認按鈕樣式。

按鈕樣式

在這裡，您可以為您的主題自定義按鈕的樣式。 我不會在這裡詳細介紹每個選項。 您可以訪問我們關於按鈕模塊的文檔，了解有關如何設置按鈕樣式的更多信息。

文字顏色

如果您注意到，默認情況下，按鈕顏色由常規設置中設置的主題強調顏色繼承。 這僅適用於文本設置為“深色”的模塊。 當模塊文本設置為“亮”時，按鈕為白色。 但是，一旦您為按鈕設置了自定義文本顏色，就會為某個模塊中的深色和淺色文本版本設置此顏色。

設計提示：讓您的主題重點顏色設置按鈕的文本顏色，以便您可以保持在模塊中添加按鈕的深色和淺色版本的能力。

按鈕懸停樣式

您可以在此處自定義按鈕懸停狀態的樣式。

讓用戶了解他們將要單擊的實際上是一個按鈕很重要。 添加懸停效果可以鞏固這一點，並鼓勵他們進行互動。 默認情況下，Divi 添加了淺色背景並為右側的箭頭圖標設置動畫。 但是，您可以將其更改為您想要的任何內容。

設計提示：將背景更改為更深或更淺的顏色並不像確保按鈕以某種方式更改那麼重要。 您還可以增加字母間距或調整邊框半徑，使您的按鈕在懸停時具有獨特的效果。

博客

郵政

此部分更改單個帖子中帖子標題內容的樣式。 這不會改變博客頁面或博客模塊上博客摘錄的外觀。 有時，您的博客文章標題需要與網站其餘部分的標題不同。 您將在此處進行這些調整。

如果您選擇使用 Post Header Module，這些選項將無效。

移動樣式

我喜歡這個部分。 您可以在此處調整您的網站在移動設備上的顯示方式並實時查看結果。

平板電腦和手機款式

您可以選擇平板電腦或手機，定制器右側的窗口將自動調整以顯示頁面在設備上的外觀。 然後就像我們在佈局下的常規設置中所做的那樣，您可以調整節高、行高、正文文本大小和標題文本大小。

設計提示#1：我喜歡為手機佈局進行的一項自定義是將行高設置為“0”。 這會在手機上滾動時創建更好的內容流，因為它消除了行之間的間距。

設計技巧#2：找到適合您網站的字體比例。 這是我喜歡為我的標題遵循的一個很好的：

桌面：48px

平板電腦：40px

電話：32px

手機菜單

不要忽視這一點，否則您可能會錯過為您的移動菜單創建一個完全獨特的標題。 您可以僅在移動設備上隱藏徽標並更改背景和文本顏色。

配色方案

這些可以方便地快速解決。 但是，如果您打算稍後在主題定制器中更改其中一些顏色，我不建議使用這些配色方案。 一旦設置，這些顏色就不能在定制器中被覆蓋，因為生成的 CSS 包含 !important 規則。

在我看來，最好將此設置保留為默認值。

菜單和小工具

您不再需要在 wordpress 儀表板中盲目編輯菜單或小部件。 現在，您可以添加和自定義這些項目，並在您的頁面上實時查看它們。 我喜歡方便！

靜態首頁

默認情況下，WordPress 會在您的首頁（主頁）上顯示您的最新帖子。 您可以將此部分更改為您想要的任何靜態頁面。 您還可以指定您的帖子頁面（或博客頁面）。

直到寫這篇文章時我才知道這一點，但您實際上可以從主題定制器中部署一個新頁面作為您的首頁或博客頁面，而無需離開定制器。

額外的 CSS

附加 CSS 部分提供了對主題設置進行最後潤色的絕佳機會。 Divi Theme Customizer 無法控制的任何樣式更改，您都可以在此處使用一些自定義 CSS 來完成。 因為定制器允許您實時查看 CSS 更改，所以您可以對主題進行必要的調整，而不是在外部樣式表上來回切換。

其他 CSS 示例

示例 #1：調整所有標題的大小

附加 CSS 的一個很好的例子是為剩餘的標題標籤設置樣式。 Divi 允許您自定義標題字體的設置，但這僅適用於您的 h1 標題。 您可以使用附加 CSS 框輸入其餘的標題標籤（h2、h3、h4 等）自定義。 我喜歡使用以下比例：16、18、21、24、36、48。

h2 {
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 21px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

示例 #2：將底部段落填充與正文線高度匹配

如果您將正文文本行高設置為 1.7em，您可能還希望為段落之間的底部填充設置相同的值，以保持一致的基線網格和垂直節奏。 換句話說，段落之間的距離等於行高。 為此，您只需添加以下內容：

p { padding-bottom: 1.7em}

因為長度值 em 基於父字體大小，如果您在主題定制器中將基本字體大小更改為其他值，則 1.7em 值將相應調整。

示例 #3：向鏈接添加下劃線屬性

為正文鏈接添加下劃線屬性。

a {
    text-decoration: underline;
}

為您的下一個項目導出和導入 Divi 定制器設置

Divi 主題定制器具有可移植性選項，允許用戶導出或導入定制器設置。 這為開發人員提供了一個很好的機會來製作一種定制器設置模板以用於他們未來的項目。

首先，我建議花點時間弄清楚您在構建網站時傾向於進行哪些自定義。 確定這些設置後，您可以將這些自定義設置輸入到 Divi 主題定制器中，然後導出這些設置，以便您在下一個項目中處於領先地位。 當你已經可以完成相同的事情時，為什麼還要一遍又一遍地做同樣的事情？ 此外，這將有助於確保您不會跳過任何重要的自定義設置。

要導出您的設置，請單擊 Divi 主題定制器頂部的便攜性圖標。

為您的導出文件命名，然後單擊“導出 Divi 定制器設置”按鈕

現在，您可以在未來使用此 .json 文件，方法是在 Divi 主題定制器中單擊相同的可移植性圖標並選擇導入而不是導出。 然後您需要做的就是上傳 .json 文件並單擊“導入 Divi 定制器設置”。

就是這樣。

Divi 定制器設置包括哪些內容？

定制器設置基本上包括前 7 個部分中的所有內容。

1. 通用設置
2. 標題和導航
3. 頁腳
4. 鈕扣
5. 博客
6. 移動樣式
7. 配色方案

最後 4 個部分是 WordPress 特定的，不會延續到其他 Divi 安裝。 這些部分包括：

1. 菜單
2. 小工具
3. 靜態首頁
4. 額外的 CSS

重要的是要注意附加 CSS 不會延續。 您可能會依賴這些設置來節省下一次構建的時間。 如果是這種情況，我建議使用該 CSS 創建一個子主題，以便您可以在下一個項目中使用自定義程序設置添加它。

如何存儲 Divi 定制器樣式

對於 Divi 定制器（以及 Divi Options 和 Divi Builder），Divi 提供靜態 CSS 資源，這些資源可以被瀏覽器緩存以減少頁面加載時間。 這意味著樣式不會打印在頁面上，而是存儲在單獨的靜態 CSS 文件中。 每次保存定制器設置時，靜態 CSS 文件都會更新。 這也包括您添加的任何附加 CSS。

閉幕式

Divi 主題定制器帶有一些非常強大的選項，定製過程既方便又愉快。 更深入地了解這些選項的作用肯定會改善您使用 Divi 構建網站的方式。 如果您還沒有，請花一些時間探索項目的最佳基線設置，將它們插入定制器，然後創建導出文件。 當您開始一個新項目時，您會驚訝於這會給您帶來的提升（和信心）。

我期待在評論中收到您的來信。

乾杯!