手把手教妹子用WordPress建一個公司官網（2）

bestscreenshot.com

書接上回，上面文章里介紹了域名和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只是露了個臉，驚鴻一瞥，那麼先來看看本期主角的VCR吧：

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

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

總體評分：

• 易用性 ??????????
• 穩定性 ??????????
• 美觀度 ??????????
• 技術支持 ??????

Elementor 怎麼用？

巧婦難為無米之炊，首先肯定是安裝Elementor。付費專業版雖然非常強大，但本篇會基於免費版，官網下載鏈接：Elementor 。http://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，基本上你能想到的全都有。

插入頁面元件

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

頁面元件的自定義

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

• 內容 Content – 最重要的部分，該頁面元件的填充內容，比如文字、鏈接等
• 樣式 Style – 顏色、字體等等，也就是化妝打扮
• 高級 Advanced – 設定高級的CSS屬性，比如CSS ID（用來做跳轉的錨定鏈接，後面有介紹）、CSS CLASS、 margins 和 padding，還有其他比如動畫、響應式等等

刪除頁面元件

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

導航器（Navigator）

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

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

我來組成頭部！

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

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

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

我來組成身體！

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

插入預設Block

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

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

通過這種方式，可以非常方便的弄出需要的各部分內容section，而且美觀度也有保證。免費版只能選擇30種，也勉強夠用了。如果你像我一樣購買了PRO版，那簡直就是如虎添翼，各種高級block隨便插。看看下圖的對比，49刀算貴嗎？

我來組成腳部？

footer同樣道理，這裡就不贅述了額，而且本次沒有弄什麼footer，你也可以在裡面插入各種表單或者彈出框，用來收集用戶信息，做一些交互。

導航鏈接

這一步在前面「選擇布局」中提過，如果你選擇用WordPress主題母版自帶的導航，那麼你就不用在Elementor里再做了，可以在WordPress里修改導航條，也很方便；如果你選擇Elementor自己的導航條，那麼你可能就要麻煩一點，手動一個個的修改每個鏈接文字的目標URL地址。

有一點可以單獨拎出來說一下：關於當前頁面的鏈接。在當前頁面的Section之間跳轉，首先，需要給你的目標Seciton設置一個ID，來用做錨定鏈接，然後，在你的鏈接文字里填入這個id（#someid ）作為鏈接地址

大功告成！

以上這些步驟都是可視化操作，一頓操作猛如虎，對於不複雜的一些官網產品展示頁面已經足夠了，小白妹子都可以完成。她的最終成果在上一篇已經展示過了，這裡也不再展示了，都是妹子一點點自己搞出來的，鼓掌！

編輯完成之後，PUBLISH按鈕一點，大功告成，上線發布，發給客戶，財源滾滾（yy一下）。後面就是對內容的持續優化繼續完善了，畢竟內容為王產品為主，不管多麼華麗的網站，都只能是輔助手段而已。

後來，還有一個彩蛋，和這個妹子之間一個比較好玩的對話：

– 你說這個Elementor這麼強大，那還需要程序員幹嘛呢？

– 程序員就是寫這個工具的啊??

Elementor Pro | 頁面生成器 前端可視化編輯器

在線演示地址

購買地址

推薦閱讀：