手把手教妹子用WordPress建一個公司官網(wǎng)（2）

時間：2023-08-27 16:30:01 | 來源：網(wǎng)站運營

時間：2023-08-27 16:30:01 來源：網(wǎng)站運營

手把手教妹子用WordPress建一個公司官網(wǎng)（2）：

轉(zhuǎn)自丘壑博客，轉(zhuǎn)載注明出處




書接上回，上面文章里介紹了域名和WordPress托管服務(wù)這些前置步驟，相當于一個公司官網(wǎng)的基礎(chǔ)設(shè)施建設(shè)，房子已經(jīng)蓋起來了，本篇我們來繼續(xù)搞一下裝修。看看怎么快速把一個毛坯房改造成高大上的“民宿”

Page Builder 是什么？

首先，介紹一個概念：Page Builder — 可視化編輯器，也可以叫頁面構(gòu)建器。

Page Builder 是一種 WordPress 插件，可以把WordPress上的頁面、文章的內(nèi)容編輯區(qū)變成模塊化的可拖拽區(qū)，創(chuàng)建、編輯、自定義各種操作完全是圖形化、可視化操作，所見即所得，讓用戶可以在瀏覽器中搭建出美觀又專業(yè)的頁面布局。如果這樣說還是比較抽象的話，可以把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站點的網(wǎng)頁設(shè)計水準提高了一個檔次，擁有非常豐富的高級功能，無論是對入門者還是經(jīng)驗豐富的用戶都很適用，同時也提供各種高級付費功能和API，是一個全能型的Page Builder。自從上線發(fā)布之后發(fā)展迅速，現(xiàn)在的用戶群體已經(jīng)擴大到180個國家地區(qū)，安裝量超過兩百萬，2500多個五星評價。主要功能亮點如下：

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

總體評分：

• 易用性 ??????????
• 穩(wěn)定性 ??????????
• 美觀度 ??????????
• 技術(shù)支持 ??????

Elementor 怎么用？

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

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

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

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

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

第一步：選擇布局

對于做產(chǎn)品介紹型的單頁面公司官網(wǎng)，頁面布局肯定要選擇 full-width 全寬度，側(cè)邊欄什么都統(tǒng)統(tǒng)不要，這樣可以最大程度的展現(xiàn)內(nèi)容，讓用戶的注意力聚焦。

設(shè)置全寬度頁面布局有兩種方式：

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

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




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

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








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

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

第二步：打開百寶箱看看

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

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

第三步：打個草稿

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







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

本次實際案例的內(nèi)容規(guī)劃就是我上一篇中說過的讓妹子整理的東西，包括幾部分：導(dǎo)航、產(chǎn)品介紹、我們的優(yōu)勢、我們的服務(wù)、聯(lián)系我們。中規(guī)中矩，簡單明了，有話則長，無話則短。

Elementor 編輯器的基本操作

現(xiàn)在假設(shè)你已經(jīng)對自己的內(nèi)容規(guī)劃好了，也已經(jīng)安裝好了，那么就開始使用Elementor了。開始之前，有必要對Elementor編輯器的整體界面窗口做一點介紹，界面有兩大部分：

• Sidebar 邊欄: 用于添加、編輯各種頁面元素，也包含一些全局設(shè)定和版本管理
• Visual preview 預(yù)覽窗口： 也是頁面的操作區(qū)

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

插入頁面元件

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

頁面元件的自定義

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

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

刪除頁面元件

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

導(dǎo)航器（Navigator）

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







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

我來組成頭部！

首先，先來做一下頭部導(dǎo)航區(qū)域：

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

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

我來組成身體！

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

插入預(yù)設(shè)Block

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

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

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

我來組成腳部？

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

導(dǎo)航鏈接

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

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

大功告成！

以上這些步驟都是可視化操作，一頓操作猛如虎，對于不復(fù)雜的一些官網(wǎng)產(chǎn)品展示頁面已經(jīng)足夠了，小白妹子都可以完成。她的最終成果在上一篇已經(jīng)展示過了，這里也不再展示了，都是妹子一點點自己搞出來的，鼓掌！

編輯完成之后，PUBLISH按鈕一點，大功告成，上線發(fā)布，發(fā)給客戶，財源滾滾（yy一下）。后面就是對內(nèi)容的持續(xù)優(yōu)化繼續(xù)完善了，畢竟內(nèi)容為王產(chǎn)品為主，不管多么華麗的網(wǎng)站，都只能是輔助手段而已。

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

– 你說這個Elementor這么強大，那還需要程序員干嘛呢？
– 程序員就是寫這個工具的啊

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

在線演示地址

購買地址