功能简介:魔方导航编辑
“魔方导航”是小程序或网站首页的核心视觉与功能入口模块,通常由一系列带图标的圆形或方形按钮(即“魔方”)组成,每个按钮代表一个关键的商品分类或功能(如“超市便利”、“VIP会员”)。本功能允许您无需修改代码,直接在可视化的设计后台,自由地更换这些导航图标的图片、修改其标题文字、调整排列布局与视觉样式。它彻底解决了首页导航区域固化、修改依赖技术、视觉风格难以统一调整的痛点,让运营人员也能像搭积木一样,随时根据营销活动或业务变化,快速更新首页的“门面”与“路标”。
核心作用:让您能像设计师一样,自由地自定义首页核心导航区域的每一个元素(图标、文字、布局、颜色),使其始终与品牌活动和用户需求保持同步。
一句话描述:进入站点设计器,找到并编辑“魔方导航”组件,即可在弹窗中逐一更换图标、修改标题,并在侧边栏调整整体布局与样式。
第一步:进入站点设计器,定位目标页面
1. 登录您的管理后台,在左侧导航菜单中找到并进入 【企业】 > 【站点发布】 >【站点设计】 。
2. 在“站点设计”的模板列表中,找到您当前正在使用的商城模板(例如名为“[xxxx]商城”的模板),点击其右侧的 【站点设计】 按钮。这将打开一个所见即所得的可视化编辑界面,左侧是模拟的手机屏幕,右侧是设置面板。

第二步:找到并选中“魔方导航”组件
1. 在左侧的手机预览图中,您会看到首页上排列整齐的彩色圆形导航图标区域,这就是“魔方导航”。
2. 将鼠标移动到这个导航区域上方。此时,该区域会被一个半透明的蓝色边框高亮显示,并出现 【编辑】 和 【删除】 的浮动按钮。
3. 点击出现的 【编辑】 按钮,右侧的设置面板会立即切换为该“魔方导航”组件的配置选项。

第三步:编辑单个导航项(图标与标题)
这是修改具体某个图标(如“超市便利”)的关键步骤。
1. 在右侧面板的 【常用】 选项卡下,您会看到一个“导航”列表,里面列出了当前所有的导航项(如超市便利、新鲜果蔬等)。
2. 在您想修改的导航项(例如“超市便利”)右侧,点击蓝色的 【编辑】 按钮。
3. 系统会弹出一个名为“图集列表”的编辑窗口。在这个窗口中:
● 更换图标:将鼠标移动到您想替换的旧图标图片上,图片右上角会出现“更换”的提示。点击后,可以从您的电脑中上传新的图标图片。
● 修改标题:在选中图片的下方,找到“标题”输入框(例如当前显示为“超市便利”),直接修改为您需要的新文字即可。
4. 完成一个图标的修改后,可以继续编辑列表中的其他导航项。所有修改确认无误,点击弹窗底部的蓝色 【确定】 按钮保存。


第四步:调整整体布局与新增导航
修改完具体内容后,您可以在右侧面板的 【常用】 选项卡下方调整整个组件的排列方式。
● 修改布局:您可以设置“列数”(如一排显示4个图标)、“超出轮播”(当图标超过2行时自动轮播显示)等。
● 新增导航:点击“添加导航”按钮,可以往列表中添加一个全新的导航图标和标题。
● 删除导航:在每个导航项右侧点击 【删除】 按钮,可移除不需要的入口。

第五步:美化视觉样式(字体、颜色、背景等)
想让导航看起来更美观?可以切换到 【样式】 选项卡进行深度定制。
● 内容样式:可以设置标题的字体、加粗、字号、颜色等。
● 组件样式:可以调整图标之间的“组件间距”、整个导航区域的“圆角”、“背景色”与“透明度”,甚至添加“边框”。
● 动效:可以为图标的显示设置入场动画,如“淡入”、“飞入”、“放大”等,让页面更生动。

第六步:保存并预览
完成所有设置后,务必点击编辑器顶部的蓝色 【保存】 按钮。保存成功后,您可以点击旁边的 【预览】 按钮,用手机扫描二维码,实时查看修改后导航在真实手机上的显示效果。

小贴士:
● 图标设计:为保证最佳视觉效果,上传的图标图片建议尺寸统一,背景干净,风格与您的品牌调性一致。通常使用透明背景的PNG格式效果最佳。
● 标题精炼:导航标题应简短易懂,通常2-4个字为宜,让用户一眼就能理解该入口的作用。
● 善用预览:每次调整布局或样式后,都建议使用“预览”功能在手机上查看实际效果,确保在不同尺寸屏幕下都显示正常、美观。
● 顺序调整:在“图集列表”弹窗中,您可以直接用鼠标拖拽图片来调整各个导航图标在前台显示的先后顺序。