搜尋功能作為網站的重要功能,能夠幫助訪客快速找到所需的資訊。但我們WordPress中預設的搜尋結果頁面往往只給予一串標題與摘要,難以承載品牌與轉換需求。
而用Elementor Pro的主題建立器則可以讓我們自訂搜尋結果頁面:我們用清單卡統一封面比例與資訊展示,讓採購商更快鎖定高價值內容;當搜尋出來「無結果」時,再以熱門主題、下載中心或、其他方式引導使用者存取其他相關頁面,減少使用者流失率。
在開始本Elementor教學課程之前,需要安裝Elementor Pro專業版。
使用Elementor Pro建立模板
我們透過Templates > Add New創建一個新的Elementor模板

從下拉方塊中選擇Search Result模板,然後為這個模板取一個名字。點擊“Create Template”按鈕。

然後Elementor會帶我們進入到模板庫,我們從中選擇自己喜歡的搜尋結果頁面模板。

如果你想自己搭建搜尋結果頁面或在模板的基礎上修改,那麼只需要對Elementor容器和對應的Archive小部件做對應的更改即可。
Elementor容器和佈局的教學可以看這裡。
搜尋結果頁面中我們用到的Archive小工具主要有兩個:
- Archive Title
- Archive Posts
這兩個小工具是專門用於Archive頁面的,搜尋結果頁面也屬於一種Archive頁面(歸檔頁面)。包含我們WordPress的分類頁面也是一種歸檔頁面。
我們使用了這兩個小部件,那麼裡面的內容就會根據我們的歸檔類別目的Title和歸檔類目的內容來決定。

設定Archive Title
Archive Title的「Content」標籤裡面的設定保持預設即可。

設置Archive Posts
這邊我們可以調整Archive Posts分幾列展示(Columns)、圖片的展示位置(Image Position)和大小(Image Ratio、Image Width)、是否展示摘要(Excerpt)等。我們按需調整即可。 “Style”選項卡裡面可以讓我們對這些選項進行樣式的設定。

添加其他小部件
除了以上兩個必要的Archive小部件,你也可以發揮自己的想法跟創造力,來優化你的搜尋結果頁面。
設定展示條件
我們調整好搜尋結果頁面的展示資訊和樣式以後,點選Elementor頂部欄Publish按鈕右邊的下箭頭,點選「Display Conditions」按鈕

然後我們選擇設定在“Search Result”中展示。點選“Save & Close”按鈕

然後點選Publish發布該搜尋結果頁面範本即可。
我們在網站的搜尋框輸入對應搜尋字詞,點選搜尋或按下回車鍵,然後就能夠看到我們剛剛設定的搜尋結果頁面了。