Nearly every website you build will rely on both of them.

While they may seem similar at first, they serve different purposes. Understanding when to use a frame versus a section is essential for creating organized, responsive, and scalable websites.

In this guide, you’ll learn:

• What frames are

• What sections are

• How they work together

• When to use each one

• Common mistakes to avoid

• Best practices for responsive layouts

Mastering frames and sections will make every aspect of building in Framer easier, from responsive design to CMS layouts and reusable components.

What Is a Frame?

A frame is a flexible container used to organize content and control layout behavior.

Frames can contain:

• Text

• Images

• Buttons

• Videos

• Forms

• Components

• Other frames

Think of a frame as a box that holds and organizes content.

Unlike simple groups, frames have layout properties that allow you to control spacing, alignment, sizing, responsiveness, and positioning.

Most professional Framer projects are built primarily with frames.

Why Frames Matter

Frames provide structure and control.

Without frames, layouts become difficult to manage because individual elements must be positioned manually.

Frames help you:

• Keep content organized

• Create reusable layouts

• Improve responsiveness

• Use Auto Layout effectively

• Build scalable page structures

Almost every modern website section contains multiple frames working together.

Common Uses for Frames

Frames are commonly used for:

Cards

Examples:

• Pricing cards

• Feature cards

• Testimonial cards

• Blog cards

Navigation Menus

Navigation bars often contain frames for:

• Logo areas

• Menu links

• Buttons

• Mobile menus

Hero Content

Hero sections usually contain frames that organize:

• Headlines

• Descriptions

• Buttons

• Images

Content Groups

Frames help organize related content together.

Examples:

• FAQ items

• Team profiles

• Product features

Multi-Column Layouts

Frames are often used to create:

• Two-column layouts

• Three-column layouts

• Flexible grids

What Is a Section?

A section is a large layout container used to divide a webpage into major content areas.

Sections create the overall structure of a page.

Think of sections as the building blocks of an entire webpage.

Each section typically represents a distinct content area.

Common Website Sections

Most websites include sections such as:

Hero Section

Introduces the website and primary message.

Features Section

Highlights product or service features.

Testimonials Section

Displays customer reviews and social proof.

Pricing Section

Presents pricing plans and options.

FAQ Section

Answers common questions.

Footer Section

Contains navigation links and legal information.

Why Sections Matter

Sections provide:

• Visual organization

• Easier navigation

• Better content hierarchy

• Cleaner page structure

• Improved responsiveness

Without sections, websites often become cluttered and difficult to maintain.

Understanding the Difference Between Frames and Sections

A common beginner question is:

“When should I use a frame and when should I use a section?”

The answer is simple.

Frames

Frames are used for:

• Internal layouts

• Content organization

• Components

• Cards

• Navigation structures

Characteristics:

• Smaller containers

• Often nested

• Highly flexible

• Used throughout layouts

Sections

Sections are used for:

• Major page divisions

• Full-width content areas

• Organizing website structure

Characteristics:

• Larger containers

• Usually span the page width

• Define content hierarchy

• Contain multiple frames

Visual Example

A typical page structure might look like this:

Page├── Hero Section│   └── Hero Frame│       ├── Heading│       ├── Paragraph│       └── Button│├── Features Section│   └── Features Frame│       ├── Feature Card│       ├── Feature Card│       └── Feature Card│└── Footer Section    └── Footer Frame        ├── Links        └── Copyright

Page├── Hero Section│   └── Hero Frame│       ├── Heading│       ├── Paragraph│       └── Button│├── Features Section│   └── Features Frame│       ├── Feature Card│       ├── Feature Card│       └── Feature Card│└── Footer Section    └── Footer Frame        ├── Links        └── Copyright

Page├── Hero Section│   └── Hero Frame│       ├── Heading│       ├── Paragraph│       └── Button│├── Features Section│   └── Features Frame│       ├── Feature Card│       ├── Feature Card│       └── Feature Card│└── Footer Section    └── Footer Frame        ├── Links        └── Copyright

In this example:

• Sections create the page structure

• Frames organize content inside each section

Creating a Frame

To add a frame:

1. Open the Insert menu

2. Select Frame

3. Place it on the canvas

4. Resize as needed

5. Add content inside

Once created, you can customize its layout settings.

Frame Properties

Frames support many layout controls.

Common properties include:

• Width

• Height

• Padding

• Gap spacing

• Alignment

• Background colors

• Borders

• Shadows

• Corner radius

These properties make frames extremely flexible.

Creating a Section

To create a section:

1. Open the Insert menu

2. Select Section

3. Add it to the page

4. Adjust height and spacing

5. Place frames and content inside

Sections usually act as the top-level container for a page area.

Structuring Pages With Sections

Most professional websites follow a structure similar to:

Hero SectionFeatures SectionBenefits SectionTestimonials SectionPricing SectionFAQ SectionFooter Section

Hero SectionFeatures SectionBenefits SectionTestimonials SectionPricing SectionFAQ SectionFooter Section

Hero SectionFeatures SectionBenefits SectionTestimonials SectionPricing SectionFAQ SectionFooter Section

This approach improves:

• Readability

• Navigation

• Organization

• User experience

Using Frames Inside Sections

The most common Framer workflow is:

Section└── Frame    ├── Heading    ├── Text    ├── Button    └── Image

Section└── Frame    ├── Heading    ├── Text    ├── Button    └── Image

Section└── Frame    ├── Heading    ├── Text    ├── Button    └── Image

This structure creates:

• Better responsiveness

• Easier editing

• Cleaner hierarchy

• More maintainable layouts

Most website sections contain multiple nested frames.

Building Responsive Layouts

Frames and sections play a major role in responsive design.

Properly configured containers can:

• Stretch automatically

• Stack on mobile

• Resize content

• Maintain spacing

• Align elements consistently

This reduces the amount of manual responsive editing required.

How Sections Help Responsiveness

Sections help maintain:

• Consistent spacing

• Full-width layouts

• Content separation

• Mobile-friendly organization

A properly structured page adapts much more easily across devices.

Styling Frames

Frames can be styled extensively.

Common styling options include:

Background Colors

Used to create cards, containers, and layout blocks.

Borders

Useful for cards and content separation.

Corner Radius

Creates rounded edges for modern designs.

Shadows

Adds depth and visual hierarchy.

Padding

Controls internal spacing between content and container edges.

Understanding Padding

Padding is one of the most important frame settings.

Padding controls the space between:

• The frame edge

• The content inside

Without padding, layouts often feel cramped.

Example:

Frame├── 40px Top Padding├── Heading├── Paragraph└── 40px Bottom Padding

Frame├── 40px Top Padding├── Heading├── Paragraph└── 40px Bottom Padding

Frame├── 40px Top Padding├── Heading├── Paragraph└── 40px Bottom Padding

This creates breathing room around content.

Auto Layout and Frames

Frames become significantly more powerful when combined with Auto Layout.

Auto Layout allows frames to:

• Space elements automatically

• Align content consistently

• Adapt to screen sizes

• Scale more predictably

Most modern Framer layouts use Auto Layout extensively.

Benefits of Auto Layout

Using Auto Layout with frames provides:

Automatic Spacing

No need to manually position every element.

Consistent Alignment

Content remains organized as layouts change.

Better Responsiveness

Layouts adapt more naturally across devices.

Faster Editing

Adding or removing content becomes easier.

Common Beginner Mistakes

Using Too Many Nested Frames

A common mistake is creating unnecessary frame structures.

Example:

Frame└── Frame    └── Frame        └── Frame            └── Text

Frame└── Frame    └── Frame        └── Frame            └── Text

Frame└── Frame    └── Frame        └── Frame            └── Text

This adds complexity without providing benefits.

Keep structures as simple as possible.

Ignoring Spacing

Poor spacing often leads to:

• Crowded layouts

• Hard-to-read content

• Inconsistent design

Use consistent padding and gaps throughout the project.

Building Entire Pages Without Sections

Some beginners place all content directly onto the page.

This makes:

• Editing harder

• Responsiveness worse

• Organization confusing

Sections should define major content areas.

Mixing Structural Roles

Another common issue is using sections for everything and ignoring frames.

Remember:

• Sections organize pages

• Frames organize content

Both have distinct roles.

Best Practices

Use Sections for Major Content Areas

Examples:

• Hero

• Features

• Pricing

• Footer

Think of sections as chapters in a book.

Use Frames for Internal Layouts

Frames should handle:

• Alignment

• Spacing

• Content organization

Think of frames as the containers inside each chapter.

Keep Hierarchies Clean

A simple structure is easier to manage than a deeply nested one.

Good structure:

Section└── Frame    ├── Heading    ├── Text    └── Button

Section└── Frame    ├── Heading    ├── Text    └── Button

Section└── Frame    ├── Heading    ├── Text    └── Button

Maintain Consistent Spacing

Use consistent:

• Padding

• Margins

• Gaps

Consistency creates professional-looking layouts.

Test Responsiveness Early

Don’t wait until the end of a project.

Check:

• Desktop

• Tablet

• Mobile

as you build.