Search Form Widget

The Search Form widget in the 10Web Builder allows users to add a search bar anywhere on their website, enhancing navigation and user experience. This widget enables visitors of your site to search for content quickly and efficiently, providing a customizable search bar that fits the design and functionality needs of any site.

Adding Search Form widget

1. Open your page in the 10Web Builder editor.
2. Find the Search Form widget in the widget panel.
3. Drag the Search Form widget onto the page canvas.
4. Edit the settings below to customize the search form.

Content tab

Search Form

• Skin: Choose from classic, minimal, or full-screen pre-built styles.
• Minimal: Design is the same as classic without the button.
• Full-screen: Displays only a small button which opens the search form as a lightbox popup.
• Placeholder: Set the text that appears inside the search form by entering a value or using a Dynamic Tag.

Button (Classic skin) or Toggle (Full-screen skin)

• Type: Choose to display an icon or custom text on the button.
• Icon or Text: If using an icon, choose from a search or arrow icon. If using custom text, specify the text that will appear on the button.
• Size: Adjust the size of the button or search icon.
• Alignment(for toggle only): Align the search icon to the left, center, or right.

Style tab

Input

• Overlay color (for full-screen skin only): Select the color of the full-screen overlay.
• Typography: Change the typography options of the search bar for both normal and focused modes.
• Text color: Choose the color of the text.
• Background color: Choose the background color.
• Border color: Choose the border color.
• Box shadow: Give the search bar a box shadow.
• Border size: Control the thickness of the border.
• Border radius: Set the border radius to control corner roundness.

Button or Toggle

• Text color: Choose the color of the text.
• Background color: Choose the background color of the button.
• Icon size: Scale the icon size up and down.
• Width: Adjust the width of the button.
• Border width: Control the thickness of the border.
• Border radius: Set the border radius to control corner roundness.

Advanced tab

You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.