Global Elements
How do I create a page with a different logo and navigation?
There are a handful of ways built in which allow you to create pages with a unique header navigation.
So, you’ve got a page (or maybe a handful) that needs its own logo or navigation. Maybe it’s a microsite, a special campaign, or just because Bob from Marketing asked for it (Bob really needs a raise, huh?). Whatever the case, I’ve got your back. Let’s walk through how to make it happen—one delightfully easy (and occasionally not-so-easy) step at a time.
How Many Pages Are We Talking About?
One or Two Pages?
If you’re dealing with just a page or two, the Local Header module from Clean Pro is your new BFF.
Here’s what to do:
- Create a new page using any of the Landing Page templates.
- Open the Contents List in the sidebar and find the Global Header module. Now, remove that sucker. Bye-bye, Global Header!
- Click the + icon to access the theme modules, then drag and drop the Local Header module onto the page.
Boom. Done. You can now customize the Local Header just for this page. Need a second or third page with the same setup? Clone the one you just made and save yourself the extra steps.
Building a Microsite?
If you’re creating a full-blown microsite (think several pages, same header and navigation), we’re gonna go a little deeper. But don’t worry—it’s like riding a bike. A slightly complicated bike, but a bike nonetheless.
Step 1: Clone and Customize the Global Header Module
Scenario 1: Already Have a Cloned Global Header in Your Child Theme
- In HubSpot’s Design Manager, head to your child theme folder.
- Open the Modules folder and locate your existing cloned version of the Global Header module.
- Right-click it, select Clone module, and name the new version something like “Global Header v2 Microsite” (or get creative—your call).
Scenario 2: No Cloned Global Header?
- Navigate to the @marketplace > Helpful_Hero > CLEAN-6-1-Theme folder.
- Open the Modules folder and find the Global Header v2 module. Right-click it, select Clone to Child Theme, and choose your child theme.
- SUPER IMPORTANT: Immediately rename this module (e.g., “Global Header v2 Microsite”) to avoid resetting your live website to the Clean Pro default logo. Crisis averted. You’re welcome.
Step 2: Organize Your Modules
We’re keeping things tidy, folks.
- Open the cloned Global Header module in the Design Manager.
- Update the Label on the right-hand side to reflect its purpose (e.g., “Global Header - Microsite”).
- Hit Publish Changes.
Step 3: Clone the Base HTML File
Time to dip your toes into the code pool. It’s shallow, I promise.
- Go to the Templates/Layout folder in your child theme.
- Right-click the base.html file and select Clone Template. Name it something like base-microsite.html.
- Open the cloned file and find the Global Header reference (around line 27). Update it to match your new module name (e.g., “Global Header v2 Microsite”).
Double-check your spelling, save, and publish. You’re officially a coding ninja now.
Step 4: Clone Templates for the Microsite
Pick a few core templates for your microsite (3-4 should do the trick):
- Navigate to the Parent Theme > Templates folder.
- Clone the templates you need (they’ll start with clean-pro-). Ignore anything labeled clean-6-1 or clean-6-2—those are old news.
- In your child theme, rename these templates (e.g., clean-pro-thank-you-microsite.html) and update their Labels to include “Microsite.”
Step 5: Sync Your Templates with the New Global Header
- Rename the Template
- Right-click your cloned template in the Child Theme > Templates folder and add “Microsite” to the name (e.g., clean-pro-thank-you-microsite.html).
- Update the Label and Base File
- Open the template file and:
- Around line 7, replace base.html with your new base-microsite.html file.Update the Label at the top to include “Microsite” (e.g., Microsite - Thank You Page Template).
Step 6: Test It Out
Time for the moment of truth.
- Head to the Content Hub and create a new webpage.
- Select your child theme and search for your microsite templates by name.
- Create the page, and voilà—your new Global Header is ready to dazzle.
In Conclusion…
That was a lot, wasn’t it? But now you’ve got a fully customized microsite setup like a pro. Bob from Marketing’s gonna be so impressed. Go ahead, pat yourself on the back—and maybe grab a celebratory donut. You’ve earned it.