Where to find this: Services → Website → Website Editor
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
Spotting Layout Elements in the Editor
On the canvas, a layout's navbar and footer look like any other part of the page — there's no badge or lock on them there. To tell them apart, open the Navigator tab in the left panel: every element that came from the layout carries a small L beside its name, and its handle shows a padlock with the tooltip "Layout element (locked)".
You can't drag those elements, and any change you make to them on a content page is dropped when the page saves. The middle section between them is yours to edit freely.
To change the navbar or footer, open the layout page itself from the Pages tab and edit it there. Your changes then show on every page using that layout.
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 open a page with a layout
- The editor loads your page's content.
- It loads the layout too.
- It shows the two together, so you see the finished page.
- The middle section is yours to edit; the parts that came from the layout are marked in the Navigator.
When the page saves
- Only your own content is stored with the page.
- The layout's navbar and footer are not — they belong to the layout page.
- Next time you open the page, the two are put back together.
That's why a change you make to the navbar or footer on a content page doesn't stick: it isn't part of that page's content, so it's left out when the page saves. Content stays separate from layout, which is what lets one layout change update every page at once.
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.