- This topic has 26 replies, 3 voices, and was last updated 6 years, 6 months ago by
.
-
#1 Make a results page. To do this, add a New Page to your site, give it a suitable title (in my case I will call it
Sample Page) and save the page (use the WordPress editorUpdatebutton). In my examples I will use an imaginary site calledhttp://mysite.com/. From this page you will need the full URL (in my case it ishttp://mysite.com/sample-page):
#2 Now create a new search in Search & Filter Pro. Give it a suitable name (in my case I have called it
Elementor Test). You need to make the form to suit your needs. To make testing easier, note the settings I have used on my General Settings tab. Also make a note of the forms shortcode ([searchandfilter id="105"]in my example) as you will need this later (yours will have a different ID number):
#3 Add any fields you need in the form. You can see I have added Categories and Tags, and a Submit button (when you have done testing, you may want to remove this and enable Auto Submit, but that is down to your preference or design needs).
#4 On the Display Results tab make sure you set the form to the Custom display method, set the full Results URL you had from #1 and set the Ajax Container to
.elementor-posts-containeras shown here:
#5 Save the form. Return to the results page and click the blue ‘Edit with Elementor’ button.
#6 I made the row 25%/75% (1 col : 3col) and in the left column placed a Text Editor element with two shortcodes in (using the shortcode from #2, you need to type in the action part yourself or copy it from here):
[searchandfilter id="105"] [searchandfilter id="105" action="filter_next_query"]Again make sure you change the ID numbers!!!
#7 In the right column I placed a Posts Element (notice I have Masonry off at this point):
I will edit this post once I have figured Masonry out. We did ask the Elementor support team how the layout was initialized (using javascript):
https://github.com/pojome/elementor/issues/4800
They don’t think they do, as you can see from their reply. The above screenshot shows a Masonry option, which is a posts grid initializing javascript. That did not impress me much. I now have to figure that part. I will be back!
