aipage网站自定义动态列表样式教程

网站提供了内置的文章、产品、商品等动态列表版块及元素,可以修改样式设置来进行样式微调,如果内置效果无法满足需求应该怎么办呢?不用急,使用自由列表可以轻松定制个性化的动态列表效果。

自由列表可以使用拖拽来实时调整动态列表的样式,并且可以增加元素来对列表进行装饰。例如设计如下一个文章列表:

aipage网站自定义动态列表样式教程插图

首先需要拖拽一个示例自由列表元素到页面中,自由列表默认绑定的是文章,您可以在设置里绑定产品、商品、预约、文件等动态数据

aipage网站自定义动态列表样式教程插图1

自由列表里的元素例如文章标题、详情等就是用来设计动态数据列表项的,除此之外您也可以添加其他普通元素例如容器、图片、图形、线条等美化列表设计。

aipage网站自定义动态列表样式教程插图2

自由列表拖入到页面中后有个默认的示例设计,因为需要设计上图的日历样式,因此需要调整列表项的设计。选中自由列表列表项里面的元素,例如需要删除列表主图,复制2个日期元素,然后移动跳转标题和简介的位置等,另外还需要添加一个线条元素到列表项中以完善设计:

aipage网站自定义动态列表样式教程插图3

为了实现日期效果,需要对两个日期元素进行样式设置,选择对应的日期格式化设置,并且对样式设置中对字体和颜色进行调整:

aipage网站自定义动态列表样式教程插图4

另外需要在自由列表整体样式和设置中调整行间距和列表项背景色等,稍微调整之后就完成个性化的文章列表设计啦!

aipage网站自定义动态列表样式教程插图5

默认自由列表是纵向的动态列表,有没有横向轮播模式的列表项呢?只需要在自由列表整体设置中将布局模式设置成轮播即可:

aipage网站自定义动态列表样式教程插图6

设置成轮播模式后,默认只有一列,您可以先编辑好轮播项元素位置和样式,再将列表设置多列,稍加调整便可以实现类似横向自动轮播自由列表

aipage网站自定义动态列表样式教程插图7自由列表还有一些高级功能,例如搭配元素的显示条件来设计更加丰富的列表效果,赶紧试试吧~

给TA打赏
共{{data.count}}人
人已打赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
在线客服
主机帮
我们将24小时内回复。
2024-10-30 22:31:06
您好,有任何疑问请与我们联系!
您的工单我们已经收到,我们将会尽快跟您联系!
[QQ客服]
176363189
当幸福来敲门
[小黄]
17307799197
[企业邮箱]
sudu@yunjiasu.cc
取消

选择聊天工具: