我绝大部分的网站都是用 WordPress 这套系统搭建的，所以在工作中也会尝试着使用 AI 为这套生态服务。
最常见的一个场景就是网站页面的设计。
拿产品定制页面的搭建来举例子，因为这类页面涉及到的元素比较多，那大多数情况下我都会使用 Elementor 这类页面编辑器来处理。
比如上面这个 Hero 内容区，我可以将它放在整个页面的第一屏，用于呈现产品的概览类信息。
做完这个区块之后，紧接着就需要按照同样的范式去做第二、第三、第四个区块。
采用这种一个区块叠加一个区块的模式，来把整个页面的信息要素陈列出来，力求做到元素完善，且排版高效简洁。
但这种模式我觉得有一个最明显的弊端，太多区块叠加在一起之后，会把整个页面拉得非常长。
类似产品定制这样的功能页面，大多数情况下都会部署 9~10 个信息区块，这也就意味着用户需要花很长时间才能浏览到页面底部。
而过程中有些区块有点“言之无物弃之可惜”的味道，纯粹用一个区块来放置这些信息就觉得有点浪费空间，但完全将其删除掉又觉得不合适。
那从数据层面出发，就需要找到一个比较是折中的解决方案，既能把所有的信息要素都部署上去，又能保证访客能很方便的浏览完这些信息。
有兴趣的朋友可以统计自己网站的这类数据，谷歌追踪的报表里，将落地页的访客数与滚动事件数拿出来对比下。
访客数表示的是有多少用户来到了这个页面，而滚动事件数则表示有多少用户滑动到了页面底部。
如此一对比，就知道到底要不要优化了。
注：我自己网站上有一些比较长的页面，比较少能有用户会滚动到底部完整浏览所有信息。
所以基于上面的数据逻辑，我的优化方法就比较简单，尽可能的将文案内容压缩起来，让用户能在一两屏的范围内浏览完数据全貌。
像上面这张截图便是我在 AI 帮助下做出来的解决方案。
直接用手 HTML 前端代码来写这种手风琴选项卡，再把每一份详情数据放置到具体的选项卡中。
可以在其中放入产品细节文案，也可以在其中放入产品的外部参考资料链接，甚至还可以在其中放入产品信息配置表格。
要做到这些，完全不用像过去一样安装插件、调试页面配置。
直接告诉 AI 你想要什么效果，让它帮你输出对应的 HTML 代码，并把对应的内容嵌入到代码中去。
做完这一切，再去到 Elementor 编辑器页面，为容器添加一个 HTML Code 的组件，把 AI 处理好的代码粘贴进去就可以了。
这种方式我最近实操了比较长时间，使用起来没什么太大的障碍，且整体的页面效果与页面的响应速度要比之前好很多。
而且你也根本不用担心你不会 HTML 代码，直接把数据告诉 AI，把相应的样式告诉 AI，让 AI 帮你处理好就可以了。
不要有什么顾虑，把 AI 当做一个任劳任怨的打工人就好。
