Skip to main content

How to Add an Element

🎯 Learn how to add new elements to your AVstudio project using different methods.
This guide explains each option available for inserting UI elements such as buttons, sliders, switches, and more.

Available Elements​

AVStudio currently supports the following UI elements:

  • Button
  • Checkbox
  • Dpad
  • Image
  • Keypad
  • Text
  • Slider
  • Round Slider
  • Color Picker
  • Switch
  • Subpage
  • Subpage List
  • Video
  • Player
  • Circle Slider

Each element has its own properties panel and configuration options.
You can view their individual documentation pages for detailed setup and usage.

👉 From Page Containers​

Steps​

  1. Go to Container under Page Containers.
  2. Click the dropdown arrow and select Elements.
  3. Choose Add Element, then select the desired type.
  4. In the Type dropdown, select the element (e.g., Button, Switch, Image).
  5. Click Add Element to insert it into the layout.

Add Element from Page Containers

👉 From the Editor (Right-Click)​

Steps​

  1. Right-click anywhere on the Editor workspace.
  2. Select Add Element, then choose the desired type.
  3. Click Add Element to confirm.

Add Element from Editor

👉 By Dragging from the Toolbar​

Steps​

  1. On the right-hand side of the Editor, locate the Elements Toolbar.
  2. The toolbar shows element icons by default. If you prefer to view the element names, click the small arrow to expand the toolbar and display labels (e.g., Text, Button, Slider, Image).
  3. Find the element you want to add.
  4. Drag it from the toolbar onto the Editor workspace, then release to place it.

📌 You can use this method on any page or subpage that opens in the Editor. It works for both responsive and adaptive pages.

Expanded Elements Toolbar

📌 Key Points​

  • Use Page Containers for structured placement within container layouts.
  • Use the Editor context menu for faster additions to any active page.
  • Use drag-and-drop for visual positioning and layout refinement.
  • Newly added elements appear immediately in the Editor and property panel.

❓ Frequently Asked Questions (FAQ)​

Can I add multiple elements at once?
No, elements must be added one at a time, but you can duplicate them after placement.

Where do new elements appear by default?
They are added to the current container or active page within the Editor.

Can I reorder or move elements after adding them?
Yes. Drag the element directly within the Editor or use the hierarchy panel.

Summary​

Add elements in three ways:

  • From Page Containers (structured placement inside containers)
  • From the editor’s context menu (quick insertion)
  • By dragging from the elements toolbar (visual positioning)

Use whichever method best fits your current workflow; all elements appear immediately in the editor and properties panel.