Glossary
This glossary defines common terms you will encounter while editing pages in HubSpot. Bookmark this page for quick reference.
Quick Reference
| Term | One-Line Definition |
|---|---|
| Module | A content block you can add to a page |
| Field | An input area where you enter content |
| Template | A pre-built page layout |
| Page Builder | The visual editor for creating pages |
| Section | A horizontal area of a page |
| Drop Zone | An area where you can place modules |
| Rich Text | Formatted text with styling options |
| CTA | A button or link encouraging action |
| Hero Section | The large banner at the top of a page |
| Card | A boxed content element with image and text |
| Slider/Carousel | Content that rotates through multiple items |
| Accordion | Expandable sections that show/hide content |
| Responsive | Content that adapts to different screen sizes |
| Alt Text | A description of an image for accessibility |
| Publish | Make your changes visible to the public |
| Preview | See how your page looks before publishing |
| Draft | Saved work that is not yet public |
Module
What it is: A module is a pre-built content block that you can add to your page. Think of modules as building blocks. Each module has a specific purpose, like displaying text, images, buttons, or more complex layouts.
Example: The VN Testimonials Slider module displays customer quotes in a rotating carousel. The VN Intro Section module shows a headline with a call-to-action button.
Tips:
- Modules starting with VN are custom-built for your theme
- Each module has its own settings that appear when you click on it
- You can add the same module multiple times to a page
Field
What it is: A field is an input area within a module where you enter or select content. Fields can be text boxes, image selectors, dropdowns, toggles, and more.
Example: When you click on a button module, you see fields for Button Text (what the button says), Button Link (where it goes), and Button Style (how it looks).
Tips:
- Each module contains multiple fields
- Fields are organized into groups and tabs
- See the Field Types reference for details on each type
Template
What it is: A template is a pre-designed page layout that determines the overall structure of your page. Templates define where headers, footers, and content areas appear.
Example: A Landing Page template might have a large hero area at the top with no sidebar, while a Blog Post template includes space for a featured image, author info, and related posts.
Tips:
- Choose the right template before adding content
- Templates control what parts of the page you can edit
- Your theme includes templates for common page types (home, landing, service, blog)
Page Builder
What it is: The page builder is the visual editing interface where you create and modify pages. It is the screen you see when you click Edit on a page in HubSpot.
Example: When you open a page to edit, you see the page builder with your content in the center, a toolbar at the top, and module options on the left.
Tips:
- The page builder is sometimes called the editor or visual editor
- Changes you make appear immediately in the preview
- Always save your work before leaving the page builder
Section
What it is: A section is a horizontal band or row on your page. Sections stack vertically to form your complete page layout. Each section can have its own background, spacing, and width settings.
Example: A typical page might have: a hero section at the top, a features section in the middle, a testimonials section, and a contact section at the bottom.
Tips:
- Sections help organize your page into distinct areas
- You can add modules inside sections
- Section backgrounds and spacing are separate from module settings
Drop Zone
What it is: A drop zone is an area on your page where you can place modules. When you drag a module from the panel, drop zones highlight to show where you can add it.
Example: When dragging a module, you see blue highlighted areas appear on the page. These blue areas are drop zones where you can release your mouse to place the module.
Tips:
- Drop zones appear as you drag modules
- Not all areas accept all module types
- Drop zones appear between existing modules and in empty sections
Rich Text
What it is: Rich text is formatted text that includes styling like bold, italic, bullet points, and links. Unlike plain text, rich text lets you control how the text appears.
Example: A rich text field lets you type a paragraph, make certain words bold, add a bulleted list of features, and include a link to another page. All within one text area.
Tips:
- Rich text fields have a toolbar with formatting options
- Use formatting sparingly to maintain readability
- Paste as plain text (Ctrl+Shift+V) to avoid importing unwanted styles
CTA (Call to Action)
What it is: A CTA is a button, link, or prompt that encourages visitors to take a specific action. CTAs guide users toward your goals, like signing up, contacting you, or making a purchase.
Example: Get Started, Contact Us, Download Now, and Learn More are all common CTA button labels.
Tips:
- Use action-oriented verbs (Get, Start, Download, Contact)
- Keep CTA text short (2-4 words)
- Make CTAs visually stand out with contrasting colors
- Each page should have a clear primary CTA
Hero Section
What it is: The hero section is the large, prominent area at the very top of a page (below the navigation). It typically contains the main headline, a supporting message, and a primary CTA. The hero is often the first thing visitors see.
Example: A homepage hero might show a bold headline like Transform Your Marketing, a brief description, and a Get Started button, possibly with a background image or video.
Tips:
- Keep hero headlines short and impactful
- Use your strongest value proposition in the hero
- Background images should not distract from the text
- Heroes set the tone for the entire page
Card
What it is: A card is a self-contained content unit, typically displayed as a rectangular box. Cards usually combine an image, headline, brief text, and sometimes a link or button.
Example: A Services section might show three cards side by side, each with an icon, service name, short description, and Learn More link.
Tips:
- Cards work well in groups of 2, 3, or 4
- Keep card content consistent (if one has an image, they all should)
- Cards are great for features, services, team members, or blog previews
Slider / Carousel
What it is: A slider (also called a carousel) is a component that displays multiple items in the same space, rotating through them one at a time. Users can often navigate using arrows or dots.
Example: A testimonials slider shows one customer quote at a time, automatically cycling through several quotes. A logo slider displays partner company logos in a rotating display.
Tips:
- Use sliders when you have multiple similar items but limited space
- Ensure arrows and navigation dots are visible
- Auto-rotation should be slow enough for users to read content
- Consider how the slider looks on mobile devices
Accordion / Toggle
What it is: An accordion is a list of expandable sections. Clicking on a section header reveals its content, while other sections collapse. This pattern saves space and organizes information.
Example: An FAQ section uses accordions. Each question is a clickable header. Click a question, and the answer expands below it.
Tips:
- Great for FAQs, feature lists, or any content with many items
- Keep header text short and descriptive
- Only one section typically opens at a time
- Some accordions allow multiple sections open simultaneously
Responsive
What it is: Responsive means that your page automatically adjusts its layout and appearance to fit different screen sizes. A responsive page looks good on desktops, tablets, and phones without needing separate versions.
Example: A row of three cards might display side by side on desktop, but stack vertically on a phone. Text that is easy to read on a large monitor stays readable on a small screen.
Tips:
- Always preview your page on mobile using the device toggle in preview mode
- Modules in your theme are already built to be responsive
- Avoid very long headlines that may wrap awkwardly on small screens
- Test on actual devices when possible
Alt Text
What it is: Alt text (alternative text) is a written description of an image. It serves two important purposes: helping people who use screen readers understand the image, and appearing if the image fails to load.
Example: For an image of a team meeting, good alt text would be: Marketing team collaborating around a conference table. Not: image1.jpg or just team.
Tips:
- Describe what is in the image, not just its file name
- Be concise but specific (under 125 characters is ideal)
- If the image is decorative only, you can leave alt text empty
- Alt text also helps with search engine optimization (SEO)
Publish
What it is: Publishing makes your page changes visible to the public. Once you click Publish, anyone visiting your website can see the updated content.
Example: After editing your homepage and checking the preview, you click Publish in the top right corner. The changes go live immediately.
Tips:
- Always preview before publishing
- Published changes are immediate. There is no delay
- You can always edit and republish if you spot a mistake
- Major changes should be reviewed by a team member first
Preview
What it is: Preview lets you see how your page will look to visitors before you publish it. Preview mode shows the page as it will appear on the live website, without actually making it public.
Example: After adding a new testimonials section, you click Preview to check that the quotes display correctly and look good on both desktop and mobile.
Tips:
- Save your changes before previewing
- Use the device toggle in preview to check mobile appearance
- Preview does not affect the live site
- Get in the habit of previewing every time before you publish
Draft
What it is: A draft is a saved version of your page that has not been published. Drafts let you work on changes over time without affecting the live page.
Example: You start editing a landing page on Monday but do not finish. You save your work as a draft. On Tuesday, you return, make more changes, and then publish when ready.
Tips:
- Save often to avoid losing work
- Drafts are private until you publish
- You can have unpublished changes while the old version stays live
- When you publish, the draft becomes the live version
Additional Terms
Drag Handle
What it is: A small icon (usually a grid of dots) that you click and hold to move a module to a new position on the page.
Example: Hover over a module and look for the grid icon in the corner. Click and hold it, then drag the module to reorder it.
Padding
What it is: The space inside an element, between its content and its border. Adding padding pushes content away from the edges.
Example: A button with more padding appears larger because there is more space around the text inside it.
Margin
What it is: The space outside an element, between its border and neighboring elements. Adding margin creates distance between items.
Example: Adding margin to the bottom of a section creates space before the next section begins.
SEO
What it is: Search Engine Optimization. Practices that help your pages appear higher in search results on Google and other search engines.
Example: Adding good alt text to images, using clear headings, and writing descriptive page titles all improve SEO.
Viewport
What it is: The visible area of a webpage in your browser window. Responsive design adapts content based on viewport size.
Example: On a phone, the viewport is narrow and tall. On a desktop monitor, it is wide. Your page layout adjusts accordingly.
Need More Help?
If you encounter a term not listed here:
- Check the context. Often nearby text explains unfamiliar terms
- Ask a team member
- Search the HubSpot Knowledge Base
- Return to this guide as it is updated with new terms
Next Steps
- Review Field Types to understand input options
- Follow Common Tasks for step-by-step instructions
- Explore Design System to learn your brand visual standards