如何將社交圖標添加到 Divi 的主菜單

如果沒有專門的社交媒體存在，幾乎不可能運行一個成功的網站。 無論您選擇 Instagram、Twitter、TikTok、Facebook，還是這些和其他任何東西的任意組合，人們都希望直接與您和您的品牌互動。 確保您在 Divi 的主菜單中有社交圖標是將流量從您的網站引導到您選擇的網絡的好方法。 它快速而簡單，我們將引導您完成每一步。

讓我們開始吧！

預覽

桌面

移動的

使用 Divi 主題生成器上傳全局標題免費贈品

對於本文，我們將使用 Tennis Club 佈局包和頁眉/頁腳免費贈品。 您可以從 Divi 構建器中下載佈局包，並從我們的博客中下載頁眉/頁腳包。 當您下載它時，文件將作為.zip存檔。 確保將它們解壓縮，以便將.json文件上傳到 Divi。

現在，進入您的 WordPress 儀表板，在Divi – Theme Builder下找到Divi Theme Builder 。 單擊頁面右上角的上下箭頭圖標。 這將打開Portability模式，選擇Import選項卡，找到您下載的頁眉/頁腳的.json文件，然後單擊Import Divi Theme Builder Templates 。

然後，您要進入網站的標題部分。 因為它是社交圖標，我們將把它們放在全局標題中，因為我們認為它們應該出現在您網站的所有頁面上（除非另有說明）。

你現在應該在建造者裡面。 如果您按照上述說明進行操作，您上傳的新標題應該已經就位。

您可能會注意到這裡已經有社交圖標。 然而，這些社交圖標不在Divi主菜單中，而這正是我們今天正在努力的方向。 所以讓我們進入它的雜草，好嗎？

將社交圖標添加到主菜單欄

首先，讓我們改變行/列結構。 我們想在第 2 部分（帶有主頁/聯繫人鏈接的底部）中找到該行。

我們為本教程選擇了兩欄結構，但它是最適合您網站的結構。 選擇後，進入行設置並導航到設計選項卡。 找到“大小調整”菜單，然後打開“使用自定義裝訂線寬度”。 將 Gutter Width 值設置為 1。您可以輸入數字或使用滑塊來執行此操作。

單擊綠色複選標記以保存您的設置。 然後回到行設置。 這次，選擇頂部/第一/左列的設置齒輪。

接下來，導航到“高級”選項卡。 找到自定義 CSS區域並單擊進入主元素字段。 在此字段中，您需要添加以下 CSS。

width:80%;

或者

width:80%!important;

您可能需要添加 !important 標籤來設置此元素的樣式。 沒關係。 它不應該產生性能問題或需要處理的意大利麵條式代碼，因為它是單個元素。

然後，進入響應設置並使用相同的代碼將列的寬度更改回移動設備的 100%。

接下來，對第二列重複此步驟。 只是這一次，將默認值設置為 20% 並且仍然將移動值設置為 100% 。

完成後，保存您的更改並準備添加和設計您的社交媒體圖標。

添加社交媒體關注模塊

單擊第 2 列中的黑色 +圖標以添加新模塊並滾動，直到找到Social Media Follow 。 插入它。

無論您使用哪種標題，默認的社交媒體圖標很可能與您的風格不符。 它們也不會正確定位。 下一步將是正確設置樣式和間距。 在社交媒體關注模塊設置中，轉到設計，然後轉到對齊。 選擇要放置模塊的位置。

我們正在為桌面選擇右對齊，然後進入響應性選項並將其居中。

接下來是向下滾動到圖標菜單。 選擇所需圖標的顏色。 這是 Facebook 的f ，Twitter 的鳥，Instagram 的相機。 例如，這不是藍色背景。

接下來是間距。 真正需要調整的主要內容是上邊距。 我們將應用1.5 vw上邊距，使其與菜單文本居中。 如果您或多或少想要移動設備，您也可以調整它。

現在，單擊“內容”選項卡並進入您要自定義的個人社交網絡圖標。 您將為您為站點選擇的每個圖標重複這些步驟。

向下滾動到背景並選擇與您網站設計相匹配的顏色。 同樣，請記住這只會更改此特定圖標的背景。

您可能還想更改此特定圖標的顏色。 您可以在“設計”選項卡和“圖標”部分下執行此操作，就像在整個模塊本身中一樣。 此設置將覆蓋一般設置，因此如果您想要一次性顏色，則不必擔心會干擾其他設置。

然後，向下滾動到“設計”選項卡下的“邊框”條目，並在其中找到“邊框寬度” 。 將此值設置為 3px，然後選擇從 Divi 主菜單背景中突出的邊框顏色。

此時，您將返回“內容”選項卡並為您希望顯示的每個社交網絡圖標重複這些步驟。 如果您希望此模塊中的每個圖標共享相同的設計，您只需右鍵單擊您設計的圖標並選擇複製項目樣式。

接下來，右鍵單擊要設置樣式的其他網絡並選擇Paste Item Styles 。

就是這樣！ 請務必單擊屏幕右下角的“保存”按鈕以保存整體佈局。 然後，你是安全的X出在右上角的編輯畫面。

確保Divi Theme Builder頁面在左上角顯示所有更改已保存。 如果沒有，請單擊保存更改。 完成後，您的網站將在您的 Divi 主菜單中實時顯示社交媒體圖標！

最終結果

這就是您的最終結果應該類似於的。

桌面

移動的

包起來

確保您的受眾始終可以找到您的主要社交網絡對 Divi 來說是小菜一碟。 只需幾步，您就可以調整我們的免費贈品頁眉/頁腳包之一，將您的社交媒體圖標包含在主菜單中（或您可能需要的任何其他位置）。 祝你好運！

您如何看待主菜單中的社交媒體圖標？ 你傾向於把它們放在哪裡？