尋找一種簡單的方法來創建一頁網站嗎？在本教程中，我們將向您展示如何使用Elementor和免費的WordPress主題製作一頁網站。
您將可以使用可視化編輯器來自定義網站的每個部分，並且不需要任何技術知識即可遵循本指南。準備建立您的一頁網站嗎？讓我們開始吧。
為什麼選擇Elementor和WordPress？
WordPress是一個功能強大且免費使用的內容管理系統。它使您幾乎可以創建任何類型的網站-從簡單的個人博客或小型企業網站，到大型公司網站或大型在線商店。另一方面，Elementor是易於使用的，功能豐富的頁面構建器，可輕鬆在WordPress網站中創建任意數量的頁面。
在本教程中，我們將使用一個水果和蔬菜商店的單頁網站示例。該網站將具有：
- 一頁，其中包含許多內容
- 訪問者可以單擊菜單直接進入相關部分
- 標有徽標和菜單的標題
- 頁腳
以下是網站結尾的預覽：
使用Elementor創建一頁網站所需的內容
讓我們從使用Elementor的一頁網站開始所需的必要項目開始：
- 乾淨的WordPress安裝。您可以在此處查看如何安裝WordPress
- 活躍的WordPress主題。我們在這裡使用Neve主題，但是您也可以選擇任何其他主題。Neve的優點是載入速度快，並且與大多數頁面構建器（包括Elementor）兼容。另外，它有許多可下載的模板
- Elementor頁面構建器。有一個免費版本，以及Elementor Pro。在本教程中，我們將使用免費的Elementor構建器。通過Pro Builder，您可以訪問更大的模板/塊庫以及其他小部件。
如何使用Elementor創建一頁網站
我們將詳細介紹每個步驟，但這是基本過程：
- 安裝免費的Neve主題。
- 如果尚未安裝Elementor插件。
- 設置網站的「畫布」 –頁眉，頁腳和菜單。
- 使用Elementor添加您的內容。
- 將菜單鏈接到設計中的不同部分，以創建一頁導航效果。
- 將您的設計設置為站點的主頁。
1.安裝免費的Neve主題
- 轉到WordPress儀錶板中的外觀>主題>添加新項。
- 搜索「 Neve」
- 點擊安裝按鈕
- WordPress安裝主題後，單擊「激活」使其生效
2.安裝免費的Elementor插件
- 轉到插件>添加新
- 搜索「 Elementor」
- 安裝並激活免費的Elementor Page Builder插件。
現在，有了一個乾淨的WordPress安裝，活動的Neve主題以及Elementor頁面構建器，您都可以構建自己的一頁網站。
3.設置頁眉，頁腳和菜單
您將使用Neve主題設置一頁網站的頁眉，頁腳和菜單。
標頭
轉到WordPress儀錶板，然後單擊外觀>主題>自定義以自定義Neve主題：
首先，您將選擇網站的顏色和背景
接下來，在「定製器」面板上，單擊「頁眉」>「更改徽標」，然後添加站點的徽標。調整徽標的寬度，添加網站標題，網站圖標和標語。選擇在標題中顯示還是隱藏網站名稱和標語。
在「布局」選項卡下，選擇頁眉和顏色的布局，然後設置填充和邊距。或者，選擇標題預設之一。
菜單
接下來，您需要創建將顯示在標題中的導航菜單。為此，請單擊菜單>創建新菜單。給它命名，並將其菜單位置設置為等於主菜單。
單擊下一步，然後添加項目。在這裡，添加您將要創建的部分的名稱。例如，「主要」，「關於我們」，「產品」和「聯繫人」。為此，請單擊「自定義鏈接」按鈕。
在URL欄位中，輸入一個＃號，然後輸入該部分的名稱。稍後，在設置Elementor時，將對其進行配置，以便這些鏈接轉到設計中的特定部分。例如：
- ＃關於我們
- ＃產品
- ＃聯繫
頁腳
移至頁腳並添加文本和背景色。您可以在此處添加任何您喜歡的內容：
點擊發布以保存所有更改
在此階段，您的站點具有頁眉，頁腳和菜單。它看起來應該像下面這樣。現在，您可以使用Elementor添加頁眉和頁腳之間的內容了：
4.創建一個新頁面並使用Elementor添加內容
首先，請轉到頁面>添加新頁面以創建新頁面。給頁面命名。如果主題提供了側邊欄，則也將顯示。但是您可以通過將頁面屬性調整為全寬來剪切側邊欄。
在打開的新頁面上，單擊「使用Elementor編輯」。它在左側打開一個面板。右側是編輯區域，您將在其中看到網站的形成。
快速入門Elementor界面
在繼續之前，讓我們看一下Elementor面板。它具有許多創意元素或小部件，例如標題，段落，圖像或視頻。您可以通過將它們拖到上方來將它們添加到您的內容中。
面板的左上方是漢堡菜單，可打開許多選項。在這裡，您將能夠在全局級別上調整顏色，字體和主題樣式。不用說，這在添加新頁面時可以節省大量時間。
從此選項卡，您還可以隨時退出WordPress儀錶板。
在面板的底部，有一些選項可用於調整頁面設置，命名頁面，查看編輯歷史以及在響應模式之間切換。另外，還有一個導航器，顯示頁面的組織視圖。
通過單擊眼睛圖標，可以預覽頁面，並在準備好發布時，單擊「發布」按鈕。
現在，該開始添加一些內容了。
使用Elementor創建一頁網站的兩種方法
在此階段，您可以選擇通過兩種方式使用Elementor構建一頁網站：
1.插入Elementor的預構建模板之一，然後根據需要對其進行自定義。為此，請在設計的實時預覽中單擊文件夾圖標，它將打開許多模板，其中一些是免費的，許多是專業的。在頁面選項卡中，您將找到整個頁面的完全完成的設計。在「塊」選項卡中，您將找到較大頁面特定部分的預構建模板（這對於一頁網站最有用）。
您可以通過單擊插入任何模板。然後，您將能夠完全自定義每個元素。
2.另外，您也可以從頭開始，方法是單擊加號以添加一個部分並從空白畫布中構建設計。
就本教程而言，我們將兩種方法結合使用-我們將從頭開始構建網站的第一部分，然後從模板塊中進行選擇以填充其餘部分。
如何使用Elementor創建一頁網站的各個部分
Elementor使用節，列和小部件來創建任何頁面的布局。節是最大的構建基塊，您可以在其中添加列。在這些部分或列中，您將能夠添加所需的小部件。
單擊「 +」號以添加部分並選擇列結構。
當您將滑鼠懸停在某個部分上時，將出現一個藍色邊框，頂部帶有一個手柄。使用此手柄可以在現有部分上方添加新的空白部分，或編輯/刪除部分。單擊中間的點可訪問部分控制項-布局，樣式和高級。此外，您可以通過拖動點來上下移動這些部分，然後右鍵單擊以顯示更多選項，例如重複或刪除。
同樣，您可以單擊右上角的列圖標手柄以在該部分中選擇列布局。您還可以調整列的寬度以及它們之間的間隔。右鍵單擊框以添加更多列，複製現有列，將其刪除等等。
在Elementor面板中，可以將任何元素（稱為小部件）拖動到列中。將元素添加到列或節後，鉛筆圖標將顯示在右上角。單擊此圖標可在Elementor面板中顯示內容，樣式和高級編輯選項。
如何創建第一部分
我們將使用第一部分來讓訪問者了解業務的性質以及一些相關知識。為此，您可以使用該部分的整個寬度來承載背景圖像。在編輯節布局時，您可以調整內容的寬度並將節拉伸到頁面的整個寬度，只需切換按鈕即可。
要添加背景圖像，請通過單擊手柄中的點來選擇「編輯區域」選項。訪問面板中顯示的「樣式」選項卡，然後從「媒體庫」上載圖像。調整圖像和疊加層的大小。
我們將在該部分中添加單個列，並將其在該部分中居中。在該列內，我們將使用三個小部件-標題，該標題告訴訪問者您正在出售新鮮水果和蔬菜；文本編輯器，它吸引了人們對送貨上門的選擇的注意；以及一個按鈕，訪客可以從中訂購商品。
添加標題小部件：
拖動文本小部件：
添加按鈕小部件：
現在，您可以使用編輯選項來自定義每個小部件。
如果願意，您還可以通過單擊列圖標來添加列，從而在三個單獨的列中添加小部件。這裡要注意的重要一點是，每個小部件都可以根據布局，樣式等進行細微調整。
創建其餘部分
現在第一部分已經完成，您可以轉到其餘三個部分-關於我們，產品和聯繫方式。
如前所述，我們將使用Elementor庫中的現成模板塊來構建這三個部分。Elementor在這些類別下都有許多免費的模板塊，並且該庫是可搜索的。
對於「關於我們」部分，我們將選擇一個帶有標題，文本編輯器和視頻小部件的簡單模板塊。您可以用自己的內容替換所有這些內容。
具有替換內容的模板塊：
以相同的方式，您可以將模板塊用於「產品和聯繫人」部分。用於「聯繫人」部分的模板帶有社交媒體圖標。單擊樣式選項卡，以控制圖標的顏色，大小，填充等。
由於Elementor允許進行大量自定義，因此您可以使這些部分看起來與導入的模板不同。
完成所需的更改後，單擊綠色的「發布」按鈕，這些更改將在網站上實時顯示。
5.將菜單鏈接到一頁區域
為了擁有可單擊的導航菜單，您需要將Elementor設計中的各個部分與在步驟3中創建的導航菜單連接起來。為此，請打開部分的ID，然後轉到「高級」標籤。在Elementor Panel的相應部分的CSS ID欄位中，輸入正確的部分名稱（不帶井號）。
例如，如果菜單鏈接到＃about-us，則可以將CSS ID添加為about-us。然後，對要鏈接到的所有部分重複該過程：
6.將您的設計設置為主頁
最後，您可以將剛剛創建的頁面設置為用Elementor創建的一頁網站的主頁。為此，請轉到設置>閱讀。單擊「顯示的主頁」下的「選擇靜態頁面」，然後選擇您創建的設計。最後，點擊保存更改。
如果您對任何步驟感到困惑，我們都會提供有關設置靜態WordPress主頁的完整指南。
最後，您的單頁網站現在可以使用了。這是一個可能看起來像的例子：
結論
使用Elementor和WordPress創建一個基本的單頁網站實際上並不那麼困難。關鍵要素是將自定義CSS ID添加到每個Elementor部分，然後使用該ID將主題的導航菜單鏈接到每個部分。
對於創建此一頁效果的其他選項，您還可以使用一頁WordPress主題，我們在此處為此編寫了教程。
您仍然對如何使用Elementor和Neve創建WordPress一頁網站有任何疑問嗎？在評論中問我們！