# Layout grid / theme

## Layout grid

**Layout grid** it's a graphical representation **of columns and rows**, in which form components are placed. It allows designing and organizing the form layout – it defines how components are arranged on the page and controls the proportions between them.\
Thanks to the grid the form creator can precisely set the width and position of elements while maintaining visual consistency and interface readability.&#x20;

The layout grid is visible both in the form editing mode and in read-only mode.

### Grid view in the application editor

Enabling the layout grid is possible in the **Application** tab – after clicking the **"Layout grid"** button located at the bottom of the side panel.

<div align="center"><img src="https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/gKT1Je1KvhXSXcAx4Q3K/siatka_layout_pliki/image2025-5-12_14-50-31.png" alt="Illustration 1. The &#x22;Layout grid&#x22; button"></div>

After enabling the grid view, the form is extended with additional auxiliary elements:

* a column grid (useful when designing and modifying the application layout) and component area boundaries,
* identifiers of pages, base components and composite components,
* visibility of technical fields.

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2F1g0PckbPixNjpALm5syP%2Fimage2025-5-12_15-3-21.png?alt=media&#x26;token=2fd43935-b7b5-4ba1-92a8-55391f0f6732" alt=""><figcaption><p><em><strong>Illustration 2.</strong> Technical field visible after enabling the "Layout grid" option</em></p></figcaption></figure>

The grid view does not affect the published appearance of the form – it is only **an auxiliary tool** that facilitates placing components and analyzing the layout.

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2F3LK5IgYHRp4tADD2xwd8%2Fobraz.png?alt=media&#x26;token=42f2b123-9bd6-4644-90d7-ff97d4164dd9" alt=""><figcaption><p><em><strong>Illustration 3.</strong> View of the "Application" tab without the layout grid enabled</em></p></figcaption></figure>

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FJiVeEUJyc9Zev4VjxxGz%2Fobraz.png?alt=media&#x26;token=435febfe-4cdb-4df8-a30e-864d8d22747e" alt=""><figcaption><p><em><strong>Illustration 4.</strong> View of the "Application" tab with the layout grid</em></p></figcaption></figure>

## Theme switch

**Theme switch** is an option in Eximee Designer that allows switching between form themes, i.e., the visual layers of the form.

Switching between themes happens after clicking the **Theme switch** button located at the bottom of the form editor's side panel.

<div align="center"><img src="https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/QexFdBl8zyiajuCQGKSS/siatka_layout_pliki/image2025-5-13_8-50-17.png" alt="Illustration 5. The &#x22;Theme switch&#x22; button"></div>

After clicking the button, a list of themes available for the platform instance opens.\
Selecting a different theme instantly changes the form's appearance in the preview – however, it does not affect its logic or component structure.

### FAQ

**Does the layout grid change the appearance of the form for the end user?**\
No. The grid is visible only in edit mode and does not affect the published appearance of the form.

**Can the theme be changed for a single page of the form?**\
No. The theme is assigned to the entire form or application, not to individual pages.

**Does changing the theme affect the column layout?**\
Not directly, but different themes may have different margin and spacing values, which may require minor adjustments to component placement.
