Content Controls
Form
These controls let you customize the search form’s functionality and appearance, including setting search limits, adding placeholders, and incorporating icons.
- Limit To Post Type – Specify which types of posts the search should be limited to, such as blogs, products, etc.
- Placeholder – Enter text that will appear in the search box before the user starts typing, guiding them on what to search.
- Icon – Select an icon to display within the search form, adding a visual element to the search box.
Design Controls
Form
Design the visual aspects of your search form, including its style, padding, background, borders, typography, and focus effects to match your site’s aesthetic.
- Style – Choose a style for your search form, like ‘classic’ or ‘full-screen’, to determine its overall design layout.
- Classic Styles – Customize the classic search form style with options for padding, background, placeholder, borders, and typography. This set of controls is available only when ‘Style’ is set to ‘classic’.
- Padding – Adjust the padding around the search form for better spacing and alignment.
- Background – Select a background color for your search form.
- Placeholder – Choose a color for the placeholder text.
- Borders – Style the borders of the search form, including radius, styling, and shadow.
- Radius – Set the border radius for rounded corners.
- Styling – Customize border styles and colors.
- Shadow – Add a shadow effect to make the form stand out.
- Typography – Adjust the font style of the text within the search form.
- Focused – Style the search form when it is focused (clicked on) by the user.
- Background – Choose a background color for the focused state.
- Border – Set a border color for when the form is focused.
- Shadow – Add a shadow effect for the focused state.
- Icon Button – Customize the icon button in the search form, with options for type, icon, padding, text, position, size, background, and color.
- Type – Choose the type of icon button (text or custom).
- Icon – Select an icon for the button. Available when ‘Type’ is set to ‘custom’.
- Padding – Adjust the padding for the icon button. Available when ‘Type’ is ‘text’.
- Text – Enter text for the button. Available when ‘Type’ is ‘text’.
- Position – Set the position of the icon button.
- Size – Change the size of the icon button. Available when ‘Type’ is not ‘text’.
- Background – Choose a background color for the icon button.
- Color – Set the color of the icon button.
- Full Screen Styles – Style the full-screen search form, with controls for the open button, search box, and close icon. This set of controls is available only when ‘Style’ is set to ‘full-screen’.
- Open Button – Design the button that opens the full-screen search form.
- Size – Adjust the size of the open button.
- Borders – Style the borders of the open button, including radius, styling, and shadow.
- Background – Choose a background color for the open button.
- Color – Set the color of the open button.
- Search Box – Customize the search box within the full-screen form.
- Width – Adjust the width of the search box.
- Height – Set the height of the search box.
- Background – Choose a background color for the search box.
- Placeholder – Set a color for the placeholder text.
- Typography – Style the typography of the search box.
- Icon – Customize the search icon within the box.
- Hide – Toggle to hide or show the search icon.
- Position – Set the position of the search icon.
- Color – Choose a color for the icon.
- Size – Adjust the size of the icon.
- Borders – Style the borders of the search box.
- Radius – Set the border radius.
- Styling – Customize border styles and colors.
- Shadow – Add a shadow effect.
- Focused – Style the search box when it is focused by the user.
- Background – Choose a background color for the focused state.
- Border – Set a border color for the focused state.
- Shadow – Add a shadow effect for the focused state.
- Padding – Adjust the padding within the search box.
- Close Icon – Customize the close icon for the full-screen search form.
- Color – Set the color of the close icon.
- Size – Adjust the size of the close icon.
- Background – Choose a background color for the full-screen search form.
- Width – Adjust the width of the search form. Available when ‘Style’ is not set to ‘full-screen’.
- Height – Set the height of the search form.
Spacing
Adjust the spacing around the search form to ensure it fits seamlessly into your page layout.
- Margin Top – Set the top margin to control the space above the search form.
- Margin Bottom – Adjust the bottom margin to manage the space below the search form.
