文字图片的问题

今天看一个朋友的网站，发现他在网站的各个页面上用了大量的文字类型图片。

干脆这篇文章分享下这件事，并说说自己的一些解决方案。

比如上面这个区块，在网站页面的布局上属于是非常常见了，图文搭配的方式不仅看起来非常美观，还能通过视觉对比来传递重要的信息。

对于这种区块，我的常规做法是先去设置一张图片背景，然后再在图片背景的基础上做悬浮文字。

目前市面上的主流编辑器都支持这种做法了，处理起来并没有什么难度。

但是我今天看到的一个案例，做法却恰恰相反。

在那个网站上，只要是这种图文搭配的区块，全部都使用图片的方式去做。

可能对方的处理逻辑也简单，就是在背景图片的基础上加上具体的文案，使用 PS 这类编辑软件做一下便可以了。

最终做出来的效果确实不错，但是这种做法存在几个问题。

一是页面 SEO 的问题，这种图片文字大概率是不会被搜索引擎识别的。虽然现在已经有了「Google Lens」这样的搜索技术，但是优化效果肯定是没有纯文本的方式好。

二是这种布局方式，在桌面端大屏幕上看起来可能很好，但是当用户在其他小型设备上访问时，其布局可能会不协调。

而要解决这种不协调的问题，可能就需要针对不同的屏幕尺寸设置不同的图片尺寸了，于是网站运营的工作量无形中被放大了。

所以如果你既想要这种图片搭配的色彩交互效果，又想要极佳的页面内容优化，比较好的处理方式主要有两种。

最简单的方式还是用可视化编辑器去慢慢设计。

像现在主流的 Elementor 编辑器，去做类似上面那种图文交互模块，可以说是非常简单了。

唯一有点要求的，就是需要你熟练掌握编辑器的常规使用，只要做到这点就基本没什么问题了。

除了这种编辑器方案之外，还可以借助 AI 的能力去帮我们设计这种图文模板。

做法也很简单，就是将我们的效果图上传给 AI 模型，然后让其输出页面代码。

一般我们经常使用的 WordPress 网站，就是 HTML 的前端代码了。

具体的代码格式可以结合具体的编辑器来确定，比如 WordPress 默认的古腾堡编辑器，一般会在 HTML 前端代码的基础上加上注释。

提前把这些输出标准约束好，剩下就是让 AI 按照要求干活了。

如果你的页面布局设计非常复杂，或者交互细节点比较多，可以用 AI 这种方式试试。