Applying Layouts to Pages

Where to find this: Services → Website → Website Editor

Before You Start

Make sure you have at least one layout page. If not, see Creating Layout Pages first.

Applying a Layout to a Page

Step 1: Open Page Settings

1. Go to Services → Website → Website Editor.
2. In the left panel, click the Pages tab.
3. Find the page you want to apply a layout to.
4. Click the gear icon on that page's row.

Step 2: Choose a Layout

1. Scroll down to Layout Settings.
2. In the Apply Layout dropdown, choose your layout page.
3. Click Save Changes.

Step 3: Reload the Page

1. Click the page in the Pages list to load it again.
2. The layout's navbar and footer now surround your content.
3. Your own content sits in the middle section.

What Happens When You Apply a Layout

Before Applying:

┌─────────────────────┐
│   Your Page         │
│                     │
│   Content           │
│   Content           │
│   Content           │
│                     │
└─────────────────────┘

After Applying:

┌─────────────────────┐
│  Navbar             │ ← From layout
├─────────────────────┤
│   Your Content      │ ← Your page content
│   Your Content      │
│   Your Content      │
├─────────────────────┤
│  Footer             │ ← From layout
└─────────────────────┘

Editing Pages with Layouts

When editing a page with a layout:

Layout Elements (Navbar and Footer)

They can't be dragged out of place, and the Navigator tab marks them with an L so you know where they came from.

Content Elements (Editable)

• Everything between the navbar and footer is editable.
• Add, remove, and modify components freely.
• Drag and rearrange content as usual.

Changing a Page's Layout

To switch to a different layout:

1. Click the gear icon on the page's row to open Page Settings.
2. In Apply Layout, choose a different layout from the dropdown.
3. Click Save Changes.
4. Reload the page to see the new layout.

All your content stays the same; only the navbar and footer change.

Removing a Layout

To remove a layout and make the page standalone:

1. Click the gear icon on the page's row to open Page Settings.
2. In Apply Layout, select No layout (standalone page).
3. Click Save Changes.
4. Reload the page.

The page will no longer have the layout's navbar or footer. You can now add your own navigation components if desired.

When to Apply Layouts

Apply Layouts To:

Standard Pages

• About Us
• Services
• Contact
• Blog posts
• FAQ

Account Pages

• User dashboard
• Profile settings
• Subscription management

Information Pages

• Privacy policy
• Terms of service
• Careers

These pages benefit from consistent navigation.

Don't Apply Layouts To:

Landing Pages

• Lead capture pages
• Special promotional pages
• Campaign-specific pages

These often need unique designs without standard navigation.

Full-Screen Experiences

• Interactive demos
• Video presentations
• Full-screen galleries

These work better without header/footer.

Working with Multiple Layouts

If you have multiple layouts, assign them strategically:

Example Strategy

Main Layout (Standard)

• Applied to: Homepage, About, Services, Contact
• Contains: Full navbar, complete footer

Minimal Layout

• Applied to: Checkout, Account pages, Forms
• Contains: Simple navbar, no footer (or minimal footer)

Marketing Layout

• Applied to: Landing pages, campaigns
• Contains: No navbar, minimal footer with just legal links

This gives you flexibility while maintaining consistency within each group.

Checking Which Layout a Page Uses

To see if a page uses a layout:

1. Click the gear icon on the page's row.
2. Look at the Apply Layout dropdown.
3. The layout in use is shown there — or No layout (standalone page) if it doesn't use one.

Bulk Layout Application

If you want to apply the same layout to several pages:

1. Apply the layout to the first page.
2. For each additional page:
   • Open its Page Settings with the gear icon.
   • Select the same layout.
   • Click Save Changes.

There's no one-click bulk apply, but it's quick to do page-by-page.

Troubleshooting

Problem: Layout Not Showing

Possible causes:

• The page wasn't reloaded after applying the layout.
• The layout page itself is empty or broken.
• The layout page wasn't marked as "Use this page as a layout template."

Solution:

• Reload the page by clicking it in the Pages list.
• Check the layout page to ensure it has a navbar, container, and footer.
• Verify the layout page settings have the layout toggle enabled.

Problem: My Navbar or Footer Change Vanished

This is expected. Changes you make to the navbar or footer on a content page aren't kept — they belong to the layout, so they're dropped when the page saves.

Solution:

• Open the layout page from the Pages tab and make the change there.
• Reload your content page and the change appears — on every page using that layout.

Problem: Content Not Appearing

Possible cause: The layout page doesn't have a content container between the navbar and footer.

Solution:

• Open the layout page.
• Ensure there's a Container component between the Navbar and Footer.
• The container should be empty (content pages inject content there).

Problem: Layout Changed But Page Doesn't Reflect It

Possible cause: Browser cache or page not reloaded.

Solution:

• Close and reopen the page in the editor.
• Refresh your browser if editing in preview mode.
• Check that you saved the layout page after making changes.

Best Practices

1. Apply Layouts Early

When creating a new page, apply the layout before adding content. This gives you a better sense of how the final page will look.

2. Use Consistent Layouts

Don't switch layouts randomly. Group similar pages under the same layout for a cohesive user experience.

3. Test After Applying

After applying a layout:

• Preview the page to see the full composition.
• Check mobile view to ensure navbar/footer work well.
• Test navigation links.

4. Document Your Layout Strategy

Keep track of which pages use which layout:

• Main Layout: Homepage, About, Services, Contact
• Minimal Layout: Account pages, checkout
• None (standalone): Landing pages

5. Update Layouts, Not Individual Pages

When you need to change navigation or footer content, update the layout page—not each individual page.

Real-World Example

Scenario: Service Business Website

You create:

• Main Layout (navbar with logo, Home, Services, About, Contact links + footer)

You apply Main Layout to:

• Homepage
• Services page
• About page
• Contact page
• Blog posts

Result: All five pages share the same navigation and footer. Update the navbar once to add a "Book Now" link, and it appears on all pages.

Advanced: Switching All Pages to a New Layout

If you've created a new layout and want to move pages from the old one:

1. List all the pages currently using the old layout.
2. For each page:
   • Open Page Settings with the gear icon.
   • Change Apply Layout to the new layout.
   • Click Save Changes.
3. Once every page has been moved across, you can delete the old layout page.

This approach lets you redesign your site structure without rebuilding pages from scratch.