Intro

Welcome to Elementor AJAX Search Widget Tutorial by Premium Addons! In this tutorial, specifically designed for WordPress sites using Elementor, you’ll discover how to elevate your website’s functionality with the versatile and customizable search form widget. Perfect for any Elementor-powered WordPress website, this guide will teach you how to set up, tailor, and optimize the search form to enhance user experience and streamline site navigation. Whether you’re new to Elementor or a seasoned user, this tutorial provides all the tools needed to harness the full potential of your website’s search capabilities. Let’s dive in!

Don’t forget to visit our demo page to see it in action.

Requirements:

• You will need Premium Addons free plugin installed and activated on your website.
• Premium Addons Pro is required for:
  • Elements on Page
  • Post Type Select
  • Remove Keyword Button
• Also, make sure that this widget/feature/addon is enabled so you can find it in the Elementor editor
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key Features

Content

• Query
• Search Field
• Search Button

Query

Please note that Elements on Page requires Premium Addons PRO installed and activated on your website.

• Query Type
  • Elements On Page: Select the type of content the search form will query for specific elements within the current page.
    • CSS Selector: Enter the CSS selector of the parent container that holds the elements you want the search form to query.

• Query Type: Drop-down menu to select the type of query (e.g., Post Type, AJAX).
• Custom Search Query: Toggle switch to enable or disable custom search queries.
• Source: Drop-down menu to select the data source (e.g., Posts).
• Categories Filter Rule: Drop-down menu to specify category filtering logic (e.g., Match Categories).
• Categories Filter: Input box to define the categories for filtering.
• Tags Filter Rule: Drop-down menu to choose tag filtering logic (e.g., Match Tags).
• Tags Filter: Input box to define tags for filtering.
• Filter By Author Rule: Drop-down menu to specify author filtering logic (e.g., Match Authors).
• Authors: Input box to list authors for filtering.
• Filter By Post Rule: Drop-down menu for post-filtering logic (e.g., Exclude Post).
• Posts: Input box to list posts for filtering.
• Posts Per Page: Input box to define the number of posts to show per page.
• Show Results Number: Enable or disable showing the results number.
• Order By: Drop-down menu to choose the sorting field (e.g., Date).
• Order: Drop-down menu to select the sorting order (e.g., Descending).
• Empty Query Text: An input box to define text is displayed when there’s no query result.

Please note that Post Type Select requires Premium Addons PRO installed and activated on your website.

• Post Type Select: Toggle switch to enable or disable selecting specific post types.
• Show Posts Number: Toggle switch to show or hide the number of posts.
• Excluded Post Type: Input box to define post types to exclude from the query.
• Select Field Position: Drop-down menu to determine where the field is positioned (e.g., Before Field).
• Posts Per Page: Input box to set the number of posts displayed per page.
• Show Results Number: Toggle switch to enable or disable showing the total number of results.
• Results Number Text: Text input to set the format for displaying the results number. It supports templates like {{number}}.
• Order By: Drop-down menu to choose the field used for sorting (e.g., Date).
• Order: Drop-down menu to select the sorting order (e.g., Descending).
• Empty Query Text: Text input to define what is displayed when the query returns no results.

Search Feild

• Width: Set the width of the search field with a unit choice.
• Height: Adjust the height of the search field.
• Show Label: Toggle whether to display a label for the search field.
• Label Text: Input the text for the label.
• Placeholder Text: Input placeholder text that appears within the search field.
• Fields Focus Effect: Choose an effect that occurs when the field is clicked and focused on, such as Lable Position, Lable Letter Spacing, Lable Position + Background, or, Lable CSS Position.
• Focus Line Animation: Toggle whether a line animates when the field is focused, which could add a dynamic visual cue for users.
• Animate From Middle: Select if the focus line animation should start from the center and expand outward.
• Focus Line Color: Pick the color of the focus line, with a color picker tool.

Search Button

• Search Button: Toggle to enable or disable the search button.
• Width: An input field to set the width of the search button, with a unit selector next to it (set to pixels by default).
• Action: Choose between performing an on-page search or going to the search page by selecting the search button.
• Text: An input field for the text that will be displayed on the search button.
• Search Icon: Toggle to decide whether an icon should be displayed on the search button.
• Select Icon: An area to choose the icon; a magnifying glass icon is shown, which is typically associated with search functions.
• Icon Position: A selector to position the icon to the left or right.
• Icon Size: A slider to adjust the size of the icon on the button.
• Icon Spacing: An input field to adjust the spacing around the icon, with a unit selector (set to pixels).
• Button Position: A dropdown menu to choose the button’s position relative to another element (e.g., “After”).

Display Options

• Hide Results on Click Outside: Determine if the results should disappear when the user clicks outside of the content area.
• Skin: Select a display style to be Classic, On Side, or Banner.
• Number of Columns: Choose how many columns the content should be displayed.
• Columns Spacing: A slider to adjust the spacing between columns.
• Rows Spacing: A slider to adjust the spacing between rows.
• Show Thumbnail: Decide whether to display thumbnail images.
• Title HTML Tag: Select the HTML tag for titles.
• Show Excerpt: Enable to show a brief description or summary.
• Excerpt Length: Set the number of words or characters for the excerpt.
• Excerpt Type: Choose how the excerpt is displayed as Dots or Read More.
• Link Whole Box: Enable to make the entire content box a clickable link.
• Open Links in New Tab: Decide whether links open in a new browser tab.

Remove Keyword Button

Please note that Remove Keyword Button requires Premium Addons PRO installed and activated on your website.

• Remove Keyword Button: Enable or disable a button for keyword removal.

Pagination

• Enable Pagination: Enable to turn pagination on or off.
• Page Limit: Input field to set the maximum number of pages that can be displayed in the pagination control.
• Enable Pagination Next/Prev Strings: Enable custom text for the pagination controls.
• Previous Page String: Text field to customize the label for the ‘Previous’ page button in the pagination.
• Next Page String: Text field to customize the label for the ‘Next’ page button in the pagination.
• Alignment: Options to align the pagination controls on the page (left, center, or right).

Carousel

• Enable Carousel: Switch to turn the carousel on or off.
• Slides To Scroll: Set the number of slides that should move with each scroll.
• Rows: Determine how many rows each slide should have.
• Transition Speed (ms): Specify the carousel’s transition speed in milliseconds.
• Center Mode: Enable or disable a mode that centers the carousel.
• Navigation Dots: Switch to show or hide navigation dots.
• Navigation Arrows: Enable or disable navigation arrows.
• Vertical Position: Adjust the vertical position of the carousel.
• Previous Arrow Position: Set the position of the previous arrow.

Style

• Search Field
• Search Button
• Remove Keyword Button
• Thumbnail
• Title
• Excerpt
• Post Box
• Posts Container
• Pagination
• Spinner

Search Field

• Typography: Adjustments for the text appearance within the search field, with options to customize both the normal state and when the field is in focus.
• Text Color: A color picker to set the text color in the search field.
• Background Color: A color picker for choosing the background color of the search field.
• Border Type: Select the border style of the search field, such as solid, dotted, or dashed.
• Border Radius: Controls to round the corners of the search field, with individual adjustments possible for the top, right, bottom, and left corners.
• Box Shadow: Add a shadow effect to the search field, likely with customizations for color, spread, and blur.

Search Button

• Typography: Adjust font properties for the button text, with separate settings for the button’s normal state and when it’s being hovered over.
• Color: Choose the color of the button text.
• Background Type: Options to select the type of background for the button, such as a solid color, gradient, or image.
• Text Shadow: Add a shadow to the text on the button to make it stand out more distinctly.
• Border Type: Select a border style for the button, with options like solid, dotted, dashed, etc.
• Border Radius: Adjust the roundness of the button’s corners with individual settings for the top, right, bottom, and left.
• Box Shadow: Apply a shadow effect around the button, which can add depth to the button’s appearance.
• Margin: Set the outer space around the button, allowing for precise positioning within its container.
• Padding: Define the inner space between the button text and its borders, affecting the button’s overall size and text placement.

Remove Keyword Button

• Enable Remove Button: A toggle switch to enable or disable the “Remove Button,” which allows for keyword removal.
• Icon Size: A slider to adjust the size of icons.
• Offset: A slider to adjust the icon’s offset.
• Color: Color selector to change the default color.
• Hover Color: Color selector to define the color when hovered over.
• Background Color: Color selector for the background.
• Hover Background Color: Color selector for the background when hovered over.
• Border Type: A drop-down menu to choose the type of border.
• Border Radius: Input boxes to adjust the radius for borders.
• Box Shadow: A toggle to add or remove shadow effects on the box.

Thumbnail

• Height: Adjust the height of the thumbnail.
• Hover Effect: Choose an effect that will occur when the user hovers over the thumbnail.
• Hover Overlay Color: Select a color that will appear over the thumbnail when it is hovered over, likely with a color picker tool.
• Border Type: Choose the style of the thumbnail’s border from a dropdown menu.
• Border Radius: Adjust the roundness of the corners of the thumbnail, with individual settings for the top, right, bottom, and left corners.

Title

• Typography: Customize font settings for the title text.
• Color: Choose the text color for the title.
• Hover Color: Select a text color that the title will change to when hovered over.
• Margin: Set the space around the title, with individual adjustments for top, right, bottom, and left sides.

Excerpt

• Color: Choose a color for the excerpt text, likely with a color picker tool.
• Typography: Customize the font properties of the excerpt text, such as font family, size, weight, and style.
• Text Shadow: Add a shadow effect to the excerpt text to enhance readability or add depth.
• Margin: Adjust the spacing around the excerpt text, with separate controls for the top, right, bottom, and left margins.

Post Box

• Normal/Hover: Tabs to configure settings for the default appearance and for when the mouse hovers over the post box.
• Background Type: Options to set the background, such as a solid color or an image.
• Border Type: A dropdown menu to select the border style for the post box (e.g., solid, dashed, dotted).
• Border Radius: Inputs to round the corners of the post box, with individual adjustments for each corner.
• Box Shadow: An option to add and customize a shadow around the post box.
• Padding: Controls to set the space inside the post box, between the content and the borders, for each side (top, right, bottom, left).

Post Container

• Background Type: Choose the background of the container, such as a color or image.
• Border Type: A dropdown menu to select the border style (e.g., solid, dashed, dotted).
• Border Radius: A field to adjust the curvature of the container’s corners.
• Box Shadow: An option to add a shadow around the entire container, which can give depth to the layout.
• Margin: Set the space around the outside of the container, with separate controls for top, right, bottom, and left.
• Padding: Define the space inside the container, between the border and the content, for each side.

Pagination

• Typography: Customize the font properties for the pagination links, with options for normal, hover, and active states.
• Color: Select the text color for the pagination links.
• Background Color: Choose a background color for the pagination elements.
• Border Type: Select a border style for the pagination items from a dropdown menu (e.g., solid, dotted, dashed).
• Border Radius: Adjust the roundness of the pagination item corners.
• Advanced Border Radius: Toggle to apply custom radius values, with a note about getting the radius value from elsewhere, possibly suggesting a reference to design guidelines or theme settings.
• Margin: Define the space around the pagination component or possibly another element, with individual settings for top, right, bottom, and left.
• Padding: Set the internal spacing for the element, affecting the space between the content and border of each side.
• Overlay Color: Choose a color that might appear as an overlay during loading or hovering actions.
• Spinner Color: Select the color for a loading spinner, indicating activity or content being loaded.
• Fill Color: Pick a fill color, possibly for the loading spinner or background.

Carousel Dots

• Color: Selector to choose the color of the dots in the carousel.
• Active Color: Selector to define the color of the active dot in the carousel.

Carousel Arrows

• Color: Selector for the color of the carousel arrows.
• Size: A slider for adjusting the size of the arrows.
• Background Color: Selector for the background color of the arrows.
• Border Radius: A slider for changing the border radius.
• Padding: A slider for setting padding around the arrows.
• Margin: Inputs to define the margins on all sides (top, right, bottom, left).

Spinner

• Size: A slider to adjust the size of the spinner.
• Spinner Color: A color picker to choose the color of the spinner.
• Fill Color: Another color picker, presumably to select the background or internal color of the spinner.
• Offset: A field to set the spinner’s position offset, which can be used to adjust its alignment or placemen.

Conclusion

In conclusion, Elementor AJAX Search Widget by Premium Addons offers significant enhancements to the search functionality on WordPress sites. Its advanced query capabilities enable precise content targeting and include extensive filtering options, ensuring users find exactly what they need. With customizable search fields and buttons, the widget integrates seamlessly into any site design, enhancing both aesthetics and functionality. Additionally, its SEO-friendly features contribute to improved site performance and search engine rankings, making it an essential addition for any Elementor-powered website aiming to optimize user engagement and navigation efficiency.

If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our Facebook group and YouTube channel to get updates about new features, improvements, and bug fixes.