主题
富文本详情(切片图无缝)
一句话
两种模式:可视化(像 Word 一样编辑)和 HTML 源码(贴整段代码)。 切片长图之间不会有缝,这个已经处理好了。
它在哪
商品编辑 → 详情与 SEO → 商品详情
单页 CMS、邮件模板用的也是同一个编辑器。
两种模式
| 模式 | 什么时候用 |
|---|---|
| 可视化 | 日常写详情:插图、加粗、列表、表格 |
| HTML 源码 | 整段贴进来的模板(带 <style>、<script> 的落地页) |
贴模板一定要用源码模式
可视化编辑器会把 HTML 重新解析再序列化一遍 —— <script>、<style>、表格属性统统被吃掉,而且是静默的。 你点开看一眼、保存一下,模板就毁了。
系统会看内容像不像模板(含 <style>/<script>/<table> 之类), 像的话初始就给源码模式。
右上角可以切换。切换前系统会保住内容,不会丢。
插图的三种方式
- 工具栏的「图片空间」 —— 打开图片空间,可以一次挑多张,按勾选顺序插入
- 直接粘贴 —— 截图后
Ctrl + V,自动上传并插到光标处 - 拖进来 —— 从文件夹拖一张图到编辑区
都是插到光标处,不是末尾
追加到末尾的话,想在两段文字中间放图还得自己剪切粘贴,等于没做。
⭐ 切片长图之间的缝
这是电商详情页最常见的一个视觉事故
详情通常是一整张长图切成好几段上传。如果每两张之间露出一条白缝, 整个画面就被"撕"成一段段。
这个已经处理好了 —— 系统会让"整段只有一张图"的段落没有外边距, 所以切片是严丝合缝的。文字和图之间的间距仍然保留。
你需要配合的:
- 切片图宽度要一致(比如都是 750px),不然会左右错开
- 不要给这些图加圆角(自定义 CSS 里也别加)—— 接缝处会露出四个缺口
邮件里也处理了
邮件客户端不支持 :has() 选择器,很多连 <style> 都剥掉 —— 所以发信前系统会把这些段落改写成内联样式。你不用做任何事。
图片的 alt 文字
系统会自动用商品名填 alt。
为什么这很重要
电商详情页的实际形态就是一摞图,而搜索引擎读不到图里的字。
alt 全空的话,这一页可索引的文本几乎只剩标题和副标题,正文对 Google 是一片空白。
自己写 HTML 的话记得带 alt。
全屏编辑
工具栏最右边有全屏按钮。详情内容长的时候很有用 —— 编辑区太矮, 插一张图要滚半天才看得到上一张,根本判断不了整体排版。
常见问题
编辑器一直显示"加载中"
刷新页面。如果反复出现,浏览器控制台(F12)里会有具体报错。
切换到源码模式再切回来,格式变了
正常的。 可视化编辑器会把 HTML 规范化一遍。 如果你的内容是贴进来的模板,就一直待在源码模式,别来回切。
图片之间还是有缝
- 确认那些图是各自独立的一张,中间没有夹空段落(源码模式下看一眼, 应该是连着的
<p><img ...></p>) - 自定义 CSS 里有没有给
img加margin或border-radius
详情页在手机上左右能滑动
详情里有比屏幕宽的东西 —— 通常是一张固定宽度的表格,或者写死了 width: 900px 的图。 源码模式里搜一下 width: 找出来。
贴进来的落地页,按钮没反应 / 倒计时不走
<script> 在 HTML 里不会自动执行(浏览器规范如此)。 系统对单页 CMS 做了处理(会重新创建 script 节点执行)。
如果是商品详情里贴的脚本,建议改成用单页 CMS做落地页。