Applying Layouts to Pages

Title: Applying Layouts to Pages
Category: website-editor

Where to Find This

Services → Website Editor tab

Before You Start

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

Applying a Layout to a Page

Step 1: Open Page Settings

1. Navigate to the Services → Website Editor tab.
2. In the left panel, click on the Pages tab.
3. Locate the page you want to apply a layout to.
4. Click the menu icon (three dots) next to the page.
5. Select Settings.

Step 2: Choose a Layout

1. Scroll to the Layout Settings section.
2. In the Apply Layout dropdown, select your desired layout page.
3. Click Save to apply the layout.

The page will now display the selected layout's navbar and footer.

Step 3: Reload the Page

1. Click the page in the Pages list to reload it.
2. You will see the layout's navbar and footer surrounding your content.
3. The navbar and footer are locked, meaning you cannot edit them on this page.
4. Your content appears in the middle section.

What Happens When You Apply a Layout

Before Applying:

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

After Applying:

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

Editing Pages with Layouts

When editing a page with a layout:

Layout Elements (Locked)

• Navbar and Footer cannot be moved or edited.
• Visual indicators show they're locked.
• Click attempts won't select these elements.

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. Open the page's Settings (menu icon → Settings).
2. In Apply Layout, choose a different layout from the dropdown.
3. Click Save.
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. Open the page's Settings.
2. In Apply Layout, select "No layout (standalone page)".
3. Click Save.
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 menu icon next to the page.
2. Select Settings.
3. Look at the Apply Layout dropdown.
4. The currently selected layout is shown (or "No layout" if standalone).

Bulk Layout Application

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

1. Apply the layout to the first page.
2. For each additional page:
   • Open Settings.
   • Select the same layout.
   • Save.

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: Can't Edit Navbar/Footer

This is expected behavior. Layout elements are locked on content pages.

Solution:

• To edit the navbar or footer, open the layout page directly.
• Make changes there, save, and reload your content page.

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 pages currently using Old Layout.
2. For each page:
   • Open Settings.
   • Change Apply Layout to New Layout.
   • Save.
3. Once all pages are migrated, you can delete Old Layout.

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