The Divi Ajax Search module for Divi Builder allows users to add a dynamic, real-time search bar to their Divi website. This module enhances user experience by providing instant search results as users type, without the need to reload the page. The search results are displayed in an engaging dropdown format, improving site navigation and making content discovery faster and more intuitive.
Content
The Content tab allows you to configure the search functionality, including search query parameters, results display, and other basic settings
Search Form
- Show Input Icon – Allows you to display an icon inside the search input field.
- Input Icon – Selects the icon to be shown within the search input box.
- Placeholder Text – Sets the placeholder text that appears inside the search field before input.
- Show Submit Button – Enables or disables the visibility of the search form’s submit button.
- Submit Button Icon – Allows you to select an icon for the submit button.
- Submit Button Text – Defines the text label for the submit button.
- Show Categories List – Displays a list of categories to refine the search results.
- Taxonomy – Choose the taxonomy (e.g., categories) for filtering search results.
- Select Placeholder – Provides a placeholder for the category selection dropdown.
Search Query
- Source – Selects the types of content (posts, pages, media, projects) to include in search results.
- Order – Determines the order in which search results are displayed.
- Order by – Specifies the criteria for sorting the search results with many options.
- Posts Per Page – Sets the number of posts displayed per page in the search results.
- Posts Number – Limits the total number of posts displayed in the search results.
Results Area
- Number of Columns – Defines how many columns the search results will be displayed in.
- Show Post Thumbnail – Toggles the visibility of the post thumbnail in the search results.
- Thumbnail Size – Specifies the dimensions for the post thumbnails shown in the results.
- Placeholder Image – Sets an image to display when no thumbnail is available for a post.
- Content Source – Determines the source of the content displayed in the search results (e.g., excerpts, full content).
- Content Length – Defines the maximum length of the content displayed in the search results.
Design
The Design tab provides styling options for the search bar, dropdown results, and text elements, enabling customization of layout, colors, and fonts.
Input Field
Controls the overall styling of the search input area, including its background, border, and padding. This ensures the input field aligns with the site’s design aesthetics.
Input Field Text
Adjusts the font properties of the text entered in the input field, such as font size, color, and style. This enhances readability and ensures consistency with the site’s typography.
Input Field Text
Customizes the appearance of the search submission button, including its color, padding, and hover effects. This helps create an inviting call-to-action for users to initiate their search.
Submit Button
Manages the styling of the categories displayed in the search results, allowing you to set colors, font sizes, and spacing. This makes it easier for users to identify the relevant categories.
Categories List
Configures the font properties specifically for the text within the categories list, including size and color. This ensures that the categories are visually appealing and legible.
Categories List Text
Controls the overall layout and styling of the area where search results are displayed. This includes background color, padding, and spacing, contributing to the visual hierarchy of the search results.
Results Area
Controls the overall layout and styling of the area where search results are displayed. This includes background color, padding, and spacing, contributing to the visual hierarchy of the search results.
Results Item
Customizes the appearance of individual search result items, including layout, borders, and spacing. This helps differentiate each result, making it easy for users to browse through them.
Results Item Thumb
Adjusts the styling of thumbnail images associated with each search result item. This includes size, border, and spacing, enhancing the visual impact of the thumbnails.
Results Item Text
Manages the font properties of the text displayed for each search result item, including title and excerpt styles. This ensures clarity and consistency across the search results.