如何為 WordPress Gutenberg 編輯器加入物件與圖片滑塊?

在設計有足夠預算的 WordPress 網站時的第一首選編輯器非 Elementor Pro 莫屬,他有非常多很完善的網頁元件,可以節省很多時間成本。但如果你像我一樣想要盡可能節省成本的話,你可以來嘗試看看一系列以 Gutenberg 編輯器為母體的擴充外掛,搭配得宜的話其實也不輸於付費版外掛喔!

在這篇我們要介紹的是由 munirkamal 開發的「WordPress Slider Plugin – Block Slider」外掛,他可以在你的頁面中加入不遜於 Elementor 的滑塊元件,且內容不限制於圖片輪播,你還可以為他另外加入其他預設或外掛隨附的擴充元件。

安裝 Block Slider 外掛

這個擴充功能可以直接在 WordPress 內建安裝外掛的搜尋結果中以「Block Slider」找到,他因為是 Gutenberg 古騰堡編輯器的擴充,所以網站必須啟用 Gutenberg。

wordpress slider plugin block slider 00

加入 Block Slider 滑塊

接下來我們來說明一下這個外掛的使用方式。
先隨意新增一個文章或頁面,再點選加號按鈕並建立一個 Block Slider 區塊。

區塊建立完成後預設會有三個範本供你選擇,你可以點選範本建立,或者按下「Start Blank」新增一個空白的 Slider 區塊。

wordpress slider plugin block slider 01
wordpress slider plugin block slider 02

加入客製化功能至 Slider

這邊就是我前面說的功能,你能在 Slider 中加入預設或其他外掛產生的區塊,比如說我能在這張圖中加入 Advanced Gutenberg Blocks 外掛的 Notice 區塊,能讓他跟隨滑塊一起輪播。

當然,如果你只單純想要放圖片也是可以,只要在 Block Slider 中加入系統預設的「封面」區塊,再將上面的文字與按鈕移除就能達成相同效果。

wordpress slider plugin block slider 03

預覽製作結果

最後產生出來的頁面大概是長這樣,只不過我沒有做更多的版面調整所以沒有很好看,如果多花點時間來與 Kadence Blocks 搭配進行調整,整個配置會更完美。

wordpress slider plugin block slider 04
訂閱
Notify of
guest
0 留言
Inline Feedbacks
檢視所有留言
0
Would love your thoughts, please comment.x
()
x