Page Layouts - Creating page layouts

Modified on Thu, 4 Dec at 11:34 AM

Page Layouts - Creating page layouts

Page Layouts in Hubhus allow you to create reusable HTML template structures with defined sections. Layouts provide consistent headers, footers, and overall structure across multiple web pages, emails, and other content.

On this page

Jump to any section using the links below

What are page layouts

Table of Contents

What are page layouts
Accessing page layouts
Understanding layout hierarchy
Sections in layouts
Creating a new page layout
Defining sections with @yield()
Real-world layout example
Using layouts in web pages
Section syntax summary
Including HTML components
Linking to other pages
Using Hubhus placeholders
Layout inheritance example
Common layout patterns
Best practices
Responsive design in layouts
Using layouts with different content types
Preview functionality
Editing existing layouts
Deleting layouts
Troubleshooting
Testing layouts
Summary

Page Layouts are:

Reusable HTML templates with defined structure
Used to maintain consistency across multiple pages
Can inherit from other layouts (parent-child relationship)
Contain sections where content is inserted using @yield()
Applied to web pages, email templates, and signatures

Layouts allow you to:

Define common headers and footers once
Maintain consistent branding across all pages
Update multiple pages by changing one layout
Separate structure from content
Create nested layout hierarchies

Accessing page layouts

Go to Account → Web Resources → Page Layouts

This shows all existing layouts with:

Preview: Icon to preview the layout
Name: Layout identifier
Parent layout: If this layout inherits from another layout
Full HTML document: Whether this is a complete HTML document or partial
Sections: Named sections defined in the layout
Actions: Edit and delete buttons

Understanding layout hierarchy

Layouts can inherit from other layouts, creating a parent-child relationship:

Top-level layouts (no parent):

Parent: None
Full HTML: Yes or No
Used as base templates

Child layouts (inherit from parent):

Parent: Another layout name
Full HTML: No (typically)
Extends or overrides parent sections

This hierarchy allows you to:

Define base structure once
Create variations that inherit and extend
Override specific sections in child layouts
Maintain consistency while allowing flexibility

Sections in layouts

The Sections column shows named placeholders where content can be inserted.

Common section names:

content - Main content area
intro - Introduction section
header - Header section
footer - Footer section
sidebar - Sidebar content
navigation - Navigation menu
contact - Contact section

Creating a new page layout

Click + New HTML Layout to create a layout.

Configuration options:

Name: Descriptive name for the layout (e.g., "Main site layout", "Email template", "Offer page layout")

Parent layout: Select an existing layout to inherit from, or choose "None" for a top-level layout.

Full HTML document: Choose "Yes" or "No"

Yes (Full HTML document):

Complete HTML structure with <!DOCTYPE html>, <html>, <head>, <body>
Used for standalone pages
Contains all necessary meta tags and external resources

No (Partial/fragment):

Just the structural wrapper
Inherits document structure from parent or page
Used for reusable components within larger structure

Defining sections with @yield()

Sections are placeholders where content will be inserted. Define sections using @yield() syntax:

Section syntax:

html

@yield(section-name)

Example layout with multiple sections:

html

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>%brand_name%</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="@stylesheet[main-styles,url]">
</head>
<body>
    <!-- Header -->
    <header class="site-header">
        <div class="container">
            <img src="%brand_logo_url%" alt="%brand_name%" height="50">
            <nav>
                @yield(navigation)
            </nav>
        </div>
    </header>
    
    <!-- Main content -->
    <main class="site-content">
        <div class="container">
            @yield(content)
        </div>
    </main>
    
    <!-- Sidebar -->
    <aside class="sidebar">
        @yield(sidebar)
    </aside>
    
    <!-- Footer -->
    <footer class="site-footer">
        <div class="container">
            @yield(footer)
        </div>
    </footer>
    
    <script src="@javascript[main-script,url]"></script>
</body>
</html>

Real-world layout example

Here's a complete layout example with navigation, multiple content sections, and Bootstrap styling:

html

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>%brand_name%</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        .navbar-fixed-top { position: fixed; top: 0; width: 100%; z-index: 1000; }
        .anchor { height: 60px; }
        .intro, .content, .contact { padding: 40px 0; }
        .intro { background: #f8f9fa; }
        .contact { background: #e9ecef; }
    </style>
</head>
<body>
    <!-- Navigation bar -->
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="row">
                <div class="col-md-9">
                    <a href="%brand_website%">
                        <div id="container_img" class="mobile_center">
                            @include(logo-component)
                        </div>
                    </a>
                </div>
                <div class="col-md-3" style="align:right;">
                    <div class="buttons" style="padding-top:10px;">
                        <button class="btn btn-success" 
                                onclick="window.location.href='@page[accept-offer,url]';" 
                                style="color:#FFF !important;">
                            Accept Offer
                        </button>
                    </div>
                    <div class="buttons" style="padding-top:10px; padding-bottom:10px;">
                        <button class="btn btn-primary" 
                                onclick="window.location.href='@page[contact-request,url]';" 
                                style="color:#FFF !important;">
                            I have questions
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Introduction section -->
    <div class="intro" id="intro">
        <div class="anchor"></div>
        <div class="container intro">
            <div class="row">
                <div class="col-md-12">
                    @yield(intro)
                </div>
            </div>
        </div>
    </div>

    <!-- Main content section -->
    <div class="content" id="content">
        <div class="anchor"></div>
        <div class="container content">
            <div class="row">
                <div class="col-lg-12">
                    <br/>
                    @yield(content)
                </div>
            </div>
        </div>
    </div>

    <!-- Contact section -->
    <div class="contact" id="contact">
        <div class="anchor"></div>
        <div class="container contact">
            <div class="row">
                <div class="col-lg-12">
                    @yield(contact)
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

This layout defines three sections:

intro - Introduction area
content - Main content area
contact - Contact section

Using layouts in web pages

When creating a web page, select a layout in the "Parent HTML layout" dropdown.

With layout selected:

Your web page provides content for the defined sections using @section() syntax:

html

@section(intro){
<h1>Welcome to Our Service</h1>
<p>We provide excellent solutions for your business needs.</p>
}@endsection

@section(content){
<h2>Our Services</h2>
<div class="row">
    <div class="col-md-4">
        <h3>Service One</h3>
        <p>Description of service one.</p>
    </div>
    <div class="col-md-4">
        <h3>Service Two</h3>
        <p>Description of service two.</p>
    </div>
    <div class="col-md-4">
        <h3>Service Three</h3>
        <p>Description of service three.</p>
    </div>
</div>
}@endsection

@section(contact){
<h2>Get in Touch</h2>
<p>Email: info@company.com</p>
<p>Phone: +1 234 567 890</p>
}@endsection

The layout provides the header, navigation, footer, and overall structure automatically. Your content is inserted into the appropriate sections.

Section syntax summary

In layouts (define where content goes):

html

@yield(section-name)

In web pages using the layout (provide content):

html

@section(section-name){
<!-- Your content here -->
}@endsection

Key points:

Section names must match exactly between @yield() and @section()
Section names are case-sensitive
Use curly braces { } with @section()
Close with }@endsection

Including HTML components

Layouts can include reusable HTML components using @include():

html

@include(component-name)

Example:

html

<header>
    @include(logo-component)
    @include(navigation-menu)
</header>

This allows you to:

Reuse common elements across layouts
Keep layouts cleaner and more maintainable
Update components in one place
Combine layouts with components

For more information, see the article on HTML components.

Linking to other pages

Use @page[] placeholder to generate URLs to other web pages:

html

<a href="@page[about-us,url]">About Us</a>

<button onclick="window.location.href='@page[contact,url]';">
    Contact Us
</button>

Syntax:

@page[page-slug,url] - Generates URL to web page with specified slug

Using Hubhus placeholders

Layouts support all Hubhus placeholders for dynamic content:

Brand placeholders:

html

%brand_name%           <!-- Company name -->
%brand_color%          <!-- Brand color -->
%brand_logo_url%       <!-- Logo URL -->
%brand_website%        <!-- Website URL -->

Example:

html

<header style="background-color: %brand_color%;">
    <img src="%brand_logo_url%" alt="%brand_name%">
    <h1>%brand_name%</h1>
</header>

Conditional placeholders:

html

@if(*%brand_logo_url%){
    <img src="%brand_logo_url%" height="50">
}@endif

Layout inheritance example

Parent layout: "Base page layout"

html

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="UTF-8">
    <title>%brand_name%</title>
    <link rel="stylesheet" href="@stylesheet[base-styles,url]">
</head>
<body>
    <header>
        <h1>%brand_name%</h1>
        @yield(navigation)
    </header>
    
    <main>
        @yield(content)
    </main>
    
    <footer>
        <p>&copy; 2024 %brand_name%</p>
    </footer>
</body>
</html>

Child layout: "Two-column page" (inherits from Base page layout)

html

<div class="two-column-layout">
    <div class="main-column">
        @yield(content)
    </div>
    
    <div class="sidebar-column">
        @yield(sidebar)
    </div>
</div>

When using the child layout:

Base structure (HTML, head, body, header, footer) comes from parent
Two-column structure comes from child
Web page provides content for content and sidebar sections

Common layout patterns

Simple page with header and footer:

html

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="UTF-8">
    <title>@yield(title) - %brand_name%</title>
    <link rel="stylesheet" href="@stylesheet[main,url]">
</head>
<body>
    <header class="site-header">
        <div class="container">
            <img src="%brand_logo_url%" alt="Logo">
            <nav>
                <a href="/">Home</a>
                <a href="@page[about,url]">About</a>
                <a href="@page[contact,url]">Contact</a>
            </nav>
        </div>
    </header>
    
    <main>
        @yield(content)
    </main>
    
    <footer class="site-footer">
        <p>&copy; 2024 %brand_name%</p>
    </footer>
</body>
</html>

Email template layout:

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
        .email-container { max-width: 600px; margin: 0 auto; }
        .header { background: %brand_color%; padding: 20px; color: white; }
        .body { padding: 30px; }
        .footer { background: #f5f5f5; padding: 20px; text-align: center; }
    </style>
</head>
<body>
    <div class="email-container">
        <div class="header">
            <h1>%brand_name%</h1>
        </div>
        
        <div class="body">
            @yield(body)
        </div>
        
        <div class="footer">
            <p>&copy; %brand_name% | <a href="%brand_website%">Visit our website</a></p>
            @yield(footer)
        </div>
    </div>
</body>
</html>

Multi-section landing page:

html

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="UTF-8">
    <title>%brand_name%</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <!-- Hero section -->
    <div class="hero" id="hero">
        <div class="container">
            @yield(hero)
        </div>
    </div>
    
    <!-- Features section -->
    <div class="features" id="features">
        <div class="container">
            @yield(features)
        </div>
    </div>
    
    <!-- Pricing section -->
    <div class="pricing" id="pricing">
        <div class="container">
            @yield(pricing)
        </div>
    </div>
    
    <!-- CTA section -->
    <div class="cta" id="cta">
        <div class="container">
            @yield(cta)
        </div>
    </div>
</body>
</html>

Best practices

Section naming:

Use descriptive, lowercase names
Common conventions: content, header, footer, sidebar, navigation, intro, contact
Avoid special characters
Keep names short and clear

Structure:

Start with minimal sections, add more as needed
Common pattern: header → content → footer
Consider responsive design in layout structure
Use semantic HTML5 elements (<header>, <main>, <footer>, <nav>, <aside>)

Reusability:

Create generic base layouts for common use cases
Use child layouts for specific variations
Don't duplicate code - inherit when possible
Keep layouts focused on structure, not content

Performance:

Include CSS and JavaScript references in layout
Use external stylesheets instead of inline styles
Minimize layout complexity
Reference external resources via CDN or Hubhus Web Resources

Maintainability:

Document what each layout is for
Use consistent naming conventions
Regularly review and clean up unused layouts
Test layouts across different content types

Responsive design in layouts

Ensure layouts work on all device sizes:

html

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        /* Mobile-first responsive styles */
        .container { padding: 15px; }
        
        @media (min-width: 768px) {
            .container { padding: 30px; }
        }
        
        @media (max-width: 767px) {
            .mobile-center { text-align: center; }
            .buttons { width: 100%; margin-bottom: 10px; }
        }
    </style>
</head>

Using layouts with different content types

Web pages:

Select layout in "Parent HTML layout" dropdown when creating/editing page
Provide content for sections using @section() syntax

Email templates:

Select layout when creating email template in campaign settings
Use table-based layouts for better email client compatibility
Test in multiple email clients

Email signatures:

Can reference layouts for consistent signature structure
Keep simple for maximum compatibility

Preview functionality

Click the Preview icon (eye icon) next to a layout name to see how it renders.

What preview shows:

Layout structure
Placeholder positions where @yield() appears
Overall visual appearance
How sections will be arranged

Note: Preview shows layout structure without actual content - @yield() sections appear as placeholders.

Editing existing layouts

To edit a layout:

Go to Account → Web Resources → Page Layouts
Find the layout in the list
Click the Edit button (orange pencil icon)
Modify HTML structure and sections
Adjust parent layout if needed
Adjust "Full HTML document" setting if needed
Save changes

Important: Changes affect all pages/emails using this layout immediately. Test changes carefully.

Deleting layouts

To delete a layout:

Click the Delete button (red trash icon)
Confirm deletion

Warning:

Check which pages/emails use the layout first
Deleting removes structure from all using pages
Cannot delete if child layouts depend on it
Pages using deleted layout will break
Consider renaming to "deprecated-" instead of deleting

Troubleshooting

Section content not appearing:

Verify section names match exactly between @yield() and @section()
Check section names are case-sensitive (intro ≠ Intro)
Ensure correct syntax: @section(name){ }@endsection
Look for typos in section names

Layout not applying to page:

Verify layout is selected in page settings (Parent HTML layout dropdown)
Check layout is saved
Clear browser cache (Ctrl+Shift+R)
Ensure layout doesn't have HTML errors

Child layout not inheriting:

Verify parent layout is selected correctly
Check that parent layout exists and is saved
Ensure you're not creating circular inheritance (child → parent → child)
Review inheritance hierarchy

Styling issues:

Check CSS references are correct
Verify stylesheets load (check browser console)
Look for conflicting styles between layout and page
Use browser developer tools to debug

@include() not working:

Verify HTML component exists with exact name
Check component name spelling
Ensure component is saved
Look for errors in the component itself

@page[] links not working:

Verify page slug is correct
Check page exists and is published
Ensure correct syntax: @page[slug,url]

Testing layouts

Before using a layout in production:

Visual testing:

Preview the layout
Create a test page using the layout
View on desktop and mobile devices
Test in different browsers

Content testing:

Add sample content to all sections
Verify sections appear in correct positions
Check spacing and alignment
Ensure responsive behavior works

Functionality testing:

Test all navigation links
Verify buttons and interactive elements
Check form submissions (if applicable)
Test @include() components load correctly

Summary

Page Layouts in Hubhus provide reusable HTML template structures with defined sections using @yield(section-name) syntax for consistent design across web pages and emails. Create layouts in Account → Web Resources → Page Layouts with a descriptive name, optional parent layout for inheritance, and choice of full HTML document or partial fragment. Define sections with @yield() where content will be inserted, then provide content in web pages using @section(name){ content }@endsection syntax. Layouts support @include(component-name) for reusable components, @page[slug,url] for internal links, and all Hubhus placeholders for dynamic content. Create parent-child layout relationships for flexible variations while maintaining base structure. Follow best practices including descriptive section naming, semantic HTML, responsive design, external stylesheet references, and regular testing across devices and browsers.

CSS Stylesheets - Managing stylesheets
JavaScript - Managing JavaScript files
Web Pages - Creating and managing web pages