How to add ready-made sections

TeleportHQ has about 240 ready-made page sections in 23 categories, such as Hero, Features, Pricing, FAQ and Footer. Open Elements in the left sidebar, switch to the Sections tab, open a category (or search) and click a design. It's added after the selected block, in your site's fonts and colors. To swap any block of the page for another design, select it and click Replace Section.

Before you start#

• Adding sections needs a role that can create components. See What can each role do?
• Sections take their look from your project's design: its colors, fonts and spacing. See How to choose a color theme.

Add a section from the Sections tab#

1. On the canvas, select the block that the new section should follow. To add it at the end of the page, press Esc so nothing is selected.
2. In the TeleportHQ editor's left sidebar, click Elements.
3. Open the Sections tab. The categories are listed in alphabetical order, with a search box above them.

4. Click a category, for example Pricing. Its designs are listed by name, each with a small picture drawn in your site's style. Hover a card to see it larger, with a one-line description.
5. Click a design, for example Three plans. The section is added after the selected block and selected on the canvas.

To place a section exactly, drag its card onto the canvas or into the layers tree instead of clicking it.

The categories are Banner, Blog Post Header, Contact, Contact Form, Content List, CTA, FAQ, Features, Footer, Gallery, Hero, Logos, Navbar, Not Found, Pricing, Sign In, Sign Up, Stats, Steps, Team, Testimonial, Timeline and Toast, plus Stories.

Find a section by name#

1. In the Sections tab, with the list of categories showing, type at least two letters in the search box. For example, pricing.
2. Under Sections, TeleportHQ lists up to 12 matching designs from every category, each with its category's name. Under Categories, it lists the categories whose name matches.
3. Click a design to add it, or a category to open it.

The search looks in each design's name, category and description.

Add a section below another one#

1. On the canvas, click an element. A blue + Section Below button shows under it.
2. Click + Section Below. The Sections tab opens.
3. Open a category and click a design. It's added after the block that holds the element you clicked.

Replace a block with another design#

You can replace any block that sits directly on the page, not only sections you added from the library.

1. On the canvas, select the block, for example your hero. A purple Replace Section button shows under it, beside + Section Below.
2. Click Replace Section. The Sections tab opens. For a block that came from the library, it opens on that block's category, titled for example "Replace with Hero". For any other block, it shows the categories, titled "Replace section".
3. Click a design. To pick from another category, click the back arrow beside the panel's title first. The new section takes the block's place.

To stop replacing without changing anything, select another element on the canvas.

Fill a section with your own content#

A ready-made section lands as ordinary elements and classes, not as a component. Edit it like anything else on the page: double-click a text to change it, and select an image to replace it.

To have AI write a section's texts for your business, turn on Use AI to generate content at the top of a category, or above the search results, before you click a design. TeleportHQ writes the texts and picks photos from your site's own words, while a "Generating content for section" window shows. This uses AI tokens. See What uses AI tokens, and how much?

When you replace a block with Use AI to generate content on, the block's own words are carried into the new design.

Check that it worked#

The new section is selected on the canvas and in the layers tree under Pages, Components & Tree View. It uses your site's colors and fonts. See How to use the layers tree to find and select elements.

Troubleshooting#

"Your current role does not have permission to add sections." Ask a workspace admin for a role that can edit components. See What can each role do?

"Your current role does not have permission to replace sections." Your role can't replace sections. Ask a workspace admin.

The + Section Below button doesn't appear It doesn't show when several elements are selected, while you replace a block, or when the project is view-only. It can also be turned off. To turn it back on:

1. At the bottom of the left sidebar, click the Project settings cog.
2. Under Editor, click Preferences, then View.
3. Under Selection, turn on Show the "add section below" button.

The Replace Section button doesn't appear Select a block that sits directly on the page, not an element inside it. Select one block at a time.

"No results found. Try again using a different keyword." Nothing matches your search. Try a category name, for example pricing, or one word such as team.

"The Three plans was added with its sample copy: this site has no text of its own for AI to write from yet." The section was added with its example texts, because Use AI to generate content needs your site's own texts or business description to write from. Change the texts by hand, or write some texts on your pages first and add the section again.

"AI could not write the …" with a Try again button The message says why, for example "AI took too long to answer". Click Try again, or add the section with Use AI to generate content turned off.

Good to know#

• Undo: one Undo removes the new section, with the classes and colors it added to your project. A replace is also one step.
• Navbar and Footer designs are special: the one you click becomes your site's navigation (or footer) on every page, linked to your pages. See How to create a navigation bar with a mobile menu.
• Stories holds ready-made scroll stories: a whole Scroll Scene, added in one click, that plays as visitors scroll. Hover a story card to watch it.
• One main heading per page: if the page already has a main heading, the section's main heading is added as a second-level heading, with the same look.
• Phone layouts: each section already adapts to tablets and phones, at your project's own screen sizes.
• Describe a section instead: in projects made with the AI Website Builder, the Sections tab shows Generate using AI with a Generate Section button. See How to generate a new section with AI.
• Single elements (a button, an image) are on the Primitives tab. See Which elements can I add to a page?