Search

insert

start

insert

design

insert

scroll

insert

navigation

insert

effects

insert

cms

insert

localization

insert

templates

insert

management

insert

integrations

insert

code

insert

courses

Adding search to your site

Easily add Search functionality into your site by dragging the Search component from the Insert Panel into your project.

Beginner

In this video, we show you how to add search to your Framer site with just a few clicks. We also cover how to customize the search experience to make it look and feel like your own.

Adding Search to Your Site

  1. Go to the Insert menu and select Interactive.

  2. Drag and drop the Search component into your site.

  3. Publish your site.

Customizing the Search Experience

  • Scope control: You can control which pages on your site are searchable.

  • Fonts: You can change the fonts used in the search input and results.

  • Colors: You can change the colors of the search input, results, and modal.

  • Animations: You can add animations to the search input and results.

  • Layout: You can change the layout of the search modal to be a sidebar or a fixed top bar.

Tips

  • Use descriptive titles and descriptions for your pages to improve your search results.

  • Make sure your search input is easy to find and use.

  • Use a consistent design for your search experience.