如何製作單頁滾動 WordPress 網站

已發表: 2021-11-22
how-to-make-a-one-page-website-in-wordpress

想要一種在 WordPress 中創建單頁網站的簡單方法嗎?

單頁滾動網站現在非常流行,因為它們允許用戶在一個頁面上查看您的所有內容。

訪問者可以了解您的網站是關於什麼的,以及您必須在更短的時間內以一口大小的形式提供什麼,這正是他們想要的。 此外,它更易於創建和管理。 因此,這對您和訪客來說都是雙贏的。

在本教程中,我們將向您展示在 WordPress 中製作令人驚嘆的單頁網站的最簡單方法。

在開始之前,讓我們先弄清楚什麼是單頁網站。

什麼是單頁網站?

單頁網站在單個頁面上以簡潔整潔的格式顯示您的所有網站內容。

在這個時代,用戶希望快速消費內容,而不是花時間瀏覽不同的頁面。 這使得一頁滾動網站取得了成功。

普通網站通常包括多個頁面,例如主頁、聯繫頁面、關於頁面等。 您將看到一個導航菜單,可讓您訪問網站上的重要頁面。 但是,如果您有一個單頁站點,則不需要創建這些頁面。 您的網站內容以整潔的佈局呈現,分為不同的部分。

當用戶單擊菜單項時,頁面會向下滾動到同一頁面上的內容部分,而不是打開不同的網頁。

一頁網站幫助:

  • 減少頁面加載時間
  • 通過持續的內容流增加參與度
  • 改善用戶體驗
  • 針對移動用戶進行優化

更不用說它們更容易定制和維護。

一頁網站非常適合任何提供簡單易懂的產品的企業。 如果您想創建一個簡單的在線商店或投資組合來展示您的技能,它們也是理想的選擇。

在我們學習如何在 WordPress 中製作單頁網站之前,您應該知道需要添加哪些內容部分。

在您的單頁 WordPress 網站中包含哪些內容?

創建單頁網站時,您需要確保訪問者可以找到他們需要的關於您的所有信息,但您需要注意不要通過添加太多元素而過度使用。

話雖如此,這些是您理想情況下必須包含在單頁 WordPress 網站中的一些元素:

  • 品牌標誌和標語:您網站的標誌和標語有助於提高訪問者的品牌知名度
  • 引人注目的號召性用語 (CTA):您必須添加一個帶有引人注目的信息和顏色的 CTA 按鈕
  • 關於我們部分:關於我們部分向訪問者簡要介紹您或您的業務
  • 產品/服務部分:顯示您提供的產品或服務的部分
  • 評論和推薦:客戶評論和推薦可以幫助您獲得訪問者的信任
  • 社交媒體鏈接:鏈接您的社交媒體資料以與用戶建立聯繫
  • 聯繫信息:聯繫我們部分,允許用戶與您交流

此列表並不詳盡。 您添加的元素將取決於您創建的網站類型,例如小型企業網站或在線商店。

既然您知道在單頁網站中包含什麼內容,那麼讓我們學習如何創建一個。

如何在 WordPress 中製作單頁網站?

在我們開始之前,您需要安裝一個基本的 WordPress。 如果您不這樣做,請按照我們的指南快速設置:如何通過 5 個簡單步驟創建網站。

在 WordPress 中,您可以使用主題或登錄頁面構建器創建單頁網站。 如果您是初學者,您會找到免費的 WordPress 主題選項來開始使用。 但是自定義主題可能具有挑戰性。

我們建議使用登錄頁面構建器在 WordPress 中創建單頁網站。 它更容易,您可以在幾分鐘內啟動並運行您的網站。

我們的首選登陸頁面構建器是 SeedProd。

SeedProd

SeedProd 對初學者友好,可讓您構建任何類型的登錄頁面,而無需觸及任何一行代碼。

它提供了一個內置的令人驚嘆的模板庫,因此您不必從頭開始創建單頁網站。 借助其簡單的拖放構建器,您可以輕鬆添加頁面塊並自定義設計。

您會發現 40 多個內容塊,包括推薦、倒計時、CTA 按鈕等。 因此,您可以自定義一個尋呼機以完美匹配您的品牌。

此外,您還可以連接主要的電子郵件營銷服務,例如 Constant Contact、Mailchimp、AWeber 等。 這可以幫助您自動化您的潛在客戶生成工作並保持您的電子郵件列表更新。

除此之外,以下是一些使 SeedProd 成為創建單頁網站的最佳選擇的功能:

  • 150 多個預建模板可讓您創建具有專業外觀的頁面
  • 完全響應,這意味著您的一頁網站在所有屏幕尺寸上看起來都不錯
  • 與搜索引擎優化工具集成,如 All in One SEO 和 Google Analytics
  • 內置 Coming Soon 頁面、404 頁面、登錄頁面和維護模式
  • reCAPTCHA 功能可幫助您保護您的網站並獲得真實的潛在客戶

SeedProd 提供最強大的功能,但它非常輕量級。 因此,您的單頁網站將表現良好並具有更快的加載速度。

現在,我們將向您展示如何使用 SeedProd 頁面構建器在 WordPress 中製作單頁網站。

第 1 步:安裝並激活 SeedProd 插件

首先,您需要註冊您的 SeedProd 帳戶。 您可以免費下載並安裝該插件。 他們還以實惠的價格計劃提供高級插件。

有不同的計劃,因此根據您是自由職業者、小型企業還是大型企業,您可以找到最適合您網站需求的計劃。

註冊後,您可以訪問 SeedProd 儀表板,您可以在其中找到要下載的插件文件以及許可證密鑰。

seedprod license and download

您需要在 WordPress 網站上安裝並激活 SeedProd 插件。 如果您想了解更多詳細信息,可以查看我們關於如何安裝 WordPress 插件的教程。

安裝並激活插件後,打開SeedProd » 設置選項卡並在此處輸入您的許可證密鑰。

seedprod license key

然後,單擊“驗證密鑰”按鈕以查看“驗證成功”消息。

現在,您可以開始在 WordPress 中製作單頁網站。

第 2 步:創建新頁面

要創建一個新的單頁站點,請導航到SeedProd » WordPress 儀表板中的頁面選項卡。

在這裡,您可以看到可以設置即將推出模式、維護模式、登錄頁面和 404 頁面的部分。

如果您想在創建網站時隱藏您的網站,以免有人意外訪問它,您可以在此處激活即將推出模式。

coming-soon-mode-activate

SeedProd 有一個向訪問者顯示的默認頁面,但您可以創建一個自定義即將推出的頁面。 您可以快速編輯和發布預製模板。

SeedProd 即將推出的模式很酷的一點是,您可以添加 optin 表單和倒數計時器。 這可以幫助您為您的網站建立動力,您甚至可以在啟動您的網站之前開始建立您的訂閱者和客戶列表。

activated coming soon page

現在您的網站已安全地不在公眾視野中,您可以在幕後設置您的網站。 在同一頁面的“登陸頁面”部分下,單擊“添加新登陸頁面”按鈕開始使用。

add new landing page in seedprod

這將打開包含 100 多個多用途頁面模板的模板庫。 SeedProd 提供過濾器,幫助您輕鬆瀏覽模板。 我們建議查看更適合單頁機的銷售潛在客戶擠壓模板。

然而,SeedProd 非常用戶友好,讓構建單頁網站變得輕而易舉。 因此,我們將使用空白模板向您展示如何在 WordPress 中從頭開始製作一個完全獨特的單頁設計。

blank-template-seedprod

選擇黑色模板後,您會看到一個彈出窗口,您需要在其中輸入頁面名稱和頁面 URL。

name-your-page

單擊保存並開始編輯頁面按鈕以打開 SeedProd 的可視頁面構建器。

現在您可以開始構建您的單頁 WordPress 網站了。

第 3 步:設置您的單頁網站

在拖放構建器中,您可以看到左側的內容塊和右側的頁面預覽。

seedprod-builder

在左側,內容塊分為三個部分:標準、高級和 WooCommerce。 您可以添加這些基本內容塊來優化您的一頁網站以獲得更多功能:

  • 頭條新聞
  • 號召性用語按鈕
  • 選擇表格
  • 聯繫表格
  • 感言
  • 星級
  • 社交分享

您會注意到 SeedProd 帶有用於流行 WordPress 插件(如 WPForms、RafflePress 和 WooCommerce)的內置小部件。

除此之外,您還可以在構建器的左側看到“部分”選項卡。 在這裡,您將獲得添加預製智能部分的選項,例如標題、號召性用語、常見問題解答等。

seedprod-one-page-sections

這些頁面佈局可以立即使用,並且開箱即用。 現在我們將學習如何使用這些部分和自定義選項在 WordPress 中製作單頁網站。

1.增加英雄欄目

首先,您可以在頁面中添加一個英雄部分。

add-a-hero-section

英雄部分是訪問者登陸您的網站時首先看到的內容。 所以你需要創建一個有吸引力的英雄標題。

英雄選項卡上,您會發現許多可供選擇的內置英雄模板。 您可以將鼠標懸停在模板周圍,然後單擊放大鏡圖標進行預覽。

單擊加號圖標將英雄標題添加到您的頁面。

select-a-hero-heading

然後,您可以自定義您的英雄部分。 所有設置都在左側定制器面板中,因此您可以進行更改並在右側查看實時預覽。

customize-hero-heading

您可以更改英雄設置的背景設置。 它還允許您編輯標題和 CTA 按鈕的文本。

edit-page-content

2. 添加您的產品

現在,您可以在一頁 WordPress 網站上介紹您的產品。

要添加產品部分,請將鼠標懸停在頁面構建器的底部,然後單擊“添加列”選項。

insert-new-column

在這裡,您可以插入標題和文本內容塊來解釋您的產品。 您還可以添加具有多個佈局的新列。

add-product-content

然後,您可以添加圖片來展示您的產品。 您可以拖放圖像內容塊以顯示產品圖像。

add-products-on-one-page-website

您可以上傳圖像並在“高級”選項中編輯圖像設置。 您可以使它們全寬或縮小到您認為最好的尺寸。

customize-product-images

如果您有更多產品要添加,只需複制該行並更改產品詳細信息。

 row settings one page website

3.添加客戶推薦

在您的網站上添加產品評論和推薦將幫助您與訪問者建立信任。

為此,請轉到頁面構建器上的“部分”選項卡。 打開推薦選項,您可以看到所有預先設計的推薦部分。

testimonials-for-one-page-site

您可以自定義該部分​​並更改推薦的外觀。 它允許您添加來自客戶的多個評論和推薦。

testimonials-customization-seedprod

現在,您需要添加一個號召性用語 (CTA) 部分,以使您的訪問者在您的單頁網站上購買或註冊。

4.添加CTA部分

CTA 按鈕鼓勵訪問者在您的網站上採取行動,例如購買、註冊、註冊帳戶等。 良好的號召性用語將幫助您提高轉化率、銷售額和收入。

您已經在網站的開頭添加了 CTA 按鈕。 但我們也建議在滾動站點的末尾附近添加 CTA。 這將使訪問者在瀏覽過程中輕鬆訪問以採取行動。

要添加 CTA 部分,請打開部分»號召性用語選項卡並選擇您喜歡的任何設計。

call-to-action-section-seedprod

為了匹配您的網站,您可以通過添加背景圖像和更改按鈕模板來自定義該部分​​。

call-to-action-edit

5.添加頁腳

接下來,您需要添加一個部分來添加您的聯繫信息和其他鏈接。 您可以在 SeedProd 構建器中找到許多預先構建的頁腳部分。

要添加頁腳,請轉到部分»頁腳選項卡並選擇最適合您網站的頁腳網頁設計。

footer-insert-in-one-page-website

SeedProd 允許您將自己的鏈接和產品信息添加到頁腳。 此外,您可以編輯和添加您的社交媒體資料,以便您的訪問者可以與您聯繫。

footer-edit-seedprod-how-to-make-a-one page-website-in-wordpress

現在,如果您正在構建一個多頁網站,SeedProd 允許您在標題中添加一個新菜單,以便訪問者可以導航到其他頁面。 但由於這是一個單頁網站,因此您不需要導航菜單。 如果您選擇的模板有一個,請務必將其刪除,因為您不需要將訪問者重定向到其他頁面。

delete nav menu in seedprod

設置內容部分和內容塊後,點擊構建器右上角的保存按鈕。

現在,您的單頁網站已準備就緒,但在您上線之前,您需要在後端配置一些設置。 首先,您可以將其連接到電子郵件服務提供商,以將網站同步到您的電子郵件帳戶。

第 4 步:與電子郵件服務提供商集成

SeedProd 允許您將單頁網站與所有流行的電子郵件營銷服務(如 Constant Contact、AWeber、ConvertKit 等)集成。

要連接您的電子郵件營銷帳戶,請導航到頁面構建器上的連接選項卡。

然後,選擇您的電子郵件服務提供商。

email-integration-seedprod

單擊“連接新帳戶”按鈕,然後按照屏幕上的說明連接您的帳戶。 大多數服務要求您輸入 API 密鑰來建立連接。 因此,您可以從您的電子郵件帳戶中獲取它。

connect-email-integration-seedprod

現在您可以要求訪問者訂閱您的電子郵件列表並將潛在客戶信息自動導入您的電子郵件列表。

接下來,您需要確保頁面設置具有您的首選設置。

第 5 步:配置頁面設置

要配置頁面設置,請打開表單構建器上的頁面設置選項卡。

page-settings-how-to-make-a-one page-website-in-wordpress

在這裡,您可以看到這些頁面設置:

  • 常規設置:更改頁面標題、頁面 URL 和頁面狀態。 您可以選擇顯示或隱藏頁面上的“由 SeedProd 提供支持”鏈接。
  • SEO:使用強大的 SEO 插件(如 All in One SEO)優化您的單頁網站的 SEO(搜索引擎優化)。
  • 分析:與 MonsterInsights 等分析插件集成並跟踪您的單頁網站的性能。
  • 腳本:添加自定義代碼以進一步更改頁面樣式和設置。 如果您不熟悉編碼,可以將此字段留空。

更改設置後,點擊最後的保存按鈕。

你幾乎完成! 您現在需要做的就是發布您的一頁網站並將其設置為主頁。

第 6 步:發布您的單頁網站

要發布您的單頁網站,請單擊構建器右上角“保存”按鈕旁邊的下拉菜單。 選擇發布選項以使您的頁面上線。

publish-one-page-website

之後,您將看到一個彈出窗口,通知您您的頁面已發布。 您可以通過單擊查看實時頁面按鈕查看您的單頁 WordPress 網站的外觀。

lead-capture-page-published

恭喜! 您已經成功地在 WordPress 中創建了一個單頁網站。

現在,您需要將此頁面指定為您網站的主頁。

第 7 步:設置您的主頁

在最後一步,您需要將您創建的單頁網站設置為您的主頁。 為此,您可以在 WordPress 管理儀表板中打開“設置”選項卡。

然後,轉到閱讀選項並將您的主頁顯示設置設置為靜態頁面。 您可以從主頁選項中選擇您的單頁網站名稱並保存更改。

how-to-make-a-one page-website-in-wordpress

這會將您的 WordPress 網站的首頁變成單頁網站。

如果您在第一步中打開了即將推出模式,則需要前往SeedProd » 頁面並使用切換開關將其停用。

Activate coming soon mode in seedprod

SeedProd 將刪除即將推出的頁面,您的網站將上線。 現在輸入您的網站 URL 的每個人都可以看到您創建的單頁網站。

今天就是這樣! 我們希望本教程能幫助您學習如何在 WordPress 中製作單頁網站。

使用 SeedProd 的用戶友好頁面構建器,您只需單擊幾下即可創建任何類型的登錄頁面。 您可以創建專門的產品和服務頁面、銷售頁面等。

您甚至可以創建一個潛在客戶捕獲頁面,訪問者可以在其中註冊成為訂閱者。 這將有助於獲得更多潛在客戶和訂閱者。

如果您想增加網站流量並提高轉化率,可以查看 OptinMonster。 它允許您創建有吸引力的幻燈片、浮動欄、彈出窗口、歡迎墊等。

該工具將通過強大的定位規則和廣告系列觸發器幫助您優化轉化,以便您可以在正確的時間與訪問者聯繫。

OptinMonster 還可以輕鬆地將這些活動添加到您網站的任何頁面、帖子或側邊欄中。

要了解更多信息,您可以查看我們的 OptinMonster 評論。

現在您的單頁網站已經上線,您會發現這些資源很有幫助:

  • WordPress SEO 的完整初學者指南
  • 用於飛速增長的轉化率優化工具
  • 如何在沒有電子商務的情況下銷售產品

這些帖子將幫助您增加流量並提高轉化率。 最後一個將幫助您直接從您的網站銷售您的產品,而無需創建在線商店。