在現(xiàn)代網(wǎng)站設(shè)計(jì)中，醒目的社交圖標(biāo)能提升互動(dòng)率與品牌曝光度。本文介紹使用 GeneratePress 與 GenerateBlocks 插件（免費(fèi)版本）創(chuàng)建一個(gè)簡(jiǎn)潔、美觀、在桌面端左側(cè)懸浮顯示的社交圖標(biāo)欄，并在移動(dòng)端隱藏。

一、準(zhǔn)備工作

本教程適用于使用 GeneratePress 主題的網(wǎng)站，所需工具如下：

• GenerateBlocks 插件（免費(fèi)版）
• GeneratePress 主題（建議配合 GP Premium 使用 Block Element）

二、新建元素（Block Element）

• 登錄 WordPress 后臺(tái)，進(jìn)入「外觀」→「元素（Elements）」→ 添加新元素

• 命名為 Sticky Social Icons
• 元素類型選擇 Hook

• 鉤子位置設(shè)置為 after_header
• 顯示規(guī)則選擇 Entire Site（整站）

三、添加容器并設(shè)置樣式

• 添加一個(gè) Container 塊
• 設(shè)置寬度為「Contained Width」，寬度數(shù)值為 48px

• 刪除所有默認(rèn)內(nèi)邊距
• 設(shè)置 z-index 為 99，使其顯示在頁(yè)面上方

• 添加兩個(gè) CSS 類：
  • sticky-social-icons（用于后續(xù) CSS 定位）
  • hide-on-mobile（系統(tǒng)內(nèi)建類，在移動(dòng)端隱藏）

如果你有GenerateBlocks Pro你就可以點(diǎn)擊啟用 Hide on moblie按鈕。

四、添加社交圖標(biāo)按鈕

• 在容器中添加一個(gè) Buttons 塊
• 插入按鈕，選擇社交圖標(biāo)（如 Facebook）
• 刪除按鈕文字，僅保留圖標(biāo)

• 設(shè)置四邊內(nèi)邊距為 15px
• 添加 1px 底部邊框，用作圖標(biāo)之間的分隔線

• 復(fù)制按鈕并替換為其他圖標(biāo)（如 Twitter、LinkedIn）
• 最后一個(gè)按鈕移除底部邊框

• 設(shè)置按鈕容器為垂直堆疊并填滿水平空間

五、添加自定義 CSS 實(shí)現(xiàn)定位

進(jìn)入「外觀 → 自定義 → 附加 CSS」，粘貼以下樣式：

.sticky-social-icons {
  position: fixed;
  left: 20px;
  top: 200px;
}

數(shù)值部分可以按實(shí)際頁(yè)面位置進(jìn)行微調(diào)。

六、添加陰影效果（可選，需 Pro 版）

使用 GenerateBlocks Pro 時(shí)，可以添加按鈕陰影增強(qiáng)立體感：

• 選中容器塊，進(jìn)入「效果（Effects）」設(shè)置

• 啟用 Box Shadow，調(diào)整以下參數(shù)：
  • 水平和垂直偏移量
  • 模糊程度
  • 顏色深淺

• 點(diǎn)擊更新，刷新頁(yè)面預(yù)覽效果

七、最終效果

實(shí)現(xiàn)了一個(gè)固定在頁(yè)面左側(cè)的社交按鈕欄，頁(yè)面滾動(dòng)時(shí)仍然顯示，移動(dòng)端不顯示，適配多種設(shè)備和視覺(jué)需求。

結(jié)語(yǔ)

使用 GeneratePress 與 GenerateBlocks，即便不使用復(fù)雜插件，也能創(chuàng)建專業(yè)級(jí)的懸浮社交按鈕。想添加鼠標(biāo)懸停動(dòng)畫(huà)、透明度漸變等高級(jí)樣式，還可以擴(kuò)展 CSS 代碼實(shí)現(xiàn)。

最近更新

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個(gè)人，小企站點(diǎn)！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時(shí)間：周一至周五，9:30-18:30，節(jié)假日休息