- what is a layout
- what are the internals of a layout
- how to create your custom layout and use it on a page
A layout defines the content hierarchy. It is a pattern that defines a website’s structure. It provides clear paths for navigation within webpages and puts the most important elements of a website front and center.
The most used layouts consist of three parts:
- header at the top containing links that help users to navigate around the website
- page content in the center
- footer at the very bottom containing various information about the website
Layouts are linked to page categories. When you create a page category, say “Blog”, you need to select a layout inside which that content will be displayed.
The options available inside the layout dropdown are registered by the
Each page created inside the “Blog” category, by default, use that layout. However, inside the page settings, you can overwrite that on a per-page basis if you need to.
A layout is a simple React component that receives several props. Here is an example of the static layout which comes with the default theme:
As you can see from the example above, we simply render a
Footer, and page content in between.
If you are creating your own layout, the structure is all up to you.
You can insert any
DOM structure with any custom CSS classes you require. You can also import and use pretty much any 3rd party NPM library here.
Now that we know what is a layout and what are its internals. Let’s create a custom layout of our own.
Create a new file named
apps/theme/pageBuilder/layouts and add the following content in it:
Now we register this layout as the
Let’s add the newly created layout to our page in the editor. It looks as shown below: