Title: Understanding Page Layouts
Category: website-editor
Where to Find This
Services → Website Editor tab
Page layouts are reusable templates that provide a consistent structure across your website. Instead of rebuilding your header and footer on every page, you can create one layout and apply it to multiple pages.
What Are Page Layouts?
A page layout is a special type of page that defines your site's shared structure. Typically, a layout includes:
- Navbar (header) at the top
- Content Container in the middle (where page-specific content goes)
- Footer at the bottom
When you apply a layout to a content page, the layout automatically wraps around that page's content. You edit the content, but the navbar and footer come from the layout.
How Layouts Work
Think of a layout like a picture frame:
- The frame (layout) stays the same across multiple pictures
- The picture (your page content) changes
- Together, they create the complete display
Without Layouts
┌─────────────────────┐
│ Page 1 │
│ ┌───────────────┐ │
│ │ Navbar │ │ ← Copy/paste navbar
│ ├───────────────┤ │
│ │ Content 1 │ │
│ ├───────────────┤ │
│ │ Footer │ │ ← Copy/paste footer
│ └───────────────┘ │
└─────────────────────┘
┌─────────────────────┐
│ Page 2 │
│ ┌───────────────┐ │
│ │ Navbar │ │ ← Copy/paste navbar
│ ├───────────────┤ │
│ │ Content 2 │ │
│ ├───────────────┤ │
│ │ Footer │ │ ← Copy/paste footer
│ └───────────────┘ │
└─────────────────────┘
Problem: To change your navbar or footer, you must edit every single page.
With Layouts
┌─────────────────────┐
│ Layout (Frame) │
│ ┌───────────────┐ │
│ │ Navbar │ │ ← Edit once
│ ├───────────────┤ │
│ │ [Content Area]│ │ ← Content pages go here
│ ├───────────────┤ │
│ │ Footer │ │ ← Edit once
│ └───────────────┘ │
└─────────────────────┘
Page 1 → Uses Layout + Content 1
Page 2 → Uses Layout + Content 2
Page 3 → Uses Layout + Content 3
Benefit: Change the navbar or footer once in the layout, and all pages using that layout update automatically.
Benefits of Using Layouts
1. Consistency
All pages share the same navigation structure, ensuring visitors can always find their way around.
2. Efficiency
Build your header and footer once, then focus on content. No need to rebuild navigation on every page.
3. Easy Updates
Need to add a new menu link? Change your logo? Update the layout page, and the change appears on all pages that use it.
4. Less Clutter
Content pages stay clean and focused. You see only the content you're editing, not the surrounding structure.
When to Use Layouts
Use Layouts When:
- You have multiple pages with the same header/footer
- Your navigation is consistent across pages
- You want to update global elements easily
- You're building a standard business website
Skip Layouts When:
- You have only one or two pages (not worth the setup)
- Each page needs a completely different structure
- You're creating landing pages with unique designs
Real-World Examples
Business Website
Layout includes:
- Navbar with logo, About, Services, Contact links
- Footer with social media, copyright, privacy policy
Content pages:
- Homepage
- About page
- Services page
- Contact page
All four pages share the same layout but have different content.
Online Store
Layout includes:
- Navbar with logo, Shop, Cart, Account links
- Footer with shipping info, returns policy
Content pages:
- Product listings
- Individual product pages
- Checkout confirmation
Portfolio Site
Layout includes:
- Minimal navbar with name and Projects link
- Simple footer with email and social links
Content pages:
- Project showcase pages
- About/bio page
Layout vs. Regular Page
Visual Indicators in the Editor
When editing a page that uses a layout, you'll see:
- Layout-locked elements – Navbar and footer appear but can't be edited or moved
- Content area – The middle section where you can add and edit components
- Lock icon – Visual indicator on layout elements (implementation varies)
To change navbar or footer elements, open the layout page directly from the Website Editor tab and edit it there.
Multiple Layouts
You can create multiple layout pages for different purposes:
Main Layout
Standard header and footer for most pages
Minimal Layout
Simple navbar, no footer (for checkout or forms)
Landing Page Layout
No navigation (for focused marketing pages)
This gives you flexibility while maintaining consistency within each layout group.
How the Editor Handles Layouts
When You Load a Page with a Layout:
- The editor fetches your content page
- It also fetches the layout page
- It combines them (composition)
- You see the complete page in the editor
- Layout elements are locked; content is editable
When You Save:
- The editor saves only your content
- Layout structure is not saved with the page
- Next time you load, it re-composes layout + content
This ensures content stays separate from layout, making changes efficient.
Common Questions
Q: Can I have pages without a layout?
A: Yes! Pages without a layout are "standalone" pages with full control over all elements, including navigation.
Q: Can I use different layouts on different pages?
A: Yes, you can assign different layouts to different pages, or no layout at all.
Q: What happens if I edit a layout that's used by many pages?
A: All pages using that layout will show the updated structure immediately.
Q: Can I nest layouts (layout within a layout)?
A: No, layouts are single-level. A content page uses one layout, and that's it.
Q: Do I have to use layouts?
A: No, layouts are optional. If you prefer building each page independently, you can do that.