# Layout Designer Overview

The Layout Designer includes familiar tools from graphic editing programs.&#x20;

* Add, resize, reposition, and lock design elements, referred to as Layers (pictures, custom graphics, and more).&#x20;
* Customize layers for unique effects. Add borders, adjust opacity, and layer-specific settings for things like text&#x20;
* Import layers from other presets&#x20;

***

## Layout Designer Map

The Layout Designer has four main areas.

{% tabs %}
{% tab title="Main Tools" %}
Basic settings to save and adjust your layout are found at the top of the screen.&#x20;

* Undo or redo changes
* Close the layout editor (and discard changes)
* Save your layout

<figure><img src="/files/hTB3caWCZlf1kVwMRgup" alt="" width="375"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Canvas" %}
The Canvas is the main preview area where you see and arrange your layout. This is where you position photos, frames, text, and other design layers.

{% hint style="info" %}
When selected, a layer on the Canvas has context buttons to copy, lock, and delete the layer. You can also drag the layer to resize and position it on the Canvas.
{% endhint %}

<figure><img src="/files/DDvWR8wtxNqfihpQTcgb" alt="" width="375"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Layer List" %}
The Layer List is the vertical toolbar used to add new layers, select existing ones, and control layer order.

<figure><img src="/files/5N3cKfaceoa9HgkItLRk" alt="" width="375"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Inspector Panel" %}
The Inspector Panel is on the right, where you can adjust settings for the selected layer or the layout itself. This includes things like size, background, and motion options.&#x20;

<figure><img src="/files/dI8c6eWg54xJFDk4L5Mr" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="info" %}
Double tapping most of the tools in the Inspector will reset to default settings.
{% endhint %}
{% endtab %}
{% endtabs %}

***

## Layout Designer Settings

Customize the Layout Designer to match how you prefer to build layouts. These settings affect how the editor behaves while you’re designing, not how guests experience the booth.

At the top of the Layout Designer, open the settings menu to adjust the following options.&#x20;

{% tabs %}
{% tab title="Preview Style" %}
Choose how photo frames appear while you’re designing.

* **Numbered frames** shows frame numbers only, which is helpful for precise layout work and multi-frame designs.
* **Image samples** displays placeholder images so you can preview composition and spacing.
* **Mixed view** combines numbers and image previews.
  {% endtab %}

{% tab title="Layer Snapping" %}
Control how layers align when you drag, resize, or nudge them on the canvas. Snapping helps keep designs clean, centered, and evenly spaced without manual measuring.

Snapping applies when dragging layers and when using the nudge controls.

* **Snap to canvas:** Layers snap to the canvas center and edges.&#x20;
  * Best for centering logos, frames, or text within the overall design.
* **Snap to layers:** Layers snap to nearby layers as you move them.
  * Useful for lining up text, frames, and graphics relative to each other.
* **Snap to canvas and layers:** Layers snap to both the canvas and nearby layers, depending on position.
  * This is the most flexible option and works well for most layouts.
* **Disable snapping:** Turns off all snapping for freeform movement.
  * Helpful for fine adjustments or intentionally offset designs.

{% hint style="info" %}
If snapping feels too aggressive while placing a specific layer, temporarily disabling snapping can make precise positioning easier.
{% endhint %}
{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.simplebooth.com/copy-of-halo-app/layout-designer/layout-designer-overview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
