How Do I Change The Logo On Hubspot Landing Pages Templates

Whether you've just started building out your website pattern or are looking to refresh your website'south advent, the Marketplace tin be a neat identify to showtime, with templates offered from both HubSpot and market place providers akin.

Now, permit's say y'all've picked out a template or template pack from the Marketplace that suits yous—and so far and so skilful. However, at present you lot may be asking yourself, "How tin I add my company branding to this template?" In near cases this requires some level of CSS knowledge, but you don't need to be a web developer or a CSS good to make a few simple changes to your templates.

In this post, I'm going to testify you how to add your visitor branding to one of the most downloaded HubSpot templates: Stratus Landing Page. We'll be using HubSpot'due south branding every bit the example.

Hither's what we'll be starting with:

StratusPreviewExample

Font Color

Start, to modify the base font color for your page you'll demand to open the stylesheet. You lot tin can find the stylesheet attached to a template in the correct sidebar under Linked stylesheets - selectEdit to open the stylesheet.

You lot'll be faced with a wall of code, but don't panic. You're only going to be making a few quick changes. Plus, HubSpot stylesheets include useful comments to help point you lot in the correct management and make sure you lot're editing the correct CSS.

The colour used for the body font is on line 94. It uses the variable {{ baseColor }} . By default, that's set to a dark grey, rgba(25,26,26,.7). We want to modify information technology to a slightly darker greyness. So I'm going to delete that value and supervene upon it with the hex color code #33475b.

Before:

Before baseColor

Afterward:

After_baseColor

Link Color

Congratulations, you just edited your starting time line of CSS! Now information technology's fourth dimension to do another. Right below that {{ baseColor }} variable you'll see some other variable for {{ linkColor }}. Edit this to change the link colour on your pages. By default it's set to #c43235 which is cerise, but let'south modify that to a nice turquoise: #00a4bd.

Before:

Before_LinkColor

Subsequently:

After_LinkColor

Yous'll likewise notice there'south another variable beneath{{ linkColor }} on line 96 called{{ linkHover }}. As the proper name implies, this is the color your links plow when a company hovers their mouse on them. What this CSS is doing is making the{{ linkColor }}slightly darker on hover. So you'll want to swap #c43235 for #00a4bd there as well.

Before:

Before_LinkHoverColor

After:

After_LinkHoverColor

Now that nosotros're halfway through our update, let'south hit Publish Changes on the stylesheet and check out how our template is looking so far.

TemplateUpdateProgress

Dandy! But let's change that red button to fit our company branding improve.

Push Color

To change the default push button color, look to the next line on the stylesheet, line 97. This is your first emphasis colour {{ accentColor1 }} which is used as the background color for all buttons (excluding CTAs). We're going to change this reddish to a HubSpotty orange, #ff7a59.

An important note here: The variable{{ accentColor1 }} is used on several components in the stylesheet in addition to your buttons. To observe out where information technology'southward used, hit Control + F (or Command + F on Mac) to search your stylesheet for{{ accentColor1 }}. Changing the color on line 97 will modify it for every i of these components. This is great news, because it ways yous only demand to make one edit to add your company colour to lots of content.

Before:

Before_AccentColor

After:

After_AccentColor

Great! Permit's encounter how our template is looking now.

That looks more on-brand for HubSpot already. With just a few quick changes, we were able to make a huge affect on the appearance of all the Stratus templates using this stylesheet.

Your logo

The last piece of the puzzle is the big logo in the upper left of the template. How do you get rid of that and supercede it with your own company logo? This step volition accept usa out of the stylesheet and actually out of the Design Tools entirely.

Navigate to Settings > Marketing > Web Pages where you'll see a section for your logo and favicon.

When this is empty, the template'southward default logo will fill its place, which is what's happening to my template right now.

Before:

Add in your logo from your File Manager or upload it direct to the Settings page. Once you hit "Save" information technology will automatically update the logo on your template.

After:

And there you take it: by merely changing a few lines of CSS in your stylesheet, you've replaced the default colors of the Stratus template with your brand colors. Plus you lot've added your visitor logo, which will appear beyond all content in your account where the default logo is enabled (read more virtually that in this commodity).