TinaLiao
Elementor 入門教程
世界領先的 WordPress elementor使用指南
Elementor是一款非常現代的頁面編輯器，作為最流行的免費頁面編輯外掛程式，
它改變了WordPress建站的方式，讓我們可以無需代碼便能自己構建網頁
Elementor 介紹
WordPress上面有很多優秀的視覺化網頁設計工具（Website Builder），而Elementor更是這些頁面構建器中的佼佼者，我們可以透過Elementor一步步的設計出優質的網站。
Elementor是WordPress平台上的一款視覺化頁面構建器外掛程式，使用者不需要具有專業的程式設計能力，就可以透過Elementor拖拽式設計和生成網頁(或一頁式的銷售頁)。
Elementor分為免費版和付費版，付費版也就是 Pro版，價格為49美元/網站/年，Pro版擁有更多的小部件、網頁範本、設計素材，並且支援生成WooCommerce頁面，能更加完全的定制網站外觀和功能。
如果對網站設計要求不高，免費版的elementor就夠用了，可以再善加利用 Ultimate Addons For Elementor 這個插件，做出來的網頁效果一樣令人驚豔。
Elementor只是眾多頁面構建器的其中之一，新手直接從elementor入門是一個不錯的選擇。
如果您對網站設計很有想法，但不會寫代碼，建議使用elementor！任何效果都可以實現的唷！
安裝 Elementor 插件
首先、安裝Elementor插件：
進入WordPress後台，選擇外掛程式，安裝，然後搜索elementor，找到截圖中的這個圖示，安裝並且啟動。
（或者從這裡下載安裝包後上傳到網站上安裝。）
安裝Elementor插件立即啟動
安裝完成後，直接啟動，在網站後台左邊的功能表裏，就可以看到Elementor的功能表了
開始進行網站介面設計
完成 Elementor 安裝後，創建第一個elementor頁面
一、創建第一個 Elementor頁面：
1、在WordPress後台，選擇新建，頁面。
2、出現新的空白頁面，點擊「使用 Elementor 編輯」，將會出現前台的 Elementor 工作界面。
3. Elementor工作區介紹：頁面的左邊，是Elementor的小工具，小工具右上方帶鎖的就是Pro版本的功能，需要付費購買。
右邊是網站頁面的視覺化編輯區。
4. 接下來開始使用Elementor設計頁面，當然，設計的前提是自己心中已有網頁的想法，可以先畫一個草圖，然後慢慢用elementor設計出來。
使用Elementor設計頁面有兩種方法：
1、完全自己設計；
2、導入設計好的範本修改。
最基礎的elementor使用方法如右圖：
①、在左邊的這些元素，你需要使用什麼，就按住直接拖動到右邊的視覺化編輯區域。
②、這個加號可以新增段，你可以理解成新增加一塊內容區域，和上一塊內容分開。
③、這裡是添加範本，點擊後，範本有分為：模組、網頁、我的範本。
用Elementor製作頁面時，可以直接從頭開始編輯，自己設置每個元素樣式；
或者調用模版，在模版上進行修改與替換，這樣完成頁面是一種非常高效的方式，
Elementor提供了各種模組和100+的模版，不管是免費版還是Pro版本都可以調用演示。
我們導入一個模版來作為演示並修改。
點擊「插入」，
需要使用elementor帳號進行連接，
(沒有elementor帳號的跟著步驟流程註冊一個即可)
成功導入後，就如右圖的樣子。
我們把需要修改的地方，滑鼠輕輕滑過該區域，在左邊上方處會看到一支筆，代表點擊後可以修改編輯。
如果碰到不想要的部分，直接右鍵點擊刪除就可以了。
如果需要新增內容，就點擊加號，然後選擇段，再把要添加的內容拖進去，例如圖片、文本、標題、視頻這些內容。
使用現有模版庫裏的頁面進行設計，相對來說更加簡單，便於新手學習和研究，當一切就緒後，點擊發佈/更新按鈕，就可以完成一個頁面的設計了。
Elementor Pro 高級功能介紹
使用elementor pro你可以完全從頭規劃你網站的各種配置，例如主題顏色、文字、排版、按鈕的樣式，如圖所示：
設置好全域樣式之後，可以回到主題構建器，自己拼湊一個想要的網站設計。
您可以自己設計網站的 header（頁頭）、footer（頁尾）、Single Post（文章）、Single page（頁面），讓整個網站的佈局充滿一致性。如果安裝了 WooCommerce 電子商務外掛程式，電商頁面也可以自己設計。
在Elementor的左側工具列最底下，點擊電腦圖示，切換到手機端，就可以編輯網頁在手機上的顯示效果了。
