> ## 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).

# How to use premade Sections

**Learn more about the pre-built sections available in the TeleportHQ editor and how you can use them to build websites with minimal effort.**

|    |    |    |    |
| --- | --- | --- | --- |
| [1. Section types](#2-1-section-types) | [2. Adding sections](#2-2-adding-and-replacing-sections) | [3. Styling sections using themes](#2-3-styling-sections-using-themes) | [4. Editing sections](#2-4-editing-sections) |

## 1. Section types

The pre-built sections can be found in the Left panel, in the Sections tab. 

Here you will find 23 categories of sections including sections such as: **Hero, Navbars, Headers,  Footers, Contact, Galleries** and **more**.

| Within these **23 categories** there are over **250 different variants** of sections, with more to be added over time.

![List of section categories and variants](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/sections-1_fzh9zy.gif)

## 2. Adding and replacing sections

### Adding from the sections panel

To add a section from the Sections panel, 
* Go to the **Left panel**
* **Select a section category**
* Click on a **section variant**.

This will add the section to the bottom of your page.

![Adding a section from the Sections panel](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/sections-2_1x29fcw.gif)

### Adding with the Add section below button

To add a new section under a section that is already placed in the canvas, 
* **Click on the placed section**,
* Click on the **Add section below** button
* From the Left panel, **choose a section category**
* **Select a new section variant**.

![Adding a section using the Add section below button](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/sections-3_xp4pb.gif)

### Replacing the current section

To replace a section that you have already placed in the canvas, 
* **Click on the section**,
* Click on the **Replace section button**
* From the **Left panel** select a new **section variant**.

| When using the replace section button will only be able to choose a new variant of the same category.

![Replacing a section with the Replace section button](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/sections-4_1wvcfhf.gif)

## 3. Styling sections using themes

All of the sections from the Sections tab and the ones used when creating an AI website or a new page starting from a template can be quickly restyled using Themes. 

To change the theme:
* **Click outside of the canvas**, 
* From the **Right panel**, under the **Color** section, 
* Use the **Dropdown menu to choose a new theme**.

Check out this article to learn more about [themes and how to edit them](https://help.teleporthq.io/en/article/how-to-use-the-ai-website-builder-1tjtwkx/#2-change-ai-project-theme).

|| The themes set up at website level, which means that you cannot have different sections with different themes at the same time.

![Restyling sections using themes](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/sections-5_55q2vr.gif)

## 4. Editing sections

**Sections are basically components** and can be edited as easily as any other component.

To edit a section:

* **Double click it on the canvas**, or in the **Components section** of the Layers and Files tab.

Use the options in the Right panel to edit the elements, just like you would any other component.

| Sections are created using to

![Editing sections with the Right panel options](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/sections-6_1grwg9k.gif)