aipage系统详情页模板设计

详情页模板决定了文章、产品、商品、预约等具体展示样式,系统支持自定义详情模板,最多支持每个分类显示对应的独立的样式效果。详情模板包含内置版块和自由设计两种

1 内置详情版块

编辑器左上角页面管理切换页面系统页面 -> 详情模板进入对应的系统详情页,以产品详情模板为例,系统中内置了十几种常见的详情版块效果,可以通过切换设计来快速更换

aipage系统详情页模板设计插图

详情版块支持通过版块设置来对界面数据和样式进行微调,基本上内置版块的风格比较固定,可改造程度低。

2 自由设计详情版块

自由设计模式则允许对详情版块进行高自由度灵活设计,首先将详情版块切换成空白详情自由设计版块(详情版块不允许直接删除,否则系统页面可能因为缺失必要版块而无法正常展示数据)。切换成空白模式后,则可以从左侧拖拽元素自由设计,其中左侧的专有元素表示只能在详情页中工作的详情元素,例如详情标题、详情内容、详情主图等,还包括不同类型的自定义参数展示。

因为详情内容是动态数据,不同的文章产品内容高度不一样,实际预览时自由模式设计的详情页内容高度将自动撑开,详情内容下方的元素将自动下移。

aipage系统详情页模板设计插图1

aipage系统详情页模板设计插图2

如何设计带分隔线条的详情效果呢?正常线条应该跟随内容高度自动变化。这种情况下只需要将详情内容放入一个带边框的容器里即可,详情内容的增高将自动撑开外围容器,容器的边框就形成了自动高度的分隔线效果。

aipage系统详情页模板设计插图3

详情页也可以自由定制边栏效果,例如添加垂直菜单元素绑定系统分类就可以在详情页添加带站点分类的边栏

aipage系统详情页模板设计插图4

详情页的动态数据绑定是支持跨版块的,即便是在多个版块里依旧可以自动绑定对应的数据,因此可以搭配生成更多的效果,例如详情弹框里的元素同样可以拖拽详情标题等元素进去,这样点击打开弹框的时候可以看到动态的内容。

部分内置详情版块支持锚点菜单导航效果,如果是自由设计模式,添加菜单到想要的位置,然后在菜单的点击交互里设置锚点滚动到相应的元素或者版块即可。

原创文章,作者:jamestackk,如若转载,请注明出处:https://blog.ytso.com/tech/courses/249968.html

(0)
上一篇 2022年4月23日 14:10
下一篇 2022年4月23日 14:13

相关推荐

发表回复

登录后才能评论