Skip to content

Page Layouts

Using page layouts helps streamline website development by reducing repetitive work. When used effectively, page layouts allow you to:

  • Define global slots — Slots filled with global data blocks that are defined once and automatically updated across all pages using them. This is especially useful for elements like headers and footers.
  • Create different layouts — Such as two-column structures, custom grids, and more.
  • Customize appearance — By applying unique backgrounds and CSS styles for each layout.

Defining Slots

You can define a slot using the following syntax:

<slot name="default"></slot>

A slot named "default" must always be present.

To define a slot that uses a global data block, use this syntax:

<slot name="header" global="Header-Global"></slot>

In this example, "Header-Global" is the name of the global data block you have previously defined.

Here’s an example of a simple page layout that uses one default slot (for page content) and two additional slots for the header and footer (both linked to global data blocks):

<div class="min-h-screen flex flex-col">
    <header class="sticky top-0 bg-blue-300 flex-shrink-0 z-100">
        <slot name="header" global="Header-Global"></slot>
    </header>

    <main class="flex-1 bg-green-300">
        <slot name="default"></slot>
    </main>

    <footer class="w-full flex-shrink-0">
        <slot name="footer" global="Footer-Global"></slot>
    </footer>
</div>

<script>
    // Add custom JavaScript here if needed
</script>

Example 2: Two-Column Layout

Here’s another example where two additional slots are defined, allowing content to be placed inside two columns:

<div class="min-h-screen flex flex-col">
    <header class="sticky top-0 bg-blue-300 flex-shrink-0 z-100">
        <slot name="header" global="Header-Global"></slot>
    </header>

    <main class="flex-1 bg-green-300">
        <slot name="default"></slot>

        <div class="grid grid-cols-1 md:grid-cols-2">
            <div class="col-span-1">
                <slot name="middle-left"></slot>
            </div>
            <div class="col-span-1">
                <slot name="middle-right"></slot>
            </div>
        </div>
    </main>

    <footer class="w-full flex-shrink-0">
        <slot name="footer" global="Footer-Global"></slot>
    </footer>
</div>

<script>
    // Add custom JavaScript here if needed
</script>

✅ Tip: Use clear and consistent slot names (like header, footer, or sidebar) to make layouts easier to maintain and reuse.

CSS

You can define custom CSS on each page layout. Please read CSS Priorities for learning CSS priorities works on the web builder