CSS Hero Live WordPress 主题编辑器

想象一下，您正在构建您的 WordPress 网站，并且您遇到了一个您想要调整的元素。 答案可能是编写一些 CSS 来自定义元素。 唯一的问题是，您对 CSS 的了解还不够多，无法更改它，并且您已经花费了数小时来搜索要使用的正确代码。

通过使用一种无​​需从头开始编写 CSS 的工具，您可以节省大量时间——并避免严重的偏头痛。 忘记在检查器中寻找正确的元素。 您不必再为记住要使用的正确 CSS 以及在哪里使用它而烦恼。

CSS Hero 插件是一个 100% 无代码解决方案，可帮助您快速轻松地自定义您的 WordPress 网站。 让我们来看看！

使用 CSS Hero 自定义您的网站

CSS Hero 是 WordPress 的一个插件，可以轻松自定义您网站的外观。 它具有设计精美且直观的点击式界面。

无论您使用什么 WordPress 主题，您都可以完全控制您网站的自定义。 这就像单击您网站上的一个元素、进行更改并实时看到它一样简单。 使用 CSS Hero，您可以控制：

• 颜色
• 排版和字体样式
• 措施
• …和更多！

CSS Hero 也是原生响应式的，允许您控制您的网站在桌面和移动设备上的外观。 您也不必担心破坏您的网站。 除了实时预览功能外，CSS Hero 还包括一个救生员桌面功能，因此您可以将更改限制在桌面上。

您可以在 CSS Hero 主题编辑器中进行任意多的更改，而无需更改任何现有主题文件。 如果您停用 CSS Hero 插件，您的网站将恢复到原来的状态。

正如一位经验丰富的 WordPress 设计师所知，向您的网站添加过多的 CSS 会显着降低性能。 然而，CSS Hero 并没有堆积大量的 CSS 代码； 相反，它会生成一个单一的、静态的、额外的样式表来覆盖您主题的样式表。

如果您已经有一些编写 CSS 的经验，您还可以在 CSS Hero 代码编辑器中添加您自己的代码。 它为您提供与点击式界面相同的实时预览功能，并即时检查您的代码是否存在错误。 此外，您可以添加自己的媒体查询。 您还可以导出 CSS 代码以在其他地方使用。

CSS Hero 适用于：

• 元素者
• 海狸生成器
• 生成新闻
• WooCommerce
• 古腾堡
• 主题化
• 导师LMS
• bbPress
• 联系表格 7
• …和更多！

您可以使用您喜欢的任何主题并自定义您网站上的任何元素。

如何使用 CSS Hero 自定义您的网站

虽然使用 CSS Hero 令人满意且直观，但我将引导您完成设置以及如何使用该插件的一些主要功能。

第 1 步：安装 CSS Hero 插件

你可以在他们的网站上找到 CSS Hero 插件。 有多种购买计划，稍后我将介绍定价。 他们提供 30 天退款保证，因此您可以毫无风险地尝试。

创建帐户后，您只需从帐户仪表板下载最新版本的插件即可。

将 .zip 文件保存到计算机后，前往 WordPress 站点并导航至插件→添加新插件。 浏览插件 zip 文件，上传并激活。

第 2 步：连接您的帐户

您会立即在 WordPress 管理面板中看到一条通知，要求您激活您的许可证。 单击蓝色大按钮并按照提示将您的许可证添加到您的站点。

现在您会在顶部菜单栏中看到一个 CSS Hero 选项卡。 单击它进入编辑环境。

第 3 步：编辑您的网站

当您在 CSS Hero 中进入编辑模式时，您会看到当前页面的预览窗口，类似于定制器。 但是，您现在有大量的编辑选项。

编辑

在预览窗口周围移动光标时，您会看到为您调出的页面元素，就像您在浏览器的检查器中看到的那样——但更加详细和清晰。

在左侧菜单中，您有一组编辑工具，可让您更改所选元素。 在我的示例中，我只是选择了.site-title元素并更改了颜色、字体大小、字体粗细、字母间距，并添加了阴影。 这一切都是使用带有滑块和选择器的直观菜单完成的，感觉非常像一个成熟的网站构建器。 与我的设计选择一样值得怀疑的是，该编辑器非常易于使用。 这是网站元素的真正可视化编辑，无需编写任何代码。

可视化编辑器窗口下方是一个代码编辑器，您可以在修改元素时看到正确拼写的 CSS 代码。 如果您了解 CSS 并且喜欢调整代码本身，那么您会喜欢这两种选择。 如果您是 CSS 的新手，它可以作为一个有用的学习工具。

您可以直接在代码编辑器中对代码进行更改或添加，您将看到实时预览，就像使用可视化编辑器一样。 CSS Hero 还会在您工作时提醒您编码错误。 例如，当删除颜色选择器中的一个参数但留下逗号时，会立即弹出一个警告，告诉我哪里出错了。

更正错误会使警报自动消失。

多设备预览

在 CSS Hero 编辑器的顶部栏中，您会找到一系列适用于各种设备的图标。 默认为桌面模式。 单击任何设备图标都会显示预览，因为它会出现在该设备和方向上。 此外，您可以使用手柄或在底部的框中​​输入像素宽度来调整预览窗口的大小。

同样在顶部栏菜单中，您会发现一个切换按钮，允许您导航站点而不是选择要编辑的元素。

您可以单击撤消和重做图标以及查看完整的编辑历史记录。

更多功能

这些是 CSS Hero 界面的主要功能。 您可以使用此编辑器做更多的事情。 单击顶部菜单栏中的“项目”下拉菜单可为您提供更多选项。

变量

您可以在 CSS Hero 中使用两种类型的变量：LESS 变量和 CSS 变量。 您可以在 LESS 变量下添加常用变量，并从一个菜单中管理它们。 在 CSS 变量下，您可以搜索任何变量并编辑名称和值。

媒体查询设置

此菜单为您提供了一个单一的位置来管理所有现有的媒体查询，以及根据需要添加自定义查询。

检查点

假设您想预览网站的一些更改，但您还没有准备好更新实时网站。 这就是 Checkpoints 可以帮助您的地方。 进行任何您喜欢的更改，然后创建一个检查点。 您可以取消您的更改，这样它们就不会影响实时站点，但您可以随时返回并激活这些更改，而无需重做您所有的辛勤工作。

自定义字体

您可以以 .ttf、otf 和 woff 格式上传您喜欢的任何自定义字体。

视频背景

想要添加那些精巧紧凑的视频循环之一作为背景吗？ 令人惊讶的是，您可以直接在编辑器中执行此操作。 CSS Hero 为您提供了大量预制视频供您选择，由 coverr 提供。 只需选择一个元素，选择一个视频，然后进行调整。 就这么简单。

CSS Hero 之前和之后

目前，您可以在定制器中添加您想要的所有 CSS。 WordPress 也会向您展示预览。

这很好用，但请考虑以下几点：

1. 您可能对 CSS 知之甚少（或根本不了解）。
2. 搜索您之前编码的内容可能会花费很多时间。
3. 定制器中的所有 CSS 都会显着降低您的网站速度。

开始使用 CSS Hero 编辑器后，可以使用可视化编辑器快速进行更改——无需编码。 您可以通过单击该元素轻松找到您修改的内容。 CSS 代码不会降低您网站的速度，因为它包含在自己组织整齐的样式表中。

价钱

CSS Hero 提供三层年度定价计划和终身计划。 正如我之前提到的，在购买任何计划后的 30 天内都有 100% 的退款保证。 尝试一下几乎没有风险。

起动机

此计划最适合您只需要自定义一个站点的情况。 每年只需 29 美元，您就可以获得所有产品更新和基本支持。

个人的

如果您是自由职业者或经营小型代理机构，下一层可能最适合您。 您最多可以在五个站点上安装 CSS Hero，并获得所有产品更新和基本支持。 定价为每年 59 美元。

临

听起来，这个计划最适合专业出版商和大型机构。 每年只需 199 美元，即可获得高达 999 次安装，并支持 WordPress Multisite。

终身专业版

这是一个一劳永逸的计划，可让您获得 999 次站点安装、优先支持和终身产品更新……永远。 一次性支付 599 美元，您将获得终生保障。

直观且简单的 CSS 自定义

对于任何 WordPress 设计师来说，CSS Hero 都具有巨大的价值。 即使您对 CSS 了如指掌，使用 CSS Hero 编辑器也会让您的网站编辑变得非常高效。