Creating Layout Pages

Where to find this: Services → Website Editor tab

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

Ensure 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.
4. Name it "Main Layout" (or similar).
5. Click Create.

Step 2: Mark It as a Layout

1. Click the menu icon (three dots) next to your new page.
2. Select Settings.
3. In the Page Settings modal, check Use this page as a layout template.
4. Click Save Changes.

Your page is now a layout page. Other pages can reference it.

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. Configure it:
   • Add your logo or business name.
   • Set up navigation links (Home, About, Services, Contact, etc.).
   • Choose a style (floating, solid, transparent).
   • Add sign in/out buttons if needed.

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. Configure it:
   • Add company information.
   • Set up footer navigation links.
   • Add social media links (Facebook, Instagram, Twitter, etc.).
   • Include copyright notice.
   • Add privacy policy and terms links.

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:

• Upload your logo or type your business name.
• Set logo size and alignment.
• Choose font style for text-based branding.

Colors:

• Background color (or transparent).
• Text color for links.
• Hover effects.

Layout:

• Links alignment (left, center, right).
• Mobile menu style (hamburger, drawer).

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

Layout:

• Choose column layout (3 columns, 4 columns, stacked).
• Set spacing between sections.

Colors:

• Background: Often dark (e.g., #1a1a1a).
• Text: Light color for contrast (e.g., #ffffff).
• Link hover effects.

Content:

• Company name and description.
• Contact information (email, phone).
• Navigation links.
• Social media icons.
• Legal links (privacy, terms).

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.
4. Click Save Changes.

Important: All pages using this layout will automatically show your updates. No need to edit individual pages.

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

Test on mobile devices. Use a hamburger menu for the navbar and ensure the footer doesn't overwhelm small screens.

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, remove it from all content pages using it (see Applying Layouts to Pages).
2. Then delete the layout page like any other page.

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

Column 1: Company Info

• Business name.
• Tagline.
• Brief description.

Column 2: Quick Links

• About Us.
• Services.
• Pricing.
• FAQ.

Column 3: Contact

• Email.
• Phone.
• Address.

Column 4: Follow Us

• Facebook icon.
• Instagram icon.
• Twitter icon.

Bottom Bar:

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

Next Steps

• Applying Layouts to Pages – Use your layout on content pages.
• Understanding Page Layouts – Review how layouts work.
• Adding Components to Your Page – Learn about Navbar and Footer options.