> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pads4.com/llms.txt
> Use this file to discover all available pages before exploring further.

# User Interface

## Interface Overview

Once inside the Web Designer, the interface is divided into key areas:

* **Canvas Area**: The main design space where you place and arrange elements.

<Frame>
  <img src="https://mintcdn.com/pads4/dJiWtb5LAZoaq-QH/images/digital-signage/cms/create-a-template13.png?fit=max&auto=format&n=dJiWtb5LAZoaq-QH&q=85&s=52505fb689dfc0cf46d6b185296a8aff" alt="Create A Template13" width="1518" height="904" data-path="images/digital-signage/cms/create-a-template13.png" />
</Frame>

* **Toolbar**: Provides access to drawing tools, media insertion, alignment, and layer management.
  <Frame>
    <img src="https://mintcdn.com/pads4/JvyyF0Z09nO5fkzh/images/digital-signage/WebDesigner/WebDesignerElementToolBar.png?fit=max&auto=format&n=JvyyF0Z09nO5fkzh&q=85&s=b79cf675e7912307d1297be34e3fdfbc" alt="Web Designer Element Tool Bar" width="847" height="762" data-path="images/digital-signage/WebDesigner/WebDesignerElementToolBar.png" />
  </Frame>

* **Property Panel**: Located on the right, it displays configuration options for the selected element (e.g., size, color, alignment).

<Frame>
  <img src="https://mintcdn.com/pads4/dJiWtb5LAZoaq-QH/images/digital-signage/cms/create-a-template5.png?fit=max&auto=format&n=dJiWtb5LAZoaq-QH&q=85&s=cab26fb58f2d7e619a548448668eb3de" alt="Create A Template5" width="389" height="438" data-path="images/digital-signage/cms/create-a-template5.png" />
</Frame>

* **Layer Panel**: Lists all objects on the template, allowing you to reorder, group, or delete elements.\\
  <Frame>
    <img src="https://mintcdn.com/pads4/dJiWtb5LAZoaq-QH/images/digital-signage/cms/create-a-template4.png?fit=max&auto=format&n=dJiWtb5LAZoaq-QH&q=85&s=b3bdce94e91c75c6fc4b26f15e426631" alt="Create A Template4" width="394" height="457" data-path="images/digital-signage/cms/create-a-template4.png" />
  </Frame>

## Enlarge the Main Page

To zoom or maximize the workspace:

* Use the zoom slider or zoom icons located at the bottom-right of the canvas.
  <img src="https://mintcdn.com/pads4/dJiWtb5LAZoaq-QH/images/digital-signage/cms/create-a-template8.png?fit=max&auto=format&n=dJiWtb5LAZoaq-QH&q=85&s=a139f19ba7e081053cd91361e5aa6ed5" alt="Create A Template8" title="Create A Template8" style={{ width:"46%" }} width="378" height="507" data-path="images/digital-signage/cms/create-a-template8.png" />
* You can also press **Ctrl + Scroll** on your mouse to zoom in and out.

This allows for more precise placement of design elements.