> For the complete documentation index, see [llms.txt](https://documentation.ajaxsearchpro.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://documentation.ajaxsearchpro.com/elementor-integration/custom-results-page-with-elementor-pro.md).

# 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_)