如何在 Elementor 中建立自訂搜尋結果頁面

精心設計的搜尋結果頁面對於增強用戶體驗起著至關重要的作用。它使訪客能夠快速導航到他們正在尋找的相關內容。它不僅節省了瀏覽內容的時間，還鼓勵他們進一步探索。

Elementor 是數百萬 WordPress 網站的首選頁面建立器。它提供了一個主題生成器和有用的小部件，您可以透過它們輕鬆建立搜尋結果頁面。在本教學文章中，我們將向您解釋如何在 Elementor 中建立自訂搜尋結果頁面。

請記住，搜尋框是任何搜尋結果頁面的主要元素。人們可以在其中輸入關鍵字來尋找相關貼文和產品。因此，我們首先使用 Elementor 建立一個動態搜尋框。然後，我們將透過新增存檔小工具來完成該頁面，使其成為部落格存檔頁面。

什麼是 Elementor 中的自訂搜尋結果頁面？

搜尋結果頁面是一個專用網頁，使用戶和訪客能夠快速導航到特定類型的內容，例如部落格文章、電子商務產品和組合項目。對於基於內容的網站來說，此類頁面是強制性的。

自訂搜尋結果頁面可讓您根據需要合併各種元素，例如特色圖像、自訂標題、篩選器等，以使頁面看起來不錯。這不僅可以改善用戶體驗，還有助於提高轉換率。

WordPress 中自訂搜尋結果頁面的用例

在開始本教學之前，我們先來看看 WordPress 中自訂搜尋結果頁面的一些用例。瀏覽下面的清單。

• 電子商務網站

顯示帶有過濾器的產品搜尋結果頁面。訪客可以使用搜尋欄來尋找確切的產品或過濾器，以按價格、評級和類別對它們進行排序。

• 部落格網站

部落格文章和文章根據標籤和類別顯示。使用者可以按作者、日期和其他查詢對它們進行排序。

• 知識庫頁面

知識庫頁面通常涵蓋 DIY 文件指南和有用的資源。這些頁面必須具備搜尋功能才能快速探索有用的內容。

• 基於服務的企業

在預訂或填寫聯絡表單之前，用戶可以根據評級、價格範圍、產品和其他相關詳細資訊對他們想要的服務進行排序。

• 教育網站

進階搜尋和過濾選項可讓您搜尋課程、課程和學習材料，以便學生和學習者可以輕鬆找到他們需要的內容。

如何在 Elementor 中建立自訂搜尋結果頁面

理論部分結束了。在本部分中，我們現在將介紹如何在 Elementor 中建立自訂搜尋結果頁面的教學部分。確保您的網站上有以下可用插件。

• 元素器
• 元素專業版

將它們放在您的網站上後，請按照下面說明的教學進行操作。

步驟 01：前往 Elementor 主題產生器

登入您的 WordPress 儀表板。然後，導覽至模板 > 主題產生器。

選擇“網站元件”下的“搜尋結果”選項。然後，點擊+ 新增按鈕。

這將開啟 Elementor 畫布，您可以在其中新增想要建立自訂搜尋結果頁面的任何小工具。

步驟02：建立一個新部分來新增搜尋小工具

按一下畫布上的加號 (+) 圖示。然後，選擇所需的列結構。

您必須為該部分寫一個標題。這對 SEO 有幫助。

因此，將標題小部件拖放到該部分。這將允許您為該部分編寫標題。

來到樣式標籤。您將獲得更改顏色、版面、字體大小、對齊方式以及更多標題文字的選項。自己做吧。

同樣，將文字編輯器小工具拖放到標題文字下方的部分。然後，編寫您想要的文字並對其進行自訂，如上所示。

步驟 03：在部分中新增搜尋小工具

找到搜尋小工具。按照與上面顯示的相同方式將其拖放到文字編輯器小部件下的部分。

步驟 04：自訂搜尋小工具

預設情況下，搜尋小工具將顯示在畫布的整個寬度上。進入“高級”選項卡以減少其寬度。

您將看到保證金部分。將所需的值放入右側和左側的部分框中。您會看到搜尋小工具的寬度已減少。

接下來，來到樣式標籤。您將獲得更改佔位符文字排版、搜尋框背景顏色、邊框類型等的選項。根據您網站設計的要求自行執行此操作。

我們在這裡所做的是將半徑值新增到搜尋框。我們已在“邊框半徑”下的“頂部”和“左側”框中放置了值。

同樣，我們為搜尋按鈕添加了一個半徑。為此，請展開「樣式」標籤下的「提交按鈕」部分。將數值放置在「半徑」下的「右側」和「底部」方塊中。

您將立即看到更改。如果您想添加懸停效果、背景顏色、框架陰影等，請探索那裡的選項。

探索如何使用 Elementor 建立部落格文章範本。

步驟05：設定結果選項

我們希望您對 Ajax 搜尋功能有所了解。每當使用者開始在其中輸入內容時，搜尋框下方就會立即顯示多個結果。

搜尋小工具的「結果」選項可讓您啟用此功能並配置要在搜尋框下顯示的即時結果的總數。

轉到內容選項卡。然後，展開結果部分。

打開“即時結果”選項。該功能現已啟用。

步驟 06：為即時結果建立模板

Elementor 可讓您建立即時結果模板，透過此模板您可以指定使用者在搜尋框中鍵入內容時如何顯示內容。

按一下結果部分下的建立範本按鈕。

這將帶您到一個新的畫布。在這裡，您必須為即時搜尋結果建立佈局並將其儲存為範本。

根據需要選擇列結構。我們選擇了定向行。當您新增到此部分時，它將繼續顯示在右側。

我們想使用這個搜尋框來展示部落格文章。因此，每當有人輸入部落格主題時，搜尋框都必須顯示相關部落格文章的清單。為此，我們必須添加推薦的帖子小部件。

將特色圖像小工具拖放到該部分。

預設情況下，特色圖像的尺寸很大。首先，從“影像解析度”選項中選擇“中等尺寸” 。

然後，來到樣式標籤。使用對齊、寬度和半徑等選項，您可以進一步減少特色圖像的大小，如下面所附的螢幕截圖所示。

以同樣的方式，將貼文標題小工具放置在特色圖像旁邊。

您可以看到我們減小了字體大小並更改了其顏色。

注意：在此階段，儲存範本。如果您願意，您可以添加更多元素。

了解如何使用 Elementor 建立簡歷網站。

步驟 07：將範本加入結果中

來到我們正在設計的主頁。透過點擊「結果」部分下的下拉圖標，選擇您剛剛設計的範本。

選擇模板後，其下方將出現幾個新選項。使用它們，您可以配置將在搜尋框下顯示的項目總數。

步驟08：風格化即時結果佈局

再次進入“樣式”標籤並展開“結果”部分。您可以對背景類型、邊框類型、半徑、填充、與搜尋欄位的距離、列高、寬度以及行與列之間的間隙進行樣式化。

預覽即時結果

現在，在搜尋框中輸入一些內容。您將看到下方顯示與鍵入的主題相關的三個項目的清單。

這可確保搜尋小工具完美運作。

注意：您的搜尋小工具已準備就緒且功能齊全。您可以以相同的方式在網站上的任何位置（例如頁首、頁尾和頁面）建立搜尋框。此類搜尋框通常放置在標題和存檔貼文頁面中。

步驟 09：新增存檔貼文小工具

在搜尋框部分下方建立一個新部分。然後，將「存檔貼文」小工具拖曳到新部分。

這將以網格格式顯示您在網站上發布的所有部落格文章。

步驟 10：配置存檔帖子小工具的設置

現在是時候自訂「存檔貼文」小工具並根據需要設定其佈局了。該小部件有許多自訂選項。首先，配置基本設定。轉到“內容”標籤並展開“佈局”部分。

選擇列數、影像位置和影像解析度。我們選擇了 2 列，將影像位置設為頂部，並將解析度設為全。

之後，開啟「標題」、「摘錄」、「元資料」和「閱讀更多」選項。但如果您不想要任何選項，請將其保持關閉。

若要定義摘錄長度，請設定其旁邊的字元數。此外，指定要顯示的元資料的類型。我們為小工具選擇了資料和評論元資料選項。

分頁將您的貼文分為多個頁面。展開分頁部分可讓您設定分頁類型、對齊方式、頁數限制和縮短。

了解如何使用 Elementor 建立聯絡表單。

第 11 步：風格化存檔貼文小工具

來到樣式標籤。在這裡，您會發現幾個選項。首先，展開佈局部分。

您可以自訂列間隙、行間隙和對齊方式。

展開“圖像”部分將允許您設定邊框半徑以及圖像與其他元素之間的間距。

同樣，透過展開內容部分，您可以對標題、元、摘錄和閱讀更多文字的排版、顏色和間距進行樣式化。

最後，展開分頁部分。這將允許您自訂分頁項目的版面、顏色、懸停效果和空間。

注意：事實上，每個 Elementor 小工具還有更多選項，包括「存檔貼文」小工具。在上面的教學中，我們試圖向您介紹可以對存檔貼文小工具進行自訂的基本概念。希望您可以探索和使用除這些之外的選項。

第 12 步：儲存並預覽搜尋結果頁面

現在，進入頁面的預覽模式。在框框中輸入內容並點選「搜尋」按鈕。您將看到下面以網格格式顯示的相關部落格文章。

有錯誤嗎？搜尋結果頁面似乎已損壞！

點擊搜尋按鈕後，如果您看到相關部落格文章如下圖所示，您可能會感到害怕。您可能會感覺頁面已損壞。

不用擔心！解決這個問題很容易。

您只需在 Elementor 主題產生器中建立一個存檔頁面即可。您設計存檔頁面的方式將影響點擊「搜尋」按鈕後相關部落格文章的顯示方式。

如果您希望我們建立有關如何使用 Elementor 建立存檔頁面的單獨教學文章，請透過評論部分告訴我們。我們會根據您的期望考慮設計這樣的頁面。

那麼，這篇文章的教學部分就結束了。因此，您可以在 WordPress 上使用 Elementor 建立搜尋結果頁面。

獎勵點：使用 HappyAddons 為 Elementor 取得更多小工具

HappyAddons 是一個著名的插件，為 Elementor 提供了大量強大的小部件。如果您覺得可用的 Elementor 小工具還不夠，並且正在尋找更多小工具，您可以嘗試 HappyAddons 外掛程式。

HappyAddons 隨附 120 多個小部件和數十種功能，可將您的 Elementor 網站提升到新的水平。該插件有免費版和高級版。您可以先嘗試使用免費版本。如果滿意，您可以隨時升級到高級版本並做一些很棒的事情。

點擊下面附加的按鈕以取得插件。

結論

如今，建立搜尋結果頁面已不再是一件奢侈的事情，而是增強使用者體驗所必需的。它可以幫助您維護網站的吸引力和品牌價值。如果您的網站主要用於電子商務產品、聯盟行銷和博客，那麼沒有搜尋結果頁面是遠遠不夠的。

希望透過遵循上述教程，您可以在 Elementor 網站上建立令人驚嘆的搜尋結果頁面。但是，不要忘記優化平板電腦和行動裝置的搜尋小部件，以便所有類型的人都可以使用此元素。