在现代网站设计中，醒目的社交图标能提升互动率与品牌曝光度。本文介绍使用 GeneratePress 与 GenerateBlocks 插件（免费版本）创建一个简洁、美观、在桌面端左侧悬浮显示的社交图标栏，并在移动端隐藏。
一、准备工作
本教程适用于使用 GeneratePress 主题的网站，所需工具如下：
GenerateBlocks 插件（免费版）
GeneratePress 主题（建议配合 GP Premium 使用 Block Element）
二、新建元素（Block Element）
登录 WordPress 后台，进入「外观」→「元素（Elements）」→ 添加新元素命名为 Sticky Social Icons
元素类型选择 Hook钩子位置设置为 after_header
显示规则选择 Entire Site（整站）
三、添加容器并设置样式
添加一个 Container 块
设置宽度为「Contained Width」，宽度数值为 48px删除所有默认内边距
设置 z-index 为 99，使其显示在页面上方添加两个 CSS 类：sticky-social-icons（用于后续 CSS 定位）
hide-on-mobile（系统内建类，在移动端隐藏）
如果你有GenerateBlocks Pro你就可以点击启用 Hide on moblie按钮。
四、添加社交图标按钮
在容器中添加一个 Buttons 块
插入按钮，选择社交图标（如 Facebook）
删除按钮文字，仅保留图标设置四边内边距为 15px
添加 1px 底部边框，用作图标之间的分隔线复制按钮并替换为其他图标（如 Twitter、LinkedIn）
最后一个按钮移除底部边框设置按钮容器为垂直堆叠并填满水平空间
五、添加自定义 CSS 实现定位
进入「外观 → 自定义 → 附加 CSS」，粘贴以下样式：
.sticky-social-icons {
position: fixed;
left: 20px;
top: 200px;
}
数值部分可以按实际页面位置进行微调。
六、添加阴影效果（可选，需 Pro 版）
使用 GenerateBlocks Pro 时，可以添加按钮阴影增强立体感：
选中容器块，进入「效果（Effects）」设置启用 Box Shadow，调整以下参数：水平和垂直偏移量
模糊程度
颜色深浅点击更新，刷新页面预览效果
七、最终效果
实现了一个固定在页面左侧的社交按钮栏，页面滚动时仍然显示，移动端不显示，适配多种设备和视觉需求。
结语
使用 GeneratePress 与 GenerateBlocks，即便不使用复杂插件，也能创建专业级的悬浮社交按钮。想添加鼠标悬停动画、透明度渐变等高级样式，还可以扩展 CSS 代码实现。