如何将社交图标添加到 Divi 的主菜单

已发表: 2017-06-27

在今天的 Divi 教程中，我们将向您展示如何将社交图标添加到您的 Divi 网站的主菜单中。通过逐步遵循本教程，您将能够将社交图标添加到您创建的任何网站 - 无论是为您自己还是为客户。

我们已经能够使用 Divi 主题定制器将社交图标直接添加到网站的页眉和页脚中。但如果这不是您想要的，本教程可能会帮助您，因为在许多情况下；人们更喜欢在他们的主菜单中使用社交图标，而不是他们网站的页眉或页脚。

我们将准确地向您展示如何添加它们、如何自定义它们以及如何在新选项卡中打开它们。这些都是您真正需要知道的事情，以便您的主菜单中的社交图标可以为您的整个网站带来附加值。

为什么要在主菜单中添加社交图标？

网站和社交媒体渠道在很多情况下是互补的。并非网站上共享的所有内容都会出现在社交媒体渠道上，反之亦然。这就是为什么在您的社交媒体渠道和您网站上的社交媒体渠道推广您的网站并不少见和坦率的原因；高度鼓励。

您希望人们以他们最熟悉的方式与您的公司或品牌互动。您的网站对他们来说通常是“未知领域”。因此，通过您的网站直接与您联系的障碍可能比社交媒体渠道更大。大多数访问您的 Facebook 页面或 Twitter 页面的人已经被整合到平台中，舒适的感觉可以积极地影响他们的行为。

这就是为什么总的来说，在您的网站上放置社交图标是非常值得推荐的。但是为什么要在主菜单中明确共享它们呢？我们列出了两个主要原因。

当您向网站添加社交图标时，您希望它们尽可能可见。人们不应该费力在您的网站上找到社交图标。这就是将社交图标放在主菜单中可以发挥作用的地方。主菜单跟随一个人在您网站上的整个停留时间。没有必要去寻找图标，图标来找你。这个人唯一要做的就是点击，他们就会到达那里。

主菜单跟随一个人在您网站上的整个停留时间。没有必要去寻找图标，图标来找你。访问者唯一要做的就是点击他们，他们就会到达那里。

正如先前所说; 社交媒体渠道和网站是互补的。他们一起工作，通常有相同的目标，例如通知潜在的潜在客户并吸引他们使用所提供的服务或产品。他们与他们面对的越多，他们的好奇心就越有可能被触发

为了支持网站和社交媒体渠道之间的联系，尽可能多地向访问者展示社交图标是一件好事。他们面对的越多，他们的好奇心就越有可能被触发，他们最终点击它们的可能性就越大。

订阅我们的 YouTube 频道

首先，我们需要将 Font Awesome 安装到我们的 WordPress 网站中。我们将通过在 Divi 的主题选项中添加一些 CSS 代码来做到这一点。

打开您的 WordPress 网站，转到Divi > Theme Options > Integration 并将以下代码粘贴到 <head> 部分：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

Font Awesome 现在应该添加到您网站上正在使用的字体中。您现在可以按照我们帖子的下一部分逐步将这些图标添加到您的主菜单中。

最有可能的是，您已经创建了自己的自定义主菜单，其中列出了要出现在网站主菜单中的所有页面。如果您还没有这样做，请转到外观中的“菜单”页面并创建一个新菜单。

接下来，为菜单命名，添加您希望在主菜单中显示的页面，然后选择下面的“主菜单”选项。

继续，我们要添加社交图标。创建主菜单时，您可以选择您希望社交图标显示的位置。在大多数情况下，它们会紧跟在页面之后，但您也可以将它们放在首位。所有重要和最受欢迎的网站都有社交媒体图标；从 Facebook 到 Twitter、Instagram、LinkedIn 等。

首先打开 Font Awesome 网站上的以下链接。在这篇文章的下一部分，我们将需要这个网站，我们将手动添加图标。

相同的工作方式适用于您添加到主菜单的每个社交图标。例如，我们将向您展示如何添加 Instagram 图标。对于您想要添加的所有其他图标；知道这是相同的工作方式（只有图标、HTML 代码和 URL 相应地不同）。

打开“自定义链接”选项，您会看到两个字段出现：URL 和导航标签。显然，您可以在 URL 字段中键入将访问者引导至社交媒体渠道之一的 URL。在此示例中，我们希望该图标指向 Instagram，因此只需输入您的 Instagram URL。

接下来，在浏览器中转到 Font Awesome 网站，然后通过搜索栏查找 Instagram 图标。同样，您可以搜索 Facebook、LinkedIn 和任何其他图标。

单击 Instagram 图标后，您会看到该网站提供以下 HTML 代码：

<i class="fa fa-instagram" aria-hidden="true"></i>

这是我们需要在“导航标签”字段中使用的确切代码，因此请继续通过将代码复制并粘贴到该字段中来完成自定义链接。

对要出现在主菜单中的每个社交图标重复相同的过程，并查看它在网站前端的外观。

主题定制器允许您在一个地方对主菜单进行所有外观更改。

您可以使用 Divi 选项对主菜单进行的更改也适用于社交图标。例如，当您为主菜单指定某种颜色时，社交图标将具有相同的颜色。那是因为我们使用字体而不是图像来完成这项工作。

您可以通过转到标题和导航 > 主菜单栏对主题定制器中的外观进行所有这些更改。您所做的更改会实时应用，并让您更好地了解主菜单的外观。

帖子的这一部分是您可以使用社交图标做的额外事情。您可能不想让访问者离开网站，即使他们会访问您的社交媒体渠道。每次有人点击社交媒体链接时，您都希望通过将社交媒体链接打开到新标签中，让这两种互动尽可能长时间地保持活跃。

通过返回我们之前创建的菜单，我们可以轻松地使“在新标签页中打开”选项适用于所有社交媒体图标。我们需要手动对每个图标进行所有调整。在此示例中，我们将对 Instagram 图标进行更改。

继续删除您在 URL 字段中提供的 URL，并将以下代码粘贴到导航 URL 中：

<a href="http://www.instagram.com" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>

如果您希望它们在新选项卡中打开，则对每个图标执行相同的操作。每次访问者点击它们时，它们都会在一个新选项卡中打开，这样您就可以尽可能长时间地保留访问者。

本教程一定会帮助您以您想要的方式将社交图标集成到您自己的 Divi 网站中。您可以自定义它们并使它们适合您的主菜单的其余部分。如果您有任何问题或建议；确保您在下面的评论部分发表评论。我们将保持联系并尝试回答您提出的所有问题或建议。

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！

精选图片来自海洋/shutterstock.com