今天看一個朋友的網站，發現他在網站的各個頁面上用了大量的文字類型圖片。

干脆這篇文章分享下這件事，并說說自己的一些解決方案。

比如上面這個區塊，在網站頁面的布局上屬于是非常常見了，圖文搭配的方式不僅看起來非常美觀，還能通過視覺對比來傳遞重要的信息。

對于這種區塊，我的常規做法是先去設置一張圖片背景，然后再在圖片背景的基礎上做懸浮文字。

目前市面上的主流編輯器都支持這種做法了，處理起來并沒有什么難度。

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

在那個網站上，只要是這種圖文搭配的區塊，全部都使用圖片的方式去做。

可能對方的處理邏輯也簡單，就是在背景圖片的基礎上加上具體的文案，使用 PS 這類編輯軟件做一下便可以了。

最終做出來的效果確實不錯，但是這種做法存在幾個問題。

一是頁面 SEO 的問題，這種圖片文字大概率是不會被搜索引擎識別的。雖然現在已經有了「Google Lens」這樣的搜索技術，但是優化效果肯定是沒有純文本的方式好。

二是這種布局方式，在桌面端大屏幕上看起來可能很好，但是當用戶在其他小型設備上訪問時，其布局可能會不協調。

而要解決這種不協調的問題，可能就需要針對不同的屏幕尺寸設置不同的圖片尺寸了，于是網站運營的工作量無形中被放大了。

所以如果你既想要這種圖片搭配的色彩交互效果，又想要極佳的頁面內容優化，比較好的處理方式主要有兩種。

最簡單的方式還是用可視化編輯器去慢慢設計。

像現在主流的 Elementor 編輯器，去做類似上面那種圖文交互模塊，可以說是非常簡單了。

唯一有點要求的，就是需要你熟練掌握編輯器的常規使用，只要做到這點就基本沒什么問題了。

除了這種編輯器方案之外，還可以借助 AI 的能力去幫我們設計這種圖文模板。

做法也很簡單，就是將我們的效果圖上傳給 AI 模型，然后讓其輸出頁面代碼。

一般我們經常使用的 WordPress 網站，就是 HTML 的前端代碼了。

具體的代碼格式可以結合具體的編輯器來確定，比如 WordPress 默認的古騰堡編輯器，一般會在 HTML 前端代碼的基礎上加上注釋。

提前把這些輸出標準約束好，剩下就是讓 AI 按照要求干活了。

如果你的頁面布局設計非常復雜，或者交互細節點比較多，可以用 AI 這種方式試試。