Kadence Blocks 是一款具有十三種類型的網頁元件、高度可客製化的古騰堡 Gutenberg 編輯器外掛，你可以依賴他那詳細的自訂結構來製作出大多數版型，這也是目前我在設計網頁時正主要採用的外掛之一。
至於為何我不直接使用評價最好的 Elementor Pro 呢？原因很單純，因為沒錢。而我會選擇這支外掛的原因，就是他可以滿足能讓我快速設計網頁的條件。
你可以參考目前還在設計階段的 USR 大學社會責任實踐計畫網站、亞洲遊戲化創新教育協會 與 桌遊莓，這三個網站的首頁都是以 Kadence Blocks 外掛製作的。
安裝 Kadence Blocks
請到你的 WordPress 安裝外掛介面中，搜尋 Kadence Blocks，安裝這款由 Kadence WP 開發的外掛。
https://tw.wordpress.org/plugins/kadence-blocks/
建立範例頭版元件
要開始學怎麼使用一款外掛，最快的方式就是直接看開發者提供的範例。請在 WordPress 新增一個頁面，並加入一個 Row Layout 元件。
再來按下 Row Layout 區塊中的 Prebuilt Library 按鈕開啟範例模板，並選擇第一個 Header Demo 作為頁面頭版。
自己在調整一下文字後開啟預覽，一個不錯的網頁頭版就完成了。
新增主要內容區塊
分割區塊欄位
我們就以剛才產生的頭版樣式作為基礎，自己來製作一個白色背景的兩欄式主要內容區塊。
請在頭版元件下再新增一個 Row Layout，只不過這我們要選擇的是 兩欄式 Two: Equal。
用內建的標題、段落與圖片區塊來為這個版為填入內容。如果你希望能為標題文字做更多的樣式變化，你可以按下標題區塊左上角的 🔄 按鈕，將區塊轉換成 Advanced Heading。
預覽一下，你可能也會遇到像下圖中的問題，他太寬了！而且過於貼近邊界。
修正區塊寬度
讓我們來調整 Row Layout 的設定。請回到編輯器，先點擊 Row Layout 內的任一個內容，再使用左上角的區塊導覽功能，將焦點切換到最上層的 Row Layout 中。
初學者如果不這樣切換的話，不知道要選到民國幾年 Orz…
最後請開啟 Structure Settings，為最大內容寬度 Content Max Width 定一個值。你可以從 300、500 開始嘗試，將他調整成在電腦版網頁中看起來很舒適的寬度。
因為我已經事先調整好佈景主題了，所以我直接給他寬度 1000px。
再預覽看看，寬度的部分就正常了。
加入頁尾區塊
新增無分割欄位
最後我們來做一個單欄的文字頁尾，請在剛才的主要內容區塊下再建立一個 Row Layout，排版選擇 單欄式 Row。
調整背景樣式
我們先來設定背景圖像，請從 Background Settings 中選擇 Select image 選擇一張圖片，並依喜好調整 Background image Attachment 選項來讓網頁更生動。
為了不要讓之後加上的文字失焦，我們切換到 Background Overlay Settings，設定 Overlay Color 為黑色，並用 Overlay Opacity 來給他些透明度，用這層遮罩讓圖片再暗一些。
這邊也有混合模式 Blend Mode 可以調整，這個功能也能讓圖片變得鮮豔動人，有玩過 Photoshop 的朋友們應該會比我更了解。
加入分隔圖形
為了能跟頭版的樣式對應，我們也要做出一個引導訪客有動力往下閱讀的箭頭圖形。讓我們在 Dividers 的 Top 也加入一個白色的雙層箭頭。
修正區塊長寬
再次切換到 Structure Settings，給這個區塊定義一個 400px 的高度、1000px 的寬。
加入文字內容
將 Row Layout 設定為垂直置中，並將文字色彩調整為白色。最後直接在區塊內填入文字。這樣子頁尾區塊也大致完成了。
如果你也想要做出首字放大的效果，請開啟段落設定中的 Drop cap。
頁尾完成，我們接下來要優化 RWD。
優化行動版網頁相容性
因為 Google 爬蟲現在都只看行動版網頁，為了不要被降排名，行動版網頁相容性的優化是不可缺的。
先開啟剛才做好的網頁，按下鍵盤 F12 啟動開發者工具，再點擊模擬器圖示來預覽手機版網頁。你會發現有些區塊在電腦版中很正常，但在手機版會貼邊。如果不想被 Google 降排名，就乖乖地來修正吧 🤣
再一次的回到編輯器中，找到有問題的 Row Layout 區塊，先將平台選項切換到行動版，在 Padding 中為左右側都加入 1~2 字的內距。
這邊我多調整了兩欄位區塊在行動版的顯示順序，一般來說下圖中的欄位會先顯示文字再顯示圖片，但如果我們讓 Collapse Order 設定變成 Right to Left 的話，他就會反過來先顯示圖片再顯示文字。
最後預覽，顯示順序、邊界距離都正常，一個網站首頁就完成得差不多了！
我們不需要拘泥於單一種工具，如果你想要為網頁添加更豐富有趣的內容，就應該要活用 WordPress 這個自由的系統，靈活搭配各種擴充功能來達成目標。