如果您是众多想要在不接触 CSS 的情况下自定义 WordPress 网站设计的初学者之一，那么您很幸运。
WordPress 的 CSS Hero 插件允许您自定义设计，而无需触及任何一行代码。
在这篇更新的 CSS Hero 评论中，我们将向您展示如何使用 CSS Hero 自定义您的网站，以及为什么我们相信它是每个 WordPress 初学者都应该尝试的插件之一。
我们的 CSS 英雄回顾
CSS Hero是一款高级 WordPress 插件，允许您设计自己的 WordPress 主题，而无需编写任何代码（不需要 HTML 或 CSS）。
您可以快速撤消更改，这对于初学者来说非常有帮助。所有更改都会保存为附加样式表，因此您可以更新 WordPress 主题，而不必担心丢失更改。
如果您是设计师或开发人员，那么您会发现 CSS Hero 同样出色。它适用于所有流行的 WordPress 主题和框架。您可以快速更改主题或子主题并将其导出到客户的网站。
CSS Hero 可以帮助您在进行设计定制时节省时间并减少挫败感。
CSS Hero 与 WordPress 页面构建器
CSS Hero 是一种设计工具，并不是创建登陆页面或从头开始制作自定义 WordPress 主题的理想解决方案。它与您的 WordPress 主题配合使用，允许您自定义 CSS，而无需编写 CSS 代码。
另一方面，WordPress 页面构建器插件允许您创建登陆页面并自定义 WordPress 布局，无论您使用哪个 WordPress 主题。
专业提示：如果您想制作登陆页面、销售页面、产品页面等，那么我们建议使用SeedProd。它是最好的 WordPress 页面构建器插件，可让您快速为您的网站设计高转化且美观的页面。
如何使用 CSS Hero 自定义您的 WordPress 主题
首先，您需要安装并激活CSS Hero插件。有关更多详细信息，请参阅我们有关如何安装 WordPress 插件的分步指南。
它是一款高级 WordPress 插件，单个站点的起价为 29 美元（考虑到它会为您节省时间和麻烦，完全值得投资）。
您可以使用CSS Hero 优惠券代码：WPBEGINNER获得 34% 的特别折扣。如果您购买 PRO 计划，那么相同的代码将为您带来高达 40% 的折扣。
激活后，您将被重定向以获取 CSS Hero 许可证密钥。只需按照屏幕上的说明进行操作，只需点击几下即可将您重定向回您的网站。
CSS Hero 旨在为您提供一个 WYSIWYG（所见即所得）界面来编辑您的主题。
只需登录后访问您的WordPress 网站，您就会注意到 WordPress 管理栏中的 CSS Hero 按钮。
单击该按钮会将您的网站转换为实时预览。
您现在将能够看到 CSS Hero 编辑器。它有一个顶部和底部工具栏、一个左栏和网站的实时预览。
接下来，将鼠标移至要编辑的元素上，CSS Hero会突出显示它以指示您所在的位置。
单击它将选择该元素并在左栏中显示其属性。
这些将包括所选元素的常见 CSS 属性，例如背景、版式、边框、间距等。
您可以单击任何项目将其展开，然后使用简单的用户界面编辑 CSS 属性。
当您进行更改时，自定义 CSS 会神奇地出现在下面。
如果您正在学习 CSS，那么您会发现在实时预览中了解如何应用不同的 CSS 更改以及结果会很有帮助。
无法为您的网站找到免版税图片？
CSS Hero 还具有内置的 Unsplash 集成，允许您在网站设计中浏览、搜索和使用精美的照片。
CSS Hero 还附带了一些现成的片段，您可以将它们应用于网站上的不同元素。
只需切换到左栏中的“片段”选项卡即可。您将看到那里列出了一堆列元素。
单击选择一个元素，CSS Hero 将向您展示不同的样式变化。
单击“设置参数”按钮编辑您喜欢的样式，然后单击“应用”按钮将其添加到您的主题中。
当您对网站进行更改时，CSS Hero 会自动保存这些更改，但不会发布它们。
要将这些更改应用到您的实时网站，您需要单击屏幕右下角的“保存并发布”按钮。
如何撤消 CSS Hero 中的更改
CSS Hero 的最佳功能之一是能够随时撤消所做的任何更改。
CSS Hero 会保存您对主题所做的所有更改的历史记录。只需单击 CSS Hero 工具栏中的历史记录按钮即可查看更改列表。这个按钮看起来像一个小时钟。
您可以单击日期和时间来查看您的网站当时的样子。如果您想恢复到该状态，只需保存或从该点继续编辑即可。
这并不意味着您在那之后所做的更改将会消失。它们仍然会被存储，您也可以恢复到那个时间。没有比这更简单的了。
但是，如果您只想恢复对特定项目所做的更改，该怎么办？
在这种情况下，您不需要使用历史记录工具。只需单击要恢复为早期版本的元素，然后单击“重置”按钮即可。
这会将项目更改回您的 WordPress 主题定义的默认设置。
在 CSS Hero 中为移动设备自定义您的网站
网页设计最具挑战性的方面是设备兼容性。您需要确保您的网站在所有设备和屏幕尺寸上看起来同样令人印象深刻。
网页设计人员使用各种工具来测试浏览器和设备的兼容性。幸运的是，CSS Hero 附带了一个内置预览工具。
只需在顶部工具栏中选择移动设备、平板电脑和桌面设备即可。预览区域将更改为您选择的设备。您还可以在“编辑”和“导航”模式之间切换以隐藏其他工具栏。
切换到“编辑”模式将允许您在移动设备上预览网站的同时编辑网站。该工具可以方便地调整手机和平板电脑的主题设计。
CSS Hero 主题兼容性
CSS Hero 官方网站有一个不断增长的兼容主题列表。该列表包括许多最好的免费 WordPress 主题。
它还拥有来自CSSIgniter、Themify、StudioPress等商店的最受欢迎的高级主题。
主题不在主题兼容性列表中怎么办？
CSS Hero 具有称为火箭模式自动检测的功能。如果您使用的主题未包含在主题兼容性列表中，则 CSS Hero 将自动开始使用 Rocket 模式。
Rocket 模式尝试从您的主题中猜测 CSS 选择器。这在大多数情况下都是完美的。如果您的主题遵循 WordPress 编码标准，那么您将能够编辑几乎所有内容。
您可能还需要联系您的主题开发人员并要求他们提供与 CSS Hero 的兼容性。
哪些插件与 CSS Hero 兼容？
CSS Hero 定期与顶级 WordPress 插件进行兼容性测试。其中包括联系表单插件、流行的页面构建器、WooCommerce 等。
如果您使用的 WordPress 插件生成的输出无法由 CSS Hero 编辑，那么您可以要求插件作者修复该问题。他们不需要做太多事情来提供与 CSS Hero 的兼容性。
有关更多详细信息，请参阅我们有关如何正确请求 WordPress 支持并获得支持的指南。
我们希望您发现我们的 CSS Hero 评论很有用。您可能还想查看我们为初学者提高 WordPress 速度和性能的终极指南，以及我们专家精选的最佳 WordPress 页面构建器，以便在不使用 CSS 的情况下设计您的主题和网站页面。
