如何從 Divi 中刪除側邊欄

已發表: 2021-08-04

當您使用 Divi Builder 時，可以輕鬆地從 Divi 的默認頁面模板中刪除側邊欄。但是，由於 Divi 的默認頁面模板（帶有側邊欄）仍然顯示在 404 和檔案等頁面上，您可能希望完全從模板中取出側邊欄。

覆蓋 Divi 默認右側邊欄佈局的最明顯方法是使用 Divi Builder 設計頁面或帖子。但是，如果您不打算將 Divi Builder 用於頁面或帖子，則有兩種主要方法可以刪除側邊欄。第一個是在編輯單個頁面或帖子時逐頁更改頁面佈局。第二種是通過在 Divi Theme Builder 中構建自定義模板來覆蓋默認頁面或帖子模板。

今天，我將向您展示在 Divi 的默認模板上刪除側邊欄並使用 Divi Builder 覆蓋模板的不同方法。希望這將為您提供創建一致設計的全寬網站所需的工具。

讓我們開始吧！

使用 Divi 頁面設置刪除頁面上的側邊欄

更改單個帖子或頁面的默認右側邊欄佈局

對於不使用 Divi Builder 的頁面或帖子，默認頁面佈局包括一個右側邊欄，如下所示：

如果您不想在該頁面或帖子中使用 Divi Builder 並且只想逐頁刪除側邊欄，只需在編輯頁面時在側邊欄中找到 Divi 頁面設置框並選擇全角（或不側邊欄）用於您的頁面佈局。

這將刪除該特定帖子或頁面的側邊欄。

使用 Divi 主題選項刪除 WooCommerce 商店頁面、類別頁面和產品頁面上的側邊欄

如果您安裝了 WooCommerce，您可以在 Divi 主題選項中找到幾個選項來更改 WC 商店、類別和產品頁面的頁面佈局。

要刪除 WC 商店和類別頁面上的側邊欄，請導航到 Divi > 主題選項。在“常規”選項卡下，找到標記為“WooCommerce 的商店頁面和類別頁面佈局”的選項，並將佈局更改為“無側邊欄”或“全寬”。

要刪除產品頁面的側邊欄，請導航到 Divi > 主題選項。選擇構建器選項卡。在 Post Type Integration 下，從下拉列表中選擇“No Sidebar”產品佈局。

通過使用主題生成器構建自定義模板來刪除側邊欄

在單獨創建新帖子和頁面時，使用 Divi 頁面設置刪除每個頁面/帖子的側邊欄是一個很好的解決方案。但是，這可能非常麻煩，特別是如果您決定從所有頁面中刪除側邊欄。另外，默認模板（帶有側邊欄）仍然顯示在 404 和檔案等頁面上。因此，您可能希望從頁面或帖子模板中完全刪除側邊欄。為此，您可以使用 Divi Theme Builder 創建自定義模板。這將使您完全控制要全局隱藏側邊欄的頁面。

Divi 的 Theme Builder 是一個強大的工具，用於設計適用於任何頁面或您想要的帖子的全局模板。每次為模板創建新的正文佈局時，該模板將覆蓋 Divi 的默認頁面佈局（包括側邊欄）。因此，在模板級別刪除側邊欄所需要做的就是在 Divi Theme Builder 中創建一個新模板並將其分配給您選擇的頁面或帖子。

使用 Divi Builder 創建全寬博客帖子模板

博客文章是一個很好的例子，說明可能需要沒有側邊欄的站點範圍模板。 Divi 的內置動態內容選項允許您設計一個博客帖子模板，該模板將使用 Divi Builder 和動態內容應用於所有博客帖子站點。完成後，您需要做的就是更新所有未來帖子的實際正文內容。新的帖子內容將繼承自定義模板的設計！

以下是如何執行此操作的快速示例：

首先，創建一個新模板並將模板分配給所有帖子。

然後將自定義主體添加到模板中。

使用模板佈局編輯器，結合 Divi 的內置動態內容模塊和選項，使用 Divi Builder 設計整個佈局。

例如，您可以使用帖子標題模塊來動態顯示帖子的標題。或者，您可以將帖子標題作為動態內容拉入文本模塊的正文中，並用 H1 標籤將其包裹起來。

您可以使用圖像模塊將特色圖像作為動態內容拉入。

或者使用一系列將特定元數據作為動態內容（如帖子作者、帖子作者簡介、帖子類別、帖子發布日期和評論計數）引入的簡介模塊。

最重要的是，在為模板構建任何自定義正文佈局時，您必須包含 Post Content 模塊。發佈內容模塊包括要在模板的正文區域中顯示的頁面或發佈內容區域。

創建模板後，您可以使用默認的 WordPress 文章編輯器輕鬆創建新的博客文章，並讓該博客文章繼承您使用 Divi Theme Builder 創建的博客文章模板的設計。

有關更多信息，請查看我們關於如何使用 Divi 的 Theme Builder 設計博客帖子模板的帖子。

使用 Divi Builder 創建全寬 WooCommerce 產品頁面模板

如果您想刪除產品頁面的默認側邊欄，您還可以為所有博客文章創建一個漂亮的全寬佈局模板。與我們對博客文章模板所做的類似，您還可以使用 Divi 的內置 WooCommerce（或 Woo）模塊來構建一個沒有側邊欄的自定義站點範圍的產品頁面模板。

為此，只需創建一個新模板並將該模板分配給“所有產品”。

然後將自定義正文添加到模板並單擊以使用模板編輯器構建正文佈局。

然後使用 Divi Builder 包含動態 Woo 模塊來設計產品頁面模板。

現在，您使用標準產品頁面編輯器在後端創建一個新產品，該產品將自動繼承指定正文模板的設計。

有關更多信息，請查看我們關於如何創建全站點 woo 產品頁面模板的帖子。

使用 Divi Builder 創建全寬存檔頁面模板

主題生成器還可以輕鬆設計沒有側邊欄的存檔頁面模板。為類別頁面創建模板的關鍵是創建一個新模板並將其分配給 Divi Builder 中可用的眾多存檔模板之一。例如，您可以將其分配給站點範圍內的所有存檔頁面，也可以將其分配給類別頁面模板，以便它僅顯示顯示類別內帖子存檔的頁面。

存檔模板動態內容的第一個基本元素必須包括帖子/存檔標題。

動態內容的第二個基本要素是要顯示的帖子的實際存檔。為此，請添加博客模塊並選擇顯示當前頁面帖子的選項。

如需完整的演練，請查看我們關於如何使用 Divi Theme Builder 為您的博客構建類別頁面模板的帖子。

使用 Divi Builder 創建全寬 404 頁面模板

主題生成器還可以輕鬆地為您的 Divi 網站設計 404 頁面模板，而無需默認側邊欄。 404 頁面不一定依賴於任何動態內容，因此您可以使用 Divi Builder 隨意設計任何您想要的內容。

如需完整的演練，請查看我們關於如何使用 Divi Theme Builder 創建 404 頁面模板的帖子。

使用 Divi Builder 創建全角搜索頁面模板

主題生成器還可以輕鬆地為您的 Divi 網站設計搜索結果頁面模板，而無需默認側邊欄。與分類頁面模板一樣，為搜索結果創建模板的關鍵是創建自定義正文區域，並包括以下內容：

1：作為動態內容的帖子/檔案標題

2：博客模塊顯示當前頁面的帖子。

3：一個搜索模塊，允許用戶根據需要繼續搜索。

如需完整的演練，請查看我們關於如何使用 Divi Theme Builder 為您的網站構建搜索結果頁面模板的帖子。

除非您有特定原因，否則不要為所有頁面創建全角正文模板

為所有頁面創建一個具有全寬主體佈局的自定義模板最初似乎是一個好主意。但是，它可能不會按預期進行。例如，您可以限制可以為頁面使用 Divi Builder 的區域，或者為不使用 Divi Builder 的頁面創建一個太寬的正文區域。這就是為什麼最好只為那些不打算使用 Divi Builder 的頁面創建頁面模板。

有關更多信息，請查看有關構建全局主體模板的文檔。

使用自定義 CSS 刪除默認側邊欄

如果您在不使用 Divi Builder 的情況下使用 Divi 的默認主題頁面佈局，或者如果您想擺脫站點範圍內的側邊欄而不必使用單個頁面設置或主題構建器模板覆蓋它，您可以使用一些不錯的老式 CSS .

導航到 Divi > 主題選項。在常規選項卡下，將以下代碼粘貼到頁面底部的自定義 CSS 框中：

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}
 
/*** Hide Sidebar ***/
#sidebar {display:none;}
 
/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
}
}

最後的想法

在構建網站時，重要的是您的所有頁面都保持相同的一致佈局和設計。因此，如果您正在使用 Divi Builder 構建具有全角佈局的站點，則默認情況下您可能希望為所有頁面保留此佈局。這可以改善用戶體驗。如果有的話，您現在可以自定義您認為合適的側邊欄顯示。

我希望您會發現這對您的網站和未來的項目有用。

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

乾杯!