> ## 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.

# Templates

In your category, click **Create template** to begin designing.

<img src="https://mintcdn.com/pads4/rewY3k2DInLRZGC2/images/digital-signage/WebDesigner/WebDesignerNewTemplate.png?fit=max&auto=format&n=rewY3k2DInLRZGC2&q=85&s=a600c21d4fb28971953478e3387d0a1b" alt="Web Designer New Template" width="2560" height="764" data-path="images/digital-signage/WebDesigner/WebDesignerNewTemplate.png" />

1. **Name** your template.
2. Add a **description** to help other users when publishing messages with this template.
3. Choose the **format** and **orientation** based on your screens (landscape or portrait).
4. Click **Create**.

<img src="https://mintcdn.com/pads4/rewY3k2DInLRZGC2/images/digital-signage/WebDesigner/WebDesignerNewTemplateTwo.png?fit=max&auto=format&n=rewY3k2DInLRZGC2&q=85&s=3e85709c13c11618c7ed336705864aaf" alt="Web Designer New Template Two" width="1558" height="785" data-path="images/digital-signage/WebDesigner/WebDesignerNewTemplateTwo.png" />

Clicking **Create template** will open the Web Designer interface, where you can build and customize your template from scratch. This intuitive web-based editor lets CMS Designers add elements like text, images, and media tailored to your digital signage screens (landscape or portrait).

1. **Collapse the left panel** (1) and the **property panel** (2) to maximize space for your main design canvas.
2. Click the **Fit to page** button (3) to automatically scale and center your content to fit the full page preview.

This gives you an optimal workspace in the Web Designer for creating PADS4 templates without distractions.

<img src="https://mintcdn.com/pads4/uwDSEqpJENhPPkVR/images/digital-signage/WebDesigner/WebDesignerUIPrepare.png?fit=max&auto=format&n=uwDSEqpJENhPPkVR&q=85&s=23bef856b863df260651f368383831d3" alt="Web Designer UI Prepare" width="2560" height="1290" data-path="images/digital-signage/WebDesigner/WebDesignerUIPrepare.png" />

## Placing elements

To add basic shapes to your template in the Web Designer:

1. Add a shape from the elements panel (1) on your design canvas.
2. Select the shape, then adjust its properties in the right panel (2). (x=0, y=320, w=1920, h=450)

<img src="https://mintcdn.com/pads4/rewY3k2DInLRZGC2/images/digital-signage/WebDesigner/WebDesignerPlaceElement1.png?fit=max&auto=format&n=rewY3k2DInLRZGC2&q=85&s=baaa0943c26b43e4c6095c1a2d52d138" alt="Web Designer Place Element1" width="2560" height="1290" data-path="images/digital-signage/WebDesigner/WebDesignerPlaceElement1.png" />

Once your shape settings are complete, incorporate images to enhance your template design in the Web Designer.

1. Open the **Content Library** (1) to access your media assets.
2. Drag and drop (2) your desired image directly onto the canvas.
3. Select the image and adjust its properties in the right panel (3) to fit your PADS4 screen layout perfectly.

<img src="https://mintcdn.com/pads4/uwDSEqpJENhPPkVR/images/digital-signage/WebDesigner/WebDesignerPlaceElement2.png?fit=max&auto=format&n=uwDSEqpJENhPPkVR&q=85&s=06da0f8822c0c65f74de09bd00c2a160" alt="Web Designer Place Element2" width="2560" height="1290" data-path="images/digital-signage/WebDesigner/WebDesignerPlaceElement2.png" />

After placing your image, fine-tune its layer properties in the Web Designer to (un)lock capabilities and playback behavior in PADS4 templates.

1. Select the layer (image, shape, or element) and open its properties in the right panel.
2. Toggle locked/unlocked status for unlocked layers, CMS users can edit the content (e.g., replace the image) when publishing messages.
3. Set additional options like layer duration, add multiple overlapping items, or adjust the arrangement (e.g., send to back or bring to front).

<img src="https://mintcdn.com/pads4/uwDSEqpJENhPPkVR/images/digital-signage/WebDesigner/WebDesignerPlaceElement3.png?fit=max&auto=format&n=uwDSEqpJENhPPkVR&q=85&s=2c7142e24da910e15de2e34304682e94" alt="Web Designer Place Element3" width="2560" height="1290" data-path="images/digital-signage/WebDesigner/WebDesignerPlaceElement3.png" />

Add a locked logo for branding and an unlocked text field for user customization in your PADS4 Web Designer template.

1. **Logo**: Drag your logo to the bottom-right corner, select it, and \*\*lock \*\*the layer in the properties panel. CMS users cannot edit or remove it when publishing.
2. **Text**: Add text to the canvas, select it, and set the layer to **unlocked** so users can edit the content for their messages.
3. **Style text**: Adjust font family, size, color, and position in the properties panel.

<Info>
  Unlocking affects only text *content*, not styling (size, color, etc.) those stay fixed.
</Info>

<img src="https://mintcdn.com/pads4/uwDSEqpJENhPPkVR/images/digital-signage/WebDesigner/WebDesignerPlaceElement4.png?fit=max&auto=format&n=uwDSEqpJENhPPkVR&q=85&s=b81fc13d6b63108a5b6c301a9b551b86" alt="Web Designer Place Element4" width="2560" height="1290" data-path="images/digital-signage/WebDesigner/WebDesignerPlaceElement4.png" />

## Save the new template

Once your text and all elements are finalized, save your template in the Web Designer.

Click **Save** to store your PADS4 template. Ready for CMS users to select and publish messages with your locked logo and editable content.

<img src="https://mintcdn.com/pads4/uwDSEqpJENhPPkVR/images/digital-signage/WebDesigner/WebDesignerPlaceElement5.png?fit=max&auto=format&n=uwDSEqpJENhPPkVR&q=85&s=152c9c4d8e05cce1878f80a70d25510d" alt="Web Designer Place Element5" width="2560" height="1290" data-path="images/digital-signage/WebDesigner/WebDesignerPlaceElement5.png" />
