在 WordPress 中創建具有單頁導航的單頁網站（有獎勵）

您是否正在為您的企業建立一個網站，但沒有時間創建一個大型網站？ 或者還沒有準備好長期進行網站維護？

然後，您應該選擇帶有單頁導航的單頁網站。 單頁網站以有吸引力的方式提供所有信息，並為您的網站提供令人驚嘆的外觀，以便您的用戶可以參與更多。

在本博客中，您不僅將學習如何在 WordPress 中創建具有單頁導航的單頁網站，還將學習如何在彈出窗口中添加聯繫表單作為獎勵。

大多數人如果找不到與所有者聯繫的適當方式，就會離開網站，因此這個額外提示將真正為您的網站增加非凡的價值。

讓我們不再浪費時間，開始使用Elementor 單頁導航創建一個外觀精美的網站。 您可以通過下面的按鈕查看網站的最終外觀：

什麼是一頁導航？

顧名思義，單頁導航是專門設計用於導航到單頁網站的不同部分的導航菜單。 具有平滑滾動效果的單頁導航使導航到不同部分成為一種簡單且用戶友好的體驗。

“簡單是終極的複雜性。” ——列奧納多·達·芬奇

這種簡單性使單頁網站比其他網站更具優勢。 單頁網站非常適合小型企業，例如婚禮策劃師、攝影、小型沙龍、餐廳等。

但是，如果您的電子商務企業銷售過多產品或提供多種服務並且需要迎合更多受眾，那麼單頁網站不適合您。

帶有單頁導航的單頁網站有什麼好處？

您不應該僅僅因為您的企業很小就考慮為您的企業建立一個單頁網站。 擁有一頁網站特別是一頁 WordPress 網站還有很多其他好處。 讓我們來看看其中的一些優點：

• 首先，它適合移動設備。 在網站 SEO（搜索引擎優化）方面，這是需要考慮的關鍵因素。 截至 2021 年，70% 的美國公民使用移動設備在互聯網上搜索。 此類數據是 Google 優先考慮適合移動設備的網站的原因。 通過單頁設計，您的網站從一開始就被 Google 的好書收錄。

• 大多數人更喜歡一個簡單、漂亮、中肯的網站，而不是不必要的冗長網站。
• 谷歌將域和頁面級鏈接權限計為 40%。 這是您的單頁網站將具有優勢的另一個領域。
• 單頁網站比擁有大量頁面的網站加載速度更快。 考慮到當今人們擁有無限選擇的事實，擁有一個快速加載的網站確實是不容商量的。
• 一頁網站易於維護。
• 由於單頁網站將所有信息都放在一個頁面上，滾動導航使導航更容易，流暢的滾動效果使用戶體驗舒緩。

我可以再講一些時間，但我認為上述信息確實傳達了這樣一個信息，即如果您的企業很小，那麼使用帶有一頁導航的小型網站實際上可以獲得很大的好處。 所以，讓我們跳到主流程，不要浪費時間。

如何在 WordPress 中使用一頁導航創建單個網站

在本博客中，我將向您展示的不僅是如何構建網站，而且是在 WordPress 中打造現代外觀的單頁導航，這將給您的潛在客戶留下深刻印象。 對於本教程，我將使用流行的網站構建器 WordPress（我知道它在標題中說！）

那麼，讓我們開始吧……

第 1 步：安裝所需的 WordPress 插件

在系統上安裝 WordPress 後。 您需要安裝以下 WordPress 插件：

• Elementor （免費版）
• ElementsKit （免費版和專業版）
• MetForm （免費版）

完成安裝和激活所需的 WordPress 插件後，就可以構建站點了。

第 2 步：使用 ElementsKit 預製頁面創建網站

ElementsKit 提供了許多預製的頁面、模板和部分，因此人們可以構建具有他們想要的任何設計、佈局和样式的網站，而無需編碼。 對於這個博客，我將使用 ElementsKit 的婚禮策劃登陸頁面。

要創建您的網站，從 WordPress 儀表板，轉到頁面 ⇒ 添加新

• 給出一個標題，例如 Home，從 Template 選項中選擇Elementor Full Width
• 單擊以發布，發布後單擊使用 Elementor 編輯

• Elementor Builder 窗口打開後，單擊 ElementsKit 按鈕 (EK)

• 轉到頁面選項卡，搜索婚禮頁面並單擊插入

現在點擊更新保存

步驟#3：如何使用 ElementsKit 添加 Elementor 一頁導航

現在我們有了我們的網站，是時候添加一頁滾動導航的有趣部分了。ElementsKit 單頁滾動導航更易於使用，並為您的網站提供令人驚嘆的外觀。 您不太可能找到另一個與 ElementsKit 一樣好的單頁導航 Elementor 插件。

現在，讓我們看一下將一頁滾動導航鏈接添加到您的 WordPress 網站的分步過程：

3.1 打開頁面滾動模塊

要將滾動導航添加到您的 WordPress 站點，首先，我們需要打開單頁滾動模塊。

• 轉到： WordPress 儀表板⇒ ElementsKit ⇒ 模塊
• 打開單頁滾動
• 單擊保存更改以更新

3.2 從頁面設置啟用一頁滾動

• 單擊 Elementor 面板左下角的設置圖標
• 打開 ElementsKit 設置選項卡
• 啟用單頁滾動選項

注意：如果您找不到 Onepage Scroll Setting 選項，那麼您可能尚未激活 ElementsKit Pro

3.3 選擇導航風格

現在，是時候選擇導航樣式了。 ElementsKit 為您提供多種導航選項。 例如，在圓圈下，您可以獲得放大、填充、填充等。對於方形圖案，您將擁有放大等選項，作為線條的一部分，您將獲得線條增長、線條填充等選項，線收縮等。

你可以選擇任何你喜歡的風格，對於這個博客，我將選擇自定義圖標。 選擇自定義圖標後，您將獲得一個選項來為單頁滾動導航樣式選項選擇圖標。 您可以從圖標庫中選擇圖標或上傳自定義SVG 圖標。

選擇自定義圖標

• 從導航樣式下拉列表中選擇自定義圖標選項
• 將鼠標懸停在導航圖標上，然後單擊圖標庫
• 搜索並插入您喜歡的圖標

3.4 設置其他導航設置

選擇導航樣式後，您將可以訪問以下設置：

• 導航位置：您可以將導航位置設置為上、右、下或左。
• 導航位置偏移：您可以在此處選擇導航位置偏移值。
• 導航間距：選擇每個導航圖標之間的間距。
• 導航顏色：選擇導航圖標的顏色。
• 工具提示排版：您可以在此處選擇工具提示的系列、字體大小、粗細變換、樣式、裝飾和行高。

3.5 將頁面部分添加到導航鏈接

現在所有設置都已完成，是時候添加要在導航中顯示的部分了。 這樣做

• 將鼠標懸停在該部分上，然後單擊“編輯部分”圖標
• 轉到高級選項卡
• 展開ElementsKit 頁面滾動選項
• 打開啟用該部分以使該部分可見
• 打開啟用點選項以將此部分添加為導航鏈接之一
• 提供工具提示文本的名稱。 當有人將鼠標懸停在鏈接上時，將顯示工具提示文本
• 最後點擊更新保存

您可以重複上述相同的過程，將您想要的所有部分添加到導航中。

注意：您可以嚮導航添加一個部分，而不是內部部分。 因此，您不會在內部部分或任何其他小部件的高級選項卡下找到 ElementsKit Onpage Scroll 選項。

完成所有導航後，更新並單擊以查看 WordPress 中一頁導航的預覽，並檢查導航菜單鏈接。

步驟#4：使用 ElementsKit 預製頁眉頁腳部分添加頁眉頁腳

好吧，您現在在 WordPress 中有一個網站單頁導航，但您仍然需要一個頁眉頁腳來完成您的網站。 網站的頁眉和頁腳部分對於顯示您的徽標和重要信息非常重要，因此您的客戶可以輕鬆看到它。

ElementsKit 為您提供了許多預製的頁眉和頁腳部分供您選擇。 要使用 ElementsKit 頁眉頁腳：

• 轉到ElementsKit ⇒ 頁眉頁腳 ⇒ 單擊添加新

• 選擇類型作為標題，條件作為整個站點，打開激活/停用選項，最後單擊保存更改。

• 現在添加標題部分，單擊您創建的菜單上的編輯
• 點擊編輯內容
• 單擊 EK 按鈕並轉到“部分”選項卡
• 選擇您喜歡的標題設計並單擊插入

您可以按照下面的視頻為您的網站創建漂亮的頁眉頁腳。

注意：您可以按照與頁眉相同的步驟使用 ElementsKit 的預製部分為您的網站創建頁腳部分。

步驟#5：添加聯繫表格作為模式彈出窗口（獎金）

是時候向您的網站添加聯繫表格了，這樣您的潛在客戶就可以更輕鬆地與您溝通。 使用彈出窗口添加聯繫表單將使您的單頁網站看起來更有吸引力以及您需要的非常必要的表單。

要添加模式彈出窗口，我將用彈出模式替換RSVP按鈕並向其添加聯繫表單。

• 轉到 ElementsKit ⇒ 小部件 ⇒ 打開彈出模式 ⇒ 單擊保存更改

• 轉到您的所有頁面⇒主頁（或任何您命名的頁面），然後單擊使用 Elementor 編輯

• 在編輯模式下，滾動到 RSVP 部分並刪除 RSVP 按鈕
• 拖放模式彈出在RSVP按鈕的地方

• 要更改模式按鈕文本，請轉到 Content ⇒ Toggler Button ⇒ Label 並將“Open Modal”更改為 RSVP（或任何您想要的）

• 轉到樣式選項卡⇒ 切換按鈕更改按鈕背景顏色、文本顏色、邊框半徑和其他正常和懸停視圖的設置。

• 現在轉到內容並打開啟用模板模式，以便我們可以添加我們的聯繫表格。
• 單擊彈出按鈕。 打開後單擊正文上的編輯圖標以打開 Elementor 編輯器

• 搜索 Metform，拖放小部件
• 單擊編輯表格以選擇聯繫表格
• 從列表中選擇您想要的表格，然後單擊保存並關閉
• 最後點擊更新保存

注意：我已經使用 Metform 製作了 RSVP 表單，並且還稍微更改了顏色和样式以匹配我們使用的登錄頁面模板。 您可以查看有關如何使用 Metform 創建和样式化聯繫表單的博客。

您還可以查看下面的視頻，了解如何使用 Metform 構建自定義聯繫表單。

第 6 步：使用一頁導航更新並查看預覽單個網站

好吧，一切都完成了。 現在到最後一步，最簡單、最令人興奮的一步。 完成上述所有自定義和步驟後，單擊“更新”按鈕保存所有內容，然後單擊“預覽”按鈕查看您的站點。

如果您正確執行了所有步驟，您應該會在 WordPress 中獲得一個帶有單頁導航的單頁網站，如下所示：

包起來

拍拍自己的後背！ 因為您已經使用 Elementor 和 ElementsKit 成功創建了一個具有一頁導航的現代美觀的網站。 使用單頁網站，客戶可以輕鬆導航到您網站的不同部分以了解您的業務。 帶有聯繫表格的一鍵式彈出模式使溝通真正只需單擊一下！

如果您對自己構建的內容印象深刻，那麼請準備好接受更多驚喜，因為 ElementsKit 為 WordPress 和 Elementor 用戶提供了無限的可能性來嘗試和構建一個外觀精美的網站。 因此，請務必抽出時間查看 ElementsKit 的其他高級小部件和模塊。

要了解有關使用 WordPress、Elementor 和神奇的 ElementsKit 構建網站的更多信息，請在我們的社交媒體帳戶上關注我們。