Docs / HubSpot / Using your theme in HubSpot

Using your theme in HubSpot

After your first export, the transjt theme is in your HubSpot account. Here is how to build pages with it.

Before you start

  • A HubSpot account connected in transjt, under Settings > Integrations or in the Deploy step of your project (Super Admin rights needed). See Connecting HubSpot.
  • Any HubSpot plan works, including the free one.

Find your theme

  1. In HubSpot, create a new website page (or a new website project).
  2. Pick your transjt theme. It carries the project name and the cover image you set in transjt.

The theme appears only after your first 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: your transjt theme shows up with its project name and cover image.

Upload the theme manually

Prefer to install the theme yourself, for example in a HubSpot account that is not connected to transjt? Download it and upload it in HubSpot:

  1. In transjt, open your project and go to the Deploy step.
  2. Click Download Theme. You get the theme as a ZIP file. You can also download an older version under Previous Packages.
  3. In HubSpot, open Settings (gear icon) and go to Content > Themes & Modules.
  4. Click Upload Theme and select the ZIP file.

The theme then appears in the Themes list, and you can create pages with it as described above.

No images in the download. A downloaded HubSpot theme does not include your images. After the upload, add them in HubSpot yourself. To get the theme with all images, use Deploy Theme to HubSpot instead.
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: click Upload Theme and select the ZIP file.

Build pages

Your components arrive as native HubSpot modules. Add them to the page in HubSpot's drag-and-drop editor, rearrange them, and change texts and images in the module fields. No developer needed.

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 page editor: your transjt modules are listed under Add modules > Theme. Drag them onto the page.

Header, footer and global components

Header and footer are global components by default: you edit them once, and the change appears on every page. The navigation follows your HubSpot menu, so a new page added to the menu appears in the header automatically.

You can make any other component global too. Set it as global in the transjt app, and reuse it on as many pages as you like.

Forms

A form in your design becomes a native HubSpot form, and submissions go straight into your CRM. You can link a designed form to an existing HubSpot form in a few minutes, without code.

Video: How to link a custom designed form with HubSpot forms

Blog

Blog listing and blog post layouts become HubSpot blog templates. In Figma, import them with the type Blog and Blog Detail.

Video: How to create blog listing and blog pages

Re-exporting a component

If a component already exists in HubSpot when you export again, transjt asks whether to replace it or keep the existing one. You find this in Tasks, where finished imports are marked Ready for export. Click Continue to go on.

Video: What are tasks in transjt?

Your existing site is safe

transjt builds a separate theme and does not touch the pages you already have. Build new pages from the new theme when you are ready. Don't mix modules from the old and the new theme on one page.

Previous← Connecting HubSpot