Blocksy 作为一款强大且灵活的 WordPress 主题,其页眉构建器(Header Builder)功能尤为突出。无论是电商、博客、企业官网,还是内容型网站,都可以通过丰富的页眉元素组合,轻松实现专业、清晰、互动性强的导航设计。
本文将逐个介绍 Blocksy 页眉构建器中常用的元素及其功能设置,帮助你快速掌握如何搭建属于自己的定制化页眉。
![图片[1]-Blocksy Header Builder 使用指南:全面解锁页眉元素功能](https://www.361sale.com/wp-content/uploads/2025/05/20250508114021283-image.png)
账户元素(Account)
这个元素为访客提供账户相关操作入口:
未登录状态:展示登录/注册弹窗
![图片[2]-Blocksy Header Builder 使用指南:全面解锁页眉元素功能](https://www.361sale.com/wp-content/uploads/2025/05/20250508135314625-image.png)
已登录状态:可访问个人资料页、仪表盘等后台页面
![图片[3]-Blocksy Header Builder 使用指南:全面解锁页眉元素功能](https://www.361sale.com/wp-content/uploads/2025/05/20250508135231955-image.png)
支持添加图标、标签,控制设备端可见性。Pro 版本还支持集成验证码、安全插件和 WooCommerce 注册表单。
按钮元素(Button)
适合添加操作性强的按钮,例如“立即购买”、“联系客服”等:
![图片[4]-Blocksy Header Builder 使用指南:全面解锁页眉元素功能](https://www.361sale.com/wp-content/uploads/2025/05/20250508135505232-image.png)
- 支持图标、大小、文字自定义
- 可添加自定义 CSS class,与插件联动
![图片[5]-Blocksy Header Builder 使用指南:全面解锁页眉元素功能](https://www.361sale.com/wp-content/uploads/2025/05/20250508135558486-image.png)
- 可绑定触发由 Content Blocks 创建的弹窗
![图片[6]-Blocksy Header Builder 使用指南:全面解锁页眉元素功能](https://www.361sale.com/wp-content/uploads/2025/05/20250508135656181-image.png)
购物车元素(Cart)
当网站启用 WooCommerce 后,该元素自动激活:
- 提供多种购物车样式(含图标样式和侧边栏弹出式)
![图片[7]-Blocksy Header Builder 使用指南:全面解锁页眉元素功能](https://www.361sale.com/wp-content/uploads/2025/05/20250508135822201-image.png)
- 支持商品数量调整(Pro 用户可用)
- 所有设置集中在设计面板,便于快速自定义
![图片[8]-Blocksy Header Builder 使用指南:全面解锁页眉元素功能](https://www.361sale.com/wp-content/uploads/2025/05/20250508135931982-image.png)
联系方式元素(Contacts)
用于展示公司地址、电话、邮箱等基本信息,特别适用于本地业务、企业官网等场景。
![图片[9]-Blocksy Header Builder 使用指南:全面解锁页眉元素功能](https://www.361sale.com/wp-content/uploads/2025/05/20250508140053769-image.png)
分隔线元素(Divider)
纯粹的视觉辅助元素,用于分隔菜单或页眉中的功能模块,使页面更具层次感。
![图片[10]-Blocksy Header Builder 使用指南:全面解锁页眉元素功能](https://www.361sale.com/wp-content/uploads/2025/05/20250508140153931-image.png)
HTML 元素(HTML Block)
插入自定义 HTML、CSS、JavaScript 代码或短代码,适合有特殊排版、按钮、嵌入需求的用户。
![图片[11]-Blocksy Header Builder 使用指南:全面解锁页眉元素功能](https://www.361sale.com/wp-content/uploads/2025/05/20250508140324603-image.png)
多语言切换(Languages)
仅在检测到多语言插件(如 WPML 或 Polylang)后显示,提供语言切换下拉菜单,并支持图标显示、样式切换。
![图片[12]-Blocksy Header Builder 使用指南:全面解锁页眉元素功能](https://www.361sale.com/wp-content/uploads/2025/05/20250508140429242-image.png)
Logo 元素(Logo)
展示网站 Logo:
- 支持上传多状态 Logo(默认、粘性、透明等)
![图片[13]-Blocksy Header Builder 使用指南:全面解锁页眉元素功能](https://www.361sale.com/wp-content/uploads/2025/05/20250508140624173-image.png)
- 支持 Logo 尺寸控制、粘性状态缩放
![图片[14]-Blocksy Header Builder 使用指南:全面解锁页眉元素功能](https://www.361sale.com/wp-content/uploads/2025/05/20250508140720494-image.png)
- 可隐藏 Logo,使用站点标题代替
菜单元素(Menu)
导航菜单的核心组成:
- 提供四种样式和丰富的下拉菜单设计
![图片[15]-Blocksy Header Builder 使用指南:全面解锁页眉元素功能](https://www.361sale.com/wp-content/uploads/2025/05/20250508140853209-image.png)
- 支持点击展开、动画效果、悬停行为设置
![图片[16]-Blocksy Header Builder 使用指南:全面解锁页眉元素功能](https://www.361sale.com/wp-content/uploads/2025/05/20250508141129921-image.png)
- Pro 版本支持多个菜单模块共存,可用于复杂头部布局或移动菜单切换
![图片[17]-Blocksy Header Builder 使用指南:全面解锁页眉元素功能](https://www.361sale.com/wp-content/uploads/2025/05/20250508141209972-image.png)
搜索元素(Search)
支持两种搜索展示方式:
简洁搜索图标:点击后弹出搜索框
输入框样式:常驻搜索栏
支持限定搜索类型(文章、产品等),并具备实时搜索功能(Live Search)。
![图片[18]-Blocksy Header Builder 使用指南:全面解锁页眉元素功能](https://www.361sale.com/wp-content/uploads/2025/05/20250508141520173-image.png)
社交图标(Socials)
用于展示社交媒体链接,支持图标自定义排序与平台选择。可添加自定义社交平台,满足多元化连接需求。
![图片[19]-Blocksy Header Builder 使用指南:全面解锁页眉元素功能](https://www.361sale.com/wp-content/uploads/2025/05/20250508141646175-image.png)
菜单触发器(Trigger)
主要用于移动端菜单(Off-canvas 样式),支持点击打开折叠菜单,并允许嵌入小工具。
![图片[20]-Blocksy Header Builder 使用指南:全面解锁页眉元素功能](https://www.361sale.com/wp-content/uploads/2025/05/20250508141817797-image.png)
小工具区域(Widget Area)
展示任意 WordPress 小工具内容,支持 Gutenberg 小工具系统。可用于嵌入表单、分类、标签云等内容。
![图片[21]-Blocksy Header Builder 使用指南:全面解锁页眉元素功能](https://www.361sale.com/wp-content/uploads/2025/05/20250508141923212-image.png)
心愿单元素(Wishlist)
结合 WooCommerce 和心愿单插件使用,让用户可以快速收藏产品,适用于电商类网站。
![图片[22]-Blocksy Header Builder 使用指南:全面解锁页眉元素功能](https://www.361sale.com/wp-content/uploads/2025/05/20250508142009362-image.png)
总结
Blocksy 的 Header Builder 提供了一整套完善的页眉解决方案,每一个元素都具有高度自定义能力。无论是品牌展示、导航设计,还是交互功能,都能在 Blocksy 中找到合适的组合方式。通过合理利用这些元素,即便没有编程基础,也可以构建出既美观又实用的站点页眉。
最近更新
| 联系我们 | |
|---|---|
| 教程看不懂?联系我们为您免费解答!免费助力个人,小企站点! |
客服微信
|
| ① 电话:020-2206-9892 | |
| ② QQ咨询:1025174874 | |
| ③ 邮件:info@361sale.com | |
| ④ 工作时间:周一至周五,9:30-18:30,节假日休息 | |




















![表情[wozuimei]-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[baoquan]-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

暂无评论内容