如何删除 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