# Layout Perspective

In the Layout perspective, you can design the layout of your dashboard from scratch or by using a CDE template. While defining the layout you can apply styles and add HTML elements as text or images.

Use the **Layout Structure** toolbar in the top left of the window to add and delete rows, columns, HTML blocks, and images in your dashboard. To move elements around, drag and drop them within the Layout perspective. You can also add resource files (JS or CSS) or snippets.

![Layout Structure toolbar](https://29003258-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ3V9I254xU4g5WLtcBMU%2Fuploads%2Fgit-blob-a1b11880c412ad226cfe221d1606dec2939898df%2FFig9-layoutStructureToolbar.png?alt=media)

| Icon                                                                                                                                                                                                                                                          | Icon Name                    | Description                                                                                                                                                                                                                                                                                                                                                                                                                               |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><img src="https://29003258-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ3V9I254xU4g5WLtcBMU%2Fuploads%2Fgit-blob-b075553d5da10ae8352e4919ef80c01820ad777d%2Fsave_template.png?alt=media" alt="Save as Template icon"></p>          | **Save as Template**         | Select to save the dashboard as a template which can be applied to other dashboards. The generated template can contain just the layout structure or may include components and data sources.                                                                                                                                                                                                                                             |
| <p><img src="https://29003258-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ3V9I254xU4g5WLtcBMU%2Fuploads%2Fgit-blob-ec717cbea9ea029192ea6cd21c87b89a3a0e5014%2Fapply_template_big.png?alt=media" alt="Apply Template icon"></p>       | **Apply Template**           | Select to apply a template to a dashboard. You can select from a list of pre-defined templates or use a template you created.                                                                                                                                                                                                                                                                                                             |
| <p><img src="https://29003258-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ3V9I254xU4g5WLtcBMU%2Fuploads%2Fgit-blob-25a2a0d84b4e1de119874c77fb36d9af6866ba56%2Fadd.png?alt=media" alt="Add Resource icon"></p>                        | **Add Resource**             | Select to add CSS or JavaScript resources to the dashboard. These can be snippets, which will be included in the dashboard’s HTML as inline code, or external files, which are loaded with the dashboard’s HTML.                                                                                                                                                                                                                          |
| <p><img src="https://29003258-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ3V9I254xU4g5WLtcBMU%2Fuploads%2Fgit-blob-f5c964096a48a1edb76b940c2f09f5512b9ae3be%2Fbootstrap_add_panel.png?alt=media" alt="Add Bootstrap Panel icon"></p> | **Add Bootstrap Panel**      | Select to add a Bootstrap panel to the dashboard layout. The Bootstrap panel contains a panel header, panel body and panel footer.                                                                                                                                                                                                                                                                                                        |
| <p><img src="https://29003258-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ3V9I254xU4g5WLtcBMU%2Fuploads%2Fgit-blob-2938d431400efa3849a5659ddc7482f2750ea299%2Ffree_form.png?alt=media" alt="Add FreeForm icon"></p>                  | **Add FreeForm**             | <p>Select to add an HTML free-form component to the dashboard. This is a user-defined HTML tag with user-defined CSS classes and user-defined attributes. For example, you can have a tag such as the following:`xml</p><p>`</p><p>This element can then receive other elements, providing limitless custom nesting potential, and you can view it easily in the layout structure, which is not always possible with an HTML element.</p> |
| <p><img src="https://29003258-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ3V9I254xU4g5WLtcBMU%2Fuploads%2Fgit-blob-31cf3d7ff9f44cfbbb5c2e95f348cf7eaa862246%2Fadd_row.png?alt=media" alt="Add Row icon"></p>                         | **Add Row**                  | Select to add a row to the dashboard.                                                                                                                                                                                                                                                                                                                                                                                                     |
| <p><img src="https://29003258-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ3V9I254xU4g5WLtcBMU%2Fuploads%2Fgit-blob-74ab52cfd05ba742aff31a9040e40ab651b19317%2Fadd_column.png?alt=media" alt="Add Column icon"></p>                   | **Add Column**               | Select to add a column to the dashboard.                                                                                                                                                                                                                                                                                                                                                                                                  |
| <p><img src="https://29003258-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ3V9I254xU4g5WLtcBMU%2Fuploads%2Fgit-blob-40a39bd06f2577440a18afdb1b1041e0a744245b%2Fspace.png?alt=media" alt="Add Space icon"></p>                         | **Add Space**                | Select to add a separator to the dashboard. Optimally used between rows to add a space.                                                                                                                                                                                                                                                                                                                                                   |
| <p><img src="https://29003258-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ3V9I254xU4g5WLtcBMU%2Fuploads%2Fgit-blob-eae261c2927e8a48a1c7122b60a94565cf7ace49%2Fadd_image.png?alt=media" alt="Add Image icon"></p>                     | **Add Image**                | Select to add an image to the dashboard. Note that images are typically added via CSS instead of through the Add Image button.                                                                                                                                                                                                                                                                                                            |
| <p><img src="https://29003258-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ3V9I254xU4g5WLtcBMU%2Fuploads%2Fgit-blob-ba224cafbdf7321d013c31f80033cd1fd31e4e94%2Fadd_html.png?alt=media" alt="Add Html icon"></p>                       | **Add Html**                 | Select to add inline HTML code to the dashboard, such as text. Note that an HTML element can only be added to a column, not a row.                                                                                                                                                                                                                                                                                                        |
| <p><img src="https://29003258-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ3V9I254xU4g5WLtcBMU%2Fuploads%2Fgit-blob-0dd20cea9b0e83b009d2c8dd0f1e1caa6a703dec%2Fduplicate.png?alt=media" alt="Duplicate Layout Element icon"></p>      | **Duplicate Layout Element** | Select to duplicate a dashboard section as laid out in the Editor                                                                                                                                                                                                                                                                                                                                                                         |
| <p><img src="https://29003258-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ3V9I254xU4g5WLtcBMU%2Fuploads%2Fgit-blob-d1f697195c4eefaf77080bc97d1d9576904d73f5%2Fdelete.png?alt=media" alt="Delete icon"></p>                           | **Delete**                   | Select to delete a dashboard section as laid out in the Editor.                                                                                                                                                                                                                                                                                                                                                                           |

As you build the layout you will see the structure of nested rows and columns below the left toolbar in the \*\*Layout Structure\*\* panel. As you select one of the elements on the layout structure, the \*\*Properties\*\* panel on the right is updated. Here you can configure the element to your specifications.

![Layout Structure and Properties panels](https://29003258-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ3V9I254xU4g5WLtcBMU%2Fuploads%2Fgit-blob-1d80cee7fffe277c0505ea168b5148de302c75f3%2FlayoutPentahoLogoHighlighted.png?alt=media)
