iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
自我挑戰組

WordPress 區塊編輯器與區塊套件組合外掛【新手村】系列 第 12

12 | WordPress 圖庫區塊 Gallery Block

https://ithelp.ithome.com.tw/upload/images/20210927/20116357i4gmTWFePQ.jpg
這次討論的《圖庫區塊》應用,圖庫區塊可讓你輕鬆地新增多張相片,並以引人入勝的方式自動排列相片。是《圖片區塊》的延伸使用方式,當中有大量相同的設定,請確保你已經充份瞭解圖片區塊的特性:什麼是《圖片區塊》?


你也可以在新段落區塊中輸入「/圖庫」符號並按下確認

https://ithelp.ithome.com.tw/upload/images/20210927/20116357pgkKT8jz5F.jpg


按一下「+」圖示,將圖庫區塊新增到頁面

https://ithelp.ithome.com.tw/upload/images/20210927/20116357w0SbFalzMC.jpg


圖庫區塊 Gallery Block 調整區域

https://ithelp.ithome.com.tw/upload/images/20210927/20116357in3Xku3nHu.jpg


轉換成其他類型區塊

https://ithelp.ithome.com.tw/upload/images/20210927/20116357kYySxeMUP7.jpg


變更圖庫區塊的對齊模式

https://ithelp.ithome.com.tw/upload/images/20210927/20116357gYHyWPowz6.jpg


2 種新增圖片的來源

https://ithelp.ithome.com.tw/upload/images/20210927/20116357mLeQ6Uawr4.jpg


新增圖片方式一:上傳圖片

https://ithelp.ithome.com.tw/upload/images/20210927/20116357EUlPQHkvgV.jpg


圖庫區塊 | 基礎外觀完成

https://ithelp.ithome.com.tw/upload/images/20210927/20116357qy41HO5QNG.jpg


設定欄位數目和剪裁圖片

https://ithelp.ithome.com.tw/upload/images/20210927/20116357csmQtRWfoq.jpg


圖片連結方式和圖片尺寸

https://ithelp.ithome.com.tw/upload/images/20210927/20116357LozsuIghCe.jpg


HTML 錨點和附加的 CSS 類別

https://ithelp.ithome.com.tw/upload/images/20210927/20116357GbFSniZ65A.jpg

廷伸閱讀:

什麼是區塊編輯器?
什麼是 WordPress 圖庫區塊?
免費圖庫


上一篇
11 | WordPress 傳統區塊 Classic Block
下一篇
13 | WordPress 清單區塊 List Block
系列文
WordPress 區塊編輯器與區塊套件組合外掛【新手村】30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言