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 的版本，而這樣的呈現方式也滿適合文章類的內容，如果大家喜歡的話可以在下方留下你的想法，有可能的話我們再來把這效果開發成免費的外掛，只要啟用外掛後就可以直接將最新文章列表切換成這樣的形式，讓大家在使用上能更為方便易用。
