Page Layouts - Creating page layouts

Modified on Wed, 6 May at 6:46 AM

Page Layouts: Creating page layouts

Page Layouts are reusable HTML template structures — define headers, footers, and page shells once, then apply them to multiple web pages for consistent branding.

TL;DR

Access: Account → Web Resources → Page Layouts → + New layout. Write HTML with named sections using [section:content] markers to define where page-specific content is injected. Select the layout on any web page via Parent HTML layout. Pages then inject their HTML into the layout's named sections. Use to share headers, footers, navigation, CSS/JS includes, and branding across pages.

3 things to know

Creating a layout

Go to Account → Web Resources → Page Layouts → + New layout. Write the outer HTML structure: <!DOCTYPE html>, <head> (include shared CSS/JS), <body> with header, navigation, footer. Use @yield(section-name) where page-specific HTML should be inserted. Each web page using this layout provides its own HTML for that section.

Applying a layout to pages

When creating or editing a web page, set Parent HTML layout to your layout. The page's HTML is injected into the layout's section markers. Pages using the same layout all share the same header, footer, and CSS/JS — update the layout once and all pages are updated. Select "No parent layout" for pages that don't need the shared structure.

Layout hierarchy and nesting

Layouts can themselves have a parent layout — enabling nested templates (e.g. base layout → campaign-specific layout → page). This is useful for accounts with multiple sub-brands that share a base structure but differ in secondary details. Use Hubhus placeholders in layouts: %brand_name%, %brand_logo_url%, %brand_color% for dynamic branding.

Read more⌄

@yield() — complete layout example

Define named sections in a layout with @yield(name). Pages using the layout inject their HTML into those sections:

<!DOCTYPE html>
<html lang='da'>
<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]">
    @yield(extra-head)
</head>
<body>
    <header class="site-header">
        <div class="container">
            <img src="%brand_logo_url%" alt="%brand_name%" height="50">
            <nav>@yield(navigation)</nav>
        </div>
    </header>

    <main class="site-content">
        <div class="container">
            @yield(content)
        </div>
    </main>

    <footer class="site-footer">
        <div class="container">
            <p>Copyright %brand_name%</p>
        </div>
    </footer>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</body>
</html>

A web page using this layout only needs to supply the content for the sections:

<!-- Navigation section -->
<ul class="nav navbar-nav">
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
</ul>

<!-- Content section -->
<h1>Welcome</h1>
<p>This goes into the main content area.</p>

Including HTML components with @include()

Use @include(component-slug) to embed reusable HTML components (from Account → Web Resources → HTML Components) inside layouts or pages:

<footer>
    @include(global-footer)
</footer>

Layout configuration options

Name — internal identifier
Parent layout — enables nested template hierarchy (child inherits from parent, can override sections)
Full HTML document: Yes — layout provides complete <!DOCTYPE html> ... </html> structure. Use for top-level page layouts.
Full HTML document: No — partial fragment only. Use when this layout itself has a parent layout that provides the document structure.

Layouts list shows: Name, Parent layout, Full HTML document (Yes/No), Sections (named @yield sections), Actions (Preview/Edit/Delete).

Troubleshooting

Page doesn't use the layout: Verify "Parent HTML layout" is set on the web page, not just on the layout itself
Content appears in wrong place: Check the @yield() section names match exactly — they are case-sensitive
Layout shows raw @yield() text: The section name in the web page doesn't match the layout's @yield() — compare spelling exactly
CSS/JS not loading: Put stylesheet and script references in the layout's <head> — they apply to all pages using the layout
Editing layout breaks all pages: Save with caution. Use Preview (eye icon) to test before saving.

Common searches

page layout • HTML template • shared header footer • layout sections • parent layout • reusable template

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