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

You have full control of your website. But if you can’t use right, it will become terrible.

How about attracting your audience by showing the exact and beautiful results with an image and description are arranged vertically?

Just like this example?

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

Are you interested in?

If yes, read the article below to be able to make a search results page effectively and beautifully for your website.

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

After installing and running the CP Live search plugin, it is very easy for you to create a custom search result form with the result in vertically by 3 steps. Let’s get started

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 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: Create a custom search result form.

Click “Element”

create a custom search result form 02

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 see the documentation for how to use Image w/float element here

  • Image element: Here is an example of image element

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

  • Text Element: An example for text element

text element

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

  • Link button: a button that has an action like a link. An example for link button.

link buttonPlease read 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

Refer the documentation for how to use Wrap Woocommerce here.

Step 3: Click “Publish” to finish build the custom search result form template with the result in vertically.

It’s not difficult to create and archive the search result templates with the result in vertically 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 vertically” 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