如何从 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 构建具有全角布局的站点，则默认情况下您可能希望为所有页面保留此布局。这可以改善用户体验。如果有的话，您现在可以自定义您认为合适的侧边栏显示。

我希望您会发现这对您的网站和未来的项目有用。

我期待在评论中收到您的来信。

干杯!