Insert Menu

Framer Update: Site Search

Hunter

4:05

17K views

May 9, 2023

About this lesson

We’re excited to introduce Site Search. Easily add Search functionality into your site by dragging the Search component from the Insert Panel into your project. Check out the updated free Blog Template from Benjamin to get started: https://blog-v4.framer.wiki/

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

0:00hail it's Hunter 0:02in this video I'm excited to show you 0:04how we've made adding search to your 0:06framer site as easy as dropping in a 0:10component 0:15let's get started by adding search to 0:17this template from Benjamin if we go to 0:20the insert menu and go to the 0:22interactive section 0:23we'll find search if we drag that into 0:26our site 0:27that is actually it we've just added 0:29site search to our firmware site 0:32let's publish our website and see how 0:34the searching feels then I'll show you 0:36how to customize it and get the most out 0:38of your search experience 0:40if you go to the publish menu we'll want 0:42to hit update and we'll want to wait 0:44until the optimization process is 0:46finished because that's when framework 0:48generates an index for our site to 0:50prepare it for searching 0:52once our site is done optimizing we can 0:55open it up and give searching a try 0:57if we click the search icon you'll see 0:59we have animations built right in by 1:01default 1:01and we can start searching right away 1:03and one of the best parts about site 1:05search is just how fast it is it 1:08instantly searches text across your 1:09entire framer site whether it comes from 1:12body copy headings page titles or page 1:15descriptions we'll be able to find what 1:17we're looking for now let's look at some 1:19of the customization options that are 1:21available with site search 1:23let's start by taking a look at the 1:25scope control so with our current setup 1:27site search allows you to search all the 1:30pages on your site but let's say you 1:32only want to search bump on your site or 1:34a single CMS collection 1:36this is something we do on firmware.com 1:38templates 1:40this is where the scope control comes in 1:41handy 1:43so if we open the scope control we can 1:45select any path of our website that we 1:47want to scope the search to 1:50so in this case it could be blog so 1:53let's say we don't want the about page 1:55showing up on our search and we only 1:56want to search the blog 1:58if we go here and select the blog 2:00collection 2:02and we go ahead and publish our site 2:08see that it only searches the blog 2:10collection 2:11however you may notice that all the 2:13results have the same subtitle this is 2:16because our subtitle is set as the 2:18description of the page 2:20if you spend the time to improve your 2:21title and description it'll be great for 2:24your search results and your SEO 2:26you may be wondering how to make the 2:28search look like your own 2:30we've got tons of customization options 2:32from colors to fonts to animations that 2:35you can customize to make it fit into 2:37your site 2:39the customization options are organized 2:41by which part of the search you're 2:43trying to customize 2:46top level you'll find the options for 2:48the search button on the canvas itself 2:52where you can change things like the 2:53icon size 2:54or add your own custom icon 2:57so to update the fonts I want to update 2:59the fonts in input as well as the fonts 3:02within the results for the title and the 3:04subtitles 3:06in the subtitle options you can also 3:09change from displaying the description 3:11of a page to the URLs which I'll change 3:13now within the modal options you can 3:15change the layout of your entire search 3:17window to be a sidebar or a fixed top 3:20bar 3:21this gives you a ton of flexibility to 3:23fit your site's designs 3:25I think I've tweaked it just right for 3:27my site but I'm going to add one more 3:29Final Touch 3:30I'm actually going to make the height 3:32animate when the results change 3:35this option just adds a nice little 3:37extra springiness to your search 3:38experience 3:39checking out search on our live site is 3:42feeling great 3:43these are just a few of the many 3:45customization options for search and 3:47we're really curious to see what we all 3:49do with it thanks for watching and happy 3:51searching

Also coversCollections Components Form Inputs Meta Titles & Descriptions Sizing Templates Typography

Watch on YouTube ↗

‹ The Input Component

Navigations: Desktop Menus ›