404-banner_cohort.png

When you enter a URL that doesn’t exist, your Apache Web Server is clueless as to what you want so it generates a 404 “page not found” server error, telling your browser or website something’s not quite right.

404 errors occur when:

  • A visitor follows a link or bookmark to a page you have since deleted (and did not create a redirect to a new, similar page).
  • A visitor manually enters or misspells a URL.

In our time-crunched society, visitors want to find your content and digest it as quickly as possible. When they can’t find it, they can get annoyed. You can help reduce their annoyance level by using a nice looking, custom 404 error page.

To create a custom 404 error page in Hubspot COS is not that hard, but it does require that you’re comfortable with Hubspot’s Design Manager and either are very comfortable with HTML and CSS skills or know enough to do some copy and paste routines.

Below is a screen shot from our local Hubspot User Group’s website. We did not create a custom 404 page for this Hubspot COS site. Sort of "blah" isn't it?

404-stock-page.png

Here’s what we did with our page at Cohort Marketing. (For a live view, key in any weird page title, e.g. https://www.cohortmarketing.com/oops)

404-cohort.png

The web is full of really cool designs to help trigger your inspiration.

To create a custom 404 error page in Hubspot, you have three main choices:

  1. Use the Design Manager editor (See Step 2, Step 3).
  2. Hammer out the coding using an editor like NotePad++ or Brackets.
  3. Pay for and download a completed theme from a vendor such as W3Layouts.

Step 2) Load Your 404 Template into Design Manager

You have to load your website's template into Design Manager in order to edit it. Here's how:

  • Click on Content > Design manger.
  • Click on “Browse” (top left) and search for “404”.
  • Click on your 404 template to load it into Design Manger.

You now should see a screen that looks like this:

404-design-manger-view.png

  • Click on the “gear” icon, then click on "Edit options" to bring up the Rich Text editor.

 404-design-manger-options.png

Step 3) Create or Paste Your 404 Design or Coding into Your Template

This is the Rich Text editing screen where you must work. You may simply edit this screen as you would any Hubspot COS page.

404-rich-text-editor-view.png

Styling Notes:

  • You cannot “create a custom 404 error page in Hubspot as a page. You must create your content in the template itself, not a page. I know this can be confusing. In Hubspot, site pages normally are associated with templates, but not in the case of system "pages." 
  • If you have CSS or script, it must be inserted into the “head” portion of the template. Easy: Get out of the Rich Text Editor and click Edit, Edit Head. Paste in your coding into the “Additional HTML Head Markup for this Layout” field. Hit “save.”
  • If you downloaded a fancy template that has CSS, you don't have to link to CSS stylesheets. You simply can paste in the code into the "head" section of the COS template. Make sure you insert it between style tags. (<style> all your CSS styles </style>

Step 4) Connect Your 404 Template to Your Website

This step is only required if the template you’re editing is not the template your site currently is using. How do you find out? Just key in something weird, like, “MyWebsite.com/somethingweird.”

To apply your 404 template if it’s not yet connected, just follow Hubspot’s tutorial.

Conclusion

Need more help? We love helping people like you! (And you thought we were in business just to sell stuff)

BOOK A FREE STRATEGY CALL »

Topics: Learn Hubspot COS

Skill Level
Comfortable with Hubspot Design Manager
Knowledge of HTML, CSS

Subscribe To Email Updates