操作碰到困難?試試搜尋功能吧!

WordPress 圖片遮罩顯示內容


此範例由 Codyhouse 所開發

 

要讓使用者願意瀏覽你的網站除了標題與內容要能豐富外,在呈現的方式上也可以透過精心的設計來吸引使用者注意。今天介紹的效果使是用不規則圖片遮罩的原理,也就是不完整顯示內容的主視覺圖像,而是透過特別的幾何圖形來當做按鈕,在點擊後才會以轉場的方式來呈現完整內容。

 

範例展示

 

材料準備

要能在你的網站中運用此效果需準備以下材料:

1、一個可以上傳佈景主題或外掛的 WordPress 網站

2、使用 Divi 佈景主題或 Divi Builder 外掛

3、要使用的主視覺圖片、遮罩圖片與文字,主視覺圖片最好大於 1600px,遮罩圖片需製作像這樣的正方形透明 png 圖檔,尺寸為 1280 x 1280px。

如果你沒有 Divi 佈景主題,可以參考我們的 WordPress 架站解決方案 Hellowp,或是下載 Codyhouse 提供的原始碼,手動整合至你的網站。

而我們已經把原始碼整合到 Divi 的編輯器中,所以只要匯入我們所產出的檔案,就可以直接在資源庫中使用這個版型。

 

目標效果

我們希望用它來呈現官方網站內關於我們的頁面內容,以圖標當做遮罩,背景顯示企業形象主視覺圖片:

1、滑鼠停留時遮罩會稍微放大

2、點擊遮罩時會放大並進行全螢幕轉場

3、可關閉內文回到列表

 

STEP1

匯入資源庫

首先,先下載我們製作好的 Divi 資源庫版面(約 3.5MB),下載完成解壓縮後,使用 Divi 提供的功能把它匯入到你的網站之中。

下載版面

 

確保你正在使用的是 Divi 佈景主題或外掛,才能看到 Divi 資源庫的選項,點選上方 Import & Export,進入匯入介面

 

萬一發生無法上傳的錯誤,可能是 php.ini 中的 upload_max_filesize 的容量太少,一般預設是 2MB,請聯絡你的主機商將其升至 4MB 或 8MB

 

等待上傳

 

完成版面匯入

 

STEP2

建立新頁面套用版面

成功把版面匯入資源庫之後,接下來我們用頁面來新增一頁使用此版面的網頁內容。

 

新增一頁並切換為 Divi 編輯器,並從資源庫中載入

 

把現成版面載入至頁面中

 

載入後立即可以在畫面中看到小工具,頭尾的 CSS 與 JS 是控制頁面效果的程式,無特殊需求不用編輯它,中間的單元一、二就是我們要置換的內容

 

STEP3

替換主視覺圖像、遮罩圖、更換顏色

 

點選漢飽選單進行單元一的編輯

 

如果點進去是出現原始碼的內容,請先切換為預覽模式,內容的順序為:標題、主視覺圖像、遮罩圖像、內文,這順序為了對應程式結構所以是固定的,可能的話不要變動這順序

 

記得使用鍵盤上的 delete 鍵刪除

 

游標位置要特別注意,不然順序會發生錯誤

 

上傳圖檔,連結不需設定

 

更換遮罩圖像,一樣用 delete 鍵刪除

 

上傳圖檔,連結需設定為媒體檔案

 

內容可隨意插入圖片、改變文字大小、段落,此處沒有任何限制

 

捲到最下方進行背景顏色的設定,背景顏色要與遮罩圖像的背景顏色相同

 

建議用繪圖軟體的吸管工具取得色碼後,再行貼入最為準確

 

設置好單元一之後,單元二就是比照辦理置換內容,最方便的是可以用拖曳的方式去改變每個單元之間的排列順序,譬如說把單元二移到單元一之前只要一秒就能搞定!如果需要增加更多單元,可以用複製的方式來新增其它單元,但 Divi 有時會發生無法複製小工具的情況,這時候可以新增文字小工具,然後把現有單元的內容貼過去,最後編輯好後,記得要將邊距與內編距設為 0,才不會有多餘的空白。

 

移除原本文字小工具間多餘的空白

 

小結

第一次將比較特別的前端互動效果整合進 Divi 主題之中,未來我們會多多整合類似這樣的特效。但為了符合 Divi 的設計架構,在設定上有些地方還是不甚人性化,就請各位朋友在使用時還請多多注意順序與游標位置,以避免內容跑版。

當我們在整合時候也有考慮製作不須依賴 Divi 的版本,而這樣的呈現方式也滿適合文章類的內容,如果大家喜歡的話可以在下方留下你的想法,有可能的話我們再來把這效果開發成免費的外掛,只要啟用外掛後就可以直接將最新文章列表切換成這樣的形式,讓大家在使用上能更為方便易用。
 

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

 

WordPress 教學