AJAX Search Widget - Creative Elements

The Ajax Search widget enhances user experience by providing real-time search results as visitors type into the search bar, improving navigation efficiency and helping users find desired content quickly.

AJAX Search Widget

Content tab

Search

Skin: Choose between classic, minimal, or topbar to match the search bar's appearance with your website's style.

Classic skin

Type: Choose between Icon or Text for the search button.
Icon: Select an icon to represent the search button.
Text: Enter the text to be displayed on the search button.
Size: Set the size of the search input field.
Placeholder: Enter the placeholder text to provide a hint for users about what to search for.

Minimal skin

Icon: Select an icon to represent the search button.
Size: Set the size of the search input field.
Placeholder: Enter the placeholder text to provide a hint for users about what to search for.

Topbar skin

Icon: Choose an icon for the search toggle button.
Alignment: Align the toggle button to the left, center, or right.
Size: Set the size of the toggle button.
Label: Enter the label text for the search input in the topbar.
Placeholder: Enter the placeholder text to provide a hint for users about what to search for.

Results List

Product Limit: Determine the maximum number of search results to display.
Image: Toggle to show or hide product images in the search results.
Category: Toggle to show or hide product categories in the search results.
Description: Toggle to show or hide product descriptions in the search results.
Price: Toggle to show or hide product prices in the search results.

Style Tab (Classic)

Input

Typography: Adjust the typography options for the search input.
Text Color (Normal and Focus): Set the color of the input text in normal and focus states.
Background Color (Normal and Focus): Choose the background color of the input field in normal and focus states.
Border Color (Normal and Focus): Define the border color of the input field in normal and focus states.
Box shadow (Normal and Focus): Add a box shadow to the input field in normal and focus states.
Border Size: Set the thickness of the input border.
Border Radius: Control the rounded corners of the input field.
Cancel Icon Size: Choose the size of the cancel icon.

Button

Text Color (Normal and Hover): Define the text color in normal and hover states.
Background color (Normal and Hover): Choose the background color in normal and hover states.
Icon size: Adjust the size of the search icon in the button.
Width: Set the width of the search button.

Results List

Align: Align the result list to the left, center, or right.
Width: Set the width of the result list.
Distance: Control the space between the result list and the search bar.
Padding: Adjust the internal padding of the result list.
Border Color: Set the color of the result list's border.
Border Width: Determine the thickness of the result list's border.
Border Radius: Define the rounded corners of the result list.
Box Shadow: Add a box shadow to the result list.

Products

Padding: Set the padding around each product item.
Spacing: Define the spacing between the product image and other elements.
Background (Normal and Hover): Choose the background color of the products in normal and hover states.
Name (Normal and Hover): Set the color of the product name in normal and hover states.
Category (Normal and Hover): Set the color of the product category text in normal and hover states.
Price (Normal and Hover): Set the color of the product price in normal and hover states.
Name: Adjust the typography for the product name.
Category: Adjust the typography for the product category.
Price: Adjust the typography for the product price.

Style Tab (Minimal)

Input

Icon size: Adjust the size of the search icon in the input field.
Typography: Adjust the typography options for the search input.
Text Color (Normal and Focus): Set the color of the input text in normal and focus states.
Background Color (Normal and Focus): Choose the background color of the input field in normal and focus states.
Border Color (Normal and Focus): Define the border color of the input field in normal and focus states.
Box shadow (Normal and Focus): Add a box shadow to the input field in normal and focus states.
Border Size: Set the thickness of the input border.
Border Radius: Control the rounded corners of the input field.
Cancel Icon Size: Choose the size of the cancel icon.

Results List

Align: Align the result list to the left, center, or right.
Width: Set the width of the result list.
Distance: Control the space between the result list and the search bar.
Padding: Adjust the internal padding of the result list.
Border Color: Set the color of the result list's border.
Border Width: Determine the thickness of the result list's border.
Border Radius: Define the rounded corners of the result list.
Box Shadow: Add a box shadow to the result list.

Products

Padding: Set the padding around each product item.
Spacing: Define the spacing between the product image and other elements.
Background (Normal and Hover): Choose the background color of the products in normal and hover states.
Name (Normal and Hover): Set the color of the product name in normal and hover states.
Category (Normal and Hover): Set the color of the product category text in normal and hover states.
Price (Normal and Hover): Set the color of the product price in normal and hover states.
Name: Adjust the typography for the product name.
Category: Adjust the typography for the product category.
Price: Adjust the typography for the product price.

Style Tab (Topbar)

Toggle

Color (Normal and Hover): Set the color of the toggle icon in both normal and hover states.
Background Color (Normal and Hover): Choose the background color of the toggle icon in normal and hover states.
Icon size: Adjust the size of the toggle icon.
Border Width: Determine the thickness of the toggle icon's border.
Border Radius: Define the rounded corners of the toggle icon.

Topbar

Background Color: Set the background color of the top bar.
Padding: Adjust the internal padding of the top bar.
Typography: Modify the typography for the label text.
Text Color: Choose the color of the label text.

Input

Typography: Adjust the typography options for the search input.
Text Color (Normal and Focus): Set the color of the input text in normal and focus states.
Border Color (Normal and Focus): Define the border color of the input field in normal and focus states.
Border Size: Set the thickness of the input border.
Cancel Icon Size: Choose the size of the cancel icon.

Results List

Width: Set the width of the result list.
Distance: Control the space between the result list and the search bar.
Padding: Adjust the internal padding of the result list.

Products

Padding: Set the padding around each product item.
Spacing: Define the spacing between the product image and other elements.
Background (Normal and Hover): Choose the background color of the products in normal and hover states.
Name (Normal and Hover): Set the color of the product name in normal and hover states.
Category (Normal and Hover): Set the color of the product category text in normal and hover states.
Price (Normal and Hover): Set the color of the product price in normal and hover states.
Name: Adjust the typography for the product name.
Category: Adjust the typography for the product category.
Price: Adjust the typography for the product price.

Advanced tab

Layout

Margin: Tailor the margin to control the external space surrounding the widget, determining its separation from adjacent elements.
Padding: Define the padding within the widget to manage internal spacing, influencing the arrangement and appearance of its content.
Width: Choose from options like full, inline, custom, or calculate to specify the widget's width behavior within the layout.
Vertical align (Full width, Inline, Custom, or Calculate options): Position the button's content, choosing from options such as start, center, end, or stretch to achieve the desired vertical alignment within its container.
Custom width (Custom option): Specify the widget's width by using a slider to increase or decrease the width in pixels, percentage, or viewport width. You can also manually enter the specific value you want for the width.
Calc (Calculate option): The calc() CSS function enables the precise calculation of values within stylesheets, allowing dynamic adjustments based on various mathematical expressions for enhanced design flexibility.
Min width (Calculate option): Establish a minimum width constraint for the widget, ensuring it retains a specified width even when content is limited, contributing to a consistent and structured layout.
Order: Set the order as start, end, or custom to dictate the widget's positioning within its container, enhancing its visual hierarchy.
Size (Full width, Inline, Custom, or Calculate options): Set the size to none, grow, or custom to set the widget's size within its container,.
Position: Select between absolute or fixed positioning to determine how the widget is placed within the layout, affecting its relationship with other elements.
Z-index: Adjust the Z-index value to establish the stacking order of the widget in relation to other elements, ensuring controlled layering.
CSS ID: Assign a distinctive CSS ID to the widget for targeted styling or interaction through custom CSS or scripting, allowing for tailored customization.
CSS Classes: Set specialized CSS classes for the widget, enabling custom styling via external stylesheets or scripts, enabling refined design adjustments.

Motion Effects

Scrolling Effects: Incorporate scrolling effects to add dynamic visual transitions as users navigate through the content.
Mouse Effects: Elevate your design with the Mouse Effect feature, incorporating captivating mouse tracking and 3D tilting interactions that respond dynamically to user engagement, adding an irresistible layer of interactivity to your content.
Sticky Effects: Utilize sticky effects to maintain specific elements in view as the user scrolls, enhancing user experience.
Entrance Animation: Apply entrance animations to elements within the section for engaging and captivating presentations.

Transform (Normal & Hover)

Opacity: Control the transparency of elements, allowing for captivating fade-in and fade-out effects.
Rotate: Apply dynamic three-dimensional rotation to elements, creating an immersive visual experience.
Offset (X and Y): Adjust horizontal and vertical positioning for precise element placement and animation.
Scale: Fine-tune the size of elements, enabling smooth size transitions for engaging effects.
Skew (X and Y): Introduce slanted or distorted perspectives to elements, adding a unique touch to your design.
Transition Duration and Delay (ms): Tailor the speed of transformations and introduce delays for fluid and controlled animations.
Flip Horizontal/Vertical: Facilitates the transformation of an element's visual orientation, either horizontally or vertically, effectively creating a mirrored reflection of the element's appearance.

Background (Normal & Hover)

Background type: Select from None, Classic or Gradient for the section's background type. Feel free to incorporate each option's specific features to enhance the background dynamics.

Border (Normal & Hover)

Border type: Define the style of the element's border, allowing for versatile design variations.
Border radius: Control the curvature of element corners with precision, enhancing visual appeal and softening edges.
Box shadow: Enhance elements with subtle or dramatic shadow effects, adding depth and dimension to your design.
Border width: Set the thickness of the border surrounding the button element.
Border color: Specify the color of the border, influencing its appearance and integrating seamlessly with the overall design.

Visibility

Scheduled Visibility: Schedule the section's visibility to appear or disappear at specific times, optimizing content display.
Customer Group Visibility: Tailor the section's visibility based on different customer groups, providing personalized experiences.

Responsive

Reverse Columns: Reorder columns to adapt the layout for mobile or alternative arrangements.
Device-specific Hiding: Toggle section visibility for distinct devices such as mobile, tablet, and desktop.

Custom CSS

Custom CSS: Inject your own custom CSS code to implement precise styling adjustments, allowing for a tailored design approach.