Key Features
- Dynamic Search Functionality: Choose between different post types to display search results.
- Customizable Placeholders and Button Text: Define placeholder text and personalize the button text and icons.
- Stylish and Adaptable Layouts: Easily adjust colors, borders, and typography for both the input box and button.
What’s Needed?
Ensure you have the following:
- Elementor Free Version: Download Elementor
- Vertex Addons Free Version: Download Vertex Addons
Install and Activate the Elementor Search Input Widget
- First, install and activate the Vertex Addons plugin for Elementor.
- Follow our Widget Activation Guide to enable the Elementor Search Input Widget.
How to Configure the Elementor Search Input Widget in Elementor
After activating the widget, go to the Elementor editor, where you can access and configure the search widget with ease.
- Setting Up Search Parameters:
- Post Type: Under the Content tab, select your desired post type (e.g., posts, pages) to customize the search functionality based on content type.
- Place Holder: Define a placeholder to guide users on what they can search for.
- Button Text & Icon: Add custom text and icons to the search button to match your design and add visual interest.
- Button and Input Box Design: In the Style tab, customize the appearance of the search button and input box.
- Button: Configure background color, typography, padding, and border settings for the button to ensure clear visibility.
- Icon: Adjust icon color, size, and positioning to keep it aligned with your design preferences.
This setup allows you to create a tailored search experience, helping users find relevant content on your site quickly.
How to Style the Vertex Search Input Widget
From the Style tab, the Search Input Widget offers flexible options to style each element to match your site’s design.
Button Styling
- Background Color & Text Color: Set the button background and text color for a visually appealing search bar.
- Typography: Choose typography settings to ensure button text is clear and readable.
- Padding & Border Settings: Adjust the padding, border type, radius, and box shadow to achieve the desired look.
Icon Styling
- Background & Text Colors: Set icon background and text colors to create a cohesive look.
- Size and Positioning: Adjust icon size and position for alignment with the button and text.
- Padding & Border: Control icon padding and borders to match your design.
Input Box Styling
- Background and Text Colors: Choose colors for the input box background and text to improve readability.
- Placeholder Color: Set a subtle placeholder color to guide users without overpowering other design elements.
- Typography and Padding: Customize font style, padding, and border settings to keep the input box visually engaging and functional.
Advanced Tab
The Advanced tab offers margin, padding, custom CSS, and responsive settings, allowing for further customization across all devices.
Final Outcome
The Vertex Elementor Search Input Widget equips your site with a sleek, efficient search function that’s customizable and easy to style. Whether you need a simple search bar or a visually prominent one, this widget provides the flexibility to meet your design needs.
For further assistance, check out our Support Page or access additional information in our Documentation Page.