Quick find is a powerful search bar in the Webflow Designer that lets you speed up your workflow and boost your efficiency as you design and build sites.
In this lesson, you’ll learn:
- How to use quick find
- How to customize quick find settings
- How to use quick find queries
- How to use quick find actions
How to use quick find
With a few keyboard strokes or a click of a mouse, you can:
- Add elements onto the canvas without opening the Add panel
- Add or edit a component without opening the Components panel
- Find an asset and add it to the canvas or access its settings without opening the Assets panel
- Convert links to div blocks or text blocks and vice versa
- Select on-page elements (including classes and components) on the current page without scrolling through the canvas or using the Navigator to locate them
- Create a new page, go to a specific static page, or go to a specific Collection item detail page without opening the Pages panel
- Open a Collection in the Collection manager to modify your Collection items
- Create a new Logic flow or search for and select an existing flow without opening the Logic panel
- Navigate to a secondary locale view and translate the page or selected element to the language of the current locale view
You can launch quick find by pressing Command + E (on Mac) or Control + E (on Windows). You can also open quick find with Command + K (on Mac) or Control + K (on Windows).
How to customize quick find settings
By default, the finder excludes some of the actions mentioned in the above section. You can include or remove all of the default actions in the finder settings.
To access and customize finder settings:
- Hover over the finder search bar
- Click the “cog” icon
- Check the actions you’d like to include, or uncheck the actions you’d like to exclude
Once you’ve customized your finder settings, click inside the finder to begin searching.
How to use quick find queries
You can use any word from your existing classes or page names as a quick find query. You can also use specific names for:
- An element (e.g., slider, map, button, etc.)
- An asset or the extension of an asset (e.g., .png, .svg, etc.)
- A page
- A Collection page (like the name of a blog post)
- A Logic flow
Quick find displays the results for your query in the All results tab. Results are filtered and listed under separate tabs based on their type (e.g., elements, components, assets, etc.). You can customize the finder to include or exclude any of these types.
Pro tip: You can navigate results of the same type using the up and down arrow keys on your keyboard. You can also press Tab or Shift + Tab to quickly move between the tabs.
Note: Quick find displays the top 50 results for a given query. You may need to make your query more specific to find the item you’re looking for.
How to use quick find actions
You can take actions through quick find without the need to open various panels, boosting the efficiency of your workflow. You can:
- Add items to the canvas
- Select elements and components on the canvas
- Convert elements to other types of elements
- Navigate to specific pages
- Access the Collection manager for a specific Collection
- Access the settings of an asset
- Create or select an existing Logic flow
- Navigate to a secondary locale view
- Translate pages or elements to the language of the current locale view
How to add items to the canvas
To add items to the canvas, search for the element, component, or asset name. Then, add the item in one of the following ways:
- Select the result using the keyboard’s up and down arrow keys and press Enter
- Click the result
- Click and drag the result anywhere on the canvas or in the Navigator
Good to know: Adding items using the first 2 methods will drop the element next to an inline element, or under a block element. Learn more in our guide to the Add panel.
Pro tip: You can adjust your finder settings to streamline your design process. For example, when searching for assets and components, you can hide other actions to avoid clutter in your results. This way, your results will only show the type of content and actions you want for your current task.
Creating an entire layout with quick find
With quick find, you can create the layout of a section using only your keyboard. Begin by using quick find to locate and add an element to the canvas.
Then, follow these steps to apply classes as you go:
- Press Command + Enter (on Mac) or Control + Enter (on Windows)
- Type the class name and press Enter
- Repeat to add as many elements as you need to lay out your page
How to select elements and components on the canvas
You can also use quick find to select elements and components on the current page. To quickly identify on-page elements, open the On-page elements tab.
Use your keyboard’s arrow keys or your mouse to select the element or component in the On-page elements tab. This will also select the element or component on the canvas. If the item is way down the page, the canvas will scroll down to show you the selected element.
Pro tip: If you want to select a class to edit its styling, search for the class name and select the element. Then, press the S key on your keyboard to open the Style panel.
How to convert elements to other types of elements
You can use quick find to convert link elements (e.g., link block, text link, or button) to a different type of link, a div block, or a text block. You can also convert div blocks or text blocks to link elements using the same method.
To convert an element using quick find:
- Select the element you want to change on the canvas
- Launch quick find
- Type “convert”
- Choose the option you want from the list in the All results tab
How to navigate to specific pages
You can use quick find to open any page within your site — static, utility, Ecommerce, User, and Collection item pages — without needing to open the Pages or CMS panels.
To navigate to a particular page, type the name of the page or the Collection item you want to navigate to in the quick find search and press Enter on your keyboard.
Pro tip: You can create new static pages with quick find by typing “new page” and choosing the “create new page” option in the results. You’ll be taken to the Pages panel to create your new page. Learn more about the Pages panel.
How to access the Collection manager for a specific Collection
To open the Collection manager and update any of the Collection items, search for the name of any of your CMS Collections and press Enter on your keyboard.
How to access the settings of an asset
Quick find also lets you quickly access the settings of any asset. To do so, search for the name or file extension (e.g., png, svg, etc.) of your asset, hover over the desired result in the All results tab, and click the “cog” icon that appears. Learn more about managing assets.
How to create or select a Logic flow
You can use quick find to create a new Logic flow by typing “create new flow” in the finder, selecting this option from the All results tab, and pressing Enter on your keyboard. You can also select an existing Logic flow by typing the name of the flow in the finder and choosing the flow you want to view or edit from the All results tab. Learn more about Logic.
How to navigate to a secondary locale view
You can navigate to a secondary locale view with quick find by typing “switch” in the finder and selecting the desired locale from the All results tab. Learn more about Localization.
How to translate a page or element
After navigating to a secondary locale view, you can use quick find to translate entire pages or elements to the language used in that secondary locale. Select the element or navigate to the page you want to translate. Type “translate” into quick find and choose to translate the current page or the selected element from the All results tab. Learn more about Localization.