设计商品长描述的版面

随意分享一下商品长描述版面设计的问题。

一般对于电商网站,我的技术栈是 WordPress 加 WooCommerce,并搭配好对应的收款插件。

至于网站的页面编辑器,我一般会使用 Elementor 这种可视化编辑器来做网站的页面设计。

而具体的商品详情页则使用 WordPress 自带的古藤堡编辑器来进行处理。

我觉得这种配置的好处就是进可攻退可守,既可以享受 Elementor 带来的页面编辑便利性,又能享受古藤堡编辑器的轻量化。

设计商品长描述的版面-1

比如这个配置,我是只设置了在页面编辑时启用 Elementor 编辑器,但在产品详情页编辑上默认不使用。

所以为了在商品详情页面上做出布局合理的商品长描述,就需要另辟蹊径了。

其实我自己的要求很简单,简洁、美观即可,不需要多么酷炫的功能,合理的表达出这款产品的卖点就行了。

所以在这个基础上,我使用了古藤堡编辑器里面的区块概念,还设计了一个基础的长描述模板。

设计商品长描述的版面-2

像这种左文右图或者左图右文的模式,是我最常使用的。

仅仅只是因为处理起来足够简单,且一个区块展示一个卖点,并配上一张与之匹配的图片就可以。

设计商品长描述的版面-3

当然,如果你愿意的话,也可以在长描述的底部去加上常见问题或者用户关切这样的内容区块,来强化内容深度。

但说实话,这个部分的内容需要针对具体产品进行输出,在内容创建上并不是一件容易的事。

像上面图片中展示的这些长描述详情,都是可以基于古藤堡编辑器做出来的,页面足够简单,且信息要素非常清晰。

至于制作方法,如果你能熟练掌握古藤堡编辑器的相关操作,做出来就并不是很难。

但如果你也像我一样对古藤堡编辑器的使用并不熟悉,那此时就不妨使用 AI 来帮助我们做对应的区块设计。

具体过程非常简单,直接跟 AI 模型交代我们的技术栈背景,并把我们想要的页面效果传递过去。

那后续便可以基于我们的需求,持续与 AI 模型进行对话沟通,直至让 AI 输出最终的代码版本。

其实古藤堡区块模板就是一份很结构清晰的 JSON 数据,那有了这份数据之后,我们直接导入后台,便可以在后续创建新产品时,不停地复用这份模板数据。

设计商品长描述的版面-4

对这块内容,兴趣的小伙伴可以深度学习一下 WordPress 里面的 My Patterns 功能。

操作原理并不复杂,多实操几遍基本就明了了。

滚动至顶部