WordPress divi主题

如何从 Divi 中删除侧边栏

by | Apr 27, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

当您使用 Divi Builder 时,可以轻松地从 Divi 的默认页面模板中删除侧边栏。 但是,由于 Divi 的默认页面模板(带有侧边栏)仍然显示在 404 和档案等页面上,您可能希望完全从模板中取出侧边栏。

google广告开户

覆盖 Divi 默认右侧边栏布局的最明显方法是使用 Divi Builder 设计页面或帖子。 但是,如果您不打算将 Divi Builder 用于页面或帖子,则有两种主要方法可以删除侧边栏。 第一种是在编辑单个页面或帖子时按页面更改页面布局。 第二种是通过在 Divi Theme Builder 中构建自定义模板来覆盖默认页面或帖子模板。

今天,我将向您展示删除 Divi 默认模板上的侧边栏并使用 Divi Builder 覆盖模板的不同方法。 希望这将为您提供创建一致设计的全宽网站所需的工具。

让我们开始吧!

使用 Divi 页面设置删除页面上的侧边栏

更改单个帖子或页面的默认右侧边栏布局

对于不使用 Divi Builder 的页面或帖子,默认页面布局包括一个右侧边栏,如下所示:

如果您不想为该页面或帖子使用 Divi Builder 并且只想按页面删除侧边栏,只需在编辑页面时找到侧边栏中的 Divi 页面设置框并选择 全屏宽度 (或者 没有侧边栏) 用于您的页面布局。

这将删除该特定帖子或页面的侧边栏。

WordPress divi主题

使用 Divi 主题选项删除 WooCommerce 商店页面、类别页面和产品页面上的侧边栏

如果您安装了 WooCommerce,您可以在 Divi 主题选项中找到几个选项来更改 WC 商店、类别和产品页面的页面布局。

要删除 WC 商店和类别页面上的侧边栏,请导航到 Divi > 主题选项。 在“常规”选项卡下,找到标记为“WooCommerce 的商店页面和类别页面布局”的选项,并将布局更改为“无侧边栏”或“全角”。

要删除产品页面的侧边栏,请导航到 Divi > 主题选项。 选择生成器选项卡。 在帖子类型集成下,从下拉列表中选择“无侧边栏”产品布局。

通过使用主题生成器构建自定义模板来删除侧边栏

在单独创建新帖子和页面时,使用 Divi 页面设置删除每个页面/帖子的侧边栏是一个很好的解决方案。 但是,这可能非常麻烦,尤其是当您决定从所有页面中删除侧边栏时。 此外,默认模板(带有侧边栏)仍会显示在 404 和档案等页面上。 因此,您可能希望完全从页面中取出侧边栏或发布模板。 为此,您可以使用 Divi Theme Builder 创建自定义模板。 这将使您可以完全控制要全局隐藏侧边栏的页面。

Divi 的 Theme Builder 是一个强大的工具,用于设计适用于您想要的任何页面或帖子的全局模板。 每次为模板创建新的正文布局时,该模板都会覆盖 Divi 的默认页面布局(包括侧边栏)。 因此,在模板级别删除侧边栏所需要做的就是在 Divi Theme Builder 中创建一个新模板并将其分配给您选择的页面或帖子。

使用 Divi Builder 创建全角博客文章模板

博客文章是一个很好的例子,说明可能需要没有侧边栏的站点范围模板。 Divi 的内置动态内容选项允许您使用 Divi Builder 和动态内容设计一个博客文章模板,该模板将应用于站点范围内的所有博客文章。 完成后,您需要做的就是更新所有未来帖子的实际正文内容。 新的帖子内容将继承自定义模板的设计!

以下是如何执行此操作的快速示例:

首先,创建一个新模板并将该模板分配给所有帖子。

fiverr建站WordPress程序员

然后将自定义正文添加到模板中。

使用模板布局编辑器,使用 Divi Builder 结合 Divi 的内置动态内容模块和选项设计整个布局。

例如,您可以使用帖子标题模块动态显示帖子的标题。 或者您可以将帖子标题作为动态内容拉入文本模块的正文并用 H1 标签包装。

独立站选品工具

您可以使用图像模块将特色图像作为动态内容拉入。

或者使用一系列模糊模块,将特定元数据作为动态内容引入,例如帖子作者、帖子作者简介、帖子类别、帖子发布日期和评论计数。

高质量外链购买

最重要的是,在为模板构建任何自定义正文布局时,您必须包含发布内容模块。 帖子内容模块包括要在模板的正文区域内显示的页面或帖子内容的区域。

创建模板后,您可以使用默认的 WordPress 文章编辑器轻松创建新的博客文章,并让该博客文章继承您使用 Divi 主题生成器创建的博客文章模板的设计。

有关更多信息,请查看我们关于如何使用 Divi 的主题生成器设计博客文章模板的文章。

JasperAI 10000字免费额度试用

使用 Divi Builder 创建全角 WooCommerce 产品页面模板

如果您想去掉产品页面的默认侧边栏,您还可以为所有博客文章创建一个不错的全角布局模板。 与我们对博客文章模板所做的类似,您还可以使用 Divi 的内置 WooCommerce(或 Woo)模块来构建没有侧边栏的自定义站点范围的产品页面模板。

为此,只需创建一个新模板并将模板分配给“所有产品”。

然后将自定义正文添加到模板并单击以使用模板编辑器构建正文布局。

WordPress备份工具updrafplus

然后使用 Divi Builder 包含动态 Woo 模块来设计产品页面模板。

现在,您使用标准产品页面编辑器在后端创建一个新产品,该产品将自动继承分配的正文模板的设计。

有关更多信息,请查看我们关于如何创建站点范围的 woo 产品页面模板的帖子。

使用 Divi Builder 创建全角存档页面模板

主题生成器还可以轻松设计没有侧边栏的存档页面模板。 为类别页面创建模板的关键是创建一个新模板并将其分配给 Divi Builder 中可用的众多存档模板之一。 例如,您可以将其分配给站点范围内的所有存档页面,也可以将其分配给类别页面模板,以便它仅显示显示类别中帖子存档的页面。

存档模板的动态内容的第一个基本元素必须包括帖子/存档标题。

动态内容的第二个基本要素是要显示的帖子的实际存档。 为此,请添加一个博客模块并选择显示当前页面的帖子的选项。

如需完整的演练,请查看我们关于如何使用 Divi Theme Builder 为您的博客构建类别页面模板的帖子。

使用 Divi Builder 创建全角 404 页面模板

主题生成器还可以轻松为您的 Divi 网站设计 404 页面模板,而无需默认侧边栏。 404 页面不一定依赖于任何动态内容,因此您可以使用 Divi Builder 随意设计任何您想要的内容。

如需完整的演练,请查看我们关于如何使用 Divi 主题生成器创建 404 页面模板的帖子。

使用 Divi Builder 创建全角搜索页面模板

主题生成器还可以轻松为您的 Divi 网站设计搜索结果页面模板,而无需默认侧边栏。 与类别页面模板一样,为搜索结果创建模板的关键是创建自定义正文区域并包括以下内容:

1: 作为动态内容的帖子/存档标题

2: 用于显示当前页面帖子的博客模块。

3: 一个搜索模块,允许用户根据需要继续搜索。

如需完整的演练,请查看我们关于如何使用 Divi Theme Builder 为您的网站构建搜索结果页面模板的帖子。

除非您有特定原因,否则不要为所有页面创建全角正文模板

最初为所有页面创建一个具有全宽正文布局的自定义模板似乎是一个好主意。 但是,它可能无法按预期进行。 例如,您可以限制页面可以使用 Divi Builder 的区域,或者为不使用 Divi Builder 的页面创建太宽的正文区域。 这就是为什么最好只为那些不使用 Divi Builder 的页面创建页面模板。

有关更多信息,请查看有关构建全局正文模板的文档。

使用自定义 CSS 移除默认侧边栏

如果您使用 Divi 的默认主题页面布局而不使用 Divi Builder,或者如果您想摆脱站点范围内的侧边栏而不必使用单独的页面设置或主题构建器模板覆盖它,您可以使用一些好的老式 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 构建具有全角布局的网站,您可能希望默认为所有页面保留此布局。 这可以改善用户体验。 如果有的话,您现在可以自定义您认为合适的侧边栏显示。

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

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

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题