WordPress divi主题

如何删除 Divi 侧边栏边框

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

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

几乎每个 Divi 用户都想知道如何使用 Divi 主题的一件事是删除侧边栏边框。 幸运的是,这是一项简单的任务。 可以使用代码完成,但更重要的是,使用 Divi Theme Builder 可以轻松完成。 在本文中,我们将向您展示如何使用这两种方法删除 Divi 侧边栏边框,我们将了解为什么使用 Divi Theme Builder 可以为您提供最佳效果。

google广告开户

默认的 Divi 侧边栏

默认的 Divi 侧边栏

Divi 默认页面和帖子布局在内容和侧边栏之间放置一条线。 许多侧边栏元素可以使用主题定制器进行样式设置或调整,但这条线不是其中之一。 这是缺少 WordPress 选项的领域。

默认的 Divi 侧边栏

Divi 主题选项允许您将侧边栏向右或向左移动,但它不包括样式选项。

默认的 Divi 侧边栏

Divi 还添加了允许您在页面和帖子级别上选择侧边栏布局的设置。 这甚至包括删除侧边栏的选项,因此不会显示任何小部件,从而允许内容区域使用网页的整个宽度。

这些选项确实让您可以控制布局,但不能控制样式,并且它们不会删除侧边栏边框。 让我们看一下设置或删除 Divi 侧边栏边框的两种方法。

使用代码删除或设置 Divi 的侧边栏边框

首先,让我们看看如何通过向 Divi 添加代码来删除或设置 Divi 主题侧边栏边框的样式。

您需要在 Divi 主题选项中添加一些 CSS 自定义 CSS 场地。 要访问自定义 CSS 字段,请转到 迪维 > 主题选项 在 WordPress 仪表板菜单中。 留在 一般的 选项卡并滚动到设置底部以粘贴您的代码。

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 小部件区域边框没有宽度,导致它不显示。

使用代码删除或设置 Divi 的侧边栏边框

将代码粘贴到 自定义 CSS 字段并保存更改。

使用代码删除或设置 Divi 的侧边栏边框

现在移除了边框。 CSS 确实可以与 Divi 主题一起删除侧边栏边框,但这并不理想,并不是每个人都想处理任何类型的代码。 如果您想使用 Divi Builder 构建博客页面怎么办? 最好的选择是使用 Divi Theme Builder。

如何使用 Divi 的主题生成器无需代码即可删除 Divi 侧边栏边框

如何使用 Divi 的主题生成器无需代码即可删除 Divi 侧边栏边框

也可以使用 Divi 主题来移除侧边栏边框而无需代码。 通过选择转到 Divi 主题生成器 迪维 > 主题生成器 在 WordPress 仪表板菜单中。 如果您还没有博客布局,请选择 添加新模板.

此模板将分配给您的博客页面、存档页面或您想要的任何其他页面,因此请确保您首先创建了此页面。

如何使用 Divi 的主题生成器无需代码即可删除 Divi 侧边栏边框

fiverr建站WordPress程序员

将打开一个模式,您可以在其中选择此模板的显示位置。 在下面选择您的博客页面 特定页面. 您还可以创建存档页面、作者页面、类别页面、日期页面、标签页面等等。 点击 节省 一旦你做出了选择。

如何使用 Divi 的主题生成器无需代码即可删除 Divi 侧边栏边框

现在为您的页面分配了一个空模板。 接下来,您需要创建博客布局。 点击标记的区域 添加自定义正文.

如何使用 Divi 的主题生成器无需代码即可删除 Divi 侧边栏边框

这将打开一个下拉框,您可以在其中选择构建自定义主体或从库中添加一个。 单击您的选择。 我正在选择构建自定义主体。

独立站选品工具

Divi 侧边栏模块

如何使用 Divi 的主题生成器无需代码即可删除 Divi 侧边栏边框

我选择了一个两列布局,并在左侧放置了一个博客模块,在右侧放置了一个侧边栏模块。 由于它是一个 Divi 模块,您可以将侧边栏放置在您想要的任何位置,但我将使用传统的右侧设计。

如何使用 Divi 的主题生成器无需代码即可删除 Divi 侧边栏边框

该模块被设计为放置在右侧或左侧,并相应地放置边框。 默认情况下,模块设置为显示为左侧边栏,因此边框位于小部件的右侧。

如何使用 Divi 的主题生成器无需代码即可删除 Divi 侧边栏边框

高质量外链购买

要更改布局,请打开模块,选择 设计 选项卡,查看 布局 部分,然后选择 在里面 结盟 下拉框。 此示例现在在小部件区域的左侧有边框,使其成为右侧边栏。

如果要显示侧边栏边框,请使用此设置。 如果要禁用边框,对齐无关紧要。 我确定您已经注意到 结盟 下拉框。

如何使用 Divi 的主题生成器无需代码即可删除 Divi 侧边栏边框

中的第二个选项 布局 部分是一个切换称为 显示边框分隔符. 这允许您禁用或启用边框。 它默认启用。 只需单击切换。 边框现在已从侧边栏中删除。 保存布局并退出编辑器。 就这么容易。

如何使用 Divi 的主题生成器无需代码即可删除 Divi 侧边栏边框

JasperAI 10000字免费额度试用

最后,选择 保存更改 在离开 Divi Theme Builder 之前。 它现在显示博客页面的自定义正文。

如何使用 Divi 的主题生成器无需代码即可删除 Divi 侧边栏边框

我的博客页面现在显示没有边框的侧边栏。 当然,如果您想要更好的设计,还可以做更多的事情。

创建自定义 Divi 侧边栏边框

创建自定义 Divi 侧边栏边框

如果您不想使用 Divi 主题移除侧边栏边框,但又不想要标准的 WordPress 边框,您可以使用 Divi 侧边栏模块创建自定义侧边栏边框。

WordPress备份工具updrafplus

在里面 设计 侧边栏模块的选项卡,滚动到 边界 设置。 在这里,您可以在模块的一侧添加边框。 选择不希望边框显示的每一边并将边框宽度设置为 0。您还可以选择边框的宽度、选择颜色和选择样式。 样式包括实线、虚线、点线、双线、凹槽、脊线、插图、开头和无。

对于您希望边框显示的一侧,选择边框宽度、颜色和样式。 在此示例中,我选择仅在模块的左侧显示边框。 我已将边框宽度设置为 7 像素,将颜色设置为浅橙色,并将边框样式设置为虚线。

创建自定义 Divi 侧边栏边框

我的博客页面现在显示我的自定义 Divi 侧边栏边框。

创建自定义 Divi 侧边栏边框

如果需要,您甚至可以在其他三个侧面添加一个盒子阴影。 在此示例中,我已对右侧的边框进行了圆角处理。 我点击了中间的链接,所以虚线边框保持笔直。 我还调整了盒子阴影以获得我想要的设计。

创建自定义 Divi 侧边栏边框

这是我的带有虚线边框的最终设计。 侧边栏与博客的设计融为一体。

创建自定义 Divi 侧边栏边框

回到使用 Divi 主题去除侧边栏边框的想法,这是我的最终博客布局。 我喜欢结果如何。 这说明使用 Divi 模块为侧边栏设计打开了很多可能性。

结论

这就是我们对如何使用 Divi 主题来移除侧边栏边框的看法。 在代码中删除很简单,但使用 Divi Theme Builder 为您提供了更多选择,让您可以更好地控制设计。 这个功能非常基础,但它是大多数 Divi 用户想要学习的东西。 这也是一个很好的练习,可以了解 Divi 模块中的微小调整如何对您的网站设计产生巨大影响。

我们希望收到你的来信。 您是否使用这些方法中的任何一种删除了 Divi 侧边栏边框? 请在下面的评论中告诉我们您的体验。

特色图片来自 Andrew Rybalko / shutterstock.com

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