如何使用 Divi 的內置自定義 CSS 輸入進行高級響應式編輯

Divi 具有內置的響應式設計編輯功能，可以非常輕鬆地在台式機、平板電腦或手機顯示屏上調整網站樣式（無需了解 CSS）。 Divi 的部分內置響應式編輯包括一種使用自定義 CSS 進行更高級響應式設計更改的簡化方法。 這比依賴帶有媒體查詢的外部樣式表要方便得多。 您甚至可以為每個設備顯示實時可視化地調整 CSS，從而消除響應式設計中的大部分猜測。

在本教程中，我將向您展示如何使用自定義 CSS 進行方便的響應式設計更改，以便您可以進行 Divi 的內置設計選項中可能不可用的高級設計修飾。

讓我們開始吧。

Divi 用於響應式編輯的內置斷點

Divi 具有三個通用響應斷點（設計根據瀏覽器寬度更改的點），它們內置於 Divi Builder 中任何元素的設置中。 這三個斷點主要用於促進台式機、平板電腦和手機顯示器的特定設計設置。

Divi 針對桌面、平板和手機顯示器的三個主要響應斷點如下：

• 桌面：981px 及以上
• 平板電腦：介於 980 像素和 768 像素之間
• 手機：767px及以下

這三個斷點在整個 Divi 構建器中的所有響應式設計選項卡中都是相同的，而不僅僅是高級自定義 CSS。 因此，每次部署響應式設計選項卡時，在這些選項卡下完成的任何樣式都將顯示在這三個主要響應斷點的範圍內。

此外，值得一提的是，這些用於設備顯示的通用斷點並不是 Divi 主題結構中唯一內置的斷點。 您可以在我們關於識別 Divi 響應斷點的文章中了解這些內容。

了解 Divi 的自定義 CSS 輸入框

當您在 Divi 構建器中自定義元素（部分、行或模塊）時，每個設計選項對應（或針對）該元素的特定部分。 例如，在編輯文本模塊時，您可以使用內置設置（即標題 2 字體、左填充等）定位該模塊的任何部分。

同樣，當您使用高級自定義 CSS 輸入框自定義 Divi 元素（部分、行或模塊）時，每個輸入框都將對應（或定位）該 Divi 元素的整個或某些部分。 可用的自定義 CSS 框的數量將根據您要設置樣式的元素而有所不同。 一個文本模塊可能只有三個自定義的 CSS 元素輸入框（之前、主要和之後），但是一個號召性用語模塊將有額外的標題、描述和按鈕框。 這是因為該模塊具有更多可以在該模塊元素中定位的部分。

以下是可用於“號召性用語”模塊的不同自定義 CSS 輸入框的說明。

每個自定義 CSS 輸入框都針對元素中的特定 CSS 類。 要查看針對特定元素的類，只需將鼠標懸停在該元素上並單擊問號圖標即可。 在那裡，您將看到所針對的 CSS 類。

因此，您無需在輸入框中的 CSS 片段中添加 CSS 類。 如果這樣做，代碼將不起作用。

相反，只需將 CSS 屬性直接添加到要應用於已定位的類的框中。

如何將自定義 CSS 添加到響應式設計斷點

要訪問任何 css 輸入框的三個主要響應式設計斷點，只需將鼠標懸停在元素上並單擊平板電腦圖標即可。 然後您將看到三個響應式設計選項卡。

現在您需要做的就是使用選項卡將 CSS 添加到三個設備顯示器（桌面、平板電腦和手機）中的任何一個。

例如，假設您想讓號召性用語的促銷按鈕跨越平板電腦和手機上的模塊的整個寬度，但不在桌面上。 您可以選擇 Promo Button 輸入框下的平板電腦選項卡並添加“display: block;”。

請注意，當您選擇平板電腦選項卡時，Divi Builder 視圖模式會切換到平板電腦視圖模式（寬度為 768 像素），以便更好地實時了解您的設計外觀。

較小的設備默認繼承較大設備的 CSS

默認情況下，應用於平板電腦選項卡的代碼也將被手機顯示屏繼承。 為了提醒我們這一點，Divi 將灰色佔位符代碼添加到輸入框中，其代碼與添加到平板電腦顯示屏上的代碼相同。

手機顯示屏之所以繼承平板顯示屏，是因為後端平板顯示屏的實際斷點（媒體查詢）設置為“max-width: 980px;” 這意味著添加到平板電腦的代碼也將應用於手機，因為手機顯示屏的寬度小於 980 像素。 因此，如果您想對手機應用不同的樣式，則需要在手機選項卡輸入框中添加額外的代碼。

注意：如果您還將自定義 CSS 添加到手機顯示屏，Divi 會巧妙地將後端平板電腦的媒體查詢更改為 768px 和 980px 之間的更精確範圍（或 max-width: 980px 和 min-width: 768px）。

自定義 CSS 在後端應用了什麼

假設我們將自定義 CSS 添加到所有三個響應選項卡（桌面、平板電腦和手機）。

在桌面上，我們將按鈕放置在模塊的右下角。

在平板電腦上，我們覆蓋桌面代碼並簡單地將按鈕跨越到模塊的整個寬度。

在手機上，我們覆蓋了平板電腦的 CSS 並使顯示恢復正常。

如果我們檢查後端的 CSS，您可以看到 Divi 使用以下媒體查詢組織代碼，因此您不必：

桌面：

@media only screen and (min-width: 981px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

藥片：

@media only screen and (max-width: 980px) and (min-width: 768px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: block;
}

電話

@media only screen and (max-width: 767px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: inline-block;
}

CSS是如何存儲在Divi中的？

作為 Divi 內置速度優化的一部分，Divi Builder 中的所有樣式（包括自定義 CSS）將被組合、縮小並存儲為靜態 CSS 文件，以加快頁面加載速度。 因此，如果您想繞過通過子主題添加自定義 CSS 的需要，您可以利用內置的響應式 CSS 輸入，而不必擔心會減慢您的網站速度。

有關更多信息，請查看我們關於如何加快 Divi 網站速度的帖子。

最後的想法

希望這篇文章能幫助您更好地了解如何利用 Divi 的內置自定義 CSS 輸入框對您的網站進行方便的響應式設計更改。

對於大多數人來說，無需冒險進入高級選項卡將自定義 CSS 添加到您的設計中。 Divi 有很多內置選項，即使是高級用戶也很少會發現需要使用自定義 CSS。 但是，如果您需要高級樣式的時候到了，那麼了解在 Divi 中實現它是多麼容易會有所幫助。

您對 Divi 的自定義 CSS 輸入有何體驗？