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

Access advanced layout, motion, and custom CSS options.

Margin

Define the external space around the widget for separation from adjacent elements.

Padding

Set the internal spacing within the widget to control the arrangement of its content.

Width

Specify the widget's width behavior: Full Width, Inline, Custom, or Calculate.

Full width

Vertical align: Set the vertical alignment to start, center, end, or stretch.
Size: Define the size as none, grow, or custom to determine widget dimensions.

Inline

Vertical align: Set the vertical alignment to start, center, end, or stretch.
Size: Define the size as none, grow, or custom to determine widget dimensions.

Custom

Custom Width: Set the width in pixels, percentage, or viewport width (vw).
Vertical align: Set the vertical alignment to start, center, end, or stretch.
Size: Define the size as none, grow, or custom to determine widget dimensions.

Calculate

Calc: Use calculations like 100% - 20px to dynamically define the width.
Min Width: Set a minimum width in pixels, percentage, or viewport width (vw).
Vertical align: Set the vertical alignment to start, center, end, or stretch.
Size: Define the size as none, grow, or custom to determine widget dimensions.

Order

Control the widget's order using start, end, or custom values.

Position

Choose default, absolute or fixed positioning for the widget.

Absolute

Horizontal Orientation: Determines the element's horizontal alignment within its nearest positioned ancestor.
Offset: Specifies the distance between the element and the left or right edge of its containing block.
Vertical Orientation: Sets the element's vertical alignment within its nearest positioned ancestor.
Offset: Defines the space between the element and the top or bottom edge of its containing block.

Fixed

Horizontal Orientation: Controls the element's horizontal alignment relative to the browser window.
Offset: Adjusts the distance between the element and the left or right edge of the viewport.
Vertical Orientation: Manages the element's vertical alignment relative to the browser window.
Offset: Defines the space between the element and the top or bottom edge of the viewport.

Z-index

Set the stacking order of the widget relative to other elements.

CSS ID

Assign a unique CSS ID for custom styling or interaction.

CSS Classes

Add custom CSS classes for targeted styling via external stylesheets.

Element Cache

Improves loading times by storing a static version of this element.

Scrolling Effects

Enhance elements with various dynamic effects triggered by the user's scrolling behavior.

Vertical Scroll: Configure the scroll direction, speed, and viewport range for vertical scrolling effects.
Horizontal Scroll: Set the scroll direction, speed, and viewport range for horizontal scrolling effects.
Transparency: Adjust the transparency based on the direction, level, and viewport range.
Blur: Apply a blur effect with customizable direction, level, and viewport range.
Rotate: Rotate the element using direction, speed, and viewport settings.
Scale: Scale the element with direction, speed, and viewport controls.
Apply Effects on: Choose whether to apply scrolling effects on desktop, tablet, or mobile devices.
Effects Relative to: Define whether the effects are relative to the default container, the viewport, or the entire page.

Mouse Effects

Enable mouse based effects for added interactivity.

Mouse Track: Adjust the direction and speed of the effect as the user moves the mouse across the page.
3D Tilt: Enable 3D tilt effects with controllable direction and speed for a more immersive experience.

Sticky Effects

Fix elements at the top or bottom of the viewport as the user scrolls for persistent visibility.

Sticky on: Apply sticky effects on desktop, tablet, or mobile devices.
Offset: Set the offset in pixels to trigger the sticky effect after scrolling.
Dynamic Offset: Use a CSS selector to dynamically set the offset based on other elements on the page.
Effects Offset: Configure the pixel offset to control when additional effects apply.
Stay in Column: Choose whether the sticky element remains within its column during scrolling (yes or no).
Hide on Scroll: Set the offset and transition duration for hiding the sticky element when scrolling down.

Entrance Animation

Apply predefined animations to elements when they appear on screen.

Fading: Elements gradually fade in or out of view.
Revealing: Create smooth reveal effects as elements come into view.
Sliding & Revealing: Combine sliding motion with reveal effects.
Scaling & Revealing: Adjust the size of elements as they are revealed.
Zooming: Apply zoom in or out effects during element appearance.
Bouncing: Elements enter with a bouncing motion for attention-grabbing effects.
Sliding: Elements slide into view from different directions.
Rotating: Apply rotation effects as elements enter or leave the viewport.
Attention Seekers: Highlight elements with exaggerated, noticeable animations.
Specials: Unique animations for elements that require special effects.

Opacity

Adjust the transparency level of the element to create fade effects during normal or hover states.

Rotate

Rotate the element along the X, Y, or Z axes for dynamic visual effects. Use deg (degrees) values or apply 3D rotation.

Offset

Shift the position of the element horizontally (X-axis) or vertically (Y-axis) to control its exact placement within the layout.

Scale

Resize the element, with the option to keep proportions (yes or no) and adjust the scale factor to enlarge or shrink the element.

Skew

Skew the element along the X and Y axes to tilt its appearance.

Flip Horizontal/Vertical

Flip the element horizontally or vertically by selecting the anchor points (X: left, center, right; Y: top, center, bottom) for precise control over the flip transformation.

Trigger by (On hover)

Choose whether the hover transformation is triggered by interaction with the widget, column, or section.

Transition Duration (On hover)

Set the time duration in milliseconds that the hover transition effect takes to complete.

Transition Delay (On hover)

Specify a delay in milliseconds before the hover transition effect begins.

Background Type

Select the background type: None, Classic, or Gradient.

Classic

Color: Set a solid background color to provide a consistent base for your design.
Image: Upload an image to use as the background. Additional settings include:
Backdrop Filters: Apply visual filters to the background, such as blur, brightness, or contrast, enhancing its appearance.
Transition Duration (On hover): Set the time duration in milliseconds that the hover transition effect takes to complete.

Gradient

Color: Select the primary color for the gradient background.
Location: Define the starting position of the primary color in the gradient effect.
Second Color: Select the secondary color to blend into the gradient.
Location: Set the starting point of the secondary color within the gradient.
Angle: Adjust the angle at which the gradient flows (e.g., horizontal, vertical, diagonal).
Backdrop Filters: Apply visual filters to the gradient background for added depth and effects.
Transition Duration (On hover): Set the time duration in milliseconds that the hover transition effect takes to complete.

Border Type

Define the border style of the element.

Border Width

Set the thickness of the element's border.

Border Color

Define the color of the element's border.

Border Radius

Adjust the corner roundness of the element.

Box Shadow

Apply shadow effects to add depth to the element.

Responsive Visibility

Control the display of elements across different devices by selectively hiding them on desktop, tablet, or mobile.

Scheduled Visibility

Set the section's visibility based on specific schedules.

Customer Group Visibility

Control section visibility based on customer groups.

Custom CSS

Apply custom CSS to style the widget beyond the default settings.

Note: This requires CSS knowledge—use carefully, as incorrect syntax can impact other areas of the site.

/* For main element */
selector { 
  color: red; 
}

/* For child element */
selector .child-element { 
  margin: 10px; 
}

/* Or use any custom selector */
.my-class { 
  text-align: center; 
}

If you want to learn the basics of CSS, W3Schools is a great resource for that.