Documentation

Elementor Pro

The Elementor Pro Posts Widget allows you to display your posts in a grid format, or masonry layout.

To integrate with this widget is fairly straight forward

Basic Setup

  • Add the Posts Grid to your page
  • Before the Posts Widget, tell S&F that it needs to filter the grid by adding a text area and adding our filter_next_query shortcode:
    [searchandfilter id="123456" action="filter_next_query"]

    Replace “123456” with the ID of your search form

  • Add the Search & Filter form to your page using the shortcode or by adding a widget – [searchandfilter id="123456"]
  • In your search form, under Display Results tab, choose Custom Display Method, and enter the Full URL of the page with the Elementor Posts widget
  • Don’t worry about the Query Settings in the Elementor Posts Widget, Search & Filter replaces these

That’s it you’re good to go!

Using Ajax

In your Search Form, under Display Results, use the following settings:

  • Enable Load Results Using Ajax
  • Set Ajax Container .elementor-widget-posts
  • Set  Pagination  Selector to .elementor-pagination a

Masonry & Ajax

When results get loaded in via Ajax, masonry is not usually applied.  To enable masonry with Ajax, add this JS code to your theme

(function ( $ ) {
	"use strict";
	
	// detects when the ajax request has finished and the content has been updated
	// re-init the layout scripts from Elementor
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.init();
	});
	
}(jQuery));

Caveats

In some environments there seems to be one snag.  The Elementor Pro Posts widget was never designed to deal with a “no results” scenario.  This can cause a JavaScript warning (tied in with the Elementor UI), however it does not seem to break any operation.  This does not apply to all cases, so it’s best to check your JS console in your setup.

If you are getting this JS error, our recommendation is to carefully craft your filters to avoid “no results” scenarios.

This can be guaranteed by enabling our setting in your search form – Auto Count  – and avoiding the use of the following fields:

  • Search Field
  • Post Meta Ranges
  • Date Ranges

Then in each individual field, where applicable, enable the Hide Empty option.

Following the above, no matter what your user’s select, you should always return results, and avoid this JS error.