1LD Tutorials & Blogs

Tutorials

Setup

1. Drag and drop the Quick Finder stack into the Stacks editor.

2. Next, place the content that you want to be searchable inside of the Quick Finder Content stack. Quick Finder treats each nested stack as one single item. So if you put Stack A inside of Stack B, it will treat Stack B as a part of Stack A. If you want Stack A and Stack B to be individual items, place them each within the content stack, but not within another stack or with one inside of the other.

Here’s a visual representation:
cleanTut-01a

3. The Quick Finder Content stack does not need to stay nested in the Quick Finder stack and can be dragged and placed in another location.

4. Select the Quick Finder stack and in the settings menu navigate to the Settings tab and select a Search Function to determine how the stack will handle the search bar input.

Search Function: Show all, narrow results on input
The stack will show all items when the search bar is empty. When a user adds text to the search bar it will hide items that do not contain the current search term or phrase.

Search Function: Hide all, find results on input
The stack will hide all items when the search bar is empty. When a user adds text to the search bar it will show items that contain the current search term or phrase.

Search Function: Show all, sort all on input
The stack will show all items when the search bar is empty. When a user adds text to the search bar it will sort all items with those that contain the current search term or phrase at the top.

5. Optionally enable case sensitive matches.

Case sensitive matches only
When enabled, the search will only find a match when the searched term or phrase is exactly as typed with upper and lower case characters.

6. Using the next option, we can enable search suggestions to make sorting through items even faster. These suggestions will show below the search bar when it is focused. If a suggestion is clicked it will automatically populate the search bar and execute a search using the predefined term or phrase.

Show search suggestions
When enabled, a textfield will display. Here you can define your search term or phrase suggestions in a comma separated list.

7. In the settings menu Search Input Styles section you can change the appearance of the search bar. The customization options are all pretty straight forward and will only affect the appearance of the stack.

8. There are also style settings for the Quick Finder Content

Max width
The Quick Finder Content stack will automatically fill the width of the stack you place it inside of. Use this setting to define a maximum width you want the items to display.

Columns
Define how many items you want in a single row based on screen size. There is also a forth input for setting (Gap) the distance in pixels between each of the items.

Highlight search terms
When enabled, every term or phrase that is found in the items will be highlighted with the defined colors.

9. Lastly, in the Advanced section you can define a unique ID. This ID only needs to be changed if you are using more than one Quick Finder stack on a single stacks page.

10. After you have added a new unique ID (it can be something as simple as the number 2), copy the ID and select the Quick Finder Content stack. In the settings menu, add the ID to the Content ID field. This will assign the search bar to this content.

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Scroll Shift Stack

Scroll Shift Screenshot

Scroll Shift is the ultimate tool for adding seamless scroll-based animations to your web design projects. Create captivating and engaging websites by effortlessly animating elements as the user scrolls through the page. This tool can bring your designs to life with smooth transitions, eye-catching movements, and precise timing.

Create captivating visuals by linking multiple elements together to form a stacked layer effect. These elements can separate and come together to form a unified element, adding depth and dimension to your designs. The possibilities are endless as you craft intricate animations that leave a lasting impression.

Drive attention to essential content by implementing animations that trigger only when the user scrolls past a specific section. By strategically timing the animations, you can ensure that users take notice of crucial information and engage with your content effectively.

Check it out!

Latest News

Newsletter

Join our newsletter to get notified of new releases, updates, and discounts.

Subscribe

Popular Links

Free Stacks & Themes
See Order History
Product Tutorials
FAQs

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software