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

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 使用的版本,希望能幫到更多朋友!

 

 

 

2 則留言

發佈留言

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

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

 

WordPress 教學