Für Freelancer, Digitalagenturen und Marketingteams

So arbeiten Sie mit transjt.ai, HubSpot CMS und WordPress CMS

Mit transjt.ai können Sie einzigartige Figma-Designs sofort in HubSpot- und WordPress-kompatible Themes umwandeln. Erfahren Sie, wie Sie Ihren Workflow optimieren, Zeit sparen und Ihren Kunden übersichtliche, responsive HubSpot- oder WordPress-Websites liefern können.

Registrieren

Wie erstelle ich ein transjt.ai-Konto?

Registriere Dich mit Deinem Google- oder Figma-Account oder direkt mit Deiner E-Mail-Adresse auf transjt.ai. Du benötigst das Konto, um sowohl das Plugin als auch die App nutzen zu können.

Zur Registrierung

Wie lade ich das transjt-Plugin für Figma herunter?

Du kannst das transjt-Plugin entweder über die transjt.ai-App oder direkt in Figma erhalten, indem Du in Figma nach „Plugins & Widgets“ nach „transjt“ suchst.

Zum Plugin

Wie verbinde ich transjt mit HubSpot ?

Melde Dich bei transjt.ai an, gehe zu „Settings“ > „Integrations“, klicke auf „Add Account“, wähle „HubSpot“ aus und folgen den Anweisungen. Du benötigst Administratorrechte in HubSpot.

Seite Integrationen aufrufen

Wie erstelle ich ein Projekt in transjt.ai?

Öffne transjt.ai, gehe zum Abschnitt „Projects“ und klicke auf das Symbol „+“, um ein neues Projekt zu erstellen. In derselben Übersicht kannst du auch Projekte löschen.

Seite Projekte aurufen

Wie kann man transjt-Projekte mit HubSpot verknüpfen?

Öffne ein Projekt und klicke auf das Zahnrad-Symbol in der oberen linken Ecke. Füge unter der Registerkarte „Integrations“ entweder ein neues HubSpot-Konto hinzu oder wählen ein bestehendes Konto aus der Liste aus, um es zu verknüpfen.

Wie kann man ein anderes HubSpot-Konto verknüpfen?

Öffne ein Projekt und klicke auf das Zahnrad-Symbol. Wenn Du mehrere HubSpot-Konten hinterlegt hast, wähle das gewünschte aus. Wenn nicht, füge ein neues Konto hinzu, indem Du die zuvor beschriebenen Schritte befolgst.

Wie aktiviere ich das transjt-Plugin in WordPress?

Laden Sie das transjt-Plugin herunter, laden Sie es in Ihr WordPress-Plugin-Dashboard hoch und klicken Sie auf „Aktivieren“. Nach der Aktivierung wird „transjt.ai“ in Ihrem linken Admin-Menü angezeigt.

Wie verbinde und autorisiere ich transjt mit WordPress?

Stelle zunächst sicher, dass du in deinem transjt.ai-Konto angemeldet bist. Klicke dann in der linken Seitenleiste auf „transjt.ai“ und anschließend auf „Verbinden“. Es erscheint ein Popup-Fenster, in dem du aufgefordert wirst, die Verbindung zwischen transjt und WordPress zu autorisieren.

Wie aktiviere ich das transjt-Theme in WordPress?

Nach dem ersten Export von transjt in das WordPress-CMS findest du dein neues Theme unter „Darstellung > Themes“. Es trägt genau den Namen und das Vorschaubild, die du auf transjt.ai festgelegt hast. Fahre einfach mit der Maus darüber und klicke auf „Aktivieren“.

Wie erstellt man Seiten in WordPress?

Öffne dein WordPress-Dashboard, navigiere zu „Seiten“ und klicke auf „Neue Seite hinzufügen“. In der linken Seitenleiste siehst du deine von transjt generierten benutzerdefinierten Komponenten. Ziehe sie einfach per Drag & Drop auf deine Seite, um dein Layout zu erstellen.

Wie erstelle ich einen Blog in WordPress?

Markiere in Transjt das Layout deiner Blog-Übersicht als „Blog“ und das Layout deiner einzelnen Beiträge als „Blog-Detail“ und exportiere sie anschließend nach WordPress. Nach dem Export kannst du diese Komponenten ganz einfach in deine WordPress-Beiträge einfügen.

Wie fügt man in WordPress eine Navigation hinzu und konfiguriert sie?

Registriere dich bei Google, Figma oder direkt bei transjt.ai. Dieses Konto wird für das Plugin und die App benötigt.

Wie fügt man in WordPress einen Footer hinzu und konfiguriert ihn?

Registriere dich bei Google, Figma oder direkt bei transjt.ai. Dieses Konto wird für das Plugin und die App benötigt.

Wie fügt man ein Formular in WordPress ein?

Bevor du dein erstes Formular aus transjt nach WordPress exportierst, installiere und aktiviere das Plugin „Contact Form 7“. Exportiere anschließend das Formular, und die KI generiert die endgültige Struktur für dich.

Wie verknüpfe ich ein Figma Formular mit HubSpot-Formularen?

Entwerfe einfach ein beliebiges Formular in Figma und verknüpfe es in weniger als 5 Minuten mit HubSpot, ohne eine einzige Zeile Code schreiben zu müssen.

Was sind "Globale Komponenten"?

Globale Komponenten können dazu verwendet werden, um zB. ein "Preis-Widget" ein Mal zu konfigurieren und auf unterschiedlichen Seiten zu verknüpfen. Dies Spart Zeit und Arbeit.

Verwalte Dein Abonnement

Wir bieten vier Abonnementmodelle an: Free, Creator, Professional und Enterprise (nur auf Anfrage). Du kannst Dein Abonnement jederzeit unter „Settings > Subscription“ verwalten.

Abos öffnen

Was sind „tasks“ in transjt?

Der Abschnitt „Tasks“ bietet einen Überblick über alle aktiven Aufgaben, einschließlich Import aus Figma und Export nach HubSpot. Wenn eine Aufgabe abgeschlossen ist, wird sie als „Bereit zum Exportieren“ markiert. Wenn die Komponente bereits in HubSpot vorhanden ist, kannst Du wählen, ob Du sie ersetzen oder die vorhandene beibehalten möchten. Vergesse nicht, auf „Weiter“ zu klicken, um fortzufahren.

Verwendung von Token: Wann werden Token verwendet?

Token werden immer dann verwendet, wenn Designs von der KI verarbeitet werden – sowohl für den Import als auch für den Export. Jeder Import aus Figma und jeder Export zu HubSpot verbraucht Tokens.

So wählst Du das transjt-Theme in HubSpot aus und erstellst Seiten

Erstelle ein neues Website-Projekt oder eine neue Seite in HubSpot CMS. Wähle das transjt-Theme aus, indem Du nach dem Vorschaubild und dem Projektnamen von transjt.ai suchst. Beachte, dass das transjt-Theme erst nach dem ersten Export zu HubSpot angezeigt wird.

Wie erstellt man ein Design in Relume.io und exportiert es mit transjt nach HubSpot?

Mit Relume nicht nur ein Wireframing und Sitemaps erstellen. Verwende es, um Design-Seiten und Komponenten zu erstellen und exportiere sie direkt mit transjt.ai in das HubSpot CMS.

Wie erstellt man ein Design in UX Pilot mit transjt und exportiert es nach HubSpot?

Verwende UX Pilot, um Designs in Figma mit KI zu erstellen und diese mit transjt in das HubSpot CMS zu exportieren. Dieser Workflow wird Ihnen viel Zeit sparen!

Entwerfe Komponenten anstatt Seiten für den Export (figma-transjt)

Vermeide es, ganze Seiten in transjt.ai zu importieren, da diese nicht in einzelne Komponenten aufgeteilt werden. Importiere stattdessen einzelne Komponenten – dies erleichtert später die Erstellung von Seiten in HubSpot.

Verwende die Auto-Layout-Funktion von Figma

Das Auto-Layout von Figma ist ein leistungsstarkes Tool: Bei korrekter Einrichtung arbeitet es nahtlos mit transjt.ai zusammen, um hervorragende Ergebnisse zu erzielen und sowohl bei der Frontend- als auch bei der Backend-Entwicklung viel Zeit zu sparen. Denke daran, logische Elemente zu gruppieren, damit das Design übersichtlich bleibt und sich leicht exportieren lässt.

Wie man Anweisungen für die KI in Designs hinzufügt

Du kannst Anweisungen für die KI direkt in Deinem Figma-Design hinzufügen. Schreibe einfach Anweisungen in das Textfeld einer Komponente, und die KI interpretiert und wendet sie an. Beispiel: Füge zur Überschrift „Hover-Zustand mit Hintergrundschatten” hinzu, und die Hover-Animation wird automatisch generiert.

Wie erstellt man ein mehrstufiges Formular in Figma für das HubSpot CMS?

Füge einfach beide Schritte – beispielsweise in einem Formularablauf – in das Layout ein und benenne sie „Schritt 1“ und „Schritt 2“. Die KI kombiniert sie dann zu einem nahtlosen mehrstufigen Formular und integriert es automatisch in das HubSpot CMS.