SharePoint Page Layouts and Templates: Design Guide

SharePoint Page Layouts and Templates: The Design Guide

Modern SharePoint pages use a flexible section-based layout system that replaces the rigid page layouts of classic SharePoint publishing. Understanding how to design effective page layouts and create reusable templates is essential for building a professional, consistent SharePoint environment that users actually want to use.

This guide covers layout fundamentals, section design patterns, template creation, and automated provisioning for enterprise environments.

---

Modern Page Layout System

How Layouts Work

Modern SharePoint pages consist of vertical sections stacked from top to bottom. Each section can be divided into columns, and web parts are placed within columns. This creates a flexible grid system that adapts to different screen sizes.

Section column options:

• One column full width for hero images, banners, and full-width content
• Two columns equal split for side-by-side content
• Two columns one-third left, two-thirds right for sidebar layouts
• Two columns two-thirds left, one-third right for main content with sidebar
• Three columns equal split for dashboard-style layouts
• Vertical section adds a persistent sidebar alongside the main content area

Section Backgrounds

Each section supports four background options: None (white), Neutral (light gray), Soft (light tint of the theme primary color), and Strong (dark background with white text). Alternating section backgrounds creates visual rhythm and helps users distinguish content areas.

---

Layout Design Patterns

Landing Page Layout

The most common layout for department portals, intranet home pages, and hub sites.

Structure:

• Section 1: Full-width hero web part with key announcements (Strong background)
• Section 2: Three-column layout with quick links, news, and events (No background)
• Section 3: Two-column layout with highlighted content and people directory (Neutral background)
• Section 4: Full-width section with call-to-action and contact information (Soft background)

Article Page Layout

For news posts, blog-style content, and long-form articles.

Structure:

• Section 1: Full-width header image (No background)
• Section 2: Two-thirds/one-third layout with article text on the left and author info and related links on the right (No background)
• Section 3: Full-width section for related content and call-to-action (Neutral background)

Dashboard Layout

For metrics, KPIs, and data-heavy pages.

Structure:

• Section 1: Full-width header with page title and description (Strong background)
• Section 2: Three-column layout with KPI cards using the embed or quick chart web parts (No background)
• Section 3: Two-column layout with detailed charts and data tables (Neutral background)
• Section 4: Full-width section with drill-down links to detailed reports (No background)

Knowledge Base Layout

For documentation, FAQs, and reference content.

Structure:

• Section 1 with vertical section: Main content area with text web part (left), category navigation (right sidebar)
• Section 2: Full-width FAQ section with collapsible sections
• Section 3: Related articles using highlighted content web part (Neutral background)

---

Creating Page Templates

Save as Template

Design a page with your desired layout and web part configuration, then save it as a template.

• Create a new page and design the layout
• Add placeholder content and configure web parts
• Go to Page details (gear icon on the page)
• Click Save as template
• Enter a template name and description
• The template appears in the template gallery for future page creation

Template Best Practices

Include placeholder content that demonstrates how the template should be used. Replace placeholder text with actual content when creating a page from the template.

Configure web part settings so users do not need to configure from scratch. Set default data sources, layouts, and filtering on web parts like Highlighted Content and News.

Document the template with a companion page or instruction text that explains the intended use case, target audience, and content guidelines.

Limit templates to 10 to 15 per site. Too many templates create decision paralysis. Focus on templates for the most common page types.

Template Categories

Organize templates into logical categories that match your content creation patterns.

News templates: Standard news post, executive update, product announcement, event recap.

Department templates: Team page, resource page, onboarding page.

Project templates: Project overview, status update, milestone report.

Reference templates: Policy page, procedure page, FAQ page, knowledge base article.

---

PnP Page Provisioning

Programmatic Page Creation

For automated page creation at scale, use PnP PowerShell to provision pages with predefined layouts and content.

```powershell

# Create a new page with sections and web parts

Connect-PnPOnline -Url "https://contoso.sharepoint.com/sites/Intranet" -Interactive

# Add a new page

$page = Add-PnPPage -Name "Department-Overview" -LayoutType Article

# Add sections

Add-PnPPageSection -Page $page -SectionTemplate OneColumn -Order 1

Add-PnPPageSection -Page $page -SectionTemplate TwoColumnLeft -Order 2

Add-PnPPageSection -Page $page -SectionTemplate OneColumn -Order 3

# Add web parts to sections

Add-PnPPageTextPart -Page $page -Section 1 -Column 1 -Text "

Welcome to Our Department

This is the department overview page.

"

# Publish the page

Set-PnPPage -Identity "Department-Overview" -Publish

```

Template-Based Provisioning

Create a base page programmatically and use it as a template for batch provisioning.

```powershell

# Provision pages for multiple departments from a template

$departments = @("HR", "Finance", "Legal", "IT", "Marketing")

foreach ($dept in $departments) {

$page = Add-PnPPage -Name "$dept-Overview" -LayoutType Article

Add-PnPPageSection -Page $page -SectionTemplate TwoColumnRight -Order 1

Add-PnPPageTextPart -Page $page -Section 1 -Column 1 -Text "

$dept Department

Welcome to the $dept department page.

"

Set-PnPPage -Identity "$dept-Overview" -Publish

Write-Host "Created page for $dept"

}

```

---

Responsive Design Considerations

Mobile Behavior

Modern SharePoint pages are responsive by default. Multi-column sections stack vertically on mobile devices. The order of stacking follows left to right, top to bottom. Design your layouts with this stacking behavior in mind so that content makes sense when viewed on a phone.

Testing Responsive Layouts

Test every page template on a phone, tablet, and desktop. Check that content stacks logically on mobile, images resize appropriately, text remains readable without horizontal scrolling, interactive elements (buttons, links) have adequate touch targets, and hero images do not crop important content on small screens.

---

Layout Governance

Layout Standards Document

Create a standards document that defines approved section layouts for each page type, required web parts and their configuration, background color usage guidelines, image sizing and formatting requirements, and accessibility requirements for all page elements.

Review Process

Establish a review process for pages before publication. For high-visibility pages (intranet home, department portals), require design review by a designated SharePoint champion or communications team member. For standard pages, provide self-service guidelines and spot-check periodically.

---

Frequently Asked Questions

Can I create custom section layouts beyond the built-in options?

No. Modern SharePoint supports only the built-in section column layouts. For completely custom layouts, use SPFx web parts that implement their own internal grid system.

Can templates include content or just structure?

Templates include both structure and content. Web part configurations, text content, and placeholder images are all captured in the template. Users replace placeholder content when creating a page from the template.

How do I update an existing template?

Edit the template page, make changes, and save. Existing pages created from the template are not updated retroactively. Only new pages created from the template reflect the changes.

---

For help designing page layouts and templates for your SharePoint environment, [contact our design team](/contact) for a design assessment. We build SharePoint page systems for organizations where [consistent communication and professional presentation](/services) are critical for employee engagement.

Advanced Page Design Patterns

Interactive Dashboard Pages

Create dashboard-style pages that combine data from multiple sources. Use the List web part to display key metrics from SharePoint lists. Add the Power BI web part for interactive charts and visualizations. Include the Quick Chart web part for simple, real-time KPI displays. Combine these with the Text web part for context and explanations.

Content Hub Pages

Build content hub pages that serve as central access points for specific topics. Use the Highlighted Content web part configured with managed metadata filters to automatically aggregate related content from across the tenant. Add a Quick Links section for curated resources. Include a News web part filtered to the topic for recent updates. These pages update automatically as new content is tagged with the relevant metadata.

Employee Onboarding Pages

Create a multi-page onboarding experience using SharePoint pages linked through consistent navigation. Page 1 covers welcome and company overview. Page 2 covers IT setup and tools. Page 3 covers benefits and HR policies. Page 4 covers team introductions and key contacts. Page 5 covers first-week tasks and milestones. Use the page template feature to ensure every department's onboarding pages follow the same structure while containing department-specific content.

Executive Communication Pages

Design pages specifically for executive communications with a professional, distraction-free layout. Use a single-column layout with generous section spacing. Feature a large hero image with the executive's photo. Use pull quotes for key messages. Include a video embed for recorded messages. Keep the design clean with minimal web parts to focus attention on the message.