Layouts

A layout is a React component that wraps each page. You can put common parts of the pages such as header and footer in the layout file. A theme typically needs only one layout.

A basic layout might look like this:

import React from "react";
import Header from '../components/Header';
import Footer from "../components/Footer";
 
export default function DefaultLayout({ children }) {
 
  return (
    <div className="app-root">
      <Header/>
      <main className='app-content'>
        { children } {/*  <-- Placeholder to render actual page content */}
      </main>
      <Footer/>
    </div>
  )
}

Visually, the layout looks like this:

The dotted box is the placeholder for your actual content. At runtime, Sections where you put your main contents, are placed here vertically according to the order you define them in Pages.

In some cases you may need multiple layouts. For example, you may not want to show the header and footer on the login screen. In individual pages, you can define which layout will be used for that page.