如何刪除 Divi 側邊欄邊框

幾乎每個 Divi 用戶都想知道如何處理 Divi 主題的一件事是刪除側邊欄邊框。 幸運的是，這是一項簡單的任務。 它可以用代碼來完成，但更重要的是，它很容易用 Divi Theme Builder 來完成。 在本文中，我們將向您展示如何使用這兩種方法刪除 Divi 側邊欄邊框，我們將了解為什麼使用 Divi Theme Builder 會為您提供最佳效果。

默認的 Divi 側邊欄

Divi 默認頁面和帖子佈局在內容和側邊欄之間放置了一條線。 許多側邊欄元素可以使用主題定制器進行樣式設置或調整，但這一行不是其中之一。 這是一個缺乏 WordPress 選項的領域。

Divi 主題選項允許您將側邊欄向右或向左移動，但不包括樣式選項。

Divi 還添加了允許您選擇頁面和帖子級別的側邊欄佈局的設置。 這甚至包括刪除側邊欄的選項，因此不顯示小部件，允許內容區域使用網頁的整個寬度。

這些選項確實可以讓您控制佈局，但不能控製樣式，並且不會刪除側邊欄邊框。 讓我們看看兩種方法來設置或刪除 Divi 側邊欄邊框。

使用代碼刪除或設計 Divi 的側邊欄邊框

首先，讓我們看看如何通過向 Divi 添加代碼來移除或設置 Divi 主題側邊欄邊框的樣式。

您需要將一些 CSS 添加到 Divi 主題選項自定義 CSS字段。 要訪問自定義 CSS 字段，請轉到 WordPress 儀表板菜單中的Divi >主題選項。 留在“常規”選項卡中並滾動到設置底部以粘貼您的代碼。

這是您需要的 CSS：

#main-content .container:before {
width:0;
}
.et_pb_widget_area_right { border-left:0 !important; }
.et_pb_widget_area_left { border-right:0 !important; }

這段代碼告訴 WordPress 小部件區域邊框沒有寬度，導致它不顯示。

將代碼粘貼到自定義 CSS字段中並保存更改。

現在邊框被移除了。 CSS 確實可以使用 Divi 主題來移除側邊欄邊框，但這並不理想，而且不是每個人都想處理任何類型的代碼。 如果您想使用 Divi Builder 構建博客頁面怎麼辦？ 最好的選擇是使用 Divi Theme Builder。

如何使用Divi的主題生成器無需代碼即可刪除Divi側邊欄邊框

也可以使用 Divi 主題在沒有代碼的情況下刪除側邊欄邊框。 通過在 WordPress 儀表板菜單中選擇Divi > Theme Builder轉到 Divi Theme Builder。 如果您還沒有博客佈局，請選擇添加新模板。

此模板將分配給您的博客頁面、存檔頁面或您想要的任何其他頁面，因此請確保先創建此頁面。

將打開一個模式，您可以在其中選擇此模板的顯示位置。 在特定頁面下選擇您的博客頁面。 您還可以創建存檔頁面、作者頁面、類別頁面、日期頁面、標籤頁面等等。 做出選擇後，單擊“保存” 。

現在為您的頁面分配了一個空模板。 接下來，您需要創建博客佈局。 單擊標記為Add Custom Body的區域。

這將打開一個下拉框，您可以在其中選擇構建自定義主體或從庫中添加一個。 單擊您的選擇。 我選擇構建自定義主體。

Divi 側邊欄模塊

我選擇了兩列佈局，並在左側放置了一個博客模塊，在右側放置了一個側邊欄模塊。 由於它是一個 Divi 模塊，您可以將側邊欄放置在您想要的任何位置，但我將採用傳統的右側設計。

該模塊設計為放置在右側或左側，並相應地放置邊框。 默認情況下，模塊設置為顯示為左側邊欄，因此邊框位於小部件的右側。

要更改佈局，請打開模塊，選擇“設計”選項卡，查看“佈局”部分，然後在“對齊”下拉框中選擇“右”。 此示例現在在小部件區域的左側有邊框，使其成為右側邊欄。

如果要顯示側邊欄邊框，請使用此設置。 如果要禁用邊框，對齊方式無關緊要。 我相信您已經註意到對齊下拉框下的切換。

佈局部分中的第二個選項是一個名為Show Border Separator的切換開關。 這允許您禁用或啟用邊框。 它默認啟用。 只需單擊切換按鈕。 現在邊框已從側邊欄中移除。 保存佈局並退出編輯器。 就這麼簡單。

最後，在離開 Divi Theme Builder 之前選擇Save Changes 。 它現在顯示博客頁面的自定義正文。

我的博客頁面現在顯示沒有邊框的側邊欄。 當然，如果您想要更好的設計，您還可以做一些其他事情。

創建自定義 Divi 側邊欄邊框

如果您不想使用 Divi 主題刪除側邊欄邊框，但不想使用標準的 WordPress 邊框，則可以使用 Divi 側邊欄模塊創建自定義側邊欄邊框。

在側邊欄模塊的設計選項卡中，滾動到邊框設置。 在這裡，您可以在模塊的一側添加邊框。 選擇不希望邊框顯示的每一邊並將邊框寬度設置為0。您還可以選擇邊框的寬度、選擇顏色和選擇樣式。 樣式包括實心、虛線、虛線、雙、凹槽、脊、插入、開始和無。

對於您希望邊框顯示的一側，選擇邊框寬度、顏色和样式。 在此示例中，我選擇僅在模塊左側顯示邊框。 我將邊框寬度設置為 7 像素，顏色設置為淺橙色，邊框樣式設置為虛線。

我的博客頁面現在顯示我的自定義 Divi 側邊欄邊框。

如果需要，您甚至可以在其他三個邊上添加框陰影。 在此示例中，我將右側的邊框四捨五入。 我點擊了中間的鏈接，所以虛線邊框保持筆直。 我還調整了框陰影以獲得我想要的設計。

這是我帶有虛線邊框的最終設計。 側邊欄與博客的設計很好地融合在一起。

回到使用 Divi 主題刪除側邊欄邊框的想法，這是我的最終博客佈局。 我喜歡結果如何。 這表明使用 Divi 模塊為側邊欄設計打開了很多可能性。

結論

這就是我們對如何使用 Divi 主題刪除側邊欄邊框的看法。 在代碼中刪除非常簡單，但使用 Divi Theme Builder 為您提供了更多選項，這使您可以更好地控制設計。 這個功能非常基礎，但它是大多數 Divi 用戶想要學習的東西。 這也是了解 Divi 模塊中的小調整如何對您網站的設計產生巨大影響的一個很好的練習。

我們希望聽到您的意見。 您是否使用這些方法中的任何一種刪除了 Divi 側邊欄邊框？ 在下面的評論中讓我們知道您的體驗。

精選圖片來自 Andrew Rybalko/shutterstock.com