Updating Basic Content

NOTE:  This is a guide for working within the updated HubSpot editor.  If you still  prefer to work in the older version, you can check out this blog post for more relevant screen shots and instructions

 

The HubSpot COS is a Content Management System that makes it easy to publish content. But sometimes when you’re just starting out, you might not think that easy is the right way to describe it.  Let us walk you through some of the basic changes you can make so you can get started.

How to Set Your HubSpot Email Template to Be Responsive

Sometimes, when you purchase an email template from the HubSpot marketplace setting to have the template as a responsive template, is not set by default. If this appears to be the case, this is a very easy fix by simply following the instructions below.

Changing Your Parallax Image

NOTE: if you are not using the new COS Page Editor or have purchased one of our older templates, this option may not be available. For documentation on changing out your parallax image manually, click here

Editing Global Modules

  1. In the Content dropdown, click on the Design Manager. In the left sidebar, you will see an option for Global Groups.

How To Attach Your Stylesheet

You may have been making changes to your stylesheets and not seeing them show up when you go to preview the site.  This can be caused by the stylesheet not actually being attached to the page.  This can happen when HubSpot delivers you the template or when you clone a page and stylesheet.  Don't worry, getting your stylesheets attached is a very easy process and only takes a few steps.

A Guide to Customizing HubSpot CTAs

HubSpot's CTA builder provides you with the necessary tools for customizing your Calls-To-Action. By working under the Information and Design tabs within the tool, you can seamlessly adjust the look of your CTAs. If you were interested in changing more advanced features, such as hover effects, you can take it a step further and custom edit the CSS styles.

HubSpot implements Auto Generated CSS styles to the CTA you are building, which can be altered through the Custom CSS box, located next to it. Follow the instructions below to learn how to change the hover effects through editing the Custom CSS styles.

How To Setup A Global Header Or Footer For Your Template

Global modules are composed of either a group of content modules or a single content module that makes up an essential element of your website pages. This is content that you want to create once and then add across various locations on your site. When edited, changes to a global module or group will be updated across every site page that uses the global content in its template.   

How Do I Add Social Icons to My HubSpot Blog Articles?

Social media can be a large part of your online marketing strategy. Businesses in certain verticals can really benefit from having an active social presence associated with their company.

As you can see in the screenshot from our blog template for Inbound Responsive II below, the preview shows "Find Me On" icons beneath the author's name:

 

 

How does one add these icons to blog posts? Our tutorial will show you how!

How Do I Start Using The COS? Our Guide Has the Answers!

The HubSpot COS is a wonderful tool.

It allows users to publish professional websites and content with ease. Using the COS can be intimidating, however, familiarizing yourself with it, can have an immense impact on your business. Using Rich Text Modules and Global Group Modules liven up your websites and only simplify your ability to maintain consistency in your branding efforts, but do these names seem completely foreign to you? What about Parallax Backgrounds? The uncomplicated creation of Parallax Backgrounds, or images that move with the visitor of your site as he or she scrolls down a page on your websites, is just another benefit of the COS software.

The HubSpot COS: How to Change a Parallax Background Image

UPDATE: If you are working in the new COS Page Editor and are working with one of our newer templates, there is a faster and easier way to switch out your images. You can find the documentation here.

 

The biggest trend in website design right now has to be the scrolling parallax template. This is a technique where a background image stays in the same location, or scrolls at a different relative speed, as the rest of the page scrolls. (For an example, check out the template we'll be using in this tutorial!)

As HubSpot Certified Design Partners, we have had the opportunity to take the HubSpot COS to the next level and include Parallax effects in our templates.

Since the parallax effect does require some CSS and HTML coding skills, it can be difficult for the average user to update their parallax and background images in the HubSpot COS. Below, we've put together a handy guide for how to update your parallax and background images in the HubSpot COS content editor. Check it out!

Helpful resources, tips, and how-to's for the HubSpot COS.

Stay Updated

Need HubSpot COS Help?
Looking for A New HubSpot Template?