如何在 Divi 中設計彈出社交媒體關注按鈕欄到您的頁面模板

社交媒體關注按鈕仍然是任何網站的流行補充。 公司和個人使用這些鏈接將用戶重定向到他們的社交媒體頁面，希望訪問者能夠關注他們或訂閱他們的頻道。 通常，您會在聯繫頁面、側邊欄或網站頁腳中看到這些按鈕。

在本教程中，我們將向您展示如何設計彈出社交媒體關注按鈕欄到 Divi 中的頁面模板。 這將使那些社交媒體關注按鈕在您的網站上具有更大的可見性，而不會分散注意力。 另外，使用 Divi 的 Theme Builder，您可以輕鬆創建一個頁面模板，其中包含用於您網站中任何（或所有）頁面的這些按鈕。

讓我們開始吧！

搶先看

以下是本教程中創建的社交媒體關注按鈕的快速瀏覽。

免費下載彈出社交媒體關注按鈕欄頁面模板

要使用本教程中的社交媒體關注按鈕欄頁面模板，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

要將佈局導入您的頁面，只需提取 zip 文件並使用 Theme Builder Portability 選項將 json 文件之一添加到 Divi Theme Builder 中。

讓我們進入教程好嗎？

你需要什麼開始

首先，您需要安裝並激活 Divi 主題。 確保您擁有最新版本的 Divi。

您還需要至少一個使用 Divi Builder 創建的頁面用於測試目的，以便將新模板分配給該頁面以顯示結果。

之後，您就可以開始了。

為 Divi 中的頁面模板創建彈出式社交媒體關注按鈕欄

創建新模板

從 WordPress 儀表板，導航到 Divi > Theme Builder。 然後單擊“添加新模板”框以創建新模板。

將模板分配給您希望顯示促銷欄的頁面。

在新模板上，單擊“添加自定義正文”區域，然後選擇“構建自定義正文”。

然後選擇“從頭開始構建”選項。

創建社交媒體關注按鈕欄

創建新行

首先，讓我們向模板添加一列行。

添加社交媒體關注按鈕模塊

在單列行中，添加社交媒體關注模塊。

添加社交網絡

在社交媒體關注設置下，添加您想要顯示的所有社交網絡。 要添加新網絡，請單擊添加新社交網絡灰色加號圖標，然後從列表中選擇網絡。

您還需要添加要將訪問者重定向到的社交媒體頁面的鏈接 URL。 為此，請單擊社交媒體網絡上的設置圖標並更新帳戶鏈接 URL。

添加按鈕模塊

完成社交媒體關注模塊網絡後，我們準備添加按鈕模塊。 此按鈕將是用戶懸停在其上以顯示彈出欄的按鈕。 繼續添加按鈕模塊，然後將其拖到社交媒體關注模塊上方。

按鈕內容

接下來更新按鈕內容如下：

• 按鈕文字：關注
• 按鈕鏈接網址：#

按鈕樣式和位置

然後更新按鈕設計設置如下：

• 按鈕文字大小：16px
• 按鈕文字顏色：
• 按鈕邊框寬度：0px
• 按鈕字母間距：1px
• 按鈕字體：蒙特塞拉特
• 按鈕字體粗細：粗體
• 按鈕圖標：右箭頭（見截圖）
• 邊距：剩餘 100%
• 填充：底部 100px

然後將以下自定義 CSS 添加到主元素：

position: absolute;

行設置

按鈕樣式設置好並準備就緒後，按如下方式更新行設置：

• 背景顏色：#ffffff
• 天溝寬度：1
• 寬度：100%
• 最大寬度：64px
• 填充：頂部 24 像素，底部 16 像素，左側 16 像素

行框陰影

• 盒子陰影：見截圖
• 框陰影模糊強度：0px
• 框陰影模糊強度：30px
• 陰影顏色（桌面）：透明
• 陰影顏色（懸停）：rgba(0,0,0,0.2)

行定位

然後將以下自定義 CSS 添加到行 Main Element：

position: fixed;
top: calc(33.33vh - 55px);
left: 0;

這會將行定位在瀏覽器頂部向下三分之一處的固定位置。

使用自定義邊距彈出懸停效果

現在添加以下邊距值以添加懸停彈出功能。

• 邊距（桌面）：-64px 左
• 邊距（懸停）：0px 左

這照顧了社交媒體關注按鈕欄。 但是我們仍然需要通過創建必要的帖子內容模塊來完成模板。

將帖子內容模塊添加到模板

此時，社交媒體關注按鈕欄已​​準備就緒。 但由於這是一個模板，我們需要確保並添加帖子內容模塊以使用此模板顯示頁面的內容。

使用帖子內容模塊添加新行

在包含社交媒體關注按鈕欄的行下，添加一個新的單列行。

然後將 Post Content Module 添加到 Row。

目前，帖子內容模塊將被限制為父行的默認寬度。 我們需要更改行的寬度和內邊距，使其跨越瀏覽器的整個寬度而沒有任何間隙。 這很重要，因為帖子內容模塊決定了您必須使用 Divi Builder 構建頁面的區域。

更新以下內容：

• 寬度：100%
• 最大寬度：100%
• 填充：0px 頂部，0px 底部

現在更新部分設置如下：

• 填充：0px 頂部，0px 底部

就這樣吧。 現在在退出編輯器之前確保並保存佈局。 然後也保存主題構建器的更改。

最後結果

要查看最終結果，請訪問分配了模板的頁面。 這是彈出的社交媒體關注按鈕欄的外觀。

最後的想法

這個社交媒體關注按鈕欄肯定會幫助將那些重要的社交網絡帶到最前沿。 彈出功能將確保圖標不會分散用戶的注意力。 您可以使用主題生成器將欄添加到任何頁面模板。 希望這將是您下一個項目的一個很好的補充！

我期待在評論中收到您的來信。

乾杯!