著陸頁可以通過鼓勵訪問者採取所需的行動來提高您的WordPress網站的轉化率,例如訂閱新聞通訊、購買產品或註冊網站。
雖然著陸頁的平均轉化率為9.7%,但新增圖片或社交等元素可能會進一步提高轉化率。因此,建立一個好的目標網頁對於促進您的業務至關重要。
在本文中,我們將向您展示如何在WordPress中建立著陸頁並討論何時使用的三種簡單有效的方法。
使用外掛建立WordPress著陸頁
著陸頁是指為營銷目的而設計的網頁,例如介紹新產品。它可以是連結到網站或其一部分的獨立頁面。
幸運的是,WordPress網站提供了廣泛的功能,可以輕鬆地為您的企業構建網站和著陸頁。
建立著陸頁的最佳方法之一是使用外掛。使用這種方法,即使是初學者也可以建立一個專業且引人注目的著陸頁,因為許多WordPress外掛都提供了拖放構建器和預製模板。
1. 安裝外掛
根據我們的專家的選擇,以下是可用的最佳WordPress著陸頁外掛列表:
- Elementor – 一個強大的構建器外掛,具有令人驚歎的動畫效果。
- Divi –最好的WordPress頁面構建器之一,具有直觀的視覺化編輯器。
- Beaver Builder – 一個直觀的著陸頁構建器外掛,適用於大多數WordPress主題。
- SeedProd –最好的WordPress外掛之一,具有許多設計模板選項、使用者友好的介面和拖放頁面構建器。
在本教程中,我們將使用SeedProd外掛為您的WordPress網站建立一個高轉化率的著陸頁。
首先,您需要登入您的WordPress儀表盤,轉到外掛-> 安裝外掛,然後使用搜尋框找到SeedProd外掛。然後,在您的WordPress網站上安裝並啟用該外掛。
SeedProd是一個免費增值外掛——您可以從每年39.50美元起購買它的高階版本。要進行設定,您需要輸入SeedProd帳戶中的許可證金鑰。
2.新增一個新的著陸頁
啟用外掛後,您將被重定向到SeedProd著陸頁儀表盤。在頁面頂部,將有四個著陸頁選項。
要新增新的著陸頁,請單擊底部的Create New Landing Page。
3.選擇和自定義著陸頁模板
新增新的著陸頁後,您需要為其選擇一個設計模板。SeedProd提供了許多適用於不同型別活動的著陸頁模板。
或者,通過單擊空白模板從頭開始建立著陸頁。
選擇模板後,輸入頁面名稱和URL。
提示:在頁面URL中使用焦點關鍵字來提高您在搜尋引擎上的可見性併為您的WordPress網站獲得更多流量。
完成詳細資訊編輯後,選擇儲存並開始編輯頁面以自定義您的第一個著陸頁。
使用左側的區塊選單,您可以新增或編輯文字、影象和視訊等各種元素。為此,只需單擊所需的元素。
更改背景顏色、影象和對齊方式,使您的目標網頁與您的品牌相匹配。或者,選擇左下角的全域性設定。
聯絡表單區塊可以與WPForms外掛整合,使您能夠使用其附加功能將新建立的WordPress表單更改為自定義表單著陸頁。
如果要複製區塊,請單擊滑鼠懸停時出現的檔案圖示。還有其他用於刪除、移動和儲存區塊的圖示來簡化您的設計過程。
由於SeedProd還與WooCommerce整合,您可以為電子商務商店建立著陸頁。合併其塊,例如新增到購物車按鈕、產品網格和銷售產品,將幫助您製作一個引人入勝的頁面。
例如,您可以通過為您的線上商店新增“立即購買”按鈕和特價產品來建立互動式產品著陸頁。
此外,SeedProd的“Sections”選單為著陸頁設計提供了許多類別選項,包括標題、Hero、號召性用語和常見問題解答。
完成著陸頁設計後,點選右上角的儲存按鈕。
4.與第三方工具整合
許多企業使用各種工具來幫助他們獲得更多客戶並增加收入。
使用SeedProd,您的著陸頁可以與流行的營銷工具連線,以提高您的活動績效。以下是我們對SeedProd第三方工具的主要建議:
- MailChimp – 最受歡迎的電子郵件營銷服務之一。它提供了自動回覆功能。
- Constant Contact – 一種電子郵件營銷工具,提供數百個電子郵件模板和拖放構建器。
- Monsterinsights – 最受歡迎的Google Analytics(分析)工具,可提供對您網站效能的洞察。
- Zapier – 一種自動化工具,與500多項服務整合,用於從登錄檔單中收集電子郵件。
要將您的WordPress網站的著陸頁與第三方工具連線,請單擊“Connect”選項卡並選擇您想要的服務。
例如,將您的著陸頁與電子郵件營銷服務連線起來,會自動將他們在您的著陸頁上輸入的網站訪問者的聯絡方式新增到您的電子郵件列表中。
5. 在WordPress中釋出您的著陸頁
編輯頁面模板並設定第三方工具後,是時候釋出您的WordPress著陸頁了。
為此,請返回“Design”選項卡,單擊“Save”按鈕旁邊的下拉箭頭,然後按“Publish” 。
現在,選擇See Live Page按鈕以檢視結果。
如需進一步自定義,您可以通過“Page Settings”選項卡配置您的常規頁面、SEO和分析設定。
例如,您可以將任意數量的著陸頁連結到您的自定義域名,而不是使用多個WordPress站點。為此,請單擊Custom Domain選單,然後輸入您的域名。請注意,此功能僅適用於SeedProd高階版本。
使用WordPress主題建立著陸頁
除了使用外掛之外,建立著陸頁的另一種方法是安裝WordPress主題。這樣做可以讓您自定義WordPress著陸頁的佈局和設計,而無需更改其主題。
但是,並非所有WordPress主題都提供著陸頁模板。
- Astra – 提供150多個預製模板,這些模板與WooCommerce和Elementor等流行工具完全整合。
- Neve – 提供與Gutenberg編輯器和WooCommerce相容的多用途主題。
- Portum Material – 帶有全形滑塊、CTA用語按鈕和動畫功能,可讓您的著陸頁更具吸引力。
現在,讓我們逐步瞭解如何在WordPress中建立帶有主題的著陸頁。
1.新增新頁面
按照以下步驟新增新的WordPress頁面:
- 從您的WordPress儀表盤新增新主題。
- 單擊外觀->主題->安裝主題。
- 選擇並啟用您的WordPress主題。在本教程中,我們將使用Neve。
- 設定主題後,轉到頁面 -> 新建頁面以建立著陸頁。或者,從頁面頂部的+ 按鈕 ->頁面新增新頁面。
- 現在,您應該看到一個空白頁。為您的自定義著陸頁命名。
- 從側邊欄的模板選單中選擇Page Builder Full Width (Neve) 。
2.將著陸頁設定為靜態主頁
之後,您需要將新頁面設定為靜態主頁。請記住,這與您的常規主頁不同——靜態頁面將確保訪問者在點選您的網站時登陸它。
轉到設定->閱讀,然後從主頁下拉選單中選擇您為著陸頁建立的頁面名稱。然後,單擊儲存更改。
儲存後,通過轉到外觀->自定義開始自定義著陸頁主題。您將找到用於編輯頁面元素的選項,例如佈局、標題、按鈕、顏色和背景。
3. 使用WordPress編輯器自定義著陸頁
除了修改主題外,您還可以使用WordPress Gutenberg編輯器自定義著陸頁。
請注意,此區塊編輯器帶有WordPress 5.0及更高版本。如果您使用舊版本的WordPress,則必須安裝Gutenberg外掛。
要自定義您的頁面,請單擊+ 框以檢視所有可用區塊。
在搜尋框中找到要使用的區塊,然後單擊它以新增它。
新增區塊後,您可以通過側邊欄的“區塊”選項卡或單擊其上方的三個垂直點對其進行編輯。
例如,要將您的產品及其描述新增到您的著陸頁,請使用具有兩列布局的媒體和文字塊。
為此,只需單擊新增區塊->媒體和文字->上傳。從您的計算機或WordPress媒體庫中選擇一個影象。
此外,您可以使用社交圖示區塊新增指向社交媒體頁面的連結。這樣做有助於提高您的品牌知名度。
4.點選發布
一旦您對結果感到滿意,請使用“Preview”按鈕檢視您的著陸頁,以確保一切正常。
最後,點選右上角的Publish按鈕。
手動建立著陸頁
如何在WordPress中建立著陸頁的最後一種方法是使用頁面模板。請注意,您需要一些編碼技能才能從頭開始構建自定義著陸頁。
當您需要更多的設計靈活性和自定義選項時,我們建議您使用手動方法。例如,為專用域建立著陸頁是完美的。
在本分步指南中,我們將向您展示如何使用現有的WordPress主題構建自定義著陸頁模板。
1.建立一個子主題
建立子主題對於建立自定義WordPress頁面模板至關重要,因為它允許您在不破壞其核心功能的情況下對其進行自定義。
對於這種方法,我們將建立一個子主題。請記住,該過程需要一些HTML、CSS和PHP知識。
首先,轉到寶塔面板 ->檔案。
然後,導航到網站根目錄 -> wp-content ->themes,單擊右上角的新建資料夾,然後為您的子主題輸入名稱。
或者,通過像FileZilla這樣的FTP客戶端連線到您的站點,並在您的wp-content/themes目錄中建立一個新資料夾。
2.修改style.css檔案
接下來,您需要建立一個新的style.css檔案,該檔案將成為子主題資料夾中的新樣式表。向其中新增以下程式碼:
*/ Theme Name: Twenty Twenty-One Child Theme URI: http://yourdomain.com Description: Twenty Twenty-One Child Theme Author: Your Name Author URI: http://yourdomain.com Template: twentytwentyone Version: 1.0.0 Text Domain: twentytwentyone-child License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images */
此程式碼包含有關子主題的基本資訊,包括其名稱和父主題。根據您選擇的父主題修改style.css文件後,單擊Save和Close。
3.建立functions.php檔案
下一步是將父主題和子主題的樣式表排入佇列。為此,請在子主題的資料夾中建立一個名為functions.php的新檔案。
從開啟的PHP標記開始,然後新增函式以將父主題的樣式表排入佇列。例如,您可以插入以下程式碼:
<?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); } ?>
您現在有一個新的正常執行的子主題,它將在您的父主題之後載入。
4.啟用子主題
您的子主題現在可以使用了,所以轉到您的 WordPress 管理區域並單擊外觀->主題->啟用。
5. 建立一個新的自定義頁面
啟用新主題後,您可以為您的著陸頁構建一個具有獨特佈局的自定義WordPress頁面模板。
首先在您的子主題資料夾中建立一個名為landing-page.php的新檔案,並向其中新增以下程式碼:
<?php /* Template Name: Landing Page */ ?>
根據需要更改模板名稱。然後,單擊儲存並關閉。
如果您在WordPress網站上編輯或新增頁面,您將看到新的自定義模板可供從側邊欄的選單中選擇。但是,它仍然是空白的,因為我們還沒有新增任何內容。
6. 使用CSS自定義著陸頁
建立著陸頁模板後,是時候對其進行自定義了。
首先,複製以get_header()開頭的現有程式碼;父主題的page.php檔案中的一行——它將位於public_html -> wp-content -> Themes -> yourtheme。將其貼上到您的landing-page.php檔案並儲存更改。這是您的程式碼應如下所示:
<?php /* Template Name: Landing Page */ ?> <?php get_header(); /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-page' ); // If comments are open or there is at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } endwhile; // End of the loop. get_footer(); ?>
您可以編輯頁面模板並向其新增程式碼,方法是轉到外觀-> 主題檔案編輯器。
由於大多數著陸頁通常沒有側邊欄和頁尾以最大程度地減少干擾,因此請通過刪除以下兩行來刪除它們:
get_sidebar(); get_footer();
要向著陸頁新增更多內容,請使用WordPress編輯器。此外,您可以通過帶有Gutenberg Forms外掛的區塊編輯器免費構建自定義表單著陸頁。
為了幫助您的目標網頁在競爭中脫穎而出,請通過您的style.css檔案或導航至外觀->自定義新增更多功能。
使用額外的CSS,您可以修改樣式表。這包括更改其背景和側邊欄顏色以及修改其字型型別。
要更改背景顏色,請新增以下程式碼:
.site-content-contain { background-color: #DEF0F5; position: relative; }
這將根據十六進位制程式碼新增淺綠色背景色,如下圖所示:
同時,要更改著陸頁的字型型別、大小和顏色,請插入以下程式碼:
p { color: teal; } p { font-family: Georgia; font-size: 22px }
請注意,此程式碼僅更改您的正文,如下圖所示:
或者,如果您想更改標題,請新增以下程式碼片段:
h1 { color: white; text-align: center; }
何時使用著陸頁
為了讓您更好地瞭解著陸頁如何幫助您的業務,請檢視它們的四個用例:
- 通訊註冊。電子郵件通訊將幫助您與客戶建立聯絡。您可以使用專用的表單著陸頁來強制訪問者加入您的郵件列表。用簡短的文案寫一個清晰醒目的標題,以吸引更多訪問者。
- 活動註冊。專用表單著陸頁是宣傳即將舉行的活動(例如網路研討會、社羣聚會或會議)的好方法。使您的著陸頁表格清晰易懂,以推動門票銷售和註冊。您還可以新增倒數計時器來營造緊迫感。
- 即將推出的頁面。如果您有新的網站、產品或服務,建立即將推出的著陸頁將有助於建立品牌興奮度並吸引潛在客戶。使用明確的號召性用語並提供社交媒體連結將優化您即將推出的頁面。
- 反饋。新增一個線上表單,為您的網站訪問者提供價值,以換取他們的建議和反饋。促銷程式碼是訪客輸入的常見獎勵。
例如,檢視Food for Others的訂閱通訊著陸頁,該頁面具有簡單幹淨的佈局和清晰的標題。憑藉其無干擾的著陸頁,網站訪問者可以輕鬆專注於內容。
提示:釋出著陸頁後,使用WordPress A/B測試對其進行分析並優化您的轉化率。它將幫助您找出最適合您的廣告系列的文案和設計。
結論
著陸頁是WordPress網站的基本元素,可提高其轉化率和客戶參與度。在WordPress中建立著陸頁有三種主要方法。
如果您是初學者,請使用外掛或主題來建立WordPress著陸頁。藉助外掛和主題提供的許多功能,您將能夠像專家一樣自定義和優化您的著陸頁。
如果您已經熟悉HTML、PHP和CSS,那麼從頭開始構建著陸頁是一個更好的解決方案,因為它提供了更大的靈活性。
無論您選擇什麼選項,請使用引人注目的標題、簡單的設計和明確的號召性用語來建立高轉化率的目標網頁。
評論留言