Divi Ajax Search Documentation

easy instructions to get you started

Download

A download link is sent in the order confirmation email. The product can also be downloaded from My Account area.

File Structure

After the purchase of Divi Ajax Search plugin, you’ll get the following file. 

divi-ajax-search-1.0.zip (or divi-ajax-search.zip if purchased from the ElegantThemes marketplace). 

 

Installation

You can install the Divi Ajax Search plugin using 2 methods.

From the WordPress Dashboard

  1. First, go to the WordPress Dashboard >>  Plugins >> and click Add New.
  2. Then Upload Plugin >> Choose File and browse the product zip file.
  3. Once located the file, select it and then click Install Now.
  4. Once the plugin installed, on the next window click Activate Plugin

Manually uploading via FTP

To install the Divi Ajax Search plugin on your website using the FTP client method, 

  1. Extract the product zip file file. 
  2. And then connect to your server using an FTP application. 
  3. Now, navigate to the wp-content/plugins/ directory and upload the divi-ajax-search folder you’ve extracted earlier.
  4. After the upload, go to the WordPress Dashboard >> Plugins >> Installed Plugins
  5. Then scroll to find the Divi Ajax Search and click Activate to enable it.

Configuration

Follow the below instructions to use the Ajax Search module effectively.

  1. Insert DP Ajax Search module on a page.
  2. On the Content tab of the module, you get the “Configuration” settings; here, you can input custom placeholder text for the search bar. And can also specify how many results you want to display in the live search.
  3. Search Area: This allows you to decide where to perform the search query user inputs. Options for where to perform a search are Posts, Pages, Projects, and Custom Post Types, and further inside their Title, Content, Excerpts, or combination of these.
  4. Display: Here, you can decide what to display in the live search based upon the search query. The display options are Title, Excerpt, Featured image, or a combination of these with a Search Icon.
  5. Number of Columns: The same Display settings provides you with the option to show search results in up to 4 columns.
  6. Search Results in Masonry: When you increase the Number of Columns, it will provide the option to display search results in the masonry layout. All you have to do is check “Use Masonry” as “YES.”
  7. Link: Here, you can choose whether to open displayed results in the same tab or a new one.
  8. Background: It provides you with the option to apply background customization for Search Result Box and Search Results’ Item.

Design Customization of the Ajax Search Module

Once you’ve customized the Ajax Search content, move to the Design tab for further appearance tweaks, follow the below steps to know how you can do it.

  1. Search Field: Here, you can change the color of the search field’s Background, Text, Focus Background, and Focus Text. You can also use this setting to apply padding on the search field, font styles, and rounded corners.
  2. Search Icon: Apply custom styling such as Size & Color to the Ajax Search Icon.
  3. Loader: Apply custom styling such as Size & Color to the Ajax Search Loader.
  4. Search Result Item Text: Here, you can apply complete text customization for the Title and Excerpt of the search results.
  5. Spacing: Use this setting to add padding to the Search Result Box.