How to create a custom search result form with the result page in horizontally?

For a website, besides design, content, searching and showing results play an important role.

Just imagine that your website has many good contents, beautiful template. However, when users find any information or product, the result shows slowly and incorrectly. For sure, the users will leave your website immediately.

Would you like your customers to find it easy to search for your products and posts comfortably?

There are various ways to layout your result after searching.

How about creating horizontal search results page like this one? The image and information will be aligned horizontally

create a custom search result form with the result page in vertically 01

Before you see the documentation for creating a custom search result form with the result in horizontally, make sure you purchased and installed the CP Live Search plugin.

You can click here to have CP Live Search.

After installing and running the CP Live search plugin, it is super easy to create a custom search result form with the result in horizontally by 4 steps. Let’s begin!

Step 1: Add new a custom search result template

  • In the administration interface, hover over the CP Live Search plugin, click “Result template” and click “Add new” to to create a custom search result form template.Create a new search result page with the result in horizontally 01
  • Click “Edit with KingComposer”.create a custom search result form 01

Step 2: Setting horizontal page layout

To show the search result in horizontal page layout, you need to split the search results into two columns.

  • Click “Element”create a custom search result form 02
  • Click tab “All”, then select “Row Inter”, after that setting row layout with 2 columns.Create a new page with search filter result form template by cp live search 11Create a new page with search filter result form template by cp live search 12
  • Click “Add Element” to add search form and result form.Create a new page with search filter result form template by cp live search 13
  • You can adjust the size of the form search and form result, just drag & drop the line between the two elements.custom search result page with result in vertically

Step 3: Create a custom search result form.

  • Choose tab “CPLS Result” and select the appropriate elements such as image w/float element, image element, text, link button and wrap Woocommerce.Create a new search result page with the result in horizontally 02
  • Image w/float element: An image with border and margins that floats to the right in a paragraph. An example for image w/float element.image with float element

You can read the documentation for how to use Image w/float element here

  • Image element: An example for the mage element.

image elementYou can see the documentation for how to use image element here

  • Text Element: An example for a text element

text element

You can check the documentation for how to use text element here

  • Link button: button that acts like a link.  Here is an example for link button.

link buttonYou can refer the documentation for how to use Link button here

  • Wrap Woo-commerce: Use when you display results related to WooCommerce such as Woo product with Woo title product, Woo flash sale, Woo product price, Woo rating, Woo product thumbnail. An example for wrap Woocommerce.

Wrap woocommerce

You can see the documentation for how to use Wrap Woocommerce here.

Step 4: Click “Publish” to finish build the custom search result form template with the result page in horizontally.

It’s easy to create and archive the search result templates with the result page in horizontally and you can use templates whenever you want with just a few clicks.

You can see demo “Build search result with the result page in horizontally” here for your search result form templates.

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href=""> <abbr> <acronym> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Send a Message