線上支援

WordPress 藝廊燈箱效果

原始效果由 Codrops 所開發，Hellowp 整合燈箱套件 SimpleLightbox。

網站的圖片如果要能夠吸引訪客的注意力，除了圖片素材拍攝優秀外，還可以透過特別的版面設計來增加視覺上的趣味性。這次整合的藝廊效果，採用不規則的排列方式來創造視覺上的流動感，並搭配圖片轉場的時間差，讓動畫效果更有層次與節奏，方便操作的燈箱功能更能逐一瀏覽圖片細節，非常適合用在展示作品或是攝影集上。

範例展示

注意事項

1、此特效運用到最新的 CSS 屬性 Grid，IE 以及較舊版本的瀏覽器不支援

2、手機版無法完整呈現版面，不推薦以手持裝置瀏覽為主的網站

3、圖片盡可能壓縮容量，減少載入時間

材料準備

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

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

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

3、下載壓縮檔解壓縮後取得 Divi 版型檔案(.json)

如果你沒有 Divi 佈景主題，可以參考我們的 WordPress 架站解決方案 Hellowp，或是下載我們修改好的前端原始碼，手動整合至你的網站。

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

使用步驟如下：

Topic 1

匯入 Divi 版型

首先先新增一個頁面或文章，並點選「使用 Divi 編輯器」切換為 Divi 編輯器。

點選「使用 Divi 編輯器」

使用匯入/匯出功能上傳檔案

選擇匯入，把剛剛在材料準備第三點下載的 .json 檔上傳。匯入完成會自動重新整理頁面

上傳完成後就能看到三個區塊，分別是 CSS、gallery 相關以及 JS

頭尾的 CSS 與 JS 主要就是控制這個特效的呈現與互動方式，如果熟悉這兩種語言的朋友可以點進去看看做進一步修改。而 gallery1、2、3 就是三段輪播的內容，包含圖片、主標題、次標題與說明文字，其對應關係可以參考下圖：

內容區塊與藝廊元素對應名稱

接下來就是進行圖片的上傳。

Topic 2

上傳藝廊

圖片的部份是用 WordPress 內建的藝廊功能所製作，在挑選圖片的操作上可以比較直覺且快速。點開 gallery1 的小工具，可以在編輯器內發現藝廊的還沒有半張照片，點選編輯，選擇圖片 13 張（不是麻將）。

點選 gallery1 小工具設定

選擇編輯藝廊來加入新的圖片

隨機排序預設為打勾，這樣可以在頁面每次載入時，都有不同的呈現圖片順序

儲存藝廊更新結果

用一樣的方式來編輯 gallery2 與 gallery3，如果不需要的話就點擊最外層的列來進行刪除，萬一後悔刪除了，可以用 ctrl+z 恢復上一步驟，或是用 gallery1 來複製生成即可。而每一組輪播之間的順序是可以隨意更換的。

Topic 3

更換內容

假使我們底色不想用黑的，可以在最外層的列來進行設定，這邊的背景色只支援不透明的顏色，使用圖片或漸層都會無法正確產生效果。

最外層區塊控制背景顏色

背景設定有四種方式，在這邊主要使用純色系

選擇顏色，不透明度維持 100%

修改 gallery-title

主標題建議使用英文，中文醜到完全不能看。盡量使用字數不要太多的單字，五個字母以內效果較佳。如要換行，請使用強制換行 shift + Enter，標題才不會跑版

可以把標題換顏色，盡量以明度不要太高的色系為主，不然版面會太花俏，而切換輪播的按鈕顏色，會跟著主標題顏色來變換

接下來用一樣的方法來修改 gallery-sub-title 以及 gallery-text，逐一調整後就能完成藝廊燈箱效果

小結

本來這個效果是希望可以開發成外掛讓不是使用 Divi 的朋友也能套用，但寫外掛的時間成本比較高，而且也不確定大家是否會需要，所以就還是先用 Divi 來做示範，如果有被許願的話再來考慮設計成外掛了XD。另外如果你在網路上也有看到不錯且實用的特效，都歡迎在下面留言給我們，我們有時間的話也能整理出方便 WordPress 使用的版本，希望能幫到更多朋友！