Working with Sections and Page Layouts

What Sections Actually Are

Think of sections as containers that group related content together. Your homepage might have a hero section, a features section, a testimonials section, and a call-to-action section. Each section is self-contained with its own spacing, background, and internal elements.

In the Layers panel, sections appear as frames with names like "Hero" or "Features - Section." They contain all the elements that make up that part of the page—text, images, buttons, and sometimes nested frames for more complex layouts.

Sections make your pages modular. You can hide a section, duplicate it, or move it to a different position without affecting other sections. This modularity is what makes template customization so powerful.

Creating New Sections from Scratch

Sometimes you need something that doesn't exist in your template. Before you build from scratch, check if any existing section can be modified to work. Adapting is usually faster than creating.

If you do need to build new, create a frame on your canvas and give it a descriptive name immediately. Set its width to "fill" so it spans the full width of the page, and add appropriate padding so content doesn't touch the edges.

Add background colors or images if needed, then build your content inside the section using text elements, images, and buttons from the toolbar. As you build, reference existing sections to match spacing and styling—this keeps your new section feeling cohesive with the rest of the design.

Test your new section at different breakpoints as you build. What looks perfect on desktop might stack awkwardly on mobile, so catch these issues early while they're easy to fix.

Rearranging Your Page Layout

The order of sections on your page matters for both user experience and storytelling. Framer makes reordering simple: in the Layers panel, click and drag a section to a new position. As you drag, you'll see a blue line indicating where the section will land when you release.

Think carefully about section order. Generally, you want high-priority information near the top, social proof and testimonials in the middle, and calls-to-action throughout. The flow should feel natural, with each section leading logically to the next.

Understanding Section Spacing

The space between sections is controlled by the padding and margin settings on each section frame. Padding is the space inside the section between its background and its content. Margin is the space outside the section between it and adjacent sections.

Your template already has thoughtful spacing set up. When you duplicate sections, this spacing comes along automatically. But if you're adjusting spacing manually, keep it consistent—if your sections have 80 pixels of top and bottom padding, maintain that across all sections for visual rhythm.

Understanding Container Stacks

Every section in your template contains a container stack—this is the inner frame that holds your actual content. While the section itself might span the full width of the browser window, the container stack controls the maximum width of your content.

This two-layer system gives you incredible flexibility. The section provides the background color or image that extends edge to edge. The container stack inside it keeps your content at a readable width and properly centered, preventing text from stretching uncomfortably wide on large monitors.

When you select a section and look at the Layers panel, you'll see the container stack nested inside. This is typically named something like "Container". Understanding this relationship is crucial for making layout adjustments.

Working with Full-Width vs Contained Sections

Some sections span the full width of the browser window with content extending edge to edge. Others have a maximum width with centered content, creating margins on wide screens. Understanding this distinction helps you maintain the right look as you customize.

Full-width sections are great for image backgrounds, colored backgrounds, or dramatic hero areas. Contained sections work better for text-heavy content where extremely wide lines would be hard to read.

In our templates you can customize maximum width in container stack, every section has a container block.

Customizing Maximum Width

The maximum width setting on your container stack determines how wide content can grow on large screens. Most templates default to 1200-1400 pixels, which provides comfortable reading width without wasting space on ultra-wide monitors.

Select the container stack inside any section and look for the width property in the properties panel. You'll see it's set to a maximum width value. This means the container will fill available space up to that maximum, then stop growing and center itself.

If you want narrower content for a more focused reading experience, reduce the maximum width to 900-1000 pixels. If you're showcasing large images or wide data tables, increase it to 1400-1600 pixels. The key is maintaining consistency—use the same maximum width across similar sections throughout your site.