让您的网站脱颖而出有时说起来容易做起来难。 幸运的是，您可以通过添加创意定制来参与 DIY，这将确保 您的博客 与众不同。

在本教程中，我将向您展示如何使用 Divi 构建器进行自定义 您的博客，特别是 CSS 区域。

这是我正在谈论的区域：

这意味着我们在此处所做的任何更改将仅在我们正在编辑的页面上生效。 这是一个非常有趣和有用的功能！

这是本教程末尾的最终结果。 导航菜单的背景颜色根据您访问的页面而变化。 作为一个附加选项，您会注意到图标也会更改颜色。

我将首先展示如何在菜单上应用背景色。 然后我将分别向您展示如何使社交图标匹配。

如果您尚未阅读我们的教程，请参阅 主题WordPress Divi的演示，我邀请您这样做。

让我们开始吧！

渲染到菜单

首先，我使用默认的标题格式。 如果您使用的是其他格式，则本教程应该仍然有效，因为据我所知，在Divi上，“ divs”的通用ID对于所有格式（＃main-header）都是相同的。 如果您有其他格式的问题。

我们需要确保链接显示在底部。 我选择的颜色（如果要使用它们，可以在Coolors.co上找到）位于较暗的一面，因此我必须使文本链接为浅色。 我选择了白色。

我正在使用rgba（255,255,255,0.6），它将是链接颜色，深白色作为活动链接颜色（获得理想的视觉效果)

然后转到要应用第一个更改的页面（你应该看到的地方菜单链接）。 单击“ 3行”图标，将出现一个选项框。

现在，在此框中添加以下CSS：

＃手工头{背景：#474f61; }

您应该有与此类似的东西，不要忘记将十六进制代码更改为所需的任何颜色：

点击“ 保存并更新 并且这将适用于主菜单，全部都在一行代码中。

现在，您只需要为所有页面添加相同的代码，并每次更改十六进制代码。

社交网络图标（可选）

对于这一部分，我们将修改我们已经完成的代码，然后在站点的CSS级别添加一些代码，并且我将解释为什么应该在各个页面中添加一些CSS，为什么不应该添加一些CSS是。

因此，首先必须确保已建立社交链接。 转到“ Divi选项>常规主题 并将您的URL添加到您的社交媒体页面。

然后转到辅助菜单栏中的设置并设置背景和文本颜色。 我选择“白色”作为文本颜色，因为我将向每个社交图标添加一个圆形的背景以与新的菜单颜色匹配，以便可以显示该图标。

转到“ 标题和导航>标题元素 然后在“ 显示社交图标 “。

您还记得我们如何继续在每个页面上添加CSS吗？ 我们将返回并编辑之前编写的内容。 用下面的CSS替换那里的内容，或者，如果您知道有什么不同，可以简单地添加额外的代码。

＃手工头，＃.AND顶集管社会图标{背景：#474f61; }

此代码将使我们的网站不仅可以更改此页面上菜单的背景颜色，还可以更改社交图标的背景颜色。 我们只是在混合中添加了另一个元素。 您应该具有如下外观：

您可能需要检查每页上的十六进制颜色是否正确。

通用CSS

以下代码将在您的“ 主题选项> CSS框 或在子主题的样式文件中。

＃顶头 - 社会 - 的图标。而李{保证金左：5px; }＃.AND顶集管社会图标{填充：4px; 边距：8px; 宽度：30px; 高度：30px; 边界半径：50％; 行高：24px; }

您可能想知道为什么在页面的CSS框中不是这样。 原因是该特定代码段会影响所有目标项目，因此将完全相同的代码放在多个位置效率很低。 每页仅背景颜色更改，但是此代码每页不更改。 最好的做法是避免增加您网站的权重。

这就是本教程的全部内容，我希望它能让您自定义您的菜单 WordPress博客.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]下载DIVI主题[/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family =下载 TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

其他Divi教程

• 5网站对餐厅使用迪维主题
• 如何在Divi WooCommerce产品上添加文字
• 如何更改Divi页面之间的菜单颜色
• 如何使用Divi个性化博客的网格
• 如何使用WordPress的作用迪维编辑
• 如何创建全屏Divi滑块
• 如何更改Divi页面之间菜单的颜色
• 您可能不了解Divi的功能
• 如何在WordPress上使用Divi Builder
• 如何使用Divi视频滚动模块
• 如何使用Divi Builder Flip模块
• 如何在Divi Builder上添加推荐模块
• 如何使用Divi文本模块
• 如何在Divi上创建滑块
• 如何编辑Divi用户角色
• 如何使用Divi社交媒体模块
• 如何在主题WordPress Divi上使用shop模块
• 如何使用Divi侧边栏模块
• 如何使用Divi Price表模块
• 如何使用Divi出版物的标题模块
• 如何添加Divi的视频模块
• 如何使用文章导航模块
• 如何使用Divi搜索模块
• 如何使用Divi钱包模块
• 如何在Divi Builder上使用person模块
• 如何使用带有Divi过滤器的钱包模块
• 如何使用全宽滑块模块
• 如何使用Divi Builder图像模块
• 如何使用Divi Builder的全宽导航模块
• 如何使用图库模块
• 如何使用Divi Builder全宽模块
• 如何使用Divi全宽度组合模块
• 如何使用Divi全角标题模块
• 如何使用Divi计数器模块
• 如何在Divi Builder上使用文章滑块
• 如何使用Divi Email Optin模块