If you’re one of the many beginners who want to customize your WordPress site design without touching CSS, then you’re in luck. CSS Hero plugin for WordPress allows you to make design customization without touching a single line of code. In this updated CSS Hero review, we will show you how to use CSS Hero to customize your website, and why we believe it’s one of the plugins every WordPress beginner should try.
如果您是想在不接触CSS的情况下自定义WordPress网站设计的众多初学者之一，那么您很幸运。 WordPressCSS Hero插件使您无需触摸任何一行代码即可进行设计自定义。 在此更新CSS Hero评论中，我们将向您展示如何使用CSS Hero来定制您的网站，以及为什么我们认为它是每个WordPress初学者都应该尝试的插件之一。
我们CSS Hero评论 (Our CSS Hero Review)
CSS Hero is a premium WordPress plugin that allows you to design your own WordPress theme without writing a single line of code (No HTML or CSS required).
CSS Hero是一个高级WordPress插件，可让您设计自己的WordPress主题而无需编写任何代码(无需HTML或CSS)。
You have the ability to undo changes which is extremely helpful for beginners. All changes are saved as an additional stylesheet, which means you can upgrade your WordPress theme without worrying about losing the changes.
您可以撤消更改，这对初学者非常有用。 所有更改都保存为其他样式表，这意味着您可以升级WordPress主题而不必担心丢失更改。
If you’re a designer or developer, then you will find CSS Hero equally as good. It works well with all popular WordPress themes and frameworks. You can quickly make changes to a child theme, and then export it to be used on a client’s website.
如果您是设计师或开发人员，则同样会发现CSS Hero。 它与所有流行的WordPress主题和框架均能很好地工作。 您可以快速更改子主题，然后将其导出以在客户的网站上使用。
CSS Hero can save you a lot of time and frustration when it comes to making design customizations.
在进行设计定制时，CSS Hero可以为您节省大量时间和挫败感。
Usually, we’re very skeptical about point-and-click design customization plugins due to their bloated size. However, CSS Hero truly impressed us from the start.
通常，由于单击和单击设计定制插件的尺寸过大，我们对此非常怀疑。 但是，CSS Hero从一开始就给我们留下了深刻的印象。
If you were to ask us for an honest CSS Hero review, then we will give it a 5 out of 5 star.
如果您要我们提供诚实CSS Hero评论，那么我们将给它5星(满分5星)。
如何使用CSS Hero定制您的WordPress主题 (How to Use CSS Hero to Customize Your WordPress Theme)
First you need to install and activate the CSS Hero plugin. For more details, see our step by step guide on how to install a WordPress plugin.
首先，您需要安装并激活CSS Hero插件。 有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。
It is a premium WordPress plugin with pricing starting from $29 for a single site (totally worth the investment considering the time and hassle it will save you).
它是一个高级WordPress插件，单个站点的价格从29美元起(考虑到时间和麻烦，这完全值得投资，可以节省您的时间)。
Use the CSS Hero coupon code: WPBeginner to get a special discount of 34% Off. If you are buying the PRO plan, then the same code will get you a whopping 40% discount.
使用CSS Hero优惠券代码： WPBeginner可获得34％的特别折扣。 如果您购买的是PRO计划，那么相同的代码将给您40％的折扣。
Upon activation, you will be redirected to obtain your CSS Hero License key. Simply follow the on-screen instructions, and you will be redirected back to your site in a few clicks.
激活后，您将被重定向以获取CSS Hero License密钥。 只需按照屏幕上的说明进行操作，然后单击几下即可将您重定向到您的站点。
The goal of CSS Hero is to provide you a WYSIWG (what you see is what you get) interface for editing your theme. Simply visit your website while logged in, and you will notice the CSS Hero button in the WordPress admin bar.
CSS Hero的目标是为您提供一个WYSIWG(所见即所得)界面来编辑主题。 登录后只需访问您的网站，您就会在WordPress 管理栏中看到CSS Hero按钮。
Clicking on the button will convert your site into the live preview. You will now be able to see the CSS Hero toolbar.
单击该按钮会将您的网站转换为实时预览。 现在，您将能够看到CSS Hero工具栏。
Next, simply click on any element on your website, and CSS Hero will show you the CSS properties used by your theme for that particular element.
接下来，只需单击您网站上的任何元素，CSS Hero就会为您显示主题用于该特定元素CSS属性。
These will include common CSS properties for the selected element like the background, typography, borders, spacing, and more. You can click on any item to expand it and then edit the CSS properties using a simple user interface.
这些将包括所选元素的通用CSS属性，例如背景，版式，边框，间距等。 您可以单击任何项目以将其展开，然后使用简单的用户界面编辑CSS属性。
As you make changes, you will notice the custom CSS magically appear below. If you are learning CSS, then you will find it useful to see how different CSS changes are applied with the result in live preview.
进行更改时，您会注意到自定义CSS神奇地出现在下面。 如果您正在学习CSS，那么在实时预览中查看如何对结果应用不同CSS更改会很有用。
Having trouble finding royalty free images for your website? CSS Hero comes with built-in Unsplash integration which allows you to browse, search, and use beautiful photographs in your website’s design.
在为您的网站查找免版税图片时遇到麻烦？ CSS Hero带有内置的Unsplash集成，可让您浏览，搜索和使用网站设计中的精美照片。
CSS Hero also comes with some ready-made snippets that you can apply to different elements on your website. Simply switch to the Snippets tab in the left column.
CSS Hero还附带了一些现成的摘要，您可以将其应用于网站上的不同元素。 只需切换到左列中的“片段”选项卡。
As you make changes to your website, CSS Hero will autosave those changes but not publish them. To apply these changes to your live website, you need to click on the Save and Publish button.
当您对网站进行更改时，CSS Hero将自动保存这些更改，但不会将其发布。 要将这些更改应用于实时网站，您需要单击“保存并发布”按钮。
如何撤消CSS Hero中的更改 (How to Undo Changes in CSS Hero)
One of the best features of CSS Hero is the ability to undo any changes you make at any time. CSS Hero keeps a history of all the changes you make to your theme. Simply click on the history button in the CSS Hero toolbar to see the list of changes.
CSS Hero的最佳功能之一是能够随时撤消所做的任何更改。 CSS Hero保留您对主题所做的所有更改的历史记录。 只需单击CSS Hero工具栏中的历史记录按钮即可查看更改列表。
You can click on a date and time to see what your site looked at that point. If you want to revert back to that state, then simply save or resume editing from that point.
您可以单击日期和时间来查看您的网站当时的情况。 如果要恢复到该状态，则只需保存或从该点继续编辑。
This doesn’t mean that changes you made after that point would disappear. They would still be stored, and you can revert back to that time as well. It does not get any simpler than that.
这并不意味着您在那之后所做的更改会消失。 它们仍将被存储，您也可以还原到该时间。 没有比这更简单的了。
But what if you only wanted to revert changes you made to a particular item?
但是，如果您只想还原对特定项目所做的更改怎么办？
In that case, you don’t need to use the history tool. Simply click on the element that you want to revert and then click on the reset button.
在这种情况下，您无需使用历史记录工具。 只需单击要还原的元素，然后单击重置按钮。
This will change the item back to the default settings defined by your WordPress theme.
这会将项目更改回由WordPress主题定义的默认设置。
在CSS Hero中为移动设备自定义您的网站 (Customizing Your Site for Mobile Devices in CSS Hero)
The most challenging aspect of web design is device compatibility. You need to make sure that your site looks equally dazzling on all devices and screen sizes. Web designers use a variety of tools to test for browser and device compatibility. Lucky for you, CSS Hero comes with a built-in preview tool.
Web设计中最具挑战性的方面是设备兼容性。 您需要确保您的网站在所有设备和屏幕尺寸上看起来同样令人眼花乱。 Web设计人员使用各种工具来测试浏览器和设备的兼容性。 幸运的是，CSS Hero带有内置的预览工具。
Simply click on the desktop icon in the CSS Hero toolbar and then click on a device type. You can choose from mobile, tablet, and desktop devices. The Preview area will change into your selected device.
只需单击CSS Hero工具栏中的桌面图标，然后单击设备类型。 您可以从移动设备，平板电脑和台式设备中进行选择。 预览区域将变为您选择的设备。
You can now edit your site while previewing it for mobile devices. This tool is particularly useful to tweak your theme’s design for mobile and tablets.
现在，您可以在预览移动设备的同时对其进行编辑。 该工具对于调整手机和平板电脑的主题设计特别有用。
CSS Hero主题兼容性 (CSS Hero Theme Compatibility)
The official CSS Hero website has an ever growing list of compatible themes. This list includes many of the best free WordPress themes. It also has the most popular premium themes from shops like CSSIgniter, Themify, StudioPress, and more.
CSS Hero官方网站上有越来越多的兼容主题列表。 此列表包括许多最好的免费WordPress主题 。 它还具有来自CSSIgniter ， Themify ， StudioPress等商店的最受欢迎的高级主题。
那不在主题兼容性列表上的主题呢？ (What About Themes not on Theme Compatibility List?)
CSS Hero comes with a feature called Rocket Mode Auto-detection. If you are using a theme not included in theme compatibility list, then CSS Hero will automatically start using rocket mode.
CSS Hero具有一项称为“火箭模式自动检测”的功能。 如果您使用的主题不包含在主题兼容性列表中，则CSS Hero将自动开始使用火箭模式。
Rocket Mode tries to guess the CSS selectors from your theme on its own. This works out perfectly most of the time. If your theme follows WordPress coding standards, then you would be able to edit almost everything.
火箭模式会尝试根据您的主题猜测CSS选择器。 在大多数情况下，这都是完美的。 如果您的主题遵循WordPress编码标准，那么您几乎可以编辑所有内容。
You may also want to contact your theme developer and ask them to provide compatibility with CSS Hero.
您可能还需要联系主题开发人员，并要求他们提供与CSS Hero的兼容性。
哪些插件与CSS Hero兼容？ (Which Plugins Are Compatible with CSS Hero?)
CSS Hero is regularly tested with top WordPress plugins for compatibility. This includes contact form plugins, popular page builders, WooCommerce, and others.
CSS Hero已定期通过顶级WordPress插件进行兼容性测试。 这包括联系表单插件 ， 流行的页面构建器 ， WooCommerce等。
If you are using a WordPress plugin which generates an output not editable by CSS Hero, then you can request the plugin author to fix that. They really don’t need to do much to provide compatibility with CSS Hero.
如果您使用的WordPress插件生成了CSS Hero无法编辑的输出，那么您可以要求插件作者对此进行修复。 他们真的不需要做太多工作就能提供与CSS Hero的兼容性。
We hope that you found our CSS Hero review useful. You may also want to see our ultimate guide on improving WordPress speed and performance for beginners.
我们希望您发现我们的CSS Hero评论有用。 您可能还想看看我们为初学者提高WordPress速度和性能的最终指南。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。
翻译自: https://www.wpbeginner.com/plugins/css-hero-review-wordpress-design-customization-made-easy/
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
