Page layout
This document explains how to configure page layouts in the Moflow platform. It describes the purpose of page layout components, their settings, and how to arrange them to create a consistent page structure and improve the user experience.
Overview
A layout is a shared module between pages that ensures visual and interactive consistency. The Moflow platform provides flexible tools to customize a page's Header, Footer, Left sidebar, and Right sidebar. Note that components within a layout and components on a page cannot access each other. Layout components can only access global variables.
Adding methods
In the "Pages & Layouts" panel, click the "+" button in the layout module and select a layout.
Layout components
Header: The top area of the page. It can be fixed to the top of the viewport or scroll with the page.
Footer: The bottom area of the page. It can be fixed to the bottom of the viewport or scroll with the page.
Left: The page's left sidebar. It is fixed to the left side of the viewport by default and cannot be changed.
Right: The page's right sidebar. It is fixed to the right side of the viewport by default and cannot be changed.
Layout arrangement
Layout arrangement determines which module has rendering priority in the four corners of the page. This ensures that content is displayed in an orderly manner with various layout settings. You can set which module (Header, Footer, Left, or Right) has rendering priority for each of the four corners: top-left, top-right, bottom-left, and bottom-right.
Corner rendering priority logic:
Top-left corner: You can prioritize either the Header or the Left module.
Top-right corner: You can prioritize either the Header or the Right module.
Bottom-left corner: You can prioritize either the Footer or the Left module.
Bottom-right corner: You can prioritize either the Footer or the Right module.
When the Header is set to "Scroll with viewport":
The Left module takes priority in the top-left corner.
The rendering of Right is prioritized in the top-right corner.
When the Footer is set to "Scroll with viewport":
In the bottom-left corner, the Left component renders first.
The bottom-right corner will be prioritized for rendering.
Summary
Configure page layouts to create consistent, well-structured pages. This improves the user experience and simplifies page maintenance.