如何使社交媒體關注模塊像君主一樣固定

在今天的教程中，我們將向您展示如何使社交媒體關注模塊滿足某些需求。 社交媒體關注是任何網站上任何頁面都很少缺少的模塊。 這是將社交媒體渠道與網站連接起來的主要方式之一。 為了幫助您在您的網站和社交媒體渠道之間實現理想的聯繫，我們擁有 Monarch。 一個插件，可輕鬆幫助您在網站上顯示社交媒體關注按鈕。 但是，如果您更喜歡通過 Divi 構建器實現某些 Monarch 結果，那麼這篇文章可能會派上用場。

我們將向您展示如何為您的網站創建固定的社交媒體關注模塊，這是 Monarch 插件提供的功能之一。 除了將其放置在左側或右側（Monarch 中的標准設置），我們還將向您展示如何使其貼在頁面的頂部和底部。 除了讓它貼在頁面頂部之外，我們還將包括一個部分，我們將向您展示如何讓社交媒體關注模塊出現在您網站的主菜單下方（無論您的主菜單是否固定） .

下面我們來看看最終的結果。

左側示例

右側示例

頂級示例（標準）

無固定導航

固定導航

底部示例

如何使社交媒體關注模塊像君主一樣固定

訂閱我們的 YouTube 頻道

一般步驟

由於將社交媒體關注模塊添加到頁面的基本步驟在每個示例中都是相同的，因此我們只會展示一次。 如果您想在右側、頂部或底部位置獲得相同的結果，您必須首先添加社交媒體關注模塊，如本文以下部分所述。

將社交媒體關注模塊添加到頁面

為方便起見，我們將在頁面的第一部分添加社交媒體關注模塊。 通過這樣做，當您將來想要進行任何更改時，您將立即知道在哪裡可以找到它。 我們真的不需要為這個模塊單獨的一行，因為我們要為它分配一個固定的位置。

將社交媒體頻道添加到社交媒體關注模塊+

我們需要做的下一件事是將所需的社交媒體渠道添加到社交媒體關注模塊。 打開模塊設置，然後單擊“添加新社交網絡”。 完成此操作後，您可以選擇要添加的社交媒體網絡並為其分配 URL。

對於每個社交網絡，都會自動分配一種與社交網絡匹配的圖標顏色。 但是，如果您更喜歡在自己網站的樣式中使用顏色，則可以在“設計”選項卡中選擇不同的顏色。 對於我們將向您展示如何製作的示例，我們將包括四個社交網絡； Facebook、Twitter、Google+ 和 LinkedIn。 我們將不使用標準顏色，而是為每個社交網絡賦予相同的顏色，但具有不同的不透明度。 我們還將根據重要性對社交媒體渠道進行排序。

臉書設置

單擊“添加新社交網絡”。 在社交網絡選項中，選擇 Facebook。 仍在“內容”選項卡中時，添加鏈接到 Facebook 社交媒體渠道的 URL。

然後，轉到“設計”選項卡。 在這種情況下，Facebook 是最重要的社交網絡。 這就是為什麼我們要賦予它最引人注目的顏色。 我們使用的顏色是“rgba(59,89,152,0.94)”。

推特設置

接下來，添加一個新的社交網絡。 這次不是選擇 Facebook，而是選擇 Twitter。 在同一內容選項卡中添加 URL，然後轉到設計選項卡。 在“設計”選項卡中，選擇“rgba(59,89,152,0.76)”作為背景顏色。 在這種情況下，Twitter 是一個重要的社交媒體渠道，但不如 Facebook 重要。 這就是為什麼它排在第二位，並且具有稍微透明和不太顯眼的顏色。

領英設置

在“內容”選項卡中對 LinkedIn 社交網絡重複相同的過程，然後轉到“設計”選項卡。 在“設計”選項卡中，為圖標指定“rgba(59,89,152,0.6)”顏色。

Google+ 設置

最後但並非最不重要; 添加 Google+ 社交圖標。 填寫 URL 並轉到“設計”選項卡。 這是我們想要添加到此示例中的列表的“最不重要”的社交網絡，它將具有“rgba(59,89,152,0.42)”圖標顏色。

創建左側邊欄社交媒體關注

我們將向您展示如何製作的第一個固定社交媒體關注模塊位於您頁面的左側。 這是最常用的一種，也可能是立即讓你想到 Monarch 最多的一種。 首先遵循一般步驟，然後繼續添加 CSS 代碼，您將在本文的下一部分中找到這些代碼。 我們將向您展示如何添加 CSS 代碼的兩種方法； 到主題選項，特別是一頁。 在此示例之後，您也可以在其他示例的兩個選項之間進行選擇。

將 CSS 代碼行添加到主題選項

添加額外 CSS 代碼的方法之一是通過主題選項。 當您想在整個網站中創建效果時，最常使用此方法。 但要記住; 如果您使用此效果，則必須在您網站的每個頁面（或您希望它出現的頁面上）包含社交媒體關注模塊。

要將 CSS 代碼添加到您的主題選項，請轉到您的WordPress 儀表板 > Divi > 主題選項 > 常規 > 向下滾動常規選項卡並將以下 CSS 代碼行添加到自定義 CSS 字段：

ul.et_pb_social_media_follow { 
position: fixed; 
left: 0; 
top: 35%;
padding: 0 !important; 
z-index: 999 !important;
} 
.et_pb_social_media_follow li { 
margin: 0 !important; padding: 0 !important; 
} 
.et_pb_social_media_follow li a.icon.rounded_rectangle { 
border-radius: 1px; 
margin: 0 !important; 
}

特別是在一頁中添加 CSS 代碼行

另一種幫助您應用 CSS 代碼的方法是將其添加到特定的頁面。 當您決定僅將社交媒體關注模塊添加到特定頁面時，最常使用此方法。 通過使用此方法，您的網站不會在您網站上不包含社交媒體關注模塊的所有其他頁面上加載 CSS 代碼行。 或者，如果您希望其他頁面上的社交媒體關注模塊像往常一樣運行，此方法也會對您有所幫助。

單擊您的 Divi 構建器上的以下按鈕：

接下來，將 CSS 代碼複製並粘貼到自定義 CSS 字段中。

創建右側邊欄社交媒體關注

我們將分享的下一個代碼將幫助您將社交媒體關注模塊放在您網站的右側。

所需的 CSS 代碼行

將以下 CSS 代碼行添加到主題選項或特別是一頁，如上面示例中所述。

ul.et_pb_social_media_follow {
position: fixed;
top: 40%; 
padding: 0 !important; 
right: 0; 
width: 30px;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important; 
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px; 
margin: 0 !important;
}

創建頂級社交媒體關注

繼續，您還可以在網站頂部找到社交媒體關注模塊。 這實際上是讓社交媒體圖標通過網站跟隨訪問者的一種非常有趣的方式。 它不是經常使用，所以它吸引了人們的眼球。

所需的 CSS 代碼行

將以下 CSS 代碼行複制並粘貼到主題選項中，或將它們添加到特定頁面。

ul.et_pb_social_media_follow {
position: fixed;
left: 45%; 
top: 0;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important; 
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px; 
margin: 0 !important;
}

創建頂級社交媒體 在主菜單下方關注

之前顯示的將社交媒體關注模塊添加到您的網站的方法沒有考慮主菜單。 但是，如果您希望社交媒體關注出現在主菜單下方並在滾動時返回頂部，那麼這篇文章的這一部分可能會對您有所幫助。

添加 CSS 代碼

在固定導航已激活和未激活的兩種情況下，您應該將以下 CSS 代碼行添加到主題選項或將它們添加到特定頁面：

ul.et_pb_social_media_follow {
position: fixed;
left: 45%; 
top: 0;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important; 
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px; 
margin: 0 !important;
}

之後，您還需要添加一些 jQuery 代碼。 jQuery 代碼取決於您是否已激活固定導航。

固定導航

如果您激活了固定導航，則需要將以下 jQuery 代碼行添加到您的網站的頭部或您希望它工作的頁面內的代碼模塊：

<script text= "text/javascript">
jQuery(function($) {
$("ul.et_pb_social_media_follow").css("margin-top", $("#main-header").outerHeight());
$(window).bind('scroll', function() {
var navi = $("#main-header");
var naviHeight= navi.outerHeight();
if ($(window).scrollTop() <= naviHeight){
$("ul.et_pb_social_media_follow").css("margin-top", naviHeight);
}
});
});
</script>

不要忘記使用 CSS 代碼行。 jQuery 代碼是額外的。 另外，請確保在滾動時，主要的高度保持不變。 您可以通過轉到WordPress 儀表板 > 外觀 > 自定義 > 標題和導航 > 固定導航設置 > 選擇固定菜單高度的最小值來實現。

無固定導航

如果你想達到同樣的結果，但你沒有固定的導航，代碼會略有不同：

<script text= "text/javascript">
jQuery(function($) {
$("ul.et_pb_social_media_follow").css("margin-top", $("#main-header").outerHeight());
$(window).bind('scroll', function() {
var navi = $("#main-header");
var naviHeight= navi.outerHeight();
if ($(window).scrollTop() <= naviHeight){
$("ul.et_pb_social_media_follow").css("margin-top", naviHeight);
}
else {
$("ul.et_pb_social_media_follow").css("margin-top", 0);
}
});
});
</script>

創建底部社交媒體關注

行中的最後一個是底部的社交媒體關注模塊。

所需的 CSS 代碼行

將以下 CSS 代碼行添加到“主題選項”的“自定義 CSS”字段或特定頁面：

ul.et_pb_social_media_follow { 
position: fixed; 
left: 45%; 
bottom: 0; 
padding: 0 !important; 
z-index: 999 !important;
} 
.et_pb_social_media_follow li { 
margin: 0 !important; 
padding: 0 !important; 
} 
.et_pb_social_media_follow li a.icon.rounded_rectangle { 
border-radius: 1px; 
margin: 0 !important; 
}

最後的想法

在本教程中，我們向您展示瞭如何以與 Monarch 插件相同的樣式創建社交媒體關注模塊。 通過使用此方法，如果您僅使用 Monarch 插件來分享您的社交媒體渠道，則無需下載它。 對於社交媒體共享，您仍然必須使用 Monarch 插件。 如果您有任何問題或建議； 請隨時在下面的評論部分發表評論，以便我們與您取得聯繫！

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！

特色圖片由 Snopek Nadia/shutterstock.com 提供