产品分类模块自定义

核心功能

1 模块化拖拽搭建与实时内容管理

左侧模块库以业务视角分类，提供“导航”、“功能模块”、“产品轮播”、“产品详情”、“公司介绍”、“关于我们”、“新闻动态”、“商城页面”、“产品分类”等预制模块，支持快速搭建电商、企业官网页面。模块分为“推荐模块”和“我使用的模块”，便于管理和复用个人常用模块。右侧为实时可视化预览区，展示网站头部、导航栏和“产品分类”区域，用户可直接在预览区点击编辑内容（如替换分类图片和文字），实现“所见即所得”的内容管理。顶部提供“更换模板”、“网站设置”等全局功能入口，支持一键更换全站设计风格。

2 可视化多级导航与专业网格化布局配置

在“编辑”模式的“栏目”设置中，以清晰的层级结构展示和管理“首页、企业目录、公司目录、更多产品”等多级导航菜单结构，满足复杂站点的信息架构需求。提供独立的“PC分栏”和“手机分栏”设置，支持分别为不同终端设计布局，图中展示“PC分栏”的“3,3,3,3”配置（即一行12等份均匀分为4个3列的区块），是专业网格系统的可视化应用。在“分栏信息”中，可为每个分栏（区块）单独设置“内容背景”，实现区块化的视觉区分，提升页面层次感。右侧有明确提示“按钮可在组件中添加，编辑中设置样式”，清晰区分功能添加与样式设置区域。

功能截图与界面解析

【图1：模块选择与页面内容编辑视图（页面架构师与内容运营）】

图示：页面架构师与内容运营角色。此界面用于为页面选择和添加功能模块（如“产品分类”），并直接对页面中的现有内容（如导航文字、产品分类图片）进行“所见即所得”的编辑。是建站的“模块部署”和“日常内容更新”阶段。

【图2：栏目导航与页面布局编辑视图（信息架构师与前端布局工程师）】

图示：信息架构师与前端布局工程师角色。用于调整网站的整体导航结构，或对页面中特定区域（如“产品分类”下方的“过滤器”区域）进行专业的网格化布局设计。通过可视化导航管理和“PC分栏”的网格化参数设置，实现复杂信息架构和专业响应式布局。

适用行业与场景

行业/企业类型	典型使用场景	核心价值
生鲜电商、B2C/B2B零售网站	需要清晰的“产品分类”导航和多列网格布局来展示商品目录（如图中“果蔬鲜花、肉禽肉类、海鲜水产、休闲食品、粮油调味、冲调茗茶、更多产品”），并提供便捷的“产品详情”、“商城页面”模块	清晰商品分类与展示，提升购物体验与转化
B2B产品目录与企业黄页	需要多级“企业目录”、“公司目录”导航，并用网格化的分栏布局清晰地展示企业列表、产品列表或服务项目	结构化信息展示，便于用户查找与筛选
内容门户、资讯网站、博客	需要管理复杂的文章或内容栏目结构，并用专业的多栏布局（如一行3栏）在首页或列表页展示不同类别的最新内容	复杂栏目管理与专业内容排版
拥有多品类、需清晰分类的展示型网站	如图中的“物理过滤器、化学过滤器、空气净化、饮水处理、更多产品”分类，适用于工业品、电子产品、解决方案等需要清晰分类和专业展示的场景	专业的产品/方案分类展示

对比优势

可视化的多级导航架构管理

“栏目”设置以清晰的树状层级结构展示导航菜单，用户能直观看到并调整“首页>企业目录>...”的层级关系，操作远比在文本框中输入和记忆层级符号更直观、更易管理。

引入专业网格系统进行布局控制

通过“PC分栏”的“3,3,3,3”等参数，让非前端开发的用户也能轻松创建出专业、对齐、比例协调的多列网格布局，这是实现精美排版和响应式设计的基础。

清晰的功能引导，降低学习成本

明确提示“按钮可在组件中添加，编辑中设置样式”，清晰区分“组件添加”与“样式编辑”的场所，避免了用户因找不到功能而产生的困惑，降低了学习成本。

“结构”与“内容”编辑逻辑分离

“栏目”管网站骨架（导航结构），“模块”管页面血肉（内容区块）。逻辑清晰，用户修改导航名称时不会误删页面内容，调整页面内容时也不会破坏导航结构，权责分明。

标准操作流程（以优化生鲜商城“产品分类”页为例）

1

可视化调整网站主导航结构

在编辑器中切换到“编辑”标签页的“栏目”设置。在栏目列表中将默认导航修改为业务所需的“首页、全部商品、蔬菜水果、肉禽蛋品、海鲜水产、酒水饮料、当季热卖、我的订单”，并可尝试在“全部商品”下添加二级栏目。

2

进入目标页面并调整布局分栏

进入“产品分类”页面的编辑状态。找到展示商品分类区块的模块，点击选中它。在左侧“编辑”面板中找到“PC分”设置，修改参数以调整每行显示的分类数量（如从“3,3,3,3”改为“2,2,2,2,2,2”以显示6个）。

3

美化分栏区块的视觉样式

在“分栏信息”设置中，可以为每个分类区块（分栏）单独设置不同的“内容背景”颜色或轻微背景图，使其在视觉上更突出，提升页面的层次感和美观度。

4

为分类添加交互按钮（遵循提示）

如需为分类添加“查看更多”按钮，则在“组件”标签页中找到“按钮”组件，拖拽到“更多产品”等位置。然后选中该按钮，在“编辑”标签页中，设置按钮的文字、颜色、大小等样式。

5

更新页面内容并预览发布

在右侧预览区，直接点击“果蔬鲜花”、“肉禽肉类”等图片和文字，将其替换为最新的商品图和类目名称。保存修改，切换到“手机版”预览检查适配情况，确认无误后发布页面。