Skip to main content

Page Builder Basics

What This Page Covers​

  • How to open and navigate the HubSpot page editor
  • Using the module panel and drag-and-drop
  • Saving, previewing, and publishing your work

Accessing the Page Editor​

How to Get There​

Step-by-Step

  1. Log into HubSpot - Go to app.hubspot.com and sign in with your credentials
  2. Open the Marketing menu - Click "Marketing" in the top navigation bar
  3. Select Website - Choose "Website" then "Website Pages" from the dropdown
  4. Find your page - Use the search bar or scroll to locate the page you want to edit
  5. Click to edit - Click on the page name, then click the "Edit" button

What You Will See​

When the editor opens, you will see:

  • Your page content in the center of the screen
  • A toolbar at the top with save, preview, and publish options
  • A left sidebar that appears when you click on the page (this is the module panel)

The Module Panel (Left Sidebar)​

What You Will See​

The left sidebar is your toolbox. It contains all the content blocks (called "modules") you can add to your page.

Understanding the Panel​

TabWhat It Contains
AddAll available modules you can drag onto the page
ContentsA list of all modules currently on your page (like a table of contents)
DesignSettings for the page's overall appearance
SettingsPage title, URL, and publishing options

Finding Modules​

Step-by-Step

  1. Click the "Add" tab - This shows all available modules
  2. Browse categories - Modules are grouped by type (Common, Theme, etc.)
  3. Use search - Type in the search box to find a specific module by name
  4. Look for "VN" modules - These are custom modules built specifically for our theme

Quick Tips​

  • Theme-specific modules start with "VN" (like "VN Testimonials Slider")
  • Common modules from HubSpot appear under "Common" or "Default"
  • Star your frequently used modules for quick access

How Drag-and-Drop Works​

Adding a New Module​

Step-by-Step

  1. Open the Add panel - Click the "Add" tab in the left sidebar
  2. Find your module - Browse or search for the module you need
  3. Click and hold - Click on the module and hold down your mouse button
  4. Drag to the page - Move your mouse to where you want the module on the page
  5. Look for the blue line - A blue horizontal line shows where the module will land
  6. Release to drop - Let go of the mouse button to place the module

What You Will See​

  • Blue drop zones appear as you drag, showing where you can place content
  • A ghost preview of the module follows your cursor
  • The module appears in your chosen location once you release

Moving Existing Modules​

Step-by-Step

  1. Hover over the module - A blue border appears around it
  2. Click the drag handle - Look for the grid of dots icon (usually top-left of the module)
  3. Drag to new location - Move the module to where you want it
  4. Release to place - The module snaps into its new position

Quick Tips​

  • Modules stack vertically by default
  • You can place modules side-by-side by dragging into column areas
  • If you cannot drop a module somewhere, that area may not accept that module type

Editing Module Content​

Selecting a Module​

Step-by-Step

  1. Click on any module - A blue border appears and the left panel shows that module's settings
  2. The panel updates - You will see all the options for that specific module
  3. Make your changes - Edit text, upload images, adjust settings
  4. Changes appear instantly - The page updates as you edit

What You Will See​

When you select a module, the left panel shows:

  • Content fields - Where you enter text, images, links
  • Style options - Colors, spacing, alignment choices
  • Advanced settings - Additional options (you may not need these often)

Quick Tips​

  • Click outside a module to deselect it
  • Use the "Contents" tab to quickly jump between modules
  • Some modules have multiple tabs of settings (Content, Styles, etc.)

Save, Preview, and Publish​

Saving Your Work​

What You Will See

  • The Save button is in the top-left corner
  • It may say "Save" or show a checkmark icon
  • An orange dot appears when you have unsaved changes

Step-by-Step

  1. Click Save - Or press Ctrl+S (Cmd+S on Mac)
  2. Wait for confirmation - The button will briefly show "Saved" or a checkmark
  3. Save often - Do not wait until you are finished to save

Previewing Your Page​

What You Will See

  • The Preview button is in the top-right area
  • Preview opens in a new browser tab

Step-by-Step

  1. Save your changes first - Always save before previewing
  2. Click Preview - A dropdown may appear with options
  3. Choose preview type:
    • "Preview" shows the page as it will look when published
    • "Preview as" lets you see it as different users would
  4. Check both desktop and mobile - Look for device toggle buttons in preview mode

Publishing Your Page​

What You Will See

  • The Publish button is in the top-right corner (often orange)
  • A confirmation dialog appears before publishing

Step-by-Step

  1. Save and preview first - Make sure everything looks correct
  2. Click Publish - The publish button in the top-right
  3. Review the dialog - Check the URL and any warnings
  4. Confirm publication - Click the final publish button
  5. Page is live - Your changes are now visible to the public

Quick Tips​

  • Published changes are immediate and visible to everyone
  • Use preview to catch mistakes before they go live
  • You can always edit and re-publish if you spot an error

Basic Editor Orientation​

Top Toolbar​

ButtonWhat It Does
SaveSaves your current changes
Undo/RedoReverses or restores recent changes
PreviewOpens a preview of how the page will look
PublishMakes your changes live on the website

Keyboard Shortcuts​

ShortcutAction
Ctrl+S (Cmd+S)Save
Ctrl+Z (Cmd+Z)Undo
Ctrl+Y (Cmd+Y)Redo
EscDeselect current module

Next Steps​

Now that you understand the basics, continue to Theme Overview to learn about available templates and modules.