內容目錄
歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略 – Elementor 版面教學 主要是說明使用 Elementor 設計網頁排版的基本方式，也就是在放入文字、圖片等小工具前，必須要先建立所謂的 ” 容器 “，而 Elementor 容器分為兩種，最外層的 ” 段 （section）” 以及分隔網頁元素的 ” 欄（column） “，這兩種容器的操作方式是在設計網頁版面前需要先理解如何操作的，如果沒有先熟悉加入容器的方法，就無法合理安排網頁內容元元素樣式，像是對齊方式、間距、大小等細節。接下來跟著鵠學苑的腳步，讓我們開始學習吧！
Elementor Page Builder 外掛下載點
https://wordpress.org/plugins/elementor/
Elementor 官方網站
https://elementor.com/
Elementor 新增版面欄位操作
第一步：和上一篇標題文字與圖片影音設定方式一樣，先按”＋”新增藍框區塊。
第二步：檢查左側項目名稱部分中是否顯示編輯 “段”，然後從”佈局”中的高度”選擇最小高度”。
第三步：使用滑塊或數字設置所需的高度。
第四步：設置背景圖像。您可以使用純色，漸變或視頻作為背景，繼續編輯該部分並打開”樣式”選項
第五步：在媒體庫選擇想要的圖像作為背景。
第六步：右側放置文字，左側放置一個圖像。
第七步：添加一列（1欄→2欄）右鍵單擊列圖標（灰色圖標）。將出現一個菜單。選擇”＋”。新增欄位，最多增加到10個欄位
第八步：在右側添加標題，在左側添加圖像小工具。
第九步：可以再拖曳一個標題到右邊”欄”的地方，底下藍色框內的反影標示會提醒你放開滑鼠會落在那一個區塊。
第十步：在左邊編輯圖片 內容裡 “對齊” 選擇靠左。
Elementor Inner Section操作
第一步：左側工具欄店選滑鼠拖曳 Inner Section 小工具到藍框裡。
第二步：就會像剛剛第六步驟新增一個欄位一樣的版型。
第三步：滑鼠點選拖曳兩欄位中間的虛線可以調整左右版面配置。
第四步：點選編輯 “欄” 選擇佈局 在欄寬度(%) 可以自行輸入數字設定。
第五步：或是選到編輯” Inner Section “有配置好的結構可以選擇，都會呈現一樣的效果。
結語：
Elementor 小工具有很多種類，在之後的教學中鵠學苑會由淺入深逐一介紹常用小工具的特色與做法，希望讓想要架設網站的朋友們可以熟練的運用這套網頁編輯外掛，加快網頁編輯效率！
今天的教學到這裡告一段落了，不要忘記在右側訂閱鵠學苑電子報，確保收到最新 WordPress 教學文章，如果有網頁設計相關需求，或者想了解最新網站知識，也可以到 鵠崙設計 做線上免費諮詢喔！我們下次的教學見～
WordPress相關文章：
網站資訊文章推薦
內容行銷到底要多久才能見效呢？撰寫內文時一定要遵循的潛規則！
SEO到底追不追的完？文章怎麼寫！
Google Search2020再進化，如何提升網頁品質？
