Search Like Webflow's Site

Hey Team,

We have a design that only houses a search icon in the navbar and I was wondering how Webflow was able to creat the search results lightbox found on webflow.com I’d like to build something similar if possible. Reference photos below:

image


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Webflow’s site uses a 3rd party site search solution- I can’t recall the name but it can be found in their integrations directory.

You could build something similar with Webflow site search however you’d need to fetch the search results from your search page dynamically to display it in your modal on other pages.

Thanks! How would you create the lightbox effect to always center on your viewport and blur everything else? I am struggling on how to set it up.

That part is relatively easy- dig into the tutorials on interactions-based modals, and check out the made in webflow examples.

Most lightboxes have a darken effect as the background, you can do blur instead using filters in the style panel.

1 Like

Hi @DWDigital here is a recent video in Svelte how to build this type of filtering. As it is not relevant to WF it can give you an idea how to build it and what needs to be done.

1 Like