# Custom results page with Elementor Pro

{% embed url="<https://youtu.be/RTbxpM1af4c>" %}
Elementor Loop Grid as Results Page tutorial
{% endembed %}

### Prerequesites

Elementor Pro is required, as unfortunately the free version does not contain the Posts widget.

* [Elementor](https://wordpress.org/plugins/elementor/)
* [Elementor Pro](https://elementor.com/pricing/)

{% hint style="warning" %}
This tutorial is to make a custom single page and redirect the results from Ajax Search Pro to that page - not for customizing the existing results page.

To customize the actual results archive page, you can either use Elementor  if your theme supports it, or using a theme editor or custom coding.
{% endhint %}

## The custom results page

This works the very similarly the [Posts](/elementor-integration/elementor-pro-posts-widget-live-filter.md) or [Products widget live filters](/elementor-integration/elementor-pro-product-widget-live-filter.md). In fact, the pages from those tutorials can be used as results pages.

| Pros                     | Cons                                                                                                                                                                         |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Easy to use              | There is no "No results" text available for these widgets currently in Elementor. You can join the [request thread here](https://github.com/elementor/elementor/issues/7624) |
| Highly customizable      | Images only show up if the items have featured images                                                                                                                        |
| Has a working pagination |                                                                                                                                                                              |

### Making a WordPress page first

Under the Pages submenu, create a new page for this, which is going to be used as the host for the elementor widgets - and will act as the results page.

After creating the new page, open it with Elementor, and open your site admin panel on a new browser tab for convenience.

![Create a new page](/files/-MSI0YFe_1oAu0odwhVb)

![Edit with elementor for the next step](/files/-MSI1CglRBQIdg7e-L1W)

{% hint style="info" %}
Theoretically any post type should work, but for the maximum compatibility, we recommend using pages for this
{% endhint %}

### Elementor widget configuration

If you don't have a search bar yet, make sure to create one, you can check the basics under the [Getting Started](/getting-started.md) section.

Before starting a small text is needed - open up the search instance options, and click on the "Toggle Shortcodes for ..." text.

![](/files/-M1_TdHvrjGXPGBTx5zP)

...then copy or take note of the "Elementor Posts Widget Live Filter" input text, we will need that in a moment..

![](/files/-M1_TzuZWQJWQRS16tuE)

Now, go back to your Elementor editor and simply put the "Posts" or the "Products" widget to a page of your choice.

{% hint style="warning" %}
The Products widget is only capable of displaying products, nothing else - use it only if you want to display products as results.
{% endhint %}

![](/files/-M1_s4301m6GCx4r7ybg)

Open up the Posts Widget options, and navigate to the Advanced Options panel. Enter the code that was copied/noted from step 1. It should look like this: `as_es_1`

![](/files/-M1_cB1AX4uxvmOz4Ui5)

Save the page, and that is it.

### Search bar configuration

On your WordPress back-end open up the search instance options, and navigate to the **General Options -> Logic & Behavior** panel.

![](/files/-M1_wpNY-ZmClfG63TU4)

*Scroll down* until you find them Magnifier and Return button events. Then set both to "Elementor results page".

![](/files/-M1_xEj4F90mJXHA_QoH)

Then under the "Select a page with an Elementor Pro posts widget" option, search for the previously configured page, and select it.

![](/files/-M1_xXcZF94_qRj5agJD)

After the selection, the configuration should look like this.

![](/files/-M1_xf0ksXvuAMlhnn0z)

Save the search options, and it is ready for use. Placing the search shortcode to any page will automatically redirect to the results page.

### Live search Triggers

After redirection, if the plugin shortcode is present on the results page, the alternative search triggers are automatically activated - these override some redirection/live search behaviours.

These override triggers can be configured on the same options panel, **General Options -> Logic & Behavior**

Please read each option hint for its exact purpose.

![](/files/-M1a-3irTbbMnhzOR6F_)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://documentation.ajaxsearchpro.com/elementor-integration/custom-results-page-with-elementor-pro.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.