Dokumentation HubSpotDein Theme in HubSpot nutzen

Dein Theme in HubSpot nutzen

Nach deinem ersten Export ist das transjt-Theme in deinem HubSpot-Konto. So baust du damit Seiten.

Bevor du loslegst

Ein HubSpot-Konto, das in transjt verbunden ist, unter Settings > Integrations oder im Schritt Deploy deines Projekts (Super-Admin-Rechte erforderlich). Siehe HubSpot verbinden.
Jeder HubSpot-Plan funktioniert, auch der kostenlose.

Dein Theme finden

Erstelle in HubSpot eine neue Website-Seite (oder ein neues Website-Projekt).
Wähle dein transjt-Theme. Es trägt den Projektnamen und das Titelbild, das du in transjt festgelegt hast.

Das Theme erscheint erst nach deinem ersten Export.

HubSpot Themes page, Themes in your portal: exported transjt themes with their project name and cover image next to HubSpot themes, each with Set as active theme and Preview — HubSpot > Themes: Dein transjt-Theme erscheint mit seinem Projektnamen und Titelbild.

Theme manuell hochladen

Du möchtest das Theme lieber selbst installieren, zum Beispiel in einem HubSpot-Konto, das nicht mit transjt verbunden ist? Lade es herunter und in HubSpot hoch:

Öffne in transjt dein Projekt und gehe zum Schritt Deploy.
Klicke auf Download Theme. Du bekommst das Theme als ZIP-Datei. Unter Previous Packages kannst du auch eine ältere Version herunterladen.
Öffne in HubSpot die Settings (Zahnrad-Symbol) und gehe zu Content > Themes & Modules.
Klicke auf Upload Theme und wähle die ZIP-Datei aus.

Das Theme erscheint dann in der Liste Themes, und du kannst damit wie oben beschrieben Seiten erstellen.

Keine Bilder im Download. Ein heruntergeladenes HubSpot-Theme enthält deine Bilder nicht. Füge sie nach dem Upload selbst in HubSpot hinzu. Wenn du das Theme mit allen Bildern bekommen möchtest, nutze stattdessen Deploy Theme to HubSpot.

HubSpot Settings, Content, Themes and Modules: the list of themes in the account and the Upload Theme button at the top right — HubSpot Settings > Content > Themes & Modules: Klicke auf Upload Theme und wähle die ZIP-Datei aus.

Seiten bauen

Deine Komponenten kommen als native HubSpot-Module an. Füge sie im Drag-and-drop-Editor von HubSpot zur Seite hinzu, ordne sie neu an und ändere Texte und Bilder in den Modulfeldern. Ohne Entwickler.

HubSpot page editor with an exported transjt page: the Add modules panel lists the theme modules such as Hero, Pricing plans, FAQ accordion and Site header, next to the page preview — HubSpot-Seiten-Editor: Deine transjt-Module findest du unter Add modules > Theme. Zieh sie auf die Seite.

Header, Footer und globale Komponenten

Header und Footer sind standardmäßig globale Komponenten: Du bearbeitest sie einmal, und die Änderung erscheint auf jeder Seite. Die Navigation folgt deinem HubSpot-Menü, sodass eine neue Seite, die du dem Menü hinzufügst, automatisch im Header erscheint.

Du kannst auch jede andere Komponente global machen. Lege sie in der transjt-App als global fest und verwende sie auf beliebig vielen Seiten wieder.

Formulare

Ein Formular in deinem Design wird zu einem nativen HubSpot-Formular, und Einsendungen landen direkt in deinem CRM. Du kannst ein gestaltetes Formular in wenigen Minuten ohne Code mit einem bestehenden HubSpot-Formular verknüpfen.

Video: So verknüpfst du ein selbst gestaltetes Formular mit HubSpot-Formularen

Blog

Layouts für Blog-Übersicht und Blogbeitrag werden zu HubSpot-Blog-Templates. Importiere sie in Figma mit dem Typ Blog bzw. Blog Detail.

Video: So erstellst du Blog-Übersicht und Blogseiten

Eine Komponente erneut exportieren

Wenn eine Komponente beim erneuten Export schon in HubSpot existiert, fragt transjt, ob sie ersetzt oder die bestehende behalten werden soll. Du findest das unter Tasks, wo abgeschlossene Importe als Ready for export markiert sind. Klicke auf Continue, um fortzufahren.

Video: Was sind Tasks in transjt?

Deine bestehende Website bleibt unberührt

transjt baut ein separates Theme und rührt die Seiten, die du schon hast, nicht an. Baue neue Seiten mit dem neuen Theme, wenn du so weit bist. Mische auf einer Seite keine Module aus dem alten und dem neuen Theme.