用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建一個公司官網(2)︰神器Elementor

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

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

用WordPress建一個公司官網(2)︰神器Elementor

第二步︰打開百寶箱看看

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

用WordPress建一個公司官網(2)︰神器Elementor

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

第三步︰打個草稿

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

用WordPress建一個公司官網(2)︰神器Elementor

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

Elementor 編輯器的基本操作

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

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

Visual preview 

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

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

插入頁面元件

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

用WordPress建一個公司官網(2)︰神器Elementor

Elementor中拖拽插入頁面元件

頁面元件的自定義

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

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

樣式 Style

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

高級 Advanced 

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

用WordPress建一個公司官網(2)︰神器Elementor

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

刪除頁面元件

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

導航器(Navigator)

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

用WordPress建一個公司官網(2)︰神器Elementor

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

我來組成頭部!

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

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

用WordPress建一個公司官網(2)︰神器Elementor

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

我來組成身體!

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

插入預設Block

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

用WordPress建一個公司官網(2)︰神器Elementor

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

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