HubSpot's landing pages have long been a preferred method for marketers to create effective pages that capture and convert leads. For developers, the responsive, grid-based CSS framework the landing pages are built on makes creating new layouts a snap (the CSS is mobile friendly, too). Users get instant previews of their pages as they edit, and developers can build highly customized layouts. With powerful backend features like global modules and sitemaps, creating a microsite or full-fledged website using HubSpot3 landing pages is beautifully simple. HubSpot3 landing pages are the best option for small lead generation websites or microsites.
Building your Microsite
If you're already familiar with HubSpot landing pages, then you know how to build landing pages for lead generation. You might wonder, “why would I need to build a site using landing pages?” Consider the myriad of possibilities...
-
Launch a new product or service - a few pages in the microsite’s menu helps the visitor learn more without becoming distracted by your broader website menu.
-
Expand your landing page into sections for buyer personas or job functions - if you sell IT security products, you might offer content specifically targeted to IT or to business users.
-
Maximize conversions on paid search campaigns - if you’re having trouble reaching optimum conversion rates on a single landing page, consider testing a small microsite to offer additional conversion paths for prospects.
You don’t need to hack anything in HubSpot to build your microsite -- all the tools are built right into the Landing Pages tool. You can build as many microsites as you want, and they'll all be hosted on the same domain.
Our friends launching a surfing gear startup brand needed to move their website to HubSpot within a few days to prep for their Kickstarter project. As a small and simple starter site, we knew Landing Pages would be a perfect fit to build the site.
How to build your microsite
-
First, add your logo and favicon in the Content Settings page (found under the Content dropdown menu). Keep the content settings page open--it makes a good hub when you're setting everything up.
-
Create a custom style in the Style Manager (also found on the content settings page). Colors, fonts, and a few other appearance options are in your control right from the menu. You can use any valid color values, such as transparent, RGBA or HSL color, and you can define your own fonts and even font stacks. Both developers and marketers alike will be in harmony with how easily styles are managed in the CMS.
-
If you're a CSS coder, you can also add your own CSS in the advanced tab (or import it from a file). Hubspot will even minify it for you! (Highly recommended in order to keep a fast loading speed.)
-
Optionally, you can set your new style as the default style under content settings. Remember, this will affect any existing landing pages that are using the default style. You have the option to set specific styles for use on each page.
-
Create your layouts in the template builder, which you can access from the content settings page. The site we built required a unique template for each page, but if you can you'll want to minimize the number of templates you make. That'll keep things simple for later.
HubSpot has a useful video explaining the template system in the top right — give that a watch before you do anything. -
You can start by cloning one of HubSpot's default modules (since you'll probably want a menu, "2 Column Web Page" or "2 Column With Header Navigation" are both good places to start). The system has an intuitive interface, and creating a layout is as easy as clicking and dragging modules. Each module becomes editable when a new landing page is created.
-
Global modules are a handy feature that makes sitewide updates a snap. You can place a global module on any page and edits will be published to all modules automatically. On this site, we used global modules for footer content and custom social media icons.
-
If you've defined any of your own CSS classes, you can make use of those in your templates as well. You can add a custom CSS class on any module, and you can group modules together to create a wrapper.
-
Go to the Landing Pages manager and start making pages based on your templates. This is where you populate content and settings for all the modules on a template. Assign your new landing pages to a campaign--this will help you organize your microsite pages separately from other landing pages.
-
Finally, create a sitemap for all your pages in the microsite. Sitemaps are found under content settings. Put every page you want in your navigation in here by clicking "Add a page." You can define a page hierarchy by using parent pages. You just need to know your page URLs and managing your sitemap is a snap. Because you can make as many sitemaps as you want, it’s possible to display a different menu at the top, side, or bottom of a page.
-
Publish your pages! That’s really all you need to build your landing pages microsite.
If you have additional creative ways to generate leads through HubSpot’s Landing Pages tool, tell us all about it in the comments. Or if you would like us to build a microsite for you - just let us know.
