Build reusable pieces like headers, footers and cards.
A TeleportHQ component is a reusable block, like a navigation bar, footer or card, that you design once and place on many pages; when you edit the main component, every copy updates, and each copy can still show its own text, images and links.
In TeleportHQ, create a component by right-clicking elements you already designed and choosing Make Component, or start a blank one with the + button on the Components folder and New Component (Ctrl+Alt+K).
In TeleportHQ, double-click a component instance (or click the component in the Components folder) to open the main component in its own tab; every change you make there updates all its copies on every page.
In TeleportHQ, right-click a component in the Components folder of the left sidebar and choose Rename, Duplicate or Delete; deleting a component also removes every copy of it from your pages.
In TeleportHQ, change one copy (instance) of a component by editing its values in the Component Properties section of the right panel, or right-click it and choose Detach Instance to turn it into normal elements that no longer update with the main component.
In TeleportHQ, open the main component, click the connect (plug) icon next to a text, image or link field and choose Create Prop (or use Component settings → Props → Create new prop); each copy of the component can then set its own value in Component Properties.
In TeleportHQ, open a component and add a Slot element (Elements → Primitives → Layout, shortcut S) where the variable content should go; then, on each copy of the component on a page, drag any elements or components into that slot.
In TeleportHQ, open a component, create a state in Component settings → State (for example isOpen, true or false), then change it with a Change State event on an element and use it to show or hide parts of the component; states work in every project, websites included.
In TeleportHQ, right-click a component in the Components folder and choose Set as Navigation, Set as Footer or Set as Company Logo, so the editor can keep your menu and footer links in sync with your pages and protect those components from accidental deletion.
