CSS Hero插件评价:轻松定制您的WordPress设计

09/24/2022

我们的CSS Hero评测

CSS Hero是一个高级的WordPress插件,允许您无需编写任何代码(无需HTML或CSS)就可以设计自己的WordPress主题。对初学者来说,能够快速撤销更改非常有帮助。所有更改都保存为额外的样式表,因此您可以更新WordPress主题而不必担心更改丢失。

无论您是设计师还是开发人员,都会发现CSS Hero同样好用。它与所有流行的WordPress主题和框架兼容。您可以快速更改主题或子主题,并将其导出到客户的网站。

在进行设计自定义时,CSS Hero可以为您节省时间和麻烦。

CSS Hero vs. WordPress页面构建器

CSS Hero是一个设计工具,而不是创建登陆页面或从头开始制作自定义WordPress主题的理想解决方案。它与您的WordPress主题配合使用,允许您在不编写CSS代码的情况下自定义CSS。另一方面,WordPress页面构建器插件允许您创建登陆页面和自定义布局,无论您使用的是哪种WordPress主题。

如何使用CSS Hero自定义您的WordPress主题

首先,您需要安装并激活CSS Hero插件。有关更多详细信息,请参阅我们的逐步指南了解如何安装WordPress插件。 这是一个高级的WordPress插件,价格从29美元起(考虑到它将为您节省的时间和麻烦,非常值得投资)。

激活后,您将被重定向以获取您的CSS Hero许可证密钥。按照屏幕上的指示操作,几次点击后您将被重定向回您的网站。

CSS Hero的目标是为您提供一个所见即所得的界面,用于编辑您的主题。只需在登录状态下访问您的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主题。它还包括来自Astra、Divi、CSSIgniter、Themify、StudioPress等商店的最流行的高级主题。

那些不在主题兼容列表中的主题呢?

CSS Hero附带一个名为Rocket Mode自动检测的功能。如果您使用的主题不在主题兼容列表中,CSS Hero会自动开始使用Rocket Mode。Rocket Mode尝试从您的主题中猜测CSS选择器。大多数时候这都能完美运行。如果您的主题遵循WordPress编码标准,那么您几乎可以编辑所有内容。

您可能还需要联系您的主题开发者,要求他们提供与CSS Hero的兼容性。

哪些插件与CSS Hero兼容?

CSS Hero定期测试顶级WordPress插件的兼容性。这些插件包括联系表单插件、流行的页面构建器、WooCommerce等。如果您使用的WordPress插件生成的输出不能被CSS Hero编辑,那么您可以要求插件作者修复它。他们不需要做太多就能提供与CSS Hero的兼容性。

我们希望您发现我们的CSS Hero评测有用。您还可以查看我们的终极指南,了解如何提高WordPress初学者的速度和性能,以及我们的比较指南,了解最佳的WordPress页面构建器, 以不用CSS来设计您的主题和网站页面。



Related Posts

  • 2024-07-27
  • WordPress 插件

您是否希望在 WordPress 中要求文章必須設置精選圖片?如果您正在運營一個多作者的 WordPress 博客,您會希望確保每位作者在發布文章之前都添加精選圖片。在這篇文章中,我們將向您展示如何輕鬆地在 WordPress 中要求文章設置精選圖片。

閱讀更多
  • 2024-07-26
  • WordPress 插件

WordPress 內建搜尋功能,但其搜尋結果通常不盡人意。幸運的是,您可以自訂搜尋結果頁面,使其更加使用者友好。本文章將向您展示如何無需編寫任何代碼輕鬆自訂 WordPress 搜尋結果頁面。

透過自訂搜尋結果頁面,使用者能更容易找到他們需要的內容,並改善整體使用者體驗,從而提高頁面瀏覽量和轉化率。

閱讀更多
  • 2024-07-24
  • WordPress 插件

您在尋找如何創建影片和圖片的 WordPress Slider 吗?Sliders 是展示內容且吸引網站訪客注意力的絕佳方式。本文將為您提供使用 Soliloquy 簡易創建影片和圖片 Slider 的詳細指南。

首先,您需要安裝一個合適的 WordPress Slider 插件,例如 Soliloquy。這個插件使用簡單,可建立響應式的影片和圖片 Slider,不需要編寫一行代碼。接著,您可以根據需求添加各種媒體內容並調整 Slider 設定。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>