在上一篇的文章中，我們有提到了在安裝主題時可以選擇適合的頁面建構器 (page builder) 來建立頁面，而其中我們選擇了 Elementor 作為編輯選項。因此，我將會在這篇文章中更詳細介紹 Elementor 這款頁面建構器以及其主要重點功能。
Elementor 是什麼？
要談到 Elementor 前我們要先知道什麼是頁面建構器。所謂的頁面建構器是一種用於網站建設的工具，它可以讓我們以視覺化的方式建立或編輯網頁，而不需要編寫大量的程式碼。而在這其中，Elementor 是一個近年來相當受歡迎的 WordPress 頁面建構器的插件。它允許使用者在 WordPress 網站上建立各種網頁，從簡單的靜態頁面到複雜的動態內容，都可以通過 Elementor 來實現。Elementor 提供了一個相當直觀的使用者界面，讓我們可以輕鬆地透過拖曳網頁元素 (element)、設置樣式 (style) 和版面 (layout) 來創建和編輯網頁。
建立及編輯 Elementor 頁面
我們透過以下方式來建議 Elementor 頁面。
- 登入後台，並在 Pages 下點擊 Add Page 後新增一般頁面。
- 新增頁面後，點擊上方 Edit with Elementor 將當前一般頁面轉換成 Elementor 頁面。若你已經有其他一般頁面了，也可以透過這個方式將現有的任何一般頁面轉換成 Elementor 頁面。
- 轉換完成後，會被重新導向 Elementor 的建構器使用介面。
- 如果回到後台，可以發現剛剛建立的頁面旁會有一個小小的 Elementor 的標誌，並會多出一個 Edit with Elementor 的選項。
- 或是未來該頁面發布後，也可以從該頁面的最上方（只有管理員可見）找到 Edit with Elementor 這個選項。
Elementor 介面介紹
新增移除元件
接下來介紹一下 Elementor 編輯器的操作介面。在成功建立 Elementor 的頁面後，我們可以看到畫面主要分成了左右兩個部分：左邊是 Elementor 的元素列表及設定區域，而右邊是你當前頁面即時的排版效果。
我們可以在左側找到適合的元件後直接拖曳並擺放至右側合適的位置。舉例來說，我們可以在左側選擇 Image 後拖拉至右側來插入一張圖片。
另外可以看到，當元件被拉至右側後，我們會在上方看到一個快速行動列表，它們分別的功能如下：
- 在當前區塊 (section) 往上新增一個編輯區塊。
- 編輯當前選擇區塊，選取後可以在左側介面對當前區塊進行編輯。另外，若按住不放可以自由移動當前選取區塊，並擺放至新的位置。
- 移除當前選擇區塊。
版面切割
我們也可以在右側對區塊點擊 + 號鍵後，選擇適當的版面進行切割，再將元素擺放至想要的位置。
Elementor 設定
回到左側的 Elementor 工具介面，我們在左上角會看到一個三條橫線的設定符號，點擊後可以進入以下畫面。在這裡我們可以進行關於 Elementor 的設定：
- Site Setting：這裡我們可以編輯所有跟網站整體相關的設定。舉例來說，我們可以在 Global Colors 中調整整體網站的顏色，這樣可以確保我們在設計網站的過程中能夠維持樣式的一致性。當然，如果未來個別元件有自己的樣式設定，在這裡的全域設定就會被個別元件的樣式覆蓋，所以想要對個別元件進行樣式微調也是完全沒有問題的。
- Theme Builder (Elementor Pro)：我們可以在這裡對網站的每個元件進行設計，例如搜尋結果頁面 (Search Results Page) 或是單一貼文 (Single Post)。
- User Preferences：最後，這裡是對 Elementor 操作面板的設定，例如深淺色主題，或是面板寬度等等。
Elementor 底部欄位
Elementor 底部也有提供幾個非常方便的快捷功能：
- Settings：與上面的 Site Settings 不同，這邊的設定主要針對的是當前頁面的設定，例如頁面標題等等。
- Navigator：這裡會將當前頁面的架構以乾淨清楚的方式顯示在右邊欄位中。可以直接從右邊的選項中選取想要編輯的元素進行操作。
- History：這裡包含當前頁面的所有編輯紀錄，可以在這邊進行類似版本控制的操作。
- Responsive Mode：這裡提供在響應式模式下的頁面預覽。點擊後可以在頁面上方選取在不同裝置上的預覽切換。另外，選取不同裝置的預覽後，如果我們要對頁面中的任一元素作編輯，左側的編輯欄位也會有一個對應的裝置圖示以顯示當前裝置的樣式設計。
- Preview Changes：預覽當前頁面的編輯效果。
- Publish / Update：發佈當前頁面或更新頁面。
區塊模版化
另外，使用 Elementor 來設計網頁還一個非常實用的功能，就是我們可以將已經設計好的區塊或元件儲存成可以重複使用的模版。舉例來說，我們可以選取想要模版化的後點擊右鍵，然後選擇 Save as Template 並輸入想要儲存的名字：
未來只要在想要使用的地方點擊中間的資料夾圖示，就可以將已儲存的模版重複使用了。
