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
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.
- Click “Edit with KingComposer”.
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”
- Click tab “All”, then select “Row Inter”, after that setting row layout with 2 columns.
- Click “Add Element” to add search form and result form.
- You can adjust the size of the form search and form result, just drag & drop the line between the two elements.
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.
- 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.
You can read the documentation for how to use Image w/float element here
- Image element: An example for the mage element.
You can see the documentation for how to use image element here
- Text Element: An example for a 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.
You 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.
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.