HubSpot COS Design Tricks for Non-Developers

HubSpot COS Nowadays, you would be hard-pressed to find an organization, company, sidewalk lemonade stand, or even a wedding that does not have a website. Websites are what consumers want, so that is what they get.

The digital age has made the lives of consumers 110% easier, but not so much for your average marketer. Tools like SquareSpace make it slightly easier for your average marketer to make small edits to a website, but those tools offer very limited customization and functionality.

Enter in the resources like WordPress or HubSpot COS. A developer can customize a WordPress website to their heart's content. The functionality is all there... if you know how to set up that functionality.

HubSpot COS also offers its own website hosting capabilities, but even though it is a tool designed to be customizable by a marketer, it is only customizable up to a point. After that, you need some sort of coding knowledge to make the system do as you ask.

Unfortunately, even millennials graduating with marketing degrees in 2015 don't get trained in website design coding languages like CSS or HTML, unless they take those classes specifically.

This means that marketers, their creativity, and their market response time, are at the mercy of developers. And while I think every one of us will admit that our lives wouldn't be the same without developers (after all, Mark Zuckerberg is a developer), there are some things we might want to do ourselves. Like change the color of our h2 headers across the entire website.

Have I convinced you to try to tackle some code by yourself yet?!

HubSpot COS Design Tricks

Luckily, long before I decided I wanted to be a digital marketer, I decided I wanted to get an MIS (Management Information Systems) degree to go along with my marketing degree. I took four grueling years of Information Systems classes, and acquired a *very* base knowledge of building front-end website design, among other things. I've since been able to work at chipping away at some of the gaps, learning a few tricks along the way.

The biggest trick I've learned so far is that, if you look hard enough, Google usually has at least half of the answer to any issue you might have.

However, busy marketers don't always have time to scour Google for HubSpot COS design tricks, so I'll share mine!

How to Change the Color of Links in Emails (And Take Away The Horrid Underline)

Emails are THE WORST to make design edits on in HubSpot COS. You can't use stylesheets because many email providers don't support them (yes, it is the 21st century).

Don't want the links in your emails to be early 2000's blue with an underline? Any edits you do have to be made in HTML in the actual source code of your emails. Don't know any HTML? Save that email to your developer, you can tackle this one yourself.

Looking for HubSpot COS tricks that are a little bit more advanced? Check out my instructions for how to add multiple pop-up modals in HubSpot COS!

*Side note: I'm going to use HubSpot as an example, but this trick should work for any email marketing automation tool that allows you to make customizations.*

Check out our "before". Those links are not very attractive, and they don't match our brand standards. Big marketing no-no.

HubSpot COS

Step 1:

Access the source code in your email. In HubSpot, to access source code, click into the email to edit, and click into the editor of the rich text module with the links that you would like to edit. Click the source code button, (it will look like this: < >, also see image below) to enable the source code view.

HubSpot COS

This is what your source code view should look like:

HubSpot COS

Step 2:

Find your links in the source code. They are the sections of text in orange and blue in the image of the source code above. They will look something like this:

<a href="_link">Maybe some text here</a>

Step 3:

Decide what color you want to change your link text to, and find the hex code for that color. In case you were wondering what that looks like, the hex code for this color looks like this: #f99d1c. You're looking for the one with the pound sign (or hashtag symbol).

Step 4:

Add the code to change the color. Don't be afraid, it's just a little bit. The first bit of HTML will be to change the color of the link. We'll do this by adding style= "color: #f99d1c;".

You'll switch out the hex code in this example, the #f99d1c, for you own hex code. Please include all of the quotation marks and the pound sign in front of your hex code! This bit of code will go after the ending quotation marks for the href in your link.

After you add the color change to your link, it should look like this:

Of course, your hex code, your link, and your text should be subbed out for all the pieces in red.

But wait, our link is still underlined! Stay tuned...

Step 5:

Add the code to remove the underline from the link. There's still one more bit of HTML to add. We will want to add text-decoration: none;" right after the semi-colon of our color change code, and within the quotation marks.

Your final link (in the source code view) should look like this:

Again, stuff in red should be subbed out with your edits.

Keep in mind that placement of semi-colons, quotations marks, equal signs, and even tags (these things: < >) are very important in coding! If you're having trouble getting the color change or the text decoration to change, check your placement of these items!

And don't get discouraged! Keep these notes on hand or bookmark this post so that you can reference it until you memorize the code and the sequence of the properties, and then you'll be coding like pro!

And that's it! Check out the "after"!

HubSpot COS

Just repeat with all of the other links in your email, and you will have beautifully styled links to grace your email and match your brand standards. And you didn't have to wait until your developer got back from lunch!