It allows you to quickly add elements, layouts, components, media, and interactive features directly onto the canvas.

Almost every website structure in Framer starts with the Insert Menu. Whether you are adding text, images, buttons, sections, or CMS content, the Insert Menu acts as the central hub for building pages visually.

This guide explains how the Insert Menu works, what you can add from it, and how to use it efficiently while designing websites.

What Is the Insert Menu?

The Insert Menu is a panel that contains all the available elements and building blocks you can place onto your website.

Using the Insert Menu, you can add:

• Text

• Images

• Buttons

• Frames

• Sections

• Videos

• Forms

• Icons

• Components

• CMS elements

• Layout structures

The menu helps users quickly build pages without needing to write code manually.

How to Open the Insert Menu

There are multiple ways to access the Insert Menu.

You can:

• Click the Insert button inside the editor

• Use keyboard shortcuts

• Search for elements directly

Most users access it from the toolbar while designing.

Searching Inside the Insert Menu

Framer allows you to search for elements directly inside the Insert Menu.

This becomes especially useful in larger projects where manually browsing categories can slow down workflows.

For example, you can search for:

• Button

• Stack

• Video

• Form

• CMS Collection

Search helps speed up page building significantly.

Common Elements Available in the Insert Menu

The Insert Menu contains many commonly used website elements.

Text Elements

Text elements are used for:

• Headings

• Paragraphs

• Navigation menus

• Labels

• Calls-to-action

Typography is one of the most important parts of web design, so text elements are used constantly throughout projects.

Image Elements

Image elements allow you to upload and display visuals on your website.

You can use images for:

• Hero sections

• Product showcases

• Blog content

• Team sections

• Galleries

• Background visuals

Images can be resized, styled, and optimized responsively.

Buttons

Buttons create interactive actions for users.

Buttons can link to:

• Internal pages

• External websites

• Contact forms

• Email addresses

• Specific page sections

Well-designed buttons improve navigation and conversions.

Frames

Frames are structural containers used to organize layouts.

Frames help designers:

• Group elements

• Create responsive sections

• Control spacing

• Apply backgrounds

• Build layout systems

Frames are one of the most frequently used tools in Framer.

Sections

Sections divide a page into organized content areas.

Common website sections include:

• Hero sections

• Features sections

• Testimonials

• Pricing tables

• FAQs

• Footers

Using sections keeps projects clean and easier to manage.

Stacks and Auto Layout

Stacks help create responsive layouts automatically.

They allow elements to:

• Align consistently

• Maintain spacing

• Resize responsively

• Stack vertically or horizontally

Stacks are essential for responsive design workflows.

Components

Components are reusable design elements.

Examples include:

• Navigation bars

• Buttons

• Cards

• Pricing sections

• Testimonials

• Footers

Using components improves consistency and speeds up website development.

Forms

Forms allow users to submit information through your website.

You can build:

• Contact forms

• Newsletter forms

• Lead capture forms

• Application forms

Forms are important for communication and conversions.

Videos and Media

The Insert Menu also supports media elements like:

• Videos

• Embeds

• Interactive media

• External content

Media helps create more engaging websites.

CMS Elements

If your project uses Framer CMS, the Insert Menu allows you to add dynamic CMS-connected content.

Examples include:

• Blog lists

• Collection pages

• Dynamic cards

• CMS images

• CMS text fields

This makes it easier to build content-driven websites.

Drag-and-Drop Workflow

Most elements can be added simply by dragging them onto the canvas.

This visual workflow makes Framer beginner-friendly while still remaining powerful for advanced users.

After placing an element, you can:

• Resize it

• Style it

• Reposition it

• Animate it

• Connect interactions

directly inside the editor.

Using Keyboard Shortcuts

Framer also supports quick insertion shortcuts for faster workflows.

Examples include:

• T for Text

• F for Frame

• R for Rectangle

Learning shortcuts can significantly speed up design workflows over time.

Organizing Elements After Inserting

As projects grow, organization becomes increasingly important.

After inserting elements:

• Rename layers clearly

• Group related items

• Use sections consistently

• Organize reusable components

• Maintain clean spacing systems

Good organization improves editing efficiency.

Best Practices for Using the Insert Menu

Recommended best practices include:

• Start with layout structure first

• Use reusable components whenever possible

• Avoid unnecessary elements

• Use stacks for responsive layouts

• Keep projects organized from the beginning

Efficient workflows help prevent clutter later.

Common Beginner Mistakes

New users often encounter a few common issues.

Adding Too Many Elements

Overcrowded layouts can hurt:

• Readability

• Performance

• User experience

• Mobile responsiveness

Simple layouts are usually more effective.

Ignoring Layout Structure

Adding elements randomly without sections or frames can create messy projects that become difficult to manage later.

Not Using Components

Beginners often recreate the same elements repeatedly instead of using reusable components.

Components save time and improve consistency.

Forgetting Responsive Design

Inserted elements should always be tested across:

• Desktop

• Tablet

• Mobile devices

Responsive adjustments are essential for modern websites.

Tips for Faster Workflows

As you gain experience, workflow speed becomes increasingly important.

Helpful tips include:

• Learn insertion shortcuts

• Reuse components

• Save reusable sections

• Use Auto Layout frequently

• Organize layers immediately

• Keep layouts clean and structured

Small workflow improvements can save significant time on larger projects.

Final Thoughts

The Insert Menu is one of the core tools used to build websites in Framer.

By understanding how to:

• Add elements efficiently

• Organize layouts properly

• Use responsive structures

• Build reusable components

• Work with CMS content

you can create cleaner, faster, and more professional website projects.

Mastering the Insert Menu is an important step toward becoming more efficient and confident when designing websites in Framer.