用WordPress建一个公司官网（2）：神器Elementor

作者：WordPress大学

Page Builder 是什麼？

首先，介紹一個概念︰Page Builder ?? 可視化編輯器，也可以叫頁面構建器。

Page Builder 是一種 WordPress 插件，可以把WordPress上的頁面、文章的內容編輯區變成模塊化的可拖拽區，創建、編輯、自定義各種操作完全是圖形化、可視化操作，所見即所得，讓用戶可以在瀏覽器中搭建出美觀又專業的頁面布局。如果這樣說還是比較抽象的話，可以把Page Builder比喻成這樣一種東西，它是一種可以把記事本變成PowerPoint的神器存在，通過鼠標拖拖拽拽點點按按就能作出高大上的PPT。

國外有很多非常強大的Page Builder，Elementor也是其中的佼佼者。下面是幾個有代表性的WordPress Page Builder︰

• Elementor Beaver Builder Divi Visual Composer Website Builder Themify Builder Page Builder by SiteOrigin

Elementor 是什麼？

Elementor在2016年橫空出世，把WordPress站點的網頁設計水準提高了一個檔次，擁有非常豐富的高級功能，無論是對入門者還是經驗豐富的用戶都很適用，同時也提供各種高級付費功能和API，是一個全能型的Page Builder。自從上線發布之後發展迅速，現在的用戶群體已經擴大到180個國家地區，安裝量超過兩百萬，2500多個五星評價。主要功能亮點如下︰

• 動態實時、性能流暢的前端編輯器 支持鍵盤快捷鍵 專業水準的設計風格 豐富的模板和功能模塊 支持響應式布局 支持創建彈窗、驗證等高級控件 適用于所有WordPress主題 支持模板的導入導出 自定義網站的Header和Fotter（PRO版） 支持自定義類型的布局（PRO版）

Elementor 怎麼用？

巧婦難為無米之炊，首先肯定是安裝Elementor。付費專業版雖然非常強大，但本篇會基于免費版，官網下載鏈接︰Elementor 。WordPress.org官網也有，請自行搜索。

下載、安裝、激活，三步走完成之後就可以了。Elementor基本上對主題沒有要求，免費主題也都可以，但要保證你的主題支持 full-width ，全頁面寬度的布局。

開始之前，還有必要再詞明確幾個名詞概念，名不正則言不順。

模板（Template）這個說法有點模糊，WordPress自身的主題（Theme）很多時候也被叫做模板，大多數情況下這沒啥問題，但是因為Elementor中也有模板（Tempalte）這個概念，容易混淆。所以，為了區分開來，這里我借用一下PPT中的概念??“母版”，本文中的模板特指的是Elementor的模板（Template），而母版特指的是WordPress中的主題模板。那天我也是這樣給妹子解釋的，我發現這樣一說，她頻頻點頭，似乎明白了什麼深奧的東西

還有一個名詞Canvas。英文中 Canvas 的意思是“畫布”， Canvas 是 HTML5 中新出的一個元素，開發者可以在上面繪制一系列圖形，Elementor中也引入了這個概念。這里我們可以把它比喻成PPT中一頁頁的幻燈片。

第一步︰選擇布局

對于做產品介紹型的單頁面公司官網，頁面布局肯定要選擇 full-width 全寬度，側邊欄什麼都統統不要，這樣可以最大程度的展現內容，讓用戶的注意力聚焦。

設置全寬度頁面布局有兩種方式︰

第一種︰在WordPress頁面的母版里選擇 Full-width （有的主題可能提供的全寬度布局叫做landing，但效果是一樣的）。Wordpress本身的header、導航菜單、footer等全局性的元素還會保留。優點是︰可以與原來的主題集成，保留導航的便捷性。缺點是如果不需要這些元素的話，那就是一個累贅。

第二種︰在WordPress頁面的母版里選擇 Elementor canvas。這樣就是完全空白的一個頁面，WordPress自身所有布局元素都消失，一張白紙好作畫。

兩種方式都可以，具體看自己的需求，本次的案例使用的是Elementor canvas，即使沒有導航也完全ok，但是妹子覺得那樣太前衛了。。。怕客戶爸爸欣賞不了，所以後來還是手動加了一個Elementor的導航條。

選擇頁面母版的方式如下 Pages → Add New→ Page Attributes:

如果你的WordPress主題母版不支持Full-width ，那麼你可以選擇Elementor canvas，或者干脆換一個主題，推薦Genesis。

選定頁面母版之後， Save Draft 保存以讓設置生效(這是開始使用Elementor進行編輯之前的重要步驟)。然後，點擊最上面那個大大的藍色按鈕 Edit With Elementor，進入Elementor接管的地盤。

第二步︰打開百寶箱看看

Ok, 現在有了一張空白畫布了，但是並不需要你完全什麼都自己來畫，那樣還有什麼意義？ 點一下紅色加號旁邊的文件夾圖標，看看有什麼驚喜？

簡直是個大寶庫，基本上涵蓋了一個產品展示網頁能用到的所有功能區域，也可以在這里復用你自己保存好的模板。FREE版里面已經有很多不錯的選擇，當然，很多很漂亮華麗的頁面布局模板和預設件是需要PRO版的Elementor，付費購買的。付費版的好處是可以節省你更多的時間，畢竟時間成本也是成本！PRO價格在後面介紹。

第三步︰打個草稿

開始動手之前，最好對你要打造的網站內容有個大致規劃和構想，要分成哪幾大塊？哪一塊放什麼內容？這個只能自己來。這一步可以用紙筆大致畫個草圖，打個草稿，自己能看明白就行，不需要畫的多精美，如下示例︰

這里的每一part自成一體的內容，在Elementor里叫做Section。在html5術語里這叫做語義化標簽，是一個主題性的內容分組，通常用于對頁面進行分塊或者對文章等進行分段，可以簡單理解成段落。就像寫文章一樣，做一個完整的網頁，要把各部分內容結合起來當作一個整體看待，也需要起承轉合，上下關聯，不能東一錘子西一棒子。

Elementor 編輯器的基本操作

現在假設你已經對自己的內容規劃好了，也已經安裝好了，那麼就開始使用Elementor了。開始之前，有必要對Elementor編輯器的整體界面窗口做一點介紹，界面有兩大部分︰
Sidebar

•  邊欄: 用于添加、編輯各種頁面元素，也包含一些全局設定和版本管理

Visual preview 

• 預覽窗口︰ 也是頁面的操作區

頁面元素或者叫頁面元件（element）就是各種封裝好的模塊化功能，好比是一個個不同的樂高積木塊，按鈕是一個element，圖片是一個element，進度條、幻燈片切換、標題等都是element，基本上你能想到的全都有。

插入頁面元件

插入頁面元素最簡單的方式就是拖拽！

Elementor中拖拽插入頁面元件

頁面元件的自定義

選中要你編輯的頁面元件，可以在左邊欄里進行各種自定義，自定義分三部分︰
內容 Content

•  ?? 最重要的部分，該頁面元件的填充內容，比如文字、鏈接等

樣式 Style

•  ?? 顏色、字體等等，也就是化妝打扮

高級 Advanced 

• ?? 設定高級的CSS屬性，比如CSS ID（用來做跳轉的錨定鏈接，後面有介紹）、CSS CLASS、 margins 和 padding，還有其他比如動畫、響應式等等

Elementor中可以對頁面元件進行充分的自定義

刪除頁面元件

刪除同樣很簡單，在刪除的元件上點擊右鍵選擇刪除，或者直接鍵盤上的刪除鍵也可以刪除，不演示了。

導航器（Navigator）

導航器也是Elementor中非常方便的一個功能，以上所說的對頁面元件的各種操作，基本上都可以在導航器里完成，而且當你頁面中插入了很多很多的元件之後，使用導航器甚至更方便，文字不足以描述，看下面的動圖︰

很簡單，基本操作方法一分鐘就可以掌握了，接下來就可以正式開始做頁面了！

我來組成頭部！

首先，先來做一下頭部導航區域︰

• 點加號，選擇兩欄分布（或者其他你需要的），插入一個SECTION 調整欄的寬度，可以通過拖拽來自由調節 左邊拖入一個標題元件（heading），右邊拖入一個導航條元件(Navbar或者Scrollnav) 填入各個元件的自定義內容

導航條可以在頁面之間跳轉，也可以在當前頁面的Section之間跳轉，目前暫時還不能跳轉，因為還沒有東西，可以先把鏈接文字寫好，留個坑位，等全部弄完了再來填鏈接，具體操作在文末有介紹。

我來組成身體！

主題內容部分的操作步驟和上面很類似，三步走，插-拖-改。就不一一描述了，不如自己動手試試。這里可以重點演示一下另外一種便捷快速的用法

插入預設Block

Elementor的素材庫在上文的“打開百寶箱”中已經演示過動圖了，現在我們來詳細看看怎麼用。比如在主體內容部分你需要一個“關于我們”的部分，一種方法就是三部走的方法，插-拖-改，自己弄一個。其實還有一個快捷的方法︰選擇合適的預設Block直接插入，具體操作方法如下圖

在頁面中局部插入Elementor的免費block

點擊文件夾圖標打開Elementor的素材庫（Library） 點擊Block，過濾篩選一下類別，只顯示“about us”這類block 選擇一個可用的（不要錢的）、符合整體風格的blcok 點擊插入，激活