> 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 Using a custom page as the results page via the Elementor Posts or Products widgets {% embed url="" %} 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](https://1706764988-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9jkFgNo4lpUof35gvS%2F-MSI-S943OLdv3D5VoJ0%2F-MSI0YFe_1oAu0odwhVb%2Fimage.png?alt=media\&token=0704cad3-321d-4f55-8a06-92114cd878e8) ![Edit with elementor for the next step](https://1706764988-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9jkFgNo4lpUof35gvS%2F-MSI-S943OLdv3D5VoJ0%2F-MSI1CglRBQIdg7e-L1W%2Fimage.png?alt=media\&token=dc43204a-222f-4a01-8627-f6ef23ddd247) {% 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. ![](https://1706764988-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9jkFgNo4lpUof35gvS%2F-M1_48Ta0vhxk4vDaOyV%2F-M1_TdHvrjGXPGBTx5zP%2Fimage.png?alt=media\&token=5959a4ab-aeeb-45e4-83dc-6a9de52594bc) ...then copy or take note of the "Elementor Posts Widget Live Filter" input text, we will need that in a moment.. ![](https://1706764988-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9jkFgNo4lpUof35gvS%2F-M1_48Ta0vhxk4vDaOyV%2F-M1_TzuZWQJWQRS16tuE%2Fimage.png?alt=media\&token=22997a9f-31d4-42a4-aa65-21e0cfa9d9ae) 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 %} ![](https://1706764988-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9jkFgNo4lpUof35gvS%2F-M1_rIEyUnFI6NpuZHT7%2F-M1_s4301m6GCx4r7ybg%2Fimage.png?alt=media\&token=64151949-44c1-412d-b14e-3ba9c7721c54) 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` ![](https://1706764988-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9jkFgNo4lpUof35gvS%2F-M1__RyYAq4-U0mvJBYL%2F-M1_cB1AX4uxvmOz4Ui5%2Fimage.png?alt=media\&token=0d241574-f88e-4922-89a2-17313a70258b) 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. ![](https://1706764988-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9jkFgNo4lpUof35gvS%2F-M1_rIEyUnFI6NpuZHT7%2F-M1_wpNY-ZmClfG63TU4%2Fimage.png?alt=media\&token=92b46524-2308-4f7b-8215-bc9a3b66e6d7) *Scroll down* until you find them Magnifier and Return button events. Then set both to "Elementor results page". ![](https://1706764988-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9jkFgNo4lpUof35gvS%2F-M1_rIEyUnFI6NpuZHT7%2F-M1_xEj4F90mJXHA_QoH%2Fimage.png?alt=media\&token=5507db09-e22d-4c61-8438-263be2564531) Then under the "Select a page with an Elementor Pro posts widget" option, search for the previously configured page, and select it. ![](https://1706764988-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9jkFgNo4lpUof35gvS%2F-M1_rIEyUnFI6NpuZHT7%2F-M1_xXcZF94_qRj5agJD%2Fimage.png?alt=media\&token=c3ecb546-9989-4c46-b5d9-a2383ce91c86) After the selection, the configuration should look like this. ![](https://1706764988-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9jkFgNo4lpUof35gvS%2F-M1_rIEyUnFI6NpuZHT7%2F-M1_xf0ksXvuAMlhnn0z%2Fimage.png?alt=media\&token=36b2856a-d17c-43d8-8a14-d9726b8d68c0) 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. ![](https://1706764988-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9jkFgNo4lpUof35gvS%2F-M1_rIEyUnFI6NpuZHT7%2F-M1a-3irTbbMnhzOR6F_%2Fimage.png?alt=media\&token=33343845-016b-4853-ac08-016e425ae34b)