如何將實時 Ajax 搜索添加到您的 Divi 網站

Ajax 是向 Divi 添加實時搜索的好方法。 使用 Ajax，無需重新加載頁面即可向用戶顯示搜索結果。 這可以讓您的訪問者更快地看到結果，這有助於他們在您的頁面上停留更長時間。 結果是一個看起來更乾淨、功能更流暢的網站。

Ajax 搜索未內置在 Divi 中，但可以使用第三方插件輕鬆添加。 在本教程中，我們將看到如何將 Ajax 搜索添加到 Divi，並了解如何設置搜索樣式以適合您網站的設計。

進入教程。

搶先看

在開始之前，先看看我們完成後 Ajax 搜索的外觀。 這是桌面視圖。 我將向 WooCommerce 商店添加 Ajax 搜索。 我正在使用在線商店佈局包中的顯示頁面。 我們還將設置搜索樣式以匹配佈局。 當然，由於這是一個測試站點，我在作弊並使用 WooCommerce 測試產品。 結果將與任何產品相同。

以下是相同設計在手機上的外觀。

如何將實時 Ajax 搜索添加到您的 Divi 網站

訂閱我們的 YouTube 頻道

1.安裝Divi Ajax Search

首先，從 Divi Marketplace 購買 Divi Ajax Search。 它通常為 29 美元，包括無限制使用和一年的支持和更新。 Divi Ajax Search 可讓您搜索頁面、帖子、項目和 WooCommerce 產品。 對於這些帖子類型中的每一種，它的工作方式都相同。 它可以搜索標題、摘錄和特色圖像，並根據您的設置顯示它們。

要安裝插件，請轉至插件>添加新並選擇上傳插件。

選擇“選擇文件”並導航到計算機上文件的位置並選擇它。 單擊立即安裝。

安裝插件後，選擇Activate Plugin 。

2. 將 Ajax 搜索添加到您的 Divi 網站

這是原始佈局的外觀。 它包括標題、與標題圖像重疊的類別以及用於顯示產品的 WooCommerce 模塊。 我將在商店模塊上方添加 Ajax 搜索功能。 我還將對其進行樣式設置以匹配佈局的元素。

將 Divi Ajax 搜索添加到佈局

點擊商店模塊下方的圖標，打開模塊模式。 滾動到或搜索Divi Ajax Search並將其添加到佈局中。 我正在顯示線框視圖，但任何視圖的工作方式都相同。

將模塊拖放到商店模塊上方。

配置搜索框

單擊齒輪以打開選項。 我已經切換到桌面視圖，所以我可以實時看到我的更改。

首先，我們將調整佔位符文本。 默認佔位符文本使用“搜索”一詞。 這很好，但我將其更改為搜索我們的產品，以便用戶知道他們正在搜索商店而不是博客文章或其他內容。 我會將Order By 、 Order和No Results Text保留為默認值。

• 佔位符文本 – 搜索我們的產品
• 搜索結果 – 10
• 按日期訂購
• 順序 – 描述
• 無結果文本 – 未找到結果

決定在搜索結果中顯示什麼

在名為“搜索區域”的部分下，選擇要搜索的內容。我將其保留為默認設置，包括標題、內容和摘錄。

接下來，選擇帖子類型。 您可以使用它來搜索帖子、頁面、項目、產品或以上所有內容。 我正在選擇產品。

搜索：

• 標題
• 內容
• 摘抄

帖子類型：

• 產品

選擇要顯示的內容

向下滾動到“顯示”區域以選擇結果的顯示方式。 我保留搜索圖標、標題、摘錄和特色圖片的默認設置。 我還啟用了產品價格，將列數更改為 4，並選擇使用磚石。 這會給我我想要的佈局。

顯示搜索圖標：

• 是的

顯示字段：

• 標題
• 摘抄
• 特色圖片
• 產品價格

列數：

• 4

使用砌體：

• 是的

顯示滾動條

轉到滾動條設置並決定顯示或隱藏滾動條。 我包括滾動條，以便用戶更好地意識到他們可以滾動。

滾動條：

• 展示

Divi Ajax 搜索結果

輸入搜索詞會在搜索字段下顯示結果。 這看起來不錯，但它在網站的內容中並不突出。 我們將對其進行樣式設置，使其適合網站的設計，並且不會與產品圖片混合。

3. 設計模塊以適合您的網站

為了設計搜索框的樣式，我將使用我正在使用的佈局中的設計元素。 在線商店佈局的商店頁面底部有幾個設計元素。 一個是有趣的電子郵件選擇模塊。 我將以此為背景和領域的靈感。 我還將在搜索結果中使用 Shop Now CTA 的背景顏色。 我特別關註三個設計元素：

• 時事通訊背景顏色 – #757d79
• 商店 CTA 背景顏色 – #dcae83
• 兩者的填充 – 50px（頂部，底部），60px（右側，左側）

樣式搜索字段

在內容選項卡中打開背景設置。 本節有三個不同的背景區域。 去最後一個。 它只是被稱為背景。 在此處輸入顏色。

• 背景顏色 – #757d79

在“設計”選項卡中，轉到“間距”設置並輸入填充。 這將讓我們看到場地周圍的區域，以便我們可以更好地看到結果。 這也使搜索框周圍有很多顏色，這將匹配佈局中的元素。

• 內邊距 50px（上、下）、60px（右、左）

在搜索字段設置中，添加字段背景顏色和字段文本顏色。 我使該字段與模塊的背景相匹配，並為文本選擇了白色。

• 字段背景顏色 – #757d79
• 字段文本顏色 - #ffffff

在相同的設置中，向下滾動到字段邊框顏色並選擇白色。 我們還可以調整邊框的粗細和半徑。 我將其保留為正方形以匹配 optin 模塊的文本字段。

• 字段邊框顏色 - #ffffff

打開搜索圖標的設置並選擇白色。

• 搜索圖標顏色 – #ffffff

打開 Loader 的設置並為Loader Color選擇白色。 加載器只會暫時被看到，但如果它與其餘元素匹配，它看起來會更好。

• 裝載機顏色 – #ffffff

設置結果字段的樣式

打開“內容”選項卡中的“背景”設置，並將顏色添加到“搜索結果框”和“搜索結果項”背景。 當我們為模塊設置樣式時，這將不可見，因為它僅在顯示搜索結果時顯示。

• 背景顏色 – #dcae83

在 Design 選項卡中，打開Search Result Item Text的設置。 在“標題”選項卡中，選擇全大寫字體樣式並為文本顏色選擇白色。 我將所有其他標題設置保留為默認值。

• 標題字體樣式 - TT
• 標題文字顏色 - #ffffff

打開摘錄選項卡並為摘錄文本顏色選擇白色。

• 摘錄文本顏色 - #ffffff

打開價格標籤。 為價格權重選擇半粗體，為文本顏色選擇白色。

• 價格字體粗細 – 半粗體
• 摘錄文本顏色 - #ffffff

結果

這是 Ajax 搜索在桌面上使用我的樣式的外觀。 搜索結果幾乎立即顯示。 它看起來優雅而流暢。

這是它在電話上的外觀。 結果堆疊並調整以適應屏幕。

結束的想法

使用 Divi Ajax 搜索插件可以快速輕鬆地將 Ajax 搜索添加到您的 Divi 網站。 它易於使用，易於設計與您的網站相匹配的樣式，並且結果很快且看起來很棒。 對於它可以搜索的帖子類型以及它將在結果中顯示的內容類型，您有很多選擇。

現在，您的 Divi 網站可以擁有專業設計的 Ajax 搜索功能，您的訪問者會喜歡它！

我們希望聽到您的意見。 您是否向 Divi 網站添加了實時 Ajax 搜索？ 請在評論中告訴我們您的體驗。

精選圖片來自 Kroster/shutterstock.com