戰國策集團
戰國策集團

戰國策提供客戶主機服務、電子商務、網路行銷、行動商務整合服務,不但為企業節省營運成本,專注核心競爭力, 創造源源不絕商機,再度締造戰國策力求第一的服務品質。 展望未來,戰國策以「捍衛企業資訊安全,創造優質資訊服務」為使命,期許與客戶邁向美好未來。 戰國策集團 免付費諮詢電話:0800-003-191 LINE@ ID:@119m www.nss.com.tw

Elementor 架站教學 | 超好用的 WordPress 頁面編輯器

Elementor 是目前 WordPress 最熱門的頁面編輯器,可以輕鬆的製作漂亮的頁面。

本篇文章會提供你最完整的 Elementor 架站教學,看完就可以馬上做出一個好看的網頁!


 

Elementor 介紹

WordPress 的頁面編輯器有非常多,像是 ElementorBeaver BuilderBrizy 等等。

而 Elementor 的下載次數完全超越其他的頁面編輯器,高達 400 萬次,成為了最熱門的 WordPress 頁面編輯器。

 


 

Elementor 可以很輕鬆的用拖拉的方式,完成頁面。

其中有幾個特色我覺得非常棒:

  • 匯入現成的頁面跟區塊
  • 一致性的更改標題、內文、按鈕的樣式
  • 許多精美的小工具、別人開發的小工具可以套用
  • 多元的社群討論資源

 



 

還有許多功能是屬於進階版的,像是:

  • 修改所有分類頁面
  • 自訂頁首、頁尾
  • 更多元的小工具、區塊模板
  • 自訂字型、icon
  • 輕鬆製作維護頁面

但本篇文章不會講解進階版的功能,因為真的太多了!

有興趣的人可以直接前往 Elementor 的官方網站查看。

 

Elementor 基本設定

Step 1

到外掛列表搜尋 Elementor,找到 Elementor Page Builder 安裝並下載。


 

Step 2

到設定->一般的地方,勾選停用預設顏色禁用預設字型,按儲存設定。

我會這樣設定的原因是希望 Elementor 的預設顏色跟字型與我的佈景主題相同,才不會版型很亂。

當然如果要全部靠 Elementor 來設定也可以。


 

Step 3

如果你的網站有很多個使用者,可以在角色管理員的地方,設定誰可以使用 Elementor 來編輯。


 

Step 4

工具的地方有幾個設定,像是啟用安全模式、替換網址、版本控制、設定維護頁面等等。

有需要的可以自己看一下,說明都很清楚!


 

Step 5

最後就是點選 Templates,這邊可以看到所有你儲存的版型。

免費版本有頁面跟段,頁面就是一整個網頁,段就是一個區塊。

儲存版型非常方便,可以將同樣的區塊插入其他頁面中,就不用一直重複做一樣的區塊。


 

Elementor 製作頁面教學

介紹完基本功能後,再來要帶大家實際的製作出一個頁面。

匯入頁面範本 (Page Template)

Step 1

到頁面的地方,新增一個頁面。


 

Step 2

輸入頁面標題,選擇使用 Elementor 編輯。


 

Step 3

點選資料夾的圖案匯入版型。


 

Step 4

找出喜歡的頁面,點選插入。

這裡大多數的版型都是需要 PRO 版本,可以自己考慮要不要升級:購買 Elementor Pro


 

Step 5

點選插入之後,他會要求你先連結到版型庫,點選 GET STARTED。


 

Step 6

建立一個新的帳號。


 

Step 7

註冊完之後登入,點選 CONNECT 連結版型庫。


 

Step 8

匯入完成之後,就會看到一個設計好的頁面,可以直接修改,替換內容就好。


 

修改頁面內容

Step 1

點選要修改的區塊,在左邊看到內容的地方,可以修改文字、連結、標籤等等。


 

Step 2

點選樣式,可以修改文字顏色、排版、陰影等等。


 

Step 3

點選進階,可以修改外距、內距、動畫、背景等等,自己玩玩看最快。


 

Step 4

假設要修改區塊的背景,就到最外層的背景上方,點選藍色的6個點。

選擇樣式,就可以更改圖片了。


 

Step 5

如果要插入新的元素,就在左邊尋找免費版可以用的小工具,將他拖曳到頁面的區塊位置。


 

Step 6

可以點選左下角第二個圖案,開啟導覽列。

導覽列可以讓你更清楚頁面的結構。


 

製作完成

Step 1

製作完成後,可以點選左下角的發佈,就會正式上線到頁面。

也可以選擇儲存成版型,這樣其他頁面就可以直接匯入現在這個版型。


 

Step 2

發佈之後,就可以看到頁面已經製作完成了。


 

結論

這篇文章介紹 Elementor 架站所需的基本知識,還有一些基本的操作,希望大家喜歡這樣的教學。

使用我們的 WordPress 主機,可以快速的幫你安裝好 Elementor,直接可以開始製作你的網頁。

CC BY-NC-ND 2.0 版权声明

喜欢我的文章吗?
别忘了给点支持与赞赏,让我知道创作的路上有你陪伴。

加载中…

发布评论