Peerless Theme
Editing Your Peerless Site
A plain-language guide to running your website after launch. No code required.
This is for the person who logs into HubSpot to update copy, swap a photo, change the brand colors, or add a new page. If you've never touched HubSpot before, start at the top — each section builds on the last.
Your site is built from building blocks (HubSpot calls them sections and modules) stacked on a page. You edit a block by clicking it. You restyle the whole site at once from Theme settings. Almost everything below is one of those two moves.
1 — Getting in
- Go to app.hubspot.com and log in.
- From the top menu, open Content → Website Pages (this is where your live pages live). Blog posts are under Content → Blog.
- Find the page you want to change, hover it, and click Edit.
You're now in the page editor: your page in the middle, a settings panel on the left or right when you click something.
Editing a page does not make it live. Nothing the public sees changes until you click Publish (top-right). You can edit freely and preview as much as you like first.
2 — The two layers: page content vs. theme styling
Peerless separates what a page says from how the whole site looks. Knowing which layer you're in saves a lot of confusion.
| You want to… | Where you go | Scope |
|---|---|---|
| Change words, a photo, a button link on one page | Page editor → click the block | Just that page |
| Change brand colors, fonts, button shape for the entire site | Theme settings | Everywhere at once |
When in doubt: if the change should show up on every page (like your brand red), it's a theme change. If it's only this page, it's a page change.
3 — Editing text, images, and buttons on a page
Everything on a Peerless page is a block you can click.
- Text — click the headline or paragraph and type. A formatting toolbar appears (bold, links, lists). It works like a word processor.
- Images — click the image, then Replace in the panel. Upload a new file or pick from your library. Always fill in the alt text box (a short description) — it helps accessibility and Google.
- Buttons — click the button to change its label and where it links. Paste the destination URL in the link field.
- Move a block — hover it and use the drag handle (the dotted icon) to drag it up or down.
- Delete a block — hover it and click the trash icon. (Undo is the curved-arrow icon at the top if you change your mind.)
- Duplicate a block — the copy icon next to delete. Handy for repeating a card or row.
Peerless blocks ship with no fixed spacing — the gaps around them are set per page. If something feels too tight or too roomy, click the section (the full-width band around the block) and adjust its spacing/padding rather than fighting the block itself.
4 — Adding a new block (section) to a page
Peerless comes with a library of ready-made sections so you rarely start from scratch. To add one:
- In the page editor, hover where you want it and click the + Add button (or open the left Add panel).
- Browse Sections and Modules and drag one onto the page.
- Click into it and replace the placeholder text and images with your own.
Sections you'll find in the Peerless library include (names may read slightly differently in the editor):
- Hero banner — the big headline area at the top of a page
- Cards / Cards scroll — feature or service tiles
- Pricing / Pricing table / Tiers — plan and price layouts
- Team — staff photos and bios
- Testimonial — customer quotes
- Logo cloud — a row of partner/client logos
- Gallery / Animated images — photo grids
- FAQ — expandable question-and-answer list
- Call to action / Next step / Offer — prompts to get in touch or buy
- Form / Contact form / Subscribe — lead capture
- Contact map / Contact cards — location and contact details
- Compare us — a comparison table against alternatives
- Instagram reels / Main video — embedded media
It may not be enabled on that page's template. That's a build decision — ask your developer to add it; it's a quick change on their side.
5 — Changing your brand look (Theme settings)
This is the powerful one. Theme settings restyle every page at once, so you set your brand here instead of editing pages one by one.
To open it: In the page editor, look for Theme or the paintbrush/theme option (often top-left near the page name), or go to Content → Design Manager → Themes → Peerless → Edit theme settings. Changes here preview live.
What you can control, grouped the same way the panel is:
- Global colors — your core palette: Primary (the main brand/action color), Secondary, Background, Content background, two Alt colors, plus White, Black, and Gray. Change Primary and you'll see buttons, links, and accents update across the whole site.
- Global fonts — a Primary font (body text) and a Secondary font (headings). Pick from Google Fonts.
- Spacing — default vertical spacing between sections, and how wide your content sits on the page (Content width / Maximum content width).
- Text — size and styling for each heading level (H1–H6), body text, links, lists, and blockquotes. You can also set text transform (e.g. ALL CAPS headings).
- Buttons — shape (corner radius), border, padding, default size, and hover behavior for every button on the site.
- Forms — colors and borders for form titles, labels, fields, and the submit button.
- Tables — header/body/footer colors and cell spacing for any data tables.
- Website header & footer — menu colors and footer text/background colors.
- Blog — colors for the blog header, post body, cards, and footer.
Theme settings preview before you commit. If you make a mess, close without publishing and nothing went live. When you're happy, Publish the theme changes.
7 — Writing a blog post
- Content → Blog → Create blog post.
- Give it a title, write your body in the editor (same text tools as pages).
- Set a featured image (shows on the blog index and when shared on social).
- Add tags so related posts group together.
- Fill in the Settings tab: the meta description (the blurb Google shows) and the URL slug.
- Publish — or Schedule it for a future date/time.
8 — Before you publish: a 60-second check
- Preview (top-right) and look at both the desktop and mobile views — Peerless is responsive, but always eyeball the phone layout.
- Click every new link and button in preview to confirm they go where you intend.
- Alt text on new images is filled in.
- Spelling / names / phone / address are correct.
- The page title and meta description (page Settings tab) read well — that's what shows in Google and social shares.
When it all checks out, hit Publish. To undo after publishing, HubSpot keeps a revision history (page Settings → Revisions/Restore) so you can roll back to an earlier version.
9 — Good habits & gotchas
- Don't delete a section just to hide it temporarily — you'll lose its content. Most sections have a hide on desktop/mobile toggle instead.
- Brand-wide changes belong in Theme settings, not on individual pages. If you find yourself making the same color tweak on five pages, stop — set it once in the theme.
- Images: upload reasonably sized files (a 200KB–500KB JPG, not an 8MB camera original) so pages stay fast. HubSpot will still optimize, but starting smaller helps.
- Unsure if a change is safe? It almost always is — nothing is public until you Publish, and you can restore previous versions. Experiment in preview freely.
10 — When to call your developer
Most day-to-day editing is yours. Loop in a developer when you want to:
- Add a brand-new type of section that isn't in the library, or change how an existing one is built.
- Enable a section/template option that isn't showing up in the editor.
- Set up new page templates, redirects, or domain/SEO plumbing.
- Anything that needs code (custom HTML, scripts, integrations).