如何將社交圖標添加到 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