會想寫這篇主要是發現，市面上的教學文主要都在教怎麼設定頁面，關於區塊編輯器的介紹，主要還是集中在頁面或周邊的設定，對於其中元素介紹不足的關係，就曾發生過有人把段落文字放大就是 H 標籤，錯誤設定讓目錄無法建立，或者是像我也曾發生想要拉開區塊間的距離，卻苦尋不到解法等排版細節的困擾，老實講這些都是小問題，但卻會讓當事人苦惱許久。
因此就起心動念來撰寫一篇，專門介紹區塊編輯器內在編輯文章時，比較常使用的區塊元素。若是區塊元素是頁面設計使用到的比例比較高，那就會則會跳過，然後再依照我自己使用頻率下去劃分為經常使用、偶爾會用、幾乎不用的三種類別，但這部分會因人而異，僅供參考而已。
希望透過這樣的介紹與教學，能夠讓首次使用區塊編輯器，來撰寫文章的朋友們能快速上手。區塊編輯器有不少設定，都能輕鬆的區塊移動調整，只要熟悉後會發現區塊編輯器好用無比，希望你也能一起體會與了解，這套官網未來重點發展的內建核心功能。
這邊付上簡短教學篇供新手參考，觀看此文，建議可以連同官方說明文一起看 。
文章中有介紹到的，主要還以我的使用偏好為主，無法照顧到大家全方面的需求，這點先說聲抱歉，建議大家可以搭配官方說明網頁來幫助自己更快了解區塊編輯器 。
網站基本資訊介紹
我的網站主題是 Astra，之前用過 OceanWP 跟 Avada 這兩款，因此在一些主要結構上的設定，會以我曾經的經驗去說明調整位置在哪，只是畢竟主題千百種，每個人的情況不一樣，因此若沒有在我所說的位置找到可調整設定，可以再去看看各主題的官方說明文件來尋找，我不會通靈，也沒玩過那麼多主題，所以問我也沒有用。
在區塊編輯器這邊會出現兩個我慣用的外掛，因此會跟大家的區塊編輯器有些不同。綠色的是 Jetpack，她們家有提供很多額外的元素功能給在元素選項中，因此在截圖中看到綠色圖案就是他們家附贈；藍色的是 Qubely blocks，是我慣用的區塊套件組合，他支援區塊編輯器在編輯頁面上的不足，讓使用區塊編輯器也能設計出不輸 Elementor 的頁面效果。
不過以上兩種外掛所提供的元素，基本上不會用到文章中，詳細原因歡迎請參照之前寫的「WordPress文章編輯請用區塊編輯器， Elementor /第三方頁面編輯器不是拿來寫文章用的」一文，先前提要講完了，那就準備進入正題囉～
經常使用的項目
這邊要介紹的就是我每篇文章基本上都會用的幾項區塊編輯器元素，依照頻率由多到少，再加上一些使用心得跟重點提要，方便大家知道為甚麼要選用這些。
標題
SEO 文章首要規格就是建立好 Ｈ 標籤，所謂 Ｈ 標籤，就是標題，標題點進去後會有 Ｈ1~H6，讓你選擇，依照文章重點依序分配下來，你也可以將其想成大綱結構下去分配 。
建好 H 標籤不但有助於 SEO，若之後想建立目錄，不管是採用目錄外掛還是其他編輯器附設的目錄功能，也都是吃 H 標籤設定，因此這邊格外重要。
如果想調標題大小尺寸字型，請到「外觀=>自訂」裡面去修改，在這邊更正是為全域控制，之後你想改字體大小尺寸，只要來這邊調整就可以全部文章一起動。
若是你是選擇用右手邊的「設定=>區塊」中的字型大小去改，以後想改就得一篇篇打開來改，當然如果你文章有時間性，過了就不需要，也可以選擇在這邊修正字型尺寸。
段落
段落是區塊編輯器預設好的，原則上只要一打字，被歸類的屬性就是段落，不會因為把字放大就會變成標題，這點很重要，要建立目錄要完成 SEO 結構，需要的是標題，不是段落 。
字型調整選擇等都跟標題一樣，要去「外觀=>自訂」修正，這邊就強烈建議使用全域控制，不要單獨使用右手邊的「設定=>區塊」中的字型大小去更動，一段段更改段落字體大小是件非常累人的事情，選擇這麼做之前，請務必考慮清楚。
另外要注意的是，在段落內放入連結後台會出現顏色變化，但前台不會，這是因為佈景主題的設定問題。
基本上文字加連結若要有顏色變化，需要到「外觀=>自訂」修正，只是要這樣一來全網站的連結文字都會變色，若只想連結出現顏色變化，請在「設定=>區塊」的文字色彩來做額外設定顏色。
圖片
圖片顧名思義就是放大家放照片圖片的。這邊需要注意的是以區塊編輯器的設定，雖然可以在右手邊的「設定=>區塊」這邊去填寫圖片的替代文字，但是這替代文字並不會連動到媒體庫那邊去。
也就是說你以為你已經完成圖片最佳化，其實並沒有，圖片的Alt、替代說明跟內容說明都需要進去到媒體庫填寫，圖片最佳化的程序才會完成，因此建議直接在媒體庫那邊進行處理才是最省時省力的。
另外若是覺得圖片過大的話，在「設定=>區塊」這邊下方的圖片尺寸有按比例縮放的功能，從 100%、75%、50% 到 25%，可以依據需求調整，以我來講，我不喜歡圖片塞得太滿，因此多少都會使用此功能去調整比例，讓文章看起來比較沒壓迫感。
空白間隔
我在空百間隔的使用是類似於 Word 裡面的「段落」設定裡的「與前 (後) 段距離」，主要目的就是要拉開圖片跟文字，段與標題間的距離，藉由拉大區塊與區塊間的距離，以達到區域劃分效之效。
我習慣圖片上方講解完，才會緊接著圖片，因此圖片下方的「段落」需要跟「圖片」距離需要更大一些，避免訪客誤會下方段落是在講解上方圖片。
還有就是在「段落」與下段新的「標題」之間也要拉大距離，作為視覺上區隔，告知訪客進入下一個重點。
因為這些習慣，我再使用「空白間隔」上是很頻繁的，以這篇為例，這篇文章使用了 193 個區塊，其中有 27 個區塊使採用了「空白間隔」，約占了全部區塊的 14%。
清單
因為區塊與區塊間有一定的距離，這時候若是希望不要有距離，例如食材清單、彩妝清單之類的，就會需要用到這個功能。
在區塊編輯器中，前頭有兩種選項，一個是小黑點，一個是數字，你只能擇一，無法取消，想消除就需要使用 CSS 語法 。
若你說我想在每行文字下再多加些輔助說明，但不想跟主描述句並列，也可以，清單內設有縮編的選項，可以往內縮，小黑點會變成中空，數字會多個小數點。
引文
當你有想特別強調的句子時，覺得單純使用顏色不夠吸引人，那麼就可以使用引文，會獨立一塊出來，非常醒目 。
同時可以選擇要靠左邊、中央、右邊，有起到醒目作用，但不會太突兀，我通常還會在下方在放空白欄位，稍微再拉開點距離 。
重要引述
重要引述跟引不同之處，在於重要引述更大塊，醒目又很有壓迫感，且重要引述無法調整靠右還是靠左，就只能在正中央位置。
同時字也頗大，能打的長度也有限，很容易往下一行跑，使用這個還要額外搭配「設定=>區塊」內的格式化中的上標跟下標設定，好讓字體不要那麼大，後來發現引文比較符合我需求後就沒再用過了。
至於這兩個哪個比較好，就看作者本身對於文章版面要求，這兩個用意都差不多，就版面上給人的感覺略有差異而已。
欄位
通常這個功能會搭配下方嵌入內容使用，嵌入功能無法讓其出現的框架置中。
只是我的文章觀看模式是兩側無資訊欄，若沒置中，視覺上會很奇怪，我就會就使用「欄位」將版面切成三塊，再把嵌入功能放在中央，以達成置中效果。
因此通常當我使用「欄位」，就是我使用的元素無法出現在我希望的地方，才會藉由分割版面，來強制達成我想要的效果。不然這功能一般來說應該是比較常用在頁面編輯上會比較常見。
順帶一提，這篇文章各個元素介紹的左邊圖右邊字的模式，就是採用「欄位」，將其劃分為二，一邊放文字一邊放圖片，這種模式我很少會用在文章中。
只是元素的介紹圖片都是截圖，解析度本就不好，單獨一個區塊，不管大小對於電腦版使用者在閱讀上會很不方便，考量許久，才會使用這種圖文並茂的編排。
嵌入內容
嵌入是將其他網頁放入文章中並顯現其框架，我最常用在介紹 WordPress 外掛跟 Facebook 貼文，比起單純連結更容易吸引訪客目光。這功能在區塊編輯器內區還可以在分為三項，分別如下：
- YouTube－圓圈左下角
- WordPress－圓圈正下方
- Twitter－圓圈右手邊
雖然在增加區塊的選項內看起來不同，但其實都是可以共用嵌入內容這個選項，區塊編輯器會自動跳轉其相對應的功能，但如果只是放一般連結，是不會有效果的。
而我們常用的 Facebook 跟 IG，則是由 JetPack 這外掛提供，文章內文盡可能使用非外掛提供元素是我的習慣，因此我還是以使用「嵌入內容」來做 Facebook 貼文嵌入居多 。
要再補充下，Facebook 粉專要放入文章中無法使用嵌入功能，要使用後面介紹的到「自訂 HTML」 才行
嵌入語法連結
偶爾會用的項目
在這區的就是屬於偶爾會用到元素們，每篇文章性質不同，在編排時會有不同的要求，因此偶爾也是會用到他們，同樣是依照使用頻率由多往少遞減介紹。
自訂HTML
如果無法使用「嵌入內容」來把自己想要的框架呈現在文章中，這時候就會需要使用到 HTML 協助，可以去找下 HTML 生成器之類的來產出語法，再把語法貼上即可。
地圖的設定是「自訂 HTML」中大家最可能使用的，直接在 Google 地圖按分享，會出現兩種連結，第一種就是普通的 URL (網址連結)，第二種嵌入就是要用在這邊的。
但也不一定有了語法就會產生框架，我之前使用讀冊的 HTML 語法，想要來個框架，結果只出現書名，「自訂 HTML」是當「嵌入內容」無法使用時，最後的希望，如果不行就果斷放棄，改用超連結。
另一種情形就是需要在文章中呈現 Facebook 粉專時，因為「嵌入內容」會無法呈現，因此會先去官方的「粉絲專頁外掛程式」中取得程式碼後，再來使用「自訂 HTML」做設定好讓粉專能直接呈現在文章中。
只是自訂 HTML 由於無法設定置中，因此我都會搭配「欄位」區塊來強制置中，地圖的使用通常是在寫旅館、寫美食等，輔助讀者理解店家所在地，才會比較容易用到 。
相關功能輔助：
圖庫
圖庫跟圖片的差異在於，圖片只能有一張，圖庫可以有好多張並列，這邊也看自己的文章設計，如果你這段落有太多圖片可以放，那就可以考慮使用圖庫。
只是圖庫他並不會隨著行動裝置的回應式 (RWD) 而變成一張張層列，而是整個區塊跟著螢幕縮小，這點要多注意下。
這功能基本上我也很少用到，大多是在處理 Facebook 粉專貼文備份到網站時，圖片比較多時才會採用這功能。
群組
這個功能就稍微比較複雜點了，簡單說就是把數個區塊包裹再一起，讓其移動區塊時，可以一大串打包移動，不用一個個跳 。
例如說有兩個相鄰近的區塊要移動，這時候使用群組就可以將他們包裹起來，移動時只要動一次就可以完成兩個區塊的移動，比較省時間。
另一個就是網頁編輯比較容易遇到就是設計好的排版不想被影響到，直接用群組將其包裹起來，這樣子會比較安全。但是我之前有發生區塊排版大亂，後來檢查才發現被群組，無法變動，但版本已經更新，於是造成外掛間衝突，最後解除群組就恢復正常了。
這邊主要是用來調整文章版面的，讓移動可以更快速跟方便，不過後來發現有更快速的移動方式後就很少用過了。
圖片比較
圖片比較這個功能最常出現在歷史照片/圖片與現在照片的今昔對照中，我自己也是在寫歷史相關文章才會運用這功能，畢竟比起單純圖片前後對照，圖片比較功能更有衝擊的視覺效果，只是有點吃修圖能力，所以會用但不愛用，非常耗費心力的說
本來我一直以為這功能就只能這樣子，後來某次在搜尋東西，無意間看到了迴游吧的應用，他們居然把手繪魚圖與現實魚圖放在一起，頓時眼睛都亮了起來，這太有趣了，原來還可以這樣玩，這應該是我看過把圖片比較功能運用的最好的範例了。
鮮少使用的項目
到這邊尾聲所要介紹的就是對我而言極端少用的幾項區塊編輯器的元素，但對部份朋友來講應該是很好用的元素，還是特別來介紹下，同樣也是從使用頻率來介紹這幾項元素。
視訊
視訊跟 YouTube 的差異是，視訊是你要將影片上傳到自家媒體庫後，再點選到前台，而 YouTube 的嵌入內容，則是直接貼上 YouTube 連結網址即可 。
沒有哪個比較好，就端看自己的選擇，這功能我也只用過一次，畢竟我沒有產出影片的習慣，對我而言去 YouTube 找影片嵌入是比較務實的做法 。
分頁符號
分頁符號，顧名思義就是將文章分頁，有些文章太長了，怕訪客因沒耐心等載入跟閱讀太累，有些站長就會選擇將文章分頁，分好頁的文章像是翻書一樣，像是日本網站－nippon.com 繁體字，就是選用這樣子的方式 。
有些人是基於網站單頁載入的速度考量，太長的文章會增加載入的時間，那麼適當的分頁有助降低載入的時間，過去我也因為這份考量也採用了分頁。
只是這個做法有個問題，若有採用目錄功能，被分頁後的標題若在第二頁第三頁，就無法透過目錄的點選直接就定位，且訪客也無法從目錄上知道她想要的看的內容在第幾頁，目錄功能就無法發揮效用。
最後我就選擇以訪客使用體驗為優先，畢竟我的文章很長，有目錄對訪客而言比較方便，因此最後決定取消「分頁符號」，好讓目錄發揮效用，之後就再也沒用過這功能了，但不是說這個功能不好，而是它不符合我的需要。
分隔符號
分隔符號，就是一條線出現，跟訪客說接下來要進入新的段落，某方面跟我使用空白欄位是很類似的，也有人是放在標題下方當作畫重點的線。
只是區塊跟區塊間本就有一定的距離，需要靠 CSS 語法才好拉近，但文章撰寫我一大原則就是簡單化，太複雜的設定會降低我發文的意願，因此我直接放棄這功能。
閱讀全文
這功能以前在痞客邦常用到，由於痞客邦無法藉由自訂來決定文章要露出多長，若不使用閱讀全文這功能，會導致每篇文章都是全文展示，那畫面會拉到非常的長，因此都會在適當的句子下放閱讀原文來做文章截斷 。
不過 WordPress 可以設定摘要，因此搬家過來後就沒有使用，但我看有其他前輩是他這個功能運用在最新文章的訂閱上，JetPack 有訂閱新文章的功能，如果在文章內插入閱讀全文，那收到的訪客就會看到你的封面圖，沒插入的話就是由純文字。
這點就看人覺得值不值，我是不想在文章中插入不太重要的東西，加上訂閱的人少，就不額外增加自己的工作量了。
相關閱讀：
結語－了解區塊編輯器元素，讓你文章編輯又快又好
這篇文章的重點不是要教大家如何去安排文章版面，而是希望透過這些區塊編輯器元素的認識，讓大家更理解如何使用這些元素來幫自己的文章做合宜方便訪客閱讀的版面。而會想要撰寫這類型文章，有部分是因為記憶中看到的文章多是把區塊編輯器的元素全都介紹，其實連官方也是如此 ( 影片有繁體中文字幕 ) 。
但區塊編輯器同時也支援頁面編輯，有些功能其實在撰寫文章時並不一定會需要用到，加上不少市面上的教學影片都是以頁面編輯為主，針對文章本身的少之又少，才會出現我開頭寫的誤將段落當標題。
因此才決定撰寫這篇文章，讓大家盡快摸熟文章需要的元素有哪些，了解元素後方才知道如何去安排設計出方便訪客閱讀的文章版面，文章是網站的重要基石，越清楚區塊編輯器的元素功能，越能排出方便讀者閱讀的文章版面，又能同時做好 SEO 的設定。
最後再度提醒大家，絕大部分情況下，小心珍惜的愛護文章就請記得使用區塊編輯器，使用核心內建功能絕對是對文章最大的守護。
