Skip to main content

Page Properties

This article provides an overview of all the page-level settings available in AVstudio. These settings define how each page behaves, looks, and connects to other parts of your project. You can access all of them from the left-hand panel when a page is open in the editor.

Overview of Available Settings​

When a page is open, the left panel displays a list of page-specific and project-wide tools. These options allow you to control layout, background, containers, actions, styles, and assets.

👉 Here's a breakdown of each section:

Page Properties​

Configure the page's identity and layout behavior.

  • Set the Page Name and an optional CSS Class Name
  • Choose layout type (adaptive or responsive)
  • Control toolbar visibility and container spacing

Alignment​

Adjust element alignment using grid lines, padding, and snapping controls to keep designs structured and consistent.

Global Containers​

Access reusable containers that can be shared across pages (e.g., headers, footers, side menus).

Page Containers​

Add layout containers directly to the current page. These hold components and widgets and support nesting for more complex structures.

Page Actions​

Set up logic that runs when the page loads or changes—ideal for triggering animations, setting variables, or navigating to other pages.

Page Background​

Customize the visual background of the page using:

  • Solid colors
  • Gradients
  • Image assets

Project Theme​

Manage visual consistency across the entire project by defining color palettes, font styles, and theme behaviors.

Project CSS​

Write or paste custom CSS that applies to the entire project. Use this to override styles or define reusable utility classes.

Project Media Library​

Access all uploaded media files in one place. You can:

  • Browse and search for assets
  • Upload new files
  • Reuse images across multiple screens

Summary​

The Page Properties panel in AVstudio gives you complete control over how a page looks, behaves, and integrates with your project. Use it to:

  • Define page structure and identity
  • Set up backgrounds and layout guides
  • Configure global and local containers
  • Manage page actions and styles

Once your page settings are configured, you're ready to begin designing and adding interactive elements. Continue with the next article to learn more.