Elementor教學: Elementor安裝設定+ elementor功能優勢

使用 WordPress 設計網頁對你來說太難但又不想被一頁式網站等架站平台限制住嗎? 推薦你一個專為 WordPress 設計的網頁編輯器 – Elementor , Elementor  透過區塊拖曳的方式設計網頁並有多達上百種模版提供套用,更有專為電商網頁開發的功能,沒有程式背景的人也能輕鬆上手設計出專屬自己的網頁!

 

Elementor 是什麼? Elementor 功能優勢

elementor功能優勢,wordpress elementor 網頁設計編輯器教學

Elementor 是專為 WordPress 開發的開源外掛,也是目前 WordPress 最熱門的網頁編輯器, Elementor 不受任何 WordPress 主題限制,也支援繁體中文,而且提供免費版! Elementor 透過區塊拖曳的方式來設計網頁,可透過拖拉來調整物件擺放位置、自由調整字體大小與邊距等、各種預先設計的模版提供選擇,並跨頁面設置全站顏色和排版、多達90幾種網頁設計工具提供創造屬於自己獨一無二的網頁設計與功能,且 Elementor 創建的頁面都支援響應式,Elementor 也針對加載時間和性能進行了優化,提供最佳網頁速度和性能增加使用者體驗,這對網站SEO有非常大的幫助。 Elementor 免費版的功能就足夠強大使不會寫程式的人也能設計出網站頁面!

 

Elementor Pro 也針對 WooCommerce 開發了 WooCommerce Builder(購物網站編輯器),顧名思義是 Elementor 專為電商網站開發用來設計購物網頁的功能,一樣是透過區塊拖曳的方式,讓你輕鬆地靠自己設計出電商購物網站頁面!

 

Elementor 完全開源意味著,自己擁有網站所有權,可以沒有限制的編輯外觀 CSS、編寫 PHP、加入第三方工具,例如 Google Analytics 等,也可隨意地搬移網站資料,有利永續經營網站! Elementor 是建立在 WordPress 上的開源外掛,因此你必須透過 WordPress 架設網站,或許你需要專為 WordPress 設計的虛擬主機,遠振 WordPress 主機已內建好 WordPress,只需一鍵即可安裝 WordPress,你也可以透過 WordPress 安裝與設定教學快速簡單一次搞定網站架設! 接著就開始透過以下 Elementor 安裝設定與功能教學,開始設計自己的網站吧!

 

Elementor 安裝 (WordPress教學)

至 WordPress 後台->外掛>安裝外掛->關鍵字搜尋 Elementor 並安裝啟用。

elementor 安裝教學,wordpress elementor安裝與設定教學

 

回到 WordPress 後台,點選 Elementor 開始進行設定。以下皆須依自己的需求做設定哦!

elementor 安裝教學,wordpress elementor安裝與設定教學

 

Elementor 設定 (WordPress教學)

Elementor 設定➠一般

● 內容類型

勾選: 允許利用 Elementor 對這些項目進行編輯與設計。

● 停用預設顏色與禁用預設字型

勾選: Elementor 會以你所安裝的佈景主題樣式為主,保持頁面樣式的一致性。

不勾選: 可使用 Elementor 自行編輯樣式。

elementor 設定教學,wordpress elementor設定與安裝教學

 

Elementor 設定➠樣式

可調整網站使用何種字體、網站寬度等。

elementor 設定教學,wordpress elementor設定與安裝教學

 

Elementor 設定➠進階

可設定 CSS print 的方式或是否啟用未過濾的檔案上傳,由於上傳 SVG 有安全上的隱患,設定時需謹慎。

elementor 設定教學,wordpress elementor設定與安裝教學

 

Elementor 設定➠角色管理員

如果網站有多位編輯者,在此可設定每個角色使用 Elementor 的權限。不過該功能為 Elementor Pro 才有的,如果有需求在做升級即可。

elementor 設定教學,wordpress elementor 角色管裡員設定教學

 

Elementor 設定工具

● 替換網址

通常在網站設計時會使用測試域名,待轉到正式網站時需要替換到正式網址,或是非加密網站轉到加密網站時該功能就很實用。

elementor 設定教學,wordpress elementor 角色管裡員設定教學

 

● 版本控制

維持目前使用的版本不更新,可避免功能更新後出現衝突。

elementor 設定教學,wordpress elementor 角色管裡員設定教學

 

Elementor 基本功能教學 (WordPress教學)

至選單➠頁面➠新建頁面,填寫完標題後就可以使用 Elementor 編輯。

elementor 功能教學,wordpress elementor 網頁設計編輯教學

elementor 功能教學,wordpress elementor 網頁設計編輯教學

 

Elementor 全站設定

功能選單左上角功能內的選項都是對網站整體的設定。

elementor 功能教學,wordpress elementor 網頁設計編輯教學

 

Elementor 頁面設定

功能選單左下方有個設定,裡面的選項都是針對頁面的設計。

elementor 功能教學,wordpress elementor 網頁設計編輯教學

 

Elementor 修訂紀錄(歷史編輯)

該功能記錄了你所編輯的步驟,如果有做錯可方便回到上個設計步驟。

elementor 功能教學,wordpress elementor 網頁設計編輯教學

 

Elementor 響應模式

可進行桌面、平版電腦、手機切換預覽頁面呈現樣式。

elementor 功能教學,wordpress elementor 網頁設計功能教學

 

開始使用 Elementor 設計網頁

右側編輯區點選加號即可選擇模塊並透過功能選單將需要的功能拖曳到編輯區開始進行網頁設計。頁面設計完成後記得點選發佈,頁面就上線囉!

elementor 功能教學,wordpress elementor 網頁設計功能教學

elementor 功能教學,wordpress elementor 網頁設計功能教學