Skip to content

Documentation

Extensive Documentation for PowerPack & WooPack to help you with common questions and issues.

PowerPack

⌘K
  1. Home
  2. Docs
  3. PowerPack
  4. Modules
  5. Content Grid
  6. How to add a Search Form to the Content Grid?

How to add a Search Form to the Content Grid?

The Content Grid module is so powerful yet flexible to customize. You can add a search form for your visitors to find the content without redirecting them to a search results page.

PowerPack Content Grid with the Search Form
Content Grid with the Search Form

Requirements

PowerPack 2.30 or later

Steps

Please follow the below steps to add a search form:

Step 1: Drag & drop PowerPack’s Search Form module on the page

Beaver Builder modules panel
PowerPack’s Search Form

Step 2: Add the following CSS class to the Search Form module under the Advanced tab > HTML Element: cg-search-form

PowerPack's Search Form Advanced tab
CSS class for the Search Form

Step 3: Drag & drop PowerPack’s Content Grid module on the page

PowerPack’s Content Grid

Step 4: Add the following CSS class to the Search Form module under the Advanced tab > HTML Element: cg-search-result

PowerPack's Content Grid advanced tab
CSS class for the Content Grid

That’s it. Publish the page and refresh it once. Now type something in the search form and submit it, you will see the result right in the Content Grid.

🎃

SAVEBIG! Get up to 50% OFF this BFCM sale!  GRAB THE DEAL

×