Set up like your Demo

[ryanmacParticipant]

Great work on this plugin! Just played around for a while, and I am trying to recreate your demo exactly, as shown here.

Can you tell me the settings used? Or how to recreate this?

[Ernest MarcinkoKeymaster]

Hi!

If you mean the red search bar on the front page then.

1. On the theme selector you should select the “Demo – Home isotopic” it’s somewhere around the bottom of the list. Wait a few seconds as it loads.

2. Save the search. It should look then exactly like that.

If you want to move the results from under the search to a different position, there is a description on how to do that in the documentation:
http://wp-dreams.com/demo/wp-ajax-search-pro3/docs/#positioning_the_results_elswhere

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[ryanmacParticipant]

I really appreciate the quick response! Superior support, I will definitely rate 5 stars!

I keep going through the documentation, and still don’t see how to adjust the Search box’s width to match your demo. Also, my search results are showing 1 column, 2 rows… How do I display 2 columns, 2 rows, with numbered pagination like your demo?

EDIT: Revolution Slider was minimizing the size of the search box width.

• This reply was modified 9 years, 8 months ago by  ryanmac.

[Ernest MarcinkoKeymaster]

The width is not adjustable because it fits the container elements width. So if the search is in a 300 pixel wide container it will fit to that and becomes 300 pixels wide.

I will try to explain how that particular search works on the demo page. What you see there is a section, which is divided into 2 equal pieces, each piece is half of the width of the section. The section width is not set to an exact value, because it’s different for each device (desktop, mobile etc..)
This is achieved with a theme shortcode. We are using the district theme, and it has these shortcodes to divide the content into colums. So after dividing that section into 2 colums, one of them holds the search shortcode, the other one holds the results shortcode for that search instance. Your theme might not support these colums, so I will try to make an example code of how to achieve this without the theme shortcodes. Take a look at this code:

http://pastebin.com/MeFufUV1

If you paste this code to the post/page editor – not the visual editor, you must switch to the Text editor – then after saving you will possibly see a search box that’s half the width of the content.

Now after switching the layout mode to blocking (see link in the previous post), if you type in something the results should appear next to the search box, instead under it.

The pagination style is called the “Isotopic” layout. So if on the layout options panel you change it, then you should see that layout. https://i.imgur.com/coA58ga.png

Let me know how it goes. I hope I didn’t confuse you. The search has a lot of options, it takes some time to get used to it.

I might not answer today, I got some real life stuff to take care of. Good luck with the experiments.

• This reply was modified 9 years, 8 months ago by  Ernest Marcinko.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts