第 2 部分:使用 Elementor 為新業務構建 WordPress 網站
已發表: 2020-07-30歡迎來到我們八部分系列的第二部分,它將介紹使用流行的 WordPress 頁面構建器 Elementor 為新業務構建 WordPress 網站所需要做的所有事情。
在第 2 部分中,我們將了解 WordPress,它是什麼以及(簡要地)它是如何工作的。 我們還將查看頁面構建器 Elementor,您將使用它來構建新的商業網站。 此外,我們還將尋找合適的 WordPress 主題,作為我們新網站設計的基礎。
讓我們開始吧!
WordPress 簡介
WordPress 就是所謂的 CMS 或內容管理系統。 它是一款軟件,可讓您輕鬆構建和更新網站,而無需任何編碼。 它於 2003 年推出,從那時起成為當今市場上最受歡迎的 CMS,為全球 37% 的網站提供支持。 這個數字不斷上升,鞏固了它作為全球首選網站設計師的 CMS 的地位。
因為,部分原因在於它的受歡迎程度,它的文檔非常完善,即使對於初學者來說也是完美的選擇。 儘管與任何新工具或應用程序一樣,起初使用起來會讓人感到困惑,但您很快就會了解它的工作原理。 您會發現使用 WordPress 可以快速更新頁面或將博客文章添加到您的網站。 更改照片或添加聯繫表格等任務都可以輕鬆完成。 在合理的範圍內,您幾乎可以使用 WordPress 在網站上做任何您需要做的事情,而無需接觸一行代碼。
WordPress.org 與 WordPress.com
實際上,您可以使用兩個版本的 WordPress。 第一個(也是我們將要使用的)是所謂的自託管 WordPress。 WordPress 被上傳到您自己的網站並安裝,然後您可以根據需要使用 CMS 破解和構建網站。 這個版本的 WordPress 可以從 wordpress.org 下載並且可以免費使用。 這就是所謂的“開源軟件”,這意味著您基本上可以用它做自己喜歡的事情。

可用的第二個 WordPress 版本是 wordpress.com 上的“託管”版本。 在這裡,您可以註冊一個免費帳戶,安裝一個主題(稍後會詳細介紹)並使用 wordpress.com 提供的工具創建一個網站。 因為這個版本是由 WordPress 自己託管的,所以在設計方面你可以對你的網站做些什麼是有限制的。 對於您可用的功能,您也受到更多限制。

雖然 wordpress.com 提供了一種快速、便捷的方式來啟動和運行網站,但通過使用我們將要做的自託管版本,您將享受更多自由來不受限制地創建您想要的網站類型.
WordPress 管理員
我們將在本系列的第 3 部分中介紹如何安裝和設置 WordPress。 不過現在,讓我們快速了解一下您在登錄 WordPress 網站的管理區域(或後端)時將看到的內容。
WordPress 管理員可以被認為是您網站的“控制中心”。 它可以通過您的網絡瀏覽器訪問(您的計算機上不需要任何工具或軟件)。 要訪問此控制面板(或管理區域)的登錄頁面,您將訪問一個特定的網址,例如www.yourwebsite.com/wp-admin (用您自己的網絡域名替換“yourwebsite.com” )。 當您到達此登錄頁面時,您會看到如下內容:

您將需要輸入您的用戶名和密碼(您將在首次設置 WordPress 時獲得)。 輸入這些後,您將被帶到如下所示的管理儀表板:

管理員儀表板是您每次登錄網站時首先看到的內容。 在這裡,您會在左側看到一個菜單,讓您可以訪問您網站上的所有頁面,並能夠編輯設置、添加插件等。 您在網站上需要做的幾乎 99% 的事情都可以通過此管理面板完成。
更好的是,如果您有其他用戶(例如業務合作夥伴)可能希望能夠對站點進行更改,您也可以為他們提供單獨的登錄名。 WordPress 允許您為登錄分配不同的權限級別。 例如,您可能有一位工作人員要更新您的博客。 通過授予他們“編輯”權限,他們可以添加新的博客文章和更新頁面,但不能更改您網站上的關鍵設置。
在我們構建網站時,我們將在本系列的後面部分更詳細地介紹每個區域。 通過本系列的第 8 部分,您將很好地理解幾乎所有這些部分的作用。
頁面構建器簡介
我們現在開始到可以開始建立我們的網站的地步了。 在我們開始之前,首先了解如何在 WordPress 中實際設計頁面很有用。
建立一個網站可能有點令人生畏。 一開始你面臨著很多你必須填寫的白色屏幕空間。在很多年前,為了做到這一點,你需要知道如何按順序編寫 HTML 和 CSS 代碼生成在您的網站上看起來不錯的內容。 雖然編寫一些基本代碼相對容易,即使對於新手來說,設計更複雜的佈局也很困難(即使對於專業人士也是如此!)。
儘管 WordPress 最初使設置網站和添加頁面的過程相對容易,但在不知道如何編碼的情況下對正確的設計進行排序仍然很棘手。
WordPress 提供了一個基本的 WSYWIG 編輯器(所見即所得),它允許您格式化段落、使某些文本變為粗體或斜體等。 這意味著您可以將內容放在看起來有點像這樣的頁面上:

所以,是的,你可以“建立一個網站”,但它看起來不會很好。 即使是看似簡單的任務,例如將文本放入兩列,也需要編碼。
需要一種更簡單的方法來實現頁面佈局任務,如文本列,如果可能的話,還需要更複雜的任務,如添加按鈕和其他“豐富”內容,讓您的網頁開始看起來像您今天更常見的內容。
進入頁面構建器。 頁面構建器完全按照他們所說的去做,並允許您“構建頁面”。 最後,有一種簡單的方法可以創建漂亮的頁面,而無需知道如何編碼。
古騰堡
您可以使用多種頁面構建器。 Elementor 就是其中之一(稍後會詳細介紹)。 WordPress 自己早在 2018 年 12 月就發布了自己的頁面構建器。稱為 Gutenberg,它標誌著在改善網站構建體驗方面邁出了重要一步,特別是對於那些沒有編碼背景的人。
古騰堡是圍繞“塊”建造的。 這些塊有點像磚塊用來構成頁面的佈局。 現在,使用這些塊將文本排列成兩列或將圖像與文本對齊是一個相對簡單的過程。 您可以添加按鈕和其他“豐富”元素,例如社交按鈕甚至日曆。 這些元素是預先構建的,這意味著您只需選擇它們,它們就可以直接使用。
Gutenberg 在使用內置 WordPress 工具構建頁面方面是一個重大飛躍。 而且,令人興奮的是,當 Gutenberg 發佈時,WordPress 的底層結構得到了更新,使 WordPress 能夠繼續作為最好的 CMS 之一繼續前進。

備用頁面構建器 - 介紹 Elementor
WordPress 的巨大優勢之一是其他開發人員能夠構建可在 WordPress 中使用的工具、主題和插件。 因為 WordPress 是開源的,所以它沒有“鎖定”,允許其他人以不同的方式利用該平台。
一個很好的類比是看 iPhone 與 Android 手機。 iPhone被“鎖定”。 硬件(實體手機)和軟件(iOS 操作系統)完全由 Apple 控制。 三星 Galaxy 等競爭對手的手機使用稱為 Android 的操作系統。 這是一個開源操作系統(如 WordPress),允許開發人員對其進行調整以以不同的方式工作。
因此,儘管您可以在 WordPress 中使用 Gutenberg 頁面構建器,但您並不僅限於這樣做。 對於此網站構建,我們將使用名為 Elementor 的第三方頁面構建器。
Elementor 是一個“前端”頁面構建器,不像 Gutenberg 是一個“後端”頁面構建器。 這意味著您可以在網站上以視覺方式構建頁面,這與 Gutenberg 不同的是,Gutenberg 的構建是在網站的“後端”完成的,並且您只能在發布頁面時看到您的更改。

Elementor 具有使設計美觀的網站比以往任何時候都容易得多的功能。 您可以從字面上拖放頁面周圍的文本、圖像、按鈕等來構建您的網站。 您將能夠立即看到此頁面發布後的外觀。 您不需要編碼,最重要的是它是免費的!
這是一個非常受歡迎的頁面構建器。 為什麼? 因為它真的非常非常擅長它的工作。 在本系列中,我們將逐步引導您完成創建自己的網站所需的過程。
因為它非常靈活,您將能夠走開並設計一個看起來像您想要的外觀的網站。 不喜歡按鈕的位置? 你可以移動它。 想要標題字體更大嗎? 這很容易。 使用起來很有趣,因為您可以如此快速地獲得結果。
開始使用主題
如果您對 WordPress 進行過任何閱讀,您可能會看到人們談論“主題”。 事實上,我們自己已經提到過一兩次。 那麼,什麼是主題?
當您最初設置一個網站時,您會面臨很多白色的空白屏幕空間......您想說的太多,並且您對您希望網站的外觀有一個願景,但是這之間的飛躍而眼前空蕩蕩的屏幕,卻能感受到浩瀚無垠。
救援主題! 其他開發人員並沒有完全從頭開始構建您的網站,這可能會非常耗時,而是構建了廣泛可用的預先設計的“主題”,在許多情況下是免費的。 在構建網站時,主題為您提供了一個良好的開端,以至於大多數 WordPress 開發人員在為客戶構建網站時會以一種或另一種形式使用主題。 真正定制的網站實際上很少而且相差甚遠(儘管許多網頁設計師可能會暗示)。 為什麼? 嗯,很簡單,時間。 時間就是金錢,建立一個定制的網站需要時間……很多! 反過來,這要花很多錢。
因此,以主題的形式採用預先存在的設計,然後根據您的設計要求對其進行定制要容易得多。 可以把它想像成造一輛汽車。 你可以從頭開始做,但實際上你最好購買一些核心部件,如底盤、車輪、車身面板等,然後調整這些部件,如顏色、座椅樣式、內部佈局等。 你最終會得到一輛“定制”的汽車,但比從頭開始製造每一個部件要快得多(也便宜得多)。
選擇主題
像數百萬其他 WordPress 用戶一樣,我們將選擇一個主題作為我們新網站的基礎。 那裡有無數的主題提供者,您很有可能找到與您的願景相匹配的設計。 不要忘記,如果某些元素不適合您的業務並不重要。 使用 Elementor,我們將更改圖像、顏色、徽標、文本、頁面佈局等,以創建本質上為您的業務定制的網站。
選擇主題時,需要考慮幾件事:
- 費用:有無數的免費主題可供選擇,其中很多都相當不錯。 有些是所謂的“高級”主題,並帶有價格標籤。 高品質主題的零售價一般在 60 美元左右,所以我們不是在談論銀行打破價格標籤(而且主題肯定比設計師便宜)。
- 質量:就像汽車一樣,有好的主題和壞的主題。 查看評論(如果有的話)並考慮設計師對主題的支持程度。 再次使用汽車作為我們的類比,我們希望梅賽德斯在陳列室中直接運行良好,並且我們有信心如果出現任何問題,它會得到糾正。 然而,一個便宜又開朗的汽車品牌可能無法提供相同水平的質量或售後支持。
- 設計和功能:雖然主題通常可以進行大量定制,但從設計和功能的角度來看,選擇盡可能多的選項是有意義的,因為這意味著您要做的工作更少! 同樣,使用我們的汽車類比,當您知道您需要 4 門轎車時,您不會購買 2 門跑車。
- 兼容 Elementor: Elementor 旨在與幾乎任何主題一起使用,但如果將它與考慮到 Elementor 構建的主題結合使用,您將獲得最佳效果。 在可能的情況下,選擇一個表明它與 Elementor 兼容的主題。
從哪裡獲得主題
如前所述,那裡有很多不同的主題提供者。 WordPress 本身有一個主題庫,其中包含由 WordPress 和第三方設計師構建的主題。 在這裡查看。
一個受歡迎的獨立主題商店是 Theme Forest。 您會發現數以千計的高質量主題可供選擇(大多數是“高級”主題,價格約為 40 至 60 美元)。 只需確保選擇與 Elementor 兼容的一個(除非您希望使用其他頁面構建器)。

Elementor 本身有一系列主題可供您選擇,請看這裡。
最後,還有一些獨立的主題設計師,他們提供了一些經過精心設計的主題,可與 Elementor 一起使用。 一個這樣的供應商稱為 Astra。 Astra 長期以來一直被認為是精心編碼的 WordPress 主題的提供商,這些主題經過量身定制,可以與 Elementor 完美配合。 他們提供免費和付費的主題。 這是他們的免費主題之一,我們將使用它來構建我們的網站!

在花了一些時間瀏覽了他們設計的主題目錄(Astra 稱之為“入門模板”)之後,我們選擇了一個名為“共同工作空間”的主題。 使用此主題構建的演示站點適用於 Office 提供商(不是管道工!)。 但是有很多我們喜歡這個網站的設計元素,我們可以看到這些元素適用於我們的管道網站。

在本系列的第 3 部分中,您將看到我們如何安裝 WordPress,安裝我們的頁面構建器 Elementor,並開始實際設計我們的網站!