Theme Layout

What You'll Learn

You'll learn how to configure your app's layout settings to optimize the user experience. This includes selecting navigation orientation, configuring page width options, customizing header appearance, and managing title and logo display to create a professional and accessible interface for your users.

Layout Configuration

The Layout settings control the structural aspects of your app's design, including navigation orientation, page width, and header appearance.

Navigation Options

Navigation Orientation

Choose between:

• Vertical: Navigation menu displays along the side of the app
• Horizontal: Navigation menu displays across the top of the app

Navigation Display

Configure how pages appear in your navigation menu:

• Show Pages in Navigation: Toggle to show or hide pages in the navigation menu
• Sticky Header: Keeps the header visible when scrolling down the page

Additional Navigation Settings

Enhance your navigation with:

• Add border: Adds a visual separator for your navigation
• Add shadow: Gives depth to your navigation elements

Page Width

Control how your app's content spreads across the screen:

• Max: Content expands to fill the entire screen width
• Full: Content fills the screen but with a maximum width to prevent stretching on large displays

Tip: Full Width will always fill the entire screen, but Max Width prevents big screens from stretching the page too wide, improving readability.

Title & Logo Settings

Customize how your app's identity appears:

• Show App Title: Display your app's name in the header
• Use Custom Title: Replace the default app name with custom text
• Show Logo: Display your company or app logo
• Logo Upload: Drag or click to upload a file (5 MB max file size)

Saving Your Layout

After making changes, click the "Save" button at the top right of the Theme Settings panel to Save or to Save and Apply your layout configurations to the Live App