如何在 Divi 中創建搜索結果頁面模板

我們都已經習慣於使用搜索表單在網站上查找我們需要的內容。 因此，在 Divi 中創建網站時，我們確實需要考慮頁面結果模板的設計，以驅動這些搜索結果的外觀。

在本教程中，我們將介紹如何使用 Divi Theme Builder 構建一個簡單而優雅的搜索結果頁面模板。 我們將向您展示如何包含搜索結果頁面模板的關鍵元素，包括動態頁面結果標題和博客模塊生成的相關搜索內容。

讓我們開始吧。

搶先看

這是我們將要創建的搜索結果頁面模板的快速瀏覽。

免費下載模板

要使用本教程中的搜索結果頁面模板，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

要將佈局導入您的頁面，只需提取 zip 文件並使用 Theme Builder Portability 選項將 json 文件之一添加到 Divi Theme Builder 中。

讓我們進入教程好嗎？

你需要什麼開始

首先，您需要安裝並激活 Divi 主題。 確保您擁有最新版本的 Divi。

您還需要為測試目的創建一些帖子/頁面，以便搜索結果頁面實際顯示結果。

之後，您就可以開始了。

關於搜索結果頁面

在 Divi 中，搜索結果頁面是用戶在 Divi 的一種搜索表單中輸入搜索查詢後被重定向到的頁面。 導致搜索結果頁面的可能搜索查詢包括默認 Divi 標題中的搜索表單、從 Divi Builder 中的搜索模塊生成的搜索以及內置於 WordPress 的搜索小部件。

默認情況下，搜索結果頁面將簡單地顯示在提要中搜索的頁面或帖子，就像典型的博客頁面一樣。 但是使用 Divi，您可以使用 Divi Theme Builder 隨意設計模板。

如何在 Divi 中創建搜索結果頁面模板

創建新模板

首先，轉到 WordPress 儀表板並導航到 Divi > Theme Builder。 然後單擊“添加新模板”區域。

在模板設置下，分配模板搜索結果。

然後單擊新模板的添加自定義正文區域並選擇“構建自定義正文”。

選擇從頭開始構建佈局。

使用模板佈局編輯器設計搜索結果頁面模板

頁面結果模板的標題部分

在模板佈局編輯器中，通過向默認部分添加一列行來開始模板的設計。 這是我們將為模板構建頁面標題的地方。

分頻器模塊設計重點

然後插入一個分隔模塊。 這將作為我們頁面標題的設計重點。

更新分隔線樣式如下：

• 線條顏色：#3a405a
• 線位置：底部
• 分隔線重量：5px
• Z-索引：-1

帶標題的文本模塊

在分隔模塊下，添加一個新的文本模塊，內容如下：

<h1>Search Results</h1>

更新文字設計如下：

• 背景顏色：#ffffff
• 文本對齊：居中
• 標題字體：Muli
• 標題字體粗細：重
• 標題文字顏色：#3a405a
• 標題文字大小：70 像素（桌面）、40 像素（平板電腦）、22 像素（手機）
• 標題行高度：80px
• 最大寬度：60%
• 模塊對齊：居中
• 最小高度：80px

現在我們可以通過添加自定義邊距將文本模塊向上移動以與分隔線重疊。

• 邊距：-75px

搜索模塊

在帶有標題的文本模塊下，添加一個搜索模塊。 這對於希望在登陸搜索結果頁面後繼續搜索您的博客/網站的用戶很有幫助。

為表單添加輸入佔位符文本。

您還可以通過選擇例外選項組下的選項，從搜索結果中排除某些頁面、帖子和/或類別。 例如，如果您主要為博客創建搜索表單，您可能希望從搜索結果中排除頁面，以便只顯示博客文章。

然後更新搜索設置如下：

• 佔位符顏色：#3a405a
• 字段背景顏色：#ffffff
• 字段字體：蒙特塞拉特
• 字段文本大小：20px
• 按鈕和邊框顏色：#3a405a
• 按鈕字體：Muli
• 按鈕字體粗細：粗體
• 按鈕文字顏色：#ffffff
• 按鈕文字大小：18px
• 寬度：100%
• 最大寬度：300px
• 模塊對齊：居中
• 圓角：8px

這在很大程度上照顧了我們的標題部分。

行填充

在我們開始下一節之前，讓我們取出行的底部填充。

• 填充：底部 0px

創建搜索結果模板的正文部分

現在我們準備添加模板的第二部分，其中將包含搜索結果存檔標題和搜索結果內容。

創建新的節和行

在頂部部分下，向佈局添加一個新的常規部分。

然後向該部分添加一列行。

添加帖子/檔案標題作為動態內容

搜索結果頁面將受益於顯示用戶輸入的搜索查詢的標題。 我們可以使用文本模塊將其添加到頁面並拉入帖子/存檔標題動態內容元素。

首先，添加一個文本模塊。

刪除正文內容框內的虛擬文本，然後選擇懸停在正文內容框上時顯示的動態內容圖標。 然後從列表中選擇 Post/Archive Title。

Post/Archive Title 元素以短語“Results for”開頭，後跟括號中的搜索內容/查詢。 下面是一個示例，說明如果用戶搜索術語“業務”，將會顯示什麼。

接下來，更新文本模塊的設計設置，如下所示：

• 文字字體：Muli
• 文字字體粗細：重
• 文字文字顏色：#d30c7b
• 文字文字大小：22px
• 文本對齊：居中
• 動畫風格：幻燈片
• 動畫方向：下
• 動畫強度：250%

添加的動畫將從“雲”分隔樣式下顯示搜索結果標題（稍後我們將添加它）。 因此，每次用戶輸入新的搜索查詢時，標題都會下拉以獲得很酷的效果。

添加新行

在包含 post/archive title 元素的 Text 模塊下，創建一個新的單列行。

將博客模塊添加到該行。 這將顯示搜索結果頁面的實際帖子/內容。

更新博客模塊的內容設置如下：

• 當前頁面的帖子：是
• 帖子數：9
• 摘錄長度：120
• 顯示作者：NO

這裡最重要的選項是當前頁面的帖子。 這必須處於活動狀態，搜索結果頁面才能顯示搜索的動態內容。

然後更新博客模塊的設計如下：

• 佈局：網格
• 標題字體：Muli
• 標題字體粗細：超粗
• 標題文字顏色：#3a405a
• 標題文字大小：24px
• 標題行高度：1.3em
• 正文字體：蒙特塞拉特
• 正文顏色：#3a405a
• 網格佈局圓角：10px
• 網格佈局邊框寬度：0px
• 框陰影：顯示屏幕截圖
• 框陰影垂直位置：0px
• 框陰影模糊強度 15px
• 框陰影擴散強度：-5px

接下來，更新分頁樣式如下：

部分背景和分隔線

作為設計的最後一步，更新部分設置如下：

• 背景顏色：#eeeeee
• 頂部分隔線樣式：見截圖
• 分隔線顏色：#ffffff
• 分隔線翻轉：垂直
• 分隔線安排：在部分內容的頂部
• 填充：100px 頂部

最後結果

這是在實時站點上搜索術語“業務”時頁面模板的最終結果。

這是平板電腦和手機上的設計。

這是在搜索結果頁面上使用搜索表單進行添加查詢時搜索結果標題動畫的示例。

最後的想法

搜索結果頁面對於用戶來說是一個有用的工具，因此給予它應有的關注是個好主意。 使用 Divi，您可以在設計模板時使用 Divi Visual Builder 創建包含所有必要動態元素的搜索結果模板。 無需代碼知識。 我希望這會給您一些靈感，為您自己的博客或網站創建自定義搜索結果頁面模板。

我期待在評論中收到您的來信。

乾杯!