如何将您的品牌添加到市场模板[支持系列]

无论你是刚刚开始构建你的网站设计，还是想要刷新你的网站外观市场可以从HubSpot和市场提供商提供的模板入手。

现在，假设您已经从Marketplace中选择了一个适合您的模板或模板包——到目前为止还不错。然而，现在你可能会问自己，“我如何将我的公司品牌添加到这个模板raybet电子竞技中?”在大多数情况下，这需要一定程度的CSS知识，但你不需要是一个web开发人员或CSS专家来对你的模板做一些简单的更改。

在这篇文章中，我将向你展示如何将你的公司品牌添加到下载次数最多的HubSpot模板之一:raybet电子竞技层云的着陆页．我们将以HubSpot的品牌为例。

下面是我们将要开始的内容:

字体颜色

首先，要更改页面的基本字体颜色，需要打开样式表。您可以在右侧栏的下面找到附加到模板的样式表链接样式表——选择编辑打开样式表。

您将面临一堵代码墙，但不要惊慌。你只需要做一些快速的改变。此外，HubSpot样式表包括有用的注释，帮助您指向正确的方向，并确保您正在编辑正确的CSS。

用于正文字体的颜色在第94行。它使用变量{{baseColor}}．默认情况下，它被设置为深灰色，rgba(25,26,26，.7)。我们想把它改成稍微深一点的灰色。所以我要删除这个值并用十六进制颜色代码# 33475 b。

之前:

后:

链接颜色

祝贺您，您刚刚编辑了CSS的第一行!现在该做另一件事了。下面,{{baseColor}}变量，你会看到另一个变量{{linkColor}}．编辑这个可以改变页面上的链接颜色。默认情况下，它是红色的# c4335，但让我们把它改为漂亮的青绿色:#00a4bd。

之前:

后:

你还会注意到下面还有另一个变量{{linkColor}}在96号线{{linkHover}}．顾名思义，当访问者将鼠标悬停在链接上时，链接就会变成这种颜色。这个CSS做的是做{{linkColor}}悬停时颜色略深。所以你也要把# c4335换成#00a4bd。

之前:

后:

现在我们的更新已经进行了一半，让我们点击发布的变化查看样式表，并查看到目前为止我们的模板是什么样子的。

不坏!但让我们改变红色按钮，以更适合我们的公司品牌。raybet电子竞技

按钮的颜色

要更改默认按钮的颜色，请查看样式表上的下一行，第97行。这是你的第一个重音色{{accentColor1}}作为所有按钮(不包括cta)的背景色。我们要把这个红色换成HubSpotty橙色，#ff7a59。

这里有一个重要的注意事项:变量{{accentColor1}}用于样式表中的几个组件，以及您的按钮。要找到它的使用位置，点击Control + F(或Mac上的Command + F)来搜索样式表{{accentColor1}}．改变第97行上的颜色将改变每一个组件的颜色。这是一个好消息，因为这意味着raybetapp你只需要进行一次编辑，就可以在大量的内容中添加公司的颜色。raybet电子竞技

之前:

后:

太棒了!让我们看看我们的模板现在是什么样子。

对于HubSpot来说，这似乎已经是一个品牌了。只需做一些快速的修改，我们就能够使用这个样式表对所有的Stratus模板的外观产生巨大的影响。

你的标志

拼图的最后一块是模板左上方的大标识。你如何摆脱它，用你自己公司的标志来取代它?raybet电子竞技这一步将使我们脱离样式表，实际上完全脱离设计工具。

导航到>营销>网页在那里你会看到你的标志和图标的一部分。

当它为空时，模板的默认logo将填充它的位置，这就是我的模板现在正在发生的事情。

之前:

添加您的徽标从您的文件管理器或者直接上传到“设置”页面。一旦你点击“保存”，它会自动更新你的模板上的logo。

后:

这样就可以了:只需更改样式表中的几行CSS，就可以用您的品牌颜色替换Stratus模板的默认颜色。另外，你已经添加了你的公司标志，它将出现在你的raybet电子竞技帐户的所有内容，默认标志是启用的 文章 )．

如果你想了解更多关于在HubSpot中使用CSS的知识，请查看我的4周指南HubSpot的社区和HubSpot的设计认证．