> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teleporthq.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Elements, the building blocks for your website

**Find out how to add elements and play around with them to create any layout you want.**

|    |    |
| --- | --- | --- |
| [Elements panel](#2-1-elements-panel) | [Adding elements in stage](#2-2-adding-elements-in-stage) |

## 1. Elements panel

In the Elements panel you can find all the elements that will help you build your website's structure. The types of elements that we currently support are:

| **Layout** | **Typography** | **Media** | **List** | **Forms** | **Interactions** |
| ---- |
| Row | Text | Image | List | Form | Dropdown |
| Column | Heading | Video | List-item | Button | Language switcher |
| Grid | Link | Iframe | Array mapper | Label | Navbar |
| Slot | Date | Code embed |  | Input | Slider |
|  |  | Lottie |  | Textarea | Accordion |
|  |  | Google Maps |  | Checkbox |  |
|  |  |  |  | Radio button |  |
|  |  |  |  | Select |  |
|  |  |  |  | Option |  |

All of the elements above are bound to existing HTML tag elements. In the brackets there are the keyboard shortcuts that you can use to add these elements into Canvas.

![Available elements in the Left panel](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/1-elements_aaitz3.gif)

## 2. Adding elements in stage

### Learn how to add elements in stage

To add any of the elements in the Left panel to your project:

* Click on the Elements button in the Left panel
* Drag any of the elements to the canvas

Alternatively, instead of dragging you can **click on an element** and it will be added to the selected container, as the last element in the container.

As noted before, in the *Elements Panel* some items have the **keyboard shortcut** added in parentheses next to the title. Simply press the right key and the element will be added as a child of the currently selected node. If the selected node doesn't support children, it will be added as a sibling.

![Different methods of adding elements](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/2-elements_4rq3ag.gif)