Which elements can I add to a page?
Every page in TeleportHQ is built from elements: text, images, buttons, containers, menus, forms, animations and more. You find them in the left sidebar under Elements. The Primitives tab holds single building blocks, sorted into groups, and the Sections tab holds ready-made page sections and scroll stories. A few elements need a server and only work in web apps (Autocomplete, Upload Asset, Site Search and Newsletter Signup), so adding one to a website asks you to turn the project into a web app first.
Where to find the elements
The Elements panel is the first icon in the TeleportHQ editor's left sidebar (shortcut Ctrl+1, or Cmd+1 on a Mac). It has two tabs:
- Primitives: single elements, grouped by type (Layout, Typography, Media and so on). Type in the search box at the top to find an element by name. Point at a card to see a short preview of what it adds.
- Sections: complete sections such as a hero, a pricing table or a footer, plus ready-made scroll stories. Picking a Navbar or Footer section makes it your site's navigation or footer on every page. See How to add ready-made sections.
Some cards show a letter in brackets, for example Row (R). Press that key to add the element to the selected container. To learn every way to place an element, see How to add elements to a page.
Element groups on the Primitives tab
The TeleportHQ Primitives tab shows these groups, in this order.
| Group | What's inside | Works in |
|---|---|---|
| AI | AI Section (a box on the page where you describe a section), AI Image and AI Video (open a window to generate one), AI 3D Model. These use AI tokens. AI 3D Model currently only shows a "coming soon" message. | Websites and web apps |
| Layout | Row (R), Column (C), Grid (G), Separator, Card Rail (a ready-made sideways row of cards). Slot (S) appears only while you edit a component. | Websites and web apps |
| Typography | Text (T), Heading (H), Link (L), Date (D), Collapsible Text | Websites and web apps |
| Media | Image (I), Video (V), Audio, Iframe, Code Embed, Lottie, GMaps (Google Maps), 3D Model, Gallery Strip (a ready-made strip of pictures). Markdown and Rich Text Editor appear only in some projects (see "Good to know"). | Websites and web apps |
| List | List, List-item, Table, Array Mapper | Websites and web apps |
| Forms | Form, Button (B), Label, Input, Textarea, Checkbox, Radio Button, Select, Option, Progress Bar, Signature Pad, Color Picker, Emoji Picker, File Upload Field | Websites and web apps |
| Interactive | QR Code, Barcode, Dropdown, Lang-switcher, Lang Toggle, Slider, Accordion, Autocomplete, Tabs, Cookie Consent, Month Calendar, Week Calendar, Day Calendar, Kanban Board, Countdown To Date, Countdown Timer | Autocomplete is web apps only. All the others work everywhere. |
| Motion | Motion, Scroll Scene, Scroll Video: animations, scroll-driven stories and videos that play as visitors scroll | Websites and web apps |
| Drag & Drop | Drag & Drop Area, Draggable, Drop Zone, Sortable List (lets visitors drag things on your site) | Websites and web apps |
| Assets | Upload Asset (lets visitors upload files) | Web apps only |
| Modals | Confirmation, Information, Details, Form, Slider (pop-up windows) | Websites and web apps |
| Charts | Line Chart, Bar Chart, Pie Chart, Doughnut Chart, Area Chart, Scatter Chart, Radar Chart, Polar Area Chart, Bubble Chart | Websites and web apps |
| Account | Image, Name, Email, Form, Sign Out, Delete Account, Menu (details of the signed-in visitor) | Needs login turned on |
| E-Commerce | List Products, Grid Products, Category Menu, Category Mega Menu, Category Filter, Details Product, Cart Button | Needs the store turned on |
| Blog | List Blog Posts, Grid Blog Posts, Details Blog Post, Share Buttons, Author Box, Previous & Next Posts, Reading Progress, Contents | Needs the blog turned on |
| Site | Announcement Bar, Site Search, Newsletter Signup, Footer, Social Links, Payment Icons, Back To Top, Contact Button: extras for the whole site | Site Search and Newsletter Signup are web apps only, and so is a Footer that includes a newsletter signup |
There is no Navbar card any more. To add a navigation bar, pick one in Sections → Navbar. See How to create a navigation bar with a mobile menu.
The Motion group holds TeleportHQ's animation elements: Motion animates what you put inside it, Scroll Scene builds a story that plays as visitors scroll, and Scroll Video plays a video frame by frame as visitors scroll. See Which animation options does TeleportHQ have?.
Most groups can be folded: click a group's name to close or open it.
Styling works the same way for every element. Fonts, colors, backgrounds, borders and spacing are covered in How the style panel works, so this article doesn't repeat them.
Elements that only work in web apps
In TeleportHQ, a website is a set of pages you can also download as code. A web app can also run logic on a server for your live site, such as sign-in, workflows and a database. The difference is explained in What's the difference between a website and a web app?
When you add one of the few web-app-only elements to a website, TeleportHQ opens a window titled Enable Web App features? It warns you about three things:
- Code download will no longer be available. You can't download the project's code after the change.
- You can still deploy this project directly from TeleportHQ.
- This change is permanent. The project can't be turned back into a website.
Click Keep as a Presentation Website to cancel, or Enable Web App features to convert the project and add the element. TeleportHQ saves a backup named Before Web App features Enabled before it converts the project. A project that still holds nothing but an empty home page gets no backup, as there is nothing in it to restore. Deleting the element afterwards doesn't turn the project back into a website: to undo the change, restore that backup, or ask support to restore it (backups aren't included in the trial, so on a trial, ask support). Read How to turn a website into a web app before you continue.
The web-app-only elements are:
- Interactive: Autocomplete
- Assets: Upload Asset
- Site: Site Search, Newsletter Signup (and a Footer that includes a newsletter signup)
Elements that run in the visitor's browser go into a website straight away, without the window, for example Collapsible Text, Tabs, Lang Toggle, Cookie Consent, the calendars, the countdowns, Kanban Board, QR Code, the Drag & Drop elements and the Modals.
Elements that need a feature turned on
The Account, E-Commerce and Blog groups show a card instead of elements until you turn that feature on. For example, the E-Commerce group shows E-Commerce Required with an Enable E-Commerce button. The Account group shows Enable Authentication, and the Blog group shows Enable Blog. These are web app features: on a website, turning one on opens the Enable Web App features? window first, and confirming makes the project a web app. To learn more, see How to add a store to an existing project, How to add a blog to your site and How to add sign-up and login to your site.
Articles about each element
- How to add elements to a page
- How to select one or several elements
- How to move and rearrange elements by dragging
- How to add and format text
- How to add and replace images
- How to add a video from your computer
- How to add a YouTube or Vimeo video
- How to add links and buttons
- How to link to a section of the same page with smooth scrolling
- How to add a "Scroll to top" button
- How to add a Google Map
- How to embed another web page with an iframe
- How to add your own HTML or JavaScript with Code Embed
- How to create a navigation bar with a mobile menu
- How to create a dropdown menu
- How to create an image slider (carousel)
- How to create an accordion (expand and collapse)
- How to add audio and play a sound on click
- How to add a 3D model
- How to add ready-made sections
Elements covered in other parts of this help center: forms in How to create a form, charts in How to add charts, lists of data in How to show a list of items, pop-ups in How to add a pop-up (modal), calendars and other widgets in How to add interactive elements, Lottie in How to add a Lottie animation, and Motion in How to create advanced animations with the Motion element.
Good to know
- There is no Icon card. Icons are added from Assets Manager → Icons. See How to add and color icons.
- Markdown appears only when the project's code type is Next.js. That happens when you choose Next.js as the code type in the Code download options, or when you connect your first data source.
- Rich Text Editor (a text box visitors can format) appears only in web apps.
- Code downloads. The calendars, countdowns, Kanban Board, QR Code, Barcode, Signature Pad, Color Picker, Emoji Picker, File Upload Field, the Drag & Drop elements, Cookie Consent and the language switcher work on your published site and in the Next.js download. Other code downloads leave them empty or without their behaviour, and the download window names the ones your project uses. Charts work on your published site and in the Next.js and React downloads; the other downloads leave them out, and the download window says so. See How to download your site as code (React, Next.js, Vue, HTML and more).
- Slot appears only while you edit a component. See How to use slots to put different content inside a component.
- A CMS group (CMS Item, CMS List, Mixed Type, Rich Text) appears only in projects connected to an external CMS.
- Your role matters. If your role can't edit components, adding an interactive element shows "Your current role does not have permission to edit components".
- The Grid card shows (G), but pressing G doesn't add a grid. Click or drag the card instead.