How to use Sections in TeleportHQ

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

Section types
Adding sections
Styling sections using themes
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.

2. Adding and replacing sections

Adding from the sections panel

To add a section from the Sections panel, go to the Left panel you will need to select a section category and click on a section variant. This will add the section to the bottom of your page.

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 and from the Left panel, choose a section category and then select a new section variant.

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 and 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.

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, and 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.

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

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

Updated on: 31/07/2024