Blocksy 教程:使用 Content Blocks 打造高级动态菜单

如果你正在寻找一种更灵活、更高级的菜单展示方式,Blocksy Pro 提供的 Advanced Menus(高级菜单)扩展正好满足这种需求。本文将介绍如何结合 Gutenberg 编辑器和 Content Blocks,自定义构建一个动态、交互性强的菜单系统,提升桌面端浏览体验。

启用高级菜单扩展

首先,进入 WordPress 后台的 Blocksy Dashboard,开启 Advanced Menus 扩展模块。完成后,即可开始构建菜单中要显示的内容。

创建 Content Blocks

高级菜单的内容来自 Content Blocks。以下是基本操作流程:

进入 Blocksy > Content Blocks 页面

点击右上角 Add New

选择标准的 Content Block 类型

命名内容块(建议名称带有标识性,便于区分)

每一个菜单展示项都可以关联一个 Content Block。虽然文中提供了预设内容演示,但在你的站点中,需要自行设计区块内容。

建议使用 Gutenberg 可复用模块(Reusable Blocks)来构建这些内容块,也可以混合静态模块实现更丰富的布局。

完成后,进入「Display Conditions」,将内容块设置为 Entire Website(全站显示)。不需要调整其他设置,因为菜单扩展会自动调用这些内容。

我们要像上面的操作一样,创建菜单项的内容块,比如“博客“和“关于我们”

配置菜单结构

进入 WordPress 后台的「外观 > 菜单」,开始设置菜单项:

1. 启用高级菜单选项

点击你想自定义的一级菜单项,系统会显示 “Menu Item Settings” 按钮。点击后可以设置:

下拉菜单布局(如单列、两列等)

是否移除菜单标签或链接

是否添加图标或标记(badge)

自定义样式设置(Design)

2. 添加自定义链接(Custom Links)

为了将内容块作为菜单内容展示,建议使用自定义链接作为子项:

URL 处填写 #(代表无链接)

名称可以自定,方便识别

将该项拖动到对应的父级菜单下方,建立层级结构

展开该菜单项,在“内容类型”中选择 Content Block,并从列表中选择你刚创建的内容块。

建议同时关闭该项的标签和链接显示,以便完整展示内容块样式。

按照相同方式,完成其他内容块的插入。

查看最终效果

保存菜单后,切换到前端,即可看到全新的高级动态菜单效果。这些菜单可以展示丰富信息,如分类概览、产品推荐、图文展示等,完全突破传统下拉菜单的限制。

回顾构建流程

使用 Content Blocks 构建各类菜单内容

在菜单中为顶级项目启用高级菜单功能

添加子项并关联内容块

保存设置,前往前端查看展示效果

总结

借助 Blocksy Pro 的高级菜单功能,搭配 Content Blocks Gutenberg 编辑器,可以构建具有高度互动性与美观性的菜单系统。整个过程无需编码,操作直观,适合对菜单设计有更高要求的站点使用。

最近更新

Leave a Reply

您的电子邮箱地址不会被公开。 必填项已用 * 标注