Page Layouts

Key Concepts

• Header & Sidebar Layouts: These layouts subdivide the page into dedicated sections for navigation and supplementary content. The header typically contains the main navigation elements, while the sidebar may accommodate additional links or tools pertinent to the page's context. Each of these layouts generates automatic navigation components that can be customized or removed as needed.

• Modal & Drawer Layouts: In addition to standard page layouts, Twidget supports pop-over layouts like modals and drawers. These elements overlay the main content and require user interaction to dismiss, allowing for focused task execution or information display without navigating away from the primary content area.

Main Components/Workflow

1. Adding Layouts: Users can add various layouts through an intuitive layout sidebar interface. Layout options are represented visually, and the addition of a layout can be executed with a simple action (e.g., clicking the plus icon).

2. Element Management: Each layout serves as a container for various UI elements which can be added or removed based on the requirements of the application. Users have the flexibility to customize layout content with various interactive elements.

3. Layout Deletion: The interface also provides options to remove layouts entirely, including all contained elements, through a user-friendly deletion icon.

4. Single vs. Multiple Layouts: While users are limited to a singular header and sidebar layout for structural consistency, they can utilize multiple instances of modal and drawer layouts, enhancing functional versatility within the same page context.

In summary, Twidget's page layouts facilitate a modular approach to web design, enabling users to quickly tailor their pages to suit diverse content organization needs and improve overall usability.