擁有一個設計合理的「關於」頁面可以為您的線上企業整體形象帶來很大幫助。

但有一個問題…

讓我們面對現實吧，如果您的目標是影響力，WordPress 為您提供的標準開箱即用頁面外觀將無法滿足您的需求。您基本上得到的只是一個經典的頁面佈局，其中包含一個用於頁面正文的主要內容區塊（並且無論您使用的主題如何）。

我們可以做得更好！而且，正如您所期望的，我們將這樣做：

• 您最喜歡的頁面建立器（也是我們的），
• 免費的 Hestia 主題（Hestia 是在考慮到 Beaver Builder 相容性的情況下建立的，但此方法應該適用於任何品質主題）。

在本指南中，我將逐步向您展示如何建立出色的材料設計「關於」頁面。這是我們想要的最終效果：

創建這樣的頁面比乍看起來簡單得多。這是一步一步：

一個好的「關於」頁面需要的東西

在建立「關於」頁面時，您應該致力於實現一些關鍵目標：

• 向訪客介紹您的業務/品牌，
• 講述你的故事，
• 簡要總結企業的業務，
• 展示您的熱門產品和/或內容，
• 告訴人們在哪裡可以更多地了解您。

以下是這一切的具體過程：

首先取得 Beaver Builder 和 Hestia 主題

如果您還沒有使用 Beaver Builder，請按一下此處。您也可以使用免費版本（從此處），但這將限制您可以在「關於」頁面上放置的內容區塊的類型。

Hestia 是一個免費主題，您可以從此處下載（或直接透過 WordPress 儀表板找到它）。

那為什麼是赫斯提亞呢？完全披露，我為構建該主題的公司工作；這也是為什麼我知道 Hestia 與 Beaver Builder 整合得很好（它實際上是在考慮頁面建立器的情況下創建的），而且它也是 Beaver Themer 為數不多的官方支援的主題之一。

筆記。正如我所提到的，這種方法並不是 Hestia 獨有的，它也應該適用於 90% 的其他主題，至少是高品質的主題（眨眼！）。

在您的網站上安裝 Beaver Builder（專業版或免費版）和 Hestia 後，您可以開始建立實際頁面：

建立空白的「關於」頁面

如果您已經使用 WordPress 一段時間，那麼最初的步驟並不奇怪：

首先正常建立一個新頁面。

為了確保您獲得完整的 Beaver-Builder 最佳化體驗，請將頁面範本切換為「Page Builder Full Width」 。保存草稿。

這將擺脫大部分主題的預設樣式，只留下頁首和頁尾。

現在是時候啟動 Beaver Builder 了。

建立主標題和歡迎區塊

首先，最好將「關於我們」放在頁面頂部的某個位置。

我們透過建立一個新的1 列行來實現這一點。

為了使它看起來很棒，我們將其設置為“全寬”和“固定內容寬度” 。就像這樣：

我們還在背景中放置一張漂亮的圖像：

為了讓它看起來更統一，讓我們加入一個背景疊加層。顏色由您和您品牌的官方顏色決定。

將不透明度設為80%-90%通常效果最佳。

關於這一行的最後一件事；讓我們將選項卡從「樣式」切換到「進階」 ，並調整上邊距。對於 Hestia 主題，如果您希望新區塊從頂部選單列一直延伸，則應將頂部邊距設為-50px左右。要使行更高一點，您還可以設定頂部和底部填充值。

接下來，讓我們為該行添加一個實際的標題區塊。您可能想在此處放置“關於我們”。我們還將文字顏色設為白色以獲得額外的可見性。

主頁標題完成後，讓我們新增一個歡迎區塊。

為此，我們將新增另一個1 列 row 。這次，我們將寬度設定為固定。

在該行中，我們添加兩個模組：

• 標題– 歡迎訊息的標題
• 文字編輯器– 用於實際訊息

Hestia 與 Beaver Builder 整合的好處在於，您無需調整這些模組的任何設定即可使它們看起來很棒。所需要做的就是添加您的副本。就像我在這裡所做的那樣：

講述一些有關您的產品或服務的信息

現在是時候告訴人們您的業務是什麼了。這通常涉及展示您的產品、服務，或告訴人們為什麼他們應該與您開展業務。

一種流行的方法是將三個視覺內容塊並排放置。像這樣的東西：

為了得到這種效果，我們首先新增一個新行，但這次是3 列。

為了使所有內容更具可讀性，增加整行的寬度也是一個好主意。就我而言，1100px的固定寬度似乎恰到好處。

現在讓我們開始填入各個列。我使用的確切模組是：

• 照片
• 標題
• 文字編輯器

每個模組的設定幾乎都是預設的。您無需進行太多調整即可使其看起來很棒。當然，您在這些區塊中放置的確切圖像和副本取決於您。

這是第一欄。創建另外兩個模組的最簡單方法是實際複製每個模組並將它們拖放到適當的位置。就像這樣：

說你的故事

由於這是我們正在建立的「關於」頁面，因此最好在頁面上專門開闢一個部分來講述您的業務如何開始、團隊成員是誰等等的故事。

為了保持整個頁面的設計一致，我們可以重複使用第一行——帶有頁面主標題的行。

只需滾動到頁面頂部並複製第一行即可。然後，將其拖曳到您需要的位置。就像這樣：

現在您可以編輯標題並將其從“關於”更改為“我們的故事”或其他有意義的內容。

為了增加一些風格，我還喜歡在標題正下方放置一個分隔符號。

我更改的唯一設定是：

• 顏色–白色 (#ffffff)
• 高度– 4 像素
• 寬度–定制
• 自訂寬度– 10%

這些給了我你在上面看到的效果。

組成我的故事部分的最後兩個模組是一個簡單的文字編輯器（用於實際故事；文字顏色更改為白色）和一個按鈕（用於號召性用語）。

這是完整的區塊：

展示您的熱門內容

您的「關於」頁面是宣傳您的一些熱門內容的好地方。畢竟，由於訪客決定點擊並查看您的「關於」頁面，因此事實證明他們對網站背後的人高度參與和感興趣。因此，他們可能也會有興趣查看您的更多內容 - 尤其是您最好的內容！

為了向他們展示這一點，我們可以做一些很酷的 Beaver Builder 技巧：

首先，在新的瀏覽器標籤中再次開啟主 WordPress 儀表板並前往Posts 。為您的貼文建立一個新類別，並將其命名為「特色」或「最佳」。瀏覽您發布的貼文並選擇 3-6 個您認為最好的貼文。將它們新增至該新類別。

回到海狸建造者。建立一個新的1 列 row 。首先，只需新增一個新標題和一個分隔符號即可。

標題採用預設設置，分隔符號再次設定為高度4px和自訂寬度10% 。這次，分隔符號的顏色設定為黑色（#000000）。

現在最好的部分是，我們將透過名為Posts 的模組添加實際的帖子。

這個模組真的很聰明。它允許您選擇帖子的佈局、決定是否顯示帖子的精選圖像、設定要顯示的帖子數量、過濾實際帖子等等。

我的頁面最終效果如下：

我使用的設定；從「佈局」標籤開始：

• 佈局→砌體
• 等高→是
• 柱對齊→中心
• 圖片→顯示
• 圖片尺寸→Hestia 博客
• 作者→隱藏
• 日期→隱藏
• 評論→隱藏
• 內容→隱藏

樣式選項卡：

• 後邊框類型→無

內容選項卡：

• 過濾器→類別→ “精選”（這將確保只顯示分配給該類別的帖子）

分頁選項卡：

• 分頁樣式→無
• 每頁貼文→6

上述許多設定（尤其是最後一個分頁選項卡）都取決於您 - 基於您想要展示的貼文數量以及您是否有有吸引力的特色圖像。

鼓勵人們在社群媒體上關注您

最後，為了結束整個頁面，讓我們鼓勵您的訪客在社交媒體上關注您。為了實現這一點，讓我們重複使用我們剛才處理的「故事」區塊。

首先，複製整個“故事”行並將其一直拖到底部。

接下來，將標題副本更改為與社交媒體更相關的內容，同時刪除原始的文字編輯器和按鈕模組。

在它們的位置上，讓我們新增一個新模組 –Icon Group。這非常適合這項工作，因為我們可以展示一些單獨的社交媒體圖標並將它們連結到您的個人資料。

我們先從整個模組的設定開始。特別是，讓我們切換到“樣式”選項卡並設定這些：

與大多數設定一樣，這取決於您的個人喜好，但上述值似乎保證了整個區塊的良好清晰度和可讀性。

讓我們切換回“圖標”選項卡。我們可以在此處添加單獨的圖標。

為此，請按一下「編輯圖示」 ，然後按一下「選擇圖示」 。您將看到一個漂亮的可搜尋面板，其中有大量圖示可供選擇。我首先需要一個Facebook圖示：

選擇圖示後，不要忘記將連結參數設定為指向您的給定社交媒體設定檔。

最後，您可以切換到“樣式”標籤並調整圖示的各種顏色設定以使一切合適。

完成後，按一下「儲存」 。

您可以透過點擊「新增圖示」並重複此過程在此處新增多個圖示。我最終使用了三個圖標，分別是Facebook、Twitter和YouTube。

這是最終效果：

完畢！

至此，您的材料設計「關於」頁面已完成！

這又是它所有的榮耀：

另一個好處是您也可以將該頁面重複用於其他目的。透過一些小的調整，您可以將其用作產品登陸頁面，甚至您的主頁。

關於卡羅爾·K

Karol K. 是一位 WordPress 專家、部落客，也是《WordPress Complete》的出版作者。