iT邦幫忙

2021 iThome 鐵人賽
DAY 7
0
自我挑戰組

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

07 | WordPress 空白間隔區塊 Spacer Block

13th鐵人賽 空白間隔區塊 spacer block 區塊編輯器 wordpress教學
1213 瀏覽

  • 分享至 

  • xImage
    •  

https://ithelp.ithome.com.tw/upload/images/20210921/20116357ARZBGjUUX1.jpg
為了明確分隔文章中不同的段落，我們一們會在每個「段落」之間加上適當的留白空間，在 WordPress 編輯器裡是使用度非常高的區塊。

在段落輸入「/空白間隔」，點擊區塊即可

https://ithelp.ithome.com.tw/upload/images/20210921/20116357Ag6F6W98Qf.jpg

另外也可以點擊 [+]，輸入「空白間隔」

https://ithelp.ithome.com.tw/upload/images/20210921/20116357U807w0WaOq.jpg

空白間隔區塊的標準狀態

https://ithelp.ithome.com.tw/upload/images/20210921/20116357V8pGvHaeq4.jpg

按著「白點」可以往上往下拉動，控制留白的高度

https://ithelp.ithome.com.tw/upload/images/20210921/20116357csfCdfnRTk.jpg

轉換為「群組」區塊

https://ithelp.ithome.com.tw/upload/images/20210921/201163574JW6IxXoVf.jpg

「群組」區塊可以調整文字和背景色彩

https://ithelp.ithome.com.tw/upload/images/20210921/20116357dezB6X7udV.jpg

空白間隔區塊 | 設定

https://ithelp.ithome.com.tw/upload/images/20210921/20116357R7tmabcGRu.jpg

HTML 錨點和附加的 CSS 類別

https://ithelp.ithome.com.tw/upload/images/20210921/20116357OcQE9FTKkA.jpg

廷伸閱讀：

什麼是區塊編輯器？
什麼是 WordPress 空白間隔區塊？


上一篇
06 | WordPress 段落區塊 Paragraph Block
下一篇
08 | WordPress 分隔符號區塊 Separator Block
系列文
WordPress 區塊編輯器與區塊套件組合外掛【新手村】 共 30 篇
  1. 26
    26 | 【區塊組合套件介紹】Qubely
  2. 27
    27 | 【區塊組合套件介紹】Stackable
  3. 28
    28 | 【區塊組合套件介紹】Kadence Blocks
  4. 29
    29 | WordPress 區塊編輯器 | 本次教學單元總結：
  5. 30
    30 | WordPress 區塊編輯器 | 延伸相關參考資料列表：
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙