今天看一個朋友的網站,發現他在網站的各個頁面上用了大量的文字類型圖片。
干脆這篇文章分享下這件事,并說說自己的一些解決方案。

比如上面這個區塊,在網站頁面的布局上屬于是非常常見了,圖文搭配的方式不僅看起來非常美觀,還能通過視覺對比來傳遞重要的信息。
對于這種區塊,我的常規做法是先去設置一張圖片背景,然后再在圖片背景的基礎上做懸浮文字。
目前市面上的主流編輯器都支持這種做法了,處理起來并沒有什么難度。
但是我今天看到的一個案例,做法卻恰恰相反。
在那個網站上,只要是這種圖文搭配的區塊,全部都使用圖片的方式去做。
可能對方的處理邏輯也簡單,就是在背景圖片的基礎上加上具體的文案,使用 PS 這類編輯軟件做一下便可以了。
最終做出來的效果確實不錯,但是這種做法存在幾個問題。
一是頁面 SEO 的問題,這種圖片文字大概率是不會被搜索引擎識別的。雖然現在已經有了「Google Lens」這樣的搜索技術,但是優化效果肯定是沒有純文本的方式好。
二是這種布局方式,在桌面端大屏幕上看起來可能很好,但是當用戶在其他小型設備上訪問時,其布局可能會不協調。
而要解決這種不協調的問題,可能就需要針對不同的屏幕尺寸設置不同的圖片尺寸了,于是網站運營的工作量無形中被放大了。
所以如果你既想要這種圖片搭配的色彩交互效果,又想要極佳的頁面內容優化,比較好的處理方式主要有兩種。
最簡單的方式還是用可視化編輯器去慢慢設計。
像現在主流的 Elementor 編輯器,去做類似上面那種圖文交互模塊,可以說是非常簡單了。
唯一有點要求的,就是需要你熟練掌握編輯器的常規使用,只要做到這點就基本沒什么問題了。
除了這種編輯器方案之外,還可以借助 AI 的能力去幫我們設計這種圖文模板。
做法也很簡單,就是將我們的效果圖上傳給 AI 模型,然后讓其輸出頁面代碼。
一般我們經常使用的 WordPress 網站,就是 HTML 的前端代碼了。
具體的代碼格式可以結合具體的編輯器來確定,比如 WordPress 默認的古騰堡編輯器,一般會在 HTML 前端代碼的基礎上加上注釋。
提前把這些輸出標準約束好,剩下就是讓 AI 按照要求干活了。
如果你的頁面布局設計非常復雜,或者交互細節點比較多,可以用 AI 這種方式試試。

文章為作者獨立觀點,不代表DLZ123立場。如有侵權,請聯系我們。( 版權為作者所有,如需轉載,請聯系作者 )
網站運營至今,離不開小伙伴們的支持。 為了給小伙伴們提供一個互相交流的平臺和資源的對接,特地開通了獨立站交流群。
群里有不少運營大神,不時會分享一些運營技巧,更有一些資源收藏愛好者不時分享一些優質的學習資料。
現在可以掃碼進群,備注【加群】。 ( 群完全免費,不廣告不賣課!)
