Use the HubSpot CMS for Your Website Redesign

So how do you know if HubSpot’s CMS is right for you? Simply put, it might not be. But if marketing is a priority for your business, there’s a good chance it is. Here’s a deeper look at how HubSpot’s developer tools are different from a traditional CMS:

What Is a CMS?

If you’re planning on redesigning your website, you’ve probably spent some time shopping for a content management system. A CMS lets users change content on their website without having to write code. Let that sink in: without having to write code. Two common CMS examples are Drupal and WordPress.

HubSpot actually offers a completely different experience from a traditional CMS. Its platform is a Content Optimization System, meaning key marketing tools are baked into the platform. On most traditional CMS platforms, you’ll need to add extra outside marketing tools and plugins to test and optimize your site for SEO, conversion rate optimization (CRO), and analytics for starters. 

HubSpot’s different design features aren’t there accidentally. As a savvy marketer, you know launching your website isn’t a set-it-and-forget-it marketing project. Let’s look at how different platforms’ designs have evolved over time, causing a gap in marketing capabilities tied to website design, and how the HubSpot CMS brings you closer to lead generation nirvana:

WordPress and the Traditional CMS

WordPress is a popular CMS that serves as a good example of how traditional CMS platforms can differ. That’s because it started as a blogging platform. As it evolved into a fuller CMS, the focus remained on simplicity. That makes it a popular choice for businesses that are just starting out. However, when the time comes to build deeper marketing campaigns, traditional CMS platforms can actually become more complicated. 

When you decide to launch marketing campaigns with traditional CMS platforms, you’ll need to install plugins and you’ll risk losing compatibility when you add new marketing tools.

Alternatively, HubSpot’s CMS comes pre-equipped for content-focused companies. 

Unlike developing in WordPress, with HubSpot you don’t need to add plugins or buy extra products to boost marketing results. Here are some built-in features that make HubSpot’s CMS the go-to tool for marketers:

• SSL certificates and other security measures
• Front-end editors
• Forms 
• A CRM 
• A blog
• CTAs
• A/B testing
• SEO optimizations
• AMP support
• Analytics and reporting

Now that you know what you have at your fingertips, it’s time to learn how to turn these tools into lead-driving wonders.

Wondering how to use HubSpot to lock down leads? We’ve picked out some of HubSpot’s most important lead generation features that marketers will want to pay attention to during the web design process. 

Forms and CRM 

Forms are a key way to capture information about leads. In HubSpot, any forms you build for landing pages, webpages, or blogs feed into the same system. They load data right into your HubSpot CRM. If you’re using another CRM integration, such as Salesforce, no problem. HubSpot’s forms will still feed new contacts and updated lead information into your system.

You’ll have a treasure trove of lead information in one place. With this info, you can set the stage for tracking, reporting, and data management. It’s a big advantage to have some of your most valuable lead information streaming into a single spot that’s organized and consistent.

SEO

Ninety-three percent of online experiences start with search engines. That makes search engine optimization (SEO) a valuable part of marketing. As potential leads traverse the digital world, they’ll have questions and inklings about products. 

Boosting your SEO can get you a better quality of customer because you’ll be matching their queries to the solutions you sell. That means you’ll bring in leads who are actually interested in your services, and you’ll weed out those who aren’t. 

A good way to start improving your SEO is to research your competition and the keywords that fit your site. Moz or SEMrush are solid resources for this type of research. From there, you can use HubSpot’s SEO and content strategy tools to put your plan to work and track results.

HubSpot’s on-page SEO tools assess your content for current best practices and are supported by other content strategy tools for planning, optimization, and reporting.

HubSpot also includes tools for:

• Creating redirects
• Optimizing sitemaps
• Accessing Google Search Console data
• Identifying inbound links
• Applying header codes for tracking individual pages or your entire site

Need a cheat sheet? Check out our free worksheet with step-by-step ways to set up and execute your SEO strategy. 

Blogs 

Remember the days when there were no online transactions? Physical stores would get people to browse through their location with free samples, snacks, or special offers. Your blog can do a similar thing in the digital world. As shoppers come to your blog for hearty, useful information that answers their questions and helps address their challenges, you’ll gain their trust and be able to give them a taste of what you’re about as a partner, service provider, or retailer. 

HubSpot lets you build your blog in a consistent way. It uses CSS to feed off of the same, or similar, stylesheets as the rest of your website. That means you can use your blog to usher leads through the Buyer’s Journey by weaving relevant posts throughout your site, on pages like your product page or service pages. Plus, those SEO tools we mentioned above? Those are baked right into the blog tool in order to assess your internal linking, keyword usage, and other on-page SEO strategies. 

CTAs 

If you have a background in marketing or sales, you already know: If you want a customer to take action, you have to ask. That’s where CTAs come in. But HubSpot’s CTAs give you some added advantages.

First, they’re integrated into your site. That means you can track your CTA performance across the entire conversion path—from the first time a lead interacts with your CTA in an email, blog, or website page to a lead’s consultation request. 

Also, as a part of using HubSpot’s CMS for your website, you have access to influential, and downright awesome, CTA design and testing tools for buttons, links, and graphics. From A/B testing to dynamic placements to personalization, your CTAs can be as strategic as you are, with reporting to back up your tests and optimizations.

Landing Pages 

Landing pages help you deliver targeted content and messaging to your personas and segment your audience in an even more refined way. But when you’re launching a website, they can be a hassle to build. Who wants to search for new landing page tools after they’ve run the gauntlet of designing a whole website?

HubSpot’s landing pages make landing page creation easier for marketers. They’re built into the site automatically, so you can create landing pages without adding tools or worrying about inconsistencies in design. 

Having your landing pages housed in the same system as your forms, CTAs, and other webpages ensures your marketing campaigns are seamless from one touch to the next, and it facilitates intelligent closed-loop reporting. When the barriers to building amazing landing pages are broken down, you can spend more time on strategic conversion path development and better cater your content to your lead generation goals.

Mobile Optimization

Today, 70 percent of internet usage takes place on phones. As people browse more and more on mobile, you’ll want to make sure your site isn’t missing content or features in mobile settings. 

Related Article:  Avoiding Mobile Website Mistakes for Marketers and Non-Developers

As you build pages, HubSpot lets you preview how your content looks and functions on different devices. Before you publish content, make sure your landing pages, blogs, webpages, and emails will reach leads regardless of their screen size or browser. 

A/B Testing 

Optimizing your site’s content and design isn’t a one-time thing. If you want to connect with leads on a deeper level, you’ll need to look at data and make changes to improve your users’ experiences and raise your conversion rates. This is where A/B testing can lift your site to the next level. 

HubSpot has four main A/B testing tools:

• Emails
• CTAs
• Landing pages
• Website pages

With A/B testing, you can compare the results of different campaigns, see what resonates, see what doesn’t, and use your findings to build content that drives results.

Personalization

There are several built-in features for personalization that will come in handy as you lay out marketing campaigns on HubSpot. Content and messaging personalization is becoming more and more important for marketing and sales teams, but some CMS providers aren’t keeping up with the demand. HubSpot gives you the capability to build smart content for both known and unknown leads. That means personalizing experiences by things like location, device, referral source, lifecycle stage, pain points, demographics, and more.

Password-Protected Pages

HubSpot also lets you build password-protected pages for exclusive content. That means you can create members-only content or drive engagement with some of your most loyal customers through event-based signups. 

If building a community is a goal for your brand, the ability to gate your website pages and landing pages with passwords and logins directly in your CMS is a highly valuable tool. 

Reporting Tools

If you want to set goals, improve systems, boost your ROI, and track KPIs, reporting is a must. 

With HubSpot, you have access to a deep web analytics dashboard that is tied to more than just website visitors. All of the tools above are tracked in HubSpot for campaign performance across different assets—social media posts, emails, website pages, CTAs, landing pages, blog articles, and more. You can even set goals for your KPIs and track performance against your targets on a daily, weekly, monthly, quarterly, and yearly basis.

Pro Tip: Use HubSpot’s Tracking URL Builder to create custom UTM codes for different campaigns, channels, keywords, and more. 

Want to take reporting even further? You can boost your data with HubSpot’s integration of Databox, which aggregates data from sources outside of HubSpot, such as outbound call tracking, external CRMs, webinar hosting tools, video marketing tools, time-tracking tools, and more. 

It’s a big advantage to have some of your most valuable lead information streaming into a single spot that’s organized and consistent.

File Transfer Protocol (FTP)

With HubSpot’s FTP, you can upload and download templated files, JavaScript files, stylesheet, and file manager components. You can also use the Design Manager to create or edit custom modules. 

Here’s how to connect to the HubSpot CMS via the HubSpot FTP:

1. Edit your connection settings to make sure your connection is set up to use TLS/SSL.
2. Enter the server information. Do this by entering ftp.hubapi.com in the “Host” or “Server” field.
3. Enter the port information. This should be port 3200. If your preference is implicit SSL, you’ll want to set the port to 3201.
4. Enter your credentials. This will be your HubSpot username and password.
5. Connect to the server. You’ll know you’ve connected successfully because a folder labeled “portals” will appear.

Here’s some useful information for connecting HubSpot’s CMS via FTP:

• HubSpot FTP Port: The service runs on port 3200.
• Hostname: ftp.hubapi.com
• Getting Login Info: Initially, the connection is set in cleartext. You need to upgrade to TLS before the login password is sent.
• Login Credentials: Your login and password will be the same as the login for app.hubspot.com.
• Passive Mode: Passive mode needs to be enabled in order to connect.
• Firewalls: If you need to open company firewalls, you can open up HubSpot’s data ports in the range of 3203-3299.

Here are some other features developers love:

Content Staging

HubSpot CMS makes it easy to redesign your website, perfect it, and relaunch it through content staging. You can spruce up existing HubSpot sites or build new ones from scratch, and you can see them in action before you launch without publishing on your domain. That’s because you can access a free sandbox to develop your site. 

Once you get a live view of your new site in the staging tool, you can make it public with one click without having to redo, transfer, or update any code. 

HubSpot Language HubL

HubL, pronounced “Hubble”, is HubSpot’s markup language. The language is based on Jinja, but it also uses some unique features. With HubSpot’s syntax, JavaScript can also be added.

HubDB

All right. You have a template set up, but you still need to duplicate or update a bunch of pages. Maybe you want a running catalog or directory of your products, team members, or partners that updates across multiple pages without needing additional code or causing worry about breaking the design. 

No problem. 

You can use HubDB to create dynamic pages. Instead of coming from a typical page editor, these pages feed in through tables you create. This lets you upload all of your content in one place. This automated system saves you time, while pages also have their own unique URLs and feed individual tags for analytics.

Learn more about HubDB applications here:

• Dynamic pages in HubSpot CMS
• Creating a product catalog in HubSpot CMS
• Creating a directory in HubSpot CMS
• Creating event listings in HubSpot CMS

See HubDB in Action: How a Medical Device Company Uses HubDB for Their User-Friendly Physician Locator

Application Programming Interface (API)

Supplement your website content with a solid API that feeds data and processes from outside tools to your HubSpot applications. Then you’ll be able to set up key features, such as online stores and webinar systems. HubSpot’s API is centered around representational state transfer (REST). Learn more. 

HubSpot’s CMS Responsive Grid

HubSpot has drag-and-drop template layouts that automatically include a responsive, minimal CSS file that’s been stripped down to use code basics for mobile. The HubSpot CMS responsive grid is made up of 12 columns you can use to place rows of modules which will respond to different screen sizes. Not only does this help developers easily build and rearrange templates by dragging and dropping modules for website pages, landing pages, email templates, blogs, and system pages, but it also helps developers easily show their non-developer counterparts how the page is laid out without coding.

Certified HubSpot developers and marketing agencies are equipped to build, update, migrate, and optimize your website. In fact, there are some powerful advantages to using developers, designers, and strategists who are experienced in HubSpot CMS website designs for your project. 

It Makes for a Faster Launch

HubSpot’s platform is robust. It's easy to get distracted as you discover new capabilities. During a website launch, HubSpot experts understand your inbound marketing goals and know exactly where to focus in order to point your website in the right direction. 

When you work with a HubSpot-certified partner, you can have access to a wide range of experience, from HubSpot-specific coding to strategic website design to total inbound marketing planning. That means you can launch faster, because you have experts on your team that will guide you through the project strategically. 

It Simplifies Messages and the Process

Your organization is complex, from its unique voice, mission, and selling proposition to its overall vision. If you’re working with a good development team, they’ll get to know your business, your personas, and your goals. When it comes to creating your website, that simplifies the message and cuts out the risk of losing those subtle points at the heart of your business.

It Sets You Up for Growth-Driven Design

You might be in a rush to get your website up and running. But down the road, you’ll want a Growth-Driven Design. Developers can make sure your site is set up to satisfy your customer needs now, but they can also put a structure in place to continue optimizing and adapting your website based on actual visitor data. 

Get More Out of Working with a Developer

It might be tempting to just hand off work to a developer, but there are important questions you can ask to get more out of your website redesign. Here are some important questions to ask your developer before you move forward:

• How long will my project take?
• How much will it cost?
• How easy will it be to add features in the future?
• Will the site be optimized for mobile?
• Will you provide training? 
• What items do you need from me to be successful?

Need help managing your web design process? Here are some other helpful resources:

Wondering how to get the most out of your website templates? 

First, make sure the templates fit the style and needs of your customer personas. After all, these are the people you want to use your site. Before committing to a template, make sure you can customize it to fit the customers you want to engage. 

Second, whether you realize it or not, you’ll want templates to be able to host smart content. This will let you personalize content and send users the information they’re looking for.

Finally, make sure you have access to a developer. Templates are always going to come with hiccups, and you’ll want to tweak them to fit your site. Before grabbing a template, it’s a good idea to read its reviews. Pay attention to how readily developers respond to questions and modifications.

More Keys to Choosing a Template

Looking for more template guidance? Here are some quick things to keep in mind as you narrow down templates:

• Ease: Pick a template that’s easy to install.
• Customization: Choose templates that you can customize to meet your needs.
• Traffic: Make sure the template is built to drive traffic to your site.
• Lead Generation: Keep lead generation a top priority.
• Seamless Integration: Make sure it’s easy to move content from your old CMS to HubSpot.
• Responsiveness: Focus on templates that have a responsive design.
• Mobile Friendliness: Good templates will incorporate a dynamic design that drives engagement on mobile as well as other devices.

Before you make any big decisions, you should talk to a team of experienced HubSpot developers and strategists about your goals for moving your website to HubSpot. In some cases you may want to move your site just as it is into the HubSpot CMS. In other cases, you may need to undergo a redesign to truly hit your goals for lead generation through your website. Simply having access to the tools doesn’t automatically improve your website. 

Using Plugins

Before moving your site, you’ll want to make sure plugins are compatible and your site will keep its functionality. The best thing to do is talk to a HubSpot developer to see if existing custom development can transfer over to your new site. There usually aren’t too many hang-ups here because HubSpot already has a multitude of built-in tools; however, there may also be subtle ways to improve functionality using HubSpot’s HubL language.

Importing Blog Posts

HubSpot has a pre-packaged tool specifically for moving blog posts onto the platform with accompanying metadata such as the page title, URL, author, tags, and images. In some cases, WordPress themes might make it difficult to move a blog post’s featured image. If this is the case, there are plugins available to move those images over to your new HubSpot home.  

Redirects

Redirects are an important part of locking down high-performing SEO. Whether you are undergoing a full website redesign and sitemap strategy, moving your blog to a subdomain, or just cleaning up your URLs, you can create any necessary redirects inside HubSpot— no need to hunt down that ever-elusive access to your DNS or to have IT intervene.

Start by crawling your site and making sure search engines are walking through them. From there, throw all of your URLs in a spreadsheet and compare them with URLs on your new site. If you have a bulky list of redirects, no worries. HubSpot has a tool that lets you upload them in large chunks. 

Accessing Old Info

When you’re ready to make your site live, you probably won’t be ready to let go of that original database just yet. You might want to give your old site a domain like “old.yourdomain.com”. Don’t forget to keep Google from crawling your old site. You might also want to make your old site password protected or redirect all of your old site URLs except your backend admin page.

Mistakes to Avoid

Any time you switch to a new system, there will be growing pains. Luckily, we’ve gone through enough for the both of us. Here are some tips to help you avoid common mistakes as you make the move:

1. Prepare for Website Metrics: Keep track of your analytics before and after you move. Make sure your site is ready to measure traffic and set up benchmarks.
2. Import WordPress Blog Articles First: HubSpot makes it easy to export blog posts from WordPress and import them into HubSpot. Use it. Move blogs before making DNS changes. You can save yourself loads of time that you’ll otherwise spend digging through old servers.
3. Double-Check Tracking Codes: In all the chaos surrounding your big migration, it’s easy to overlook your tracking codes, like those for Google Analytics, retargeting, or Google Ads. Double-check to make sure you move these external trackers when you change sites.
4. Set Up Calls to Action: CTAs aren’t unique to HubSpot. However, HubSpot does have built-in CTAs that let you track results. These advanced CTAs will let you segment your audiences on a more intimate level, sending CTAs to different people depending on who they are, where they are, and what kind of devices they use.
5. Take Advantage of Webmaster Tools: Don’t forget to make use of Google Search Console. It will give you a rundown of how many pages you’ve indexed, how many pages are broken, and the number of clicks your site is getting. You’ll want to track all of this info so you know how to improve your site in the future.

Before You Go: Here are a Few of Our Favorite Integrations

As you build your new website, you’ll want to use integrations to generate even more leads. We want to help you get there. 

Here are some of our favorite integrations: 

• Developer Tools: Lucky Orange, Google Search Console, Siteimprove
• Live Chat: Drift
• CRMs and Add-Ons: Salesforce, Datanyze
• Sales/Marketing Tools: CallRail, Slack, Zoom, PandaDoc, Aircall, Vidyard, Sigstr, Facebook Ads, Google Ads, Seventh Sense