Page Builder

Page Builder is where you build and edit HubSpot pages in Sprocket Rocket. Use it for anything you would normally do in HubSpot's page editor: add and arrange modules, edit their content, check the page at each screen size, and publish. The canvas shows the page's HubSpot draft. The header names the page and links back to where you came from, such as Website pages / Home.

Sprocket Rocket AI works in Page Builder too. Ask it for a change and it edits the same draft, so you can build by hand, with AI, or both. You never get a second copy of the page. For a module's code and fields, select the module and Edit code. See Edit module code.

The top bar

The top bar holds the installation's sections. A red dot means a section has updates waiting.

A middle click or Ctrl+click (Cmd+click on a Mac) opens a section in a new tab. On a phone, they are in the Sections menu at the top.

The Library

Hover Library to see its sections, or click it to open the Library on Stock modules. Each section is a tab:

Every tab but Theme has a search. Stock modules also has a category dropdown, and Website pages and Landing pages filter by license: Free, Core, Stack, and PRO. The Library only holds what fits the installation: a theme Sprocket Rocket didn't make has Layouts only, and a shared asset folder has Files only. With a single tab, the top bar shows it in place of Library.

The rail

The rail on the left holds the chat:

Chat returns to the chat you have open in this browser tab. Opening the app in a new tab, or coming back from another site, starts a new chat.

Open a page from HubSpot

While you edit a page in HubSpot's page editor, a blue Edit button with the Sprocket Rocket icon sits in the bottom-left corner of the page. Select it to open the same page in Page Builder. The button replaces HubSpot's editor in that tab, so the two editors never work on the draft at once.

The button comes with the theme's core files: update core on the installation to get it. It only shows inside HubSpot's page editor, never on the live page or in previews. If the portal has more than one installation or organization that matches the page, the app asks which one to open.

Create a page

Select Create new page in the Pages list. An empty editor opens straight away, with the module palette beside it. Opening the installation lands on the same empty page, with the chat beside it instead. The empty canvas reads Describe this page in the chat, with Or add modules below it.

The page isn't created in HubSpot until you make your first edit or send your first chat message. A new page you leave without adding anything is removed again.

The page type comes from the tab you started on in Pages: Website pages or Landing pages. To change it later, open Page settings and choose Page type. If the portal has no room left for that page type, the app creates the other type instead and tells you.

Add modules

Select Editor in the rail, under Chat, to open the module palette. Search for a module, or jump to a category, and drag it onto the canvas. Create a module at the top of the palette starts a chat where Sprocket Rocket builds one from your description. On a touch screen, tap a module and select Add to page. A module that isn't installed on the portal yet is installed when you drop it. A locked module shows a lock and needs a higher license or a credit first: open its menu in the palette and select Unlock. See Unlock modules.

A module's menu in the palette also has Edit code for one of the portal's own modules, Clone and edit for a stock module, and Update thumbnail. The gear beside the search has Sync User Modules, Hide Unavailable Modules, and Custom Thumbnails.

Use a saved layout when you already have the structure you need, and Save Layout in the toolbar to keep this page's structure for later.

Modules from other folders

Use Add from folder in the palette to place a module from another Design Manager folder in the same portal, such as a shared asset folder. Pick a folder to see every module in it, including modules in its subfolders. Modules a page can't use, such as blog-only or email-only modules, are listed greyed out with the reason beside them.

Once placed, these modules sit under Other at the end of the palette. Hover a module's name to see which folder it comes from. Edit code opens its code in its own folder. See Edit a module from another folder.

When no module does what you need, Sprocket Rocket AI can have one built. See Build and change modules.

Sections and columns

Every theme uses HubSpot's 12-column grid. Select Add section to add a row, then choose a Section layout: one to four equal columns, a third and two thirds, or Custom widths. Drag the line between two columns to resize them. A column can hold several modules stacked on top of each other, and you can drag a module from one column to another.

Section controls move or delete the whole section. Module controls affect only that module. Deleting a column deletes the modules in it, and the other columns widen to fill the row.

Section settings

Open a section's settings to change its padding, top and bottom margin, background color, and content width. Use full width stretches the section to the edges, and Use theme width goes back to the theme's width. Remove padding sets all four sides to zero, and Reset all styles clears everything you set. Sprocket Rocket AI can change the same settings.

Edit by hand

Click text on the canvas to edit it in place. The floating toolbar formats rich text. Press Ctrl+Enter (Cmd+Enter on a Mac) or click outside the text to save, and Escape to cancel. Select an image, button, or heading to open its settings. Global header and footer content is edited in HubSpot; the canvas says so when you select it. Hide header and footer hides them in your editor only and never changes the page.

Use the Desktop, Tablet, and Phone controls to check the page at each size.

Open Page settings from the page menu in the toolbar to change the page title, URL, meta description, and social sharing image. See Page settings and SEO.

Work with Sprocket Rocket AI

Select Chat in the rail and describe the page or the change you want. It can build a page from your modules, rebuild a page you link, write titles and alt text, and propose redirects, A/B tests, and translations. Your edits and Sprocket Rocket's land on the same draft, so you can let it draft a page and then adjust it by hand. See Work with Sprocket Rocket AI and what Sprocket Rocket AI can do.

Version history

Every change saves a restore point, whether you made it or Sprocket Rocket did. Open Version history from the toolbar to see them. Its changes are marked Sprocket Rocket.

Select Restore to put the page back to a version. The current state is kept as a restore point too, so you can undo a restore. Use Save version to name a version you want to find again.

Publish

Select Publish in the toolbar. The dialog shows the page settings HubSpot needs to publish, which you can change later in Page settings. On a page that is already live, the button is Update, and it replaces the live page with the current draft.

After publishing, choose View page, Edit in HubSpot, or Start a new page.