Mobile Search Field – Design Tips

When designing the mobile search bar in Beaver Builder, it is important to ensure that the user experience is seamless and intuitive. A well-designed search bar increases the overall functionality of your website and allows visitors to quickly search for relevant information.

There are four available search modules to use within Beaver Builder: FibroSearch, Standard Search Module, Power Pack Search Form and UABB Search. This style guide will provide some best practices and tips for optimizing the mobile search bar in Beaver Builder.

Best Practices

General Styling
Styling of the mobile form is up to the discretion of the designer.

Limited CSS
Our goal is to design within the confines of the plugin–using the available module styling methods. CSS is permitted as a last available option to correct fixes that cannot be done within the module settings. The use of CSS should be limited to correcting UX and QA fixes. All general styling should be done within the module.

Mobile Search
Be sure to perform final checks on the search bar for mobile. There are instances where the default mobile search overlay needs to be styled separately.

FibroSearch

FibroSearch does not have in module styling within Beaver Builder. Instead, styling will need to be accessed through the plugin settings. Wp Dashboard > WooCommerce > FibroSearch > Search bar tab

Styling within the plugin settings is minimal. Additional styling may be added with CSS however, the use of CSS should be limited and confined to quality corrections.

Review the official documentation from FibroSearch for more in-depth view into FibroSearch customization.
https://fibosearch.com/documentation/get-started/customize-search-appearance/