Kadence Tutorial: Adding Advanced Search Functionality with Kadence Blocks' Search (Adv) Block

The search function in the website helps to improve content accessibility.Kadence Blocks Search (Adv) in the plugin Advanced Search BlockIt supports insertion into pages, articles, widget areas, header modules and other locations, and has strong customization capabilities.

Introduction to Search (Adv) blocks

The Search (Adv) block applies to Gutenberg Editor environment, compatible with Kadence Advanced header, sidebar, and other areas.

Common usage scenarios include:

• Search input box at the top of the page

• Keyword search on product pages

• Modal search popups in collapsed menus

Search styles can be switched to standard or modal styles for greater flexibility in different layouts.

Search Style Settings

• Standard Search Style
  The search box is always visible and is suitable for placement in theMain page area or navigation bar

• Modal Search Styles
  Pop-up search window after clicking the button, suitable for use in locations where space is limited

Search button can be enabled in both styles, support customize button text and style.

You can set whether the search scope includes product content, suitable for the WooCommerce The site limits the type of search.

Button and Icon Customization

• Submit button for advanced button block

• Support for changing icons (built-in icons or customized) SVG)
• Adjustable colors, borders, rounded corners, fonts and other appearance styles
• Supports independent color and size settings for normal and hover states

Input Box Style Settings

Input boxes support a variety of visual control options such as fonts, colors, margins, and more:

• Setting the maximum and minimum width

• Custom placeholder text color and size

• Adjust font family, font size, line height, word spacing

• Add icons, set icon size and line widths
• Setting rounded corners and inner margin values to optimize typographic effects

Modal Style Settings

When modal search is enabled, the search box will be hidden behind a button and pop up to show it when clicked:

• Background can be set to solid or gradient color
• Support close icon style adjustment
• Control the margins and maximum size of the modal window

This style is suitable for displaying a streamlined interface in mobile pages.

Advanced Options

The search block supports the following additional settings:

• Add top and bottom margins

• Specify anchor IDs for easy jump location

• Fill in ARIA tags for enhanced accessibility support

• increase CSS Class name for easy style expansion or JS manipulation

• Save current settings as default for quick reuse in the future

summarize

Kadence Blocks The Search (Adv) module provides a more flexible way to build searches that meets the needs of page layout, aesthetic presentation, and functionality combinations. Standard input styles and modal pop-ups allow access from different devices. Combined with themes and advanced layout tools, it helps to build a clearly structured content portal.

If you need to further refine the search scope, icon style or visual layout, you can deploy it in conjunction with the actual design of the website.