使用 GeneratePress 和 GenerateBlocks 创建悬浮社交图标按钮教程

在现代网站设计中，醒目的社交图标能提升互动率与品牌曝光度。本文介绍使用 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 代码实现。

最近更新

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息