Creating Layout Pages

Where to find this: Services → Website → Website Editor

Layout pages provide the shared structure (header and footer) that wraps around your content pages. This guide shows you how to create and configure them.

Before You Start

Make sure you understand what page layouts are and how they work. If you haven't already, read Understanding Page Layouts first.

Creating Your First Layout

Step 1: Create a New Page

1. Open the Website Editor.
2. Click the Pages tab in the left panel.
3. Click Add Page at the top of the panel. The page is created straight away with an automatic name like "Page 4".

Step 2: Name It and Mark It as a Layout

1. Click the gear icon on your new page's row to open Page Settings.
2. Change Page Name to something like "Main Layout", and set the URL Slug to match (for example main-layout).
3. Scroll to Layout Settings and turn on Use this page as a layout template.
4. Click Save Changes.

Your page is now a layout page, and it appears in the Apply Layout dropdown on your other pages.

Building the Layout Structure

A layout page needs three main sections:

1. Navbar (Top)

Add a Navbar component at the top of your page:

1. From the Components tab, drag a Navbar onto your page.
2. Click it and use the Properties panel on the right to set it up:
   • Under Brand, choose Company Name or Logo Image and set where clicking it takes visitors.
   • Under Navigation Links, add your menu links and choose whether they sit in the centre or at the right.
   • Under Navbar Style, pick a Style Variant — Default (a full-width bar) or Floating (a bar that sits inset from the edges, with its own shape options).
   • Set link and sign-in button colours, and any scroll effects you want.

2. Content Container (Middle)

This is where content pages will inject their content:

1. Drag a Container component below the navbar.
2. Set its properties:
   • Max Width: 1200px (or wider for full-width content).
   • Padding: Add vertical padding (e.g., 80px top and bottom).
   • Background: Usually leave transparent or use page background.
3. Don't add any content inside this container—it's just a placeholder.

3. Footer (Bottom)

Add a Footer component at the bottom:

1. Drag a Footer component below the container.
2. Click the footer itself to set its Brand (company name or logo) and its background.
3. Everything else in the footer is edited by clicking it directly on the canvas:
   • Click the block of footer links to open its Navigation Links settings and edit the list.
   • Click the social icons block to edit those links.
   • Click the copyright line to change its wording.

Layout Structure Example

┌─────────────────────────────────┐
│  Navbar                         │
│  • Logo                         │
│  • Navigation Links             │
│  • Sign In/Out                  │
├─────────────────────────────────┤
│                                 │
│  Container (Content Area)       │
│  • Empty placeholder            │
│  • Content pages go here        │
│                                 │
├─────────────────────────────────┤
│  Footer                         │
│  • Company Info                 │
│  • Footer Links                 │
│  • Social Media                 │
│  • Copyright                    │
└─────────────────────────────────┘

Styling Your Layout

Navbar Styling

Brand:

• Choose Company Name or Logo Image, and upload your logo if you pick the second.
• Set Logo Height (px) between 16 and 120.

Colors:

• Link colours, including the hover and active states.
• Sign-in button colours.
• The navbar's background comes from Navbar Background in your global Theme.

Layout:

• Links Alignment – centre or right.
• Style Variant – Default or Floating.

On a narrow screen the navbar collapses to a menu button by itself. There's no setting for that — it just happens.

Container Styling

Spacing:

• Vertical padding: 80px top, 80px bottom (gives content room to breathe).
• Horizontal padding: Usually 20px on mobile, auto-centered on desktop.
• Max width: 1200px (standard) or wider.

Background:

• Usually transparent (inherits from page background).
• Or use a subtle background color if desired.

Footer Styling

Select the footer itself for:

• Brand – company name or logo image, and the logo height.
• Background colour — often dark, such as #1a1a1a, with light text for contrast.
• The usual spacing, border and position sections.

Select the pieces inside it for:

• The links block — its Links list, and Layout Options → Columns to spread them over one, two or three columns.
• The social icons block — which icons appear and where they point.
• The copyright line — its wording, size and colour, like any other text.

Testing Your Layout

Before applying the layout to content pages, test it:

1. Preview the Layout

Click Preview to see how it looks:

• Does the navbar display correctly?
• Is there enough space in the content container?
• Does the footer have all necessary information?

2. Check Mobile View

Use the device preview buttons to check:

• Navbar collapses to mobile menu on small screens.
• Content container has appropriate padding.
• Footer stacks properly on mobile.

3. Test Navigation Links

• Click each link in the navbar.
• Verify they go to the correct pages.
• Check that hover effects work.

Editing an Existing Layout

To update a layout page:

1. Go to the Pages tab.
2. Click the layout page to load it.
3. Make your changes to the navbar, container, or footer.

That's it — there's no Save button. The editor saves your work every 10 seconds and again when you switch pages.

Important: All pages using this layout show your updates automatically. There's no need to edit them one by one.

Multiple Layouts

You can create multiple layout pages for different purposes:

Main Layout

Standard header and footer for most pages (About, Services, Contact, Blog).

Use case: General website pages.

Minimal Layout

Simple navbar with no footer.

Use case: Checkout pages, forms, account pages.

Landing Page Layout

No navbar, optional minimal footer.

Use case: Marketing campaigns, lead capture pages.

Full-Width Layout

Navbar and footer, but wider content container.

Use case: Galleries, portfolios, wide dashboards.

Layout Best Practices

Keep It Simple

Don't overcrowd the layout with content. The navbar and footer should provide navigation and essential info, not compete with page content.

Consistent Navigation

All pages using a layout share the same navigation. Make sure your navbar links cover the most important pages.

Mobile-Friendly

Switch to the mobile view in the header and check it there. The navbar folds into a menu button by itself; make sure the footer doesn't overwhelm a small screen.

Branding

Your layout establishes your brand presence on every page:

• Logo in the navbar.
• Brand colors throughout.
• Consistent typography.
• Professional footer.

Accessibility

• Use clear link labels.
• Ensure good color contrast.
• Include alt text on logo images.
• Test keyboard navigation.

Common Mistakes to Avoid

1. Adding Content to the Container

Don't put text, images, or other content in the container between navbar and footer. Leave it empty—content pages will fill it.

Wrong:

Navbar
Container with "Welcome!" text ← Don't do this
Footer

Right:

Navbar
Empty Container ← Placeholder only
Footer

2. Forgetting to Mark as Layout

If you don't toggle "Use this page as a layout template" in settings, the page won't be available as a layout option for other pages.

3. Over-Designing

Layouts should be clean and functional. Save creative design for individual content pages.

4. Inconsistent Footer

Make sure the footer has all the information visitors expect:

• Contact info or links.
• Social media (if applicable).
• Legal links (privacy, terms).
• Copyright notice.

Deleting a Layout

To delete a layout page:

1. First, move every page that uses it onto another layout, or set them to standalone (see Applying Layouts to Pages).
2. Then delete the layout page with the bin icon on its row in the Pages tab.

Example: Business Website Layout

Here's a typical layout structure for a service business:

Navbar

• Logo on the left.
• Links: Home, About, Services, Booking, Contact.
• "Sign In" button on the right.

Container

• Max width: 1200px.
• Padding: 80px top, 80px bottom.
• Background: Transparent.

Footer

Brand

• Business name or logo.
• Tagline.

Links block (set to two columns)

• About Us, Services, Pricing, FAQ.

Social block

• Instagram, Facebook and LinkedIn icons.

Bottom line:

• © 2026 Your Business Name.
• Privacy Policy | Terms of Service.