CSS Hero评测:简化WordPress定制设计

点击这里查看CSS Hero评测:简化WordPress定制设计原文

如果您是想在不编写CSS代码的情况下自定义WordPress网站设计的众多初学者之一,那么您很幸运。适用于WordPress的CSS Hero插件使您无需接触任何一行代码即可进行设计自定义。在此更新的CSS Hero评测中,我们将向您展示如何使用CSS Hero来定制您的网站,以及为什么我们认为它是每个WordPress初学者都应该尝试的插件之一。

目录 隐藏

我们的CSS Hero评测

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

如何撤消CSS Hero中的更改

在CSS Hero中为移动设备自定义您的网站

CSS Hero主题兼容性

主题兼容性列表中没有的主题呢?

哪些插件与CSS Hero兼容?

我们的CSS Hero评测

CSS Hero是一个高级WordPress插件,可让您无需编写任何代码即可设计自定义自己的WordPress主题(无需HTML或CSS)。

您可以撤消更改,这对初学者非常有用。所有更改都保存为其他样式表,这意味着您可以升级WordPress主题而不必担心丢失更改。

如果您是设计师或开发人员,则同样会发现CSS Hero有用。它与所有流行的WordPress主题和框架均能很好地工作。您可以快速更改子主题,然后将其导出以在客户的网站上使用。

在进行设计定制时,CSS Hero可以为您节省大量时间和挫败感。

CSS Hero从一开始就给我们留下了深刻的印象。

如果您要我们发布诚实的CSS Hero评测,那么我们将给它5星(满分5星)。

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

首先,您需要安装并激活CSS Hero插件。有关更多详细信息,请参阅有关如何安装WordPress插件的分步指南。

CSS Hero的目标是为您提供一个WYSIWG(所见即所得)界面来编辑主题。登录后只需访问您的网站,您就会在WordPress管理栏中看到CSS Hero按钮。

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

单击该按钮会将您的站点转换为实时预览。现在,您将能够看到CSS Hero工具栏。

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

接下来,只需单击您网站上的任何元素,CSS Hero就会为您显示主题用于该特定元素的CSS属性。

CSS Hero评测:简化WordPress定制设计 1

这些将包括所选元素的通用CSS属性,例如背景、版式、边框、间距等。您可以单击任意项以将其展开,然后使用简单的用户界面编辑CSS属性。

CSS Hero评测:简化WordPress定制设计 2

进行更改时,您会注意到自定义CSS神奇地出现在下面。如果您正在学习CSS,那么在实时预览中查看如何对结果应用不同的CSS更改会很有用。

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

在为您的网站查找免版税图片时遇到麻烦?CSS Hero带有内置的Unsplash集成,可让您浏览、搜索和使用网站设计中的精美照片。

在网站的设计中使用免版税图片

CSS Hero还附带了一些现成的片段,您可以将其应用于网站上的不同元素。只需切换到左列中的“片段”选项卡。

CSS Hero现成的片段

当您对网站进行更改时,CSS Hero将自动保存这些更改,但不会将其发布。要将这些更改应用于实时网站,您需要单击“保存并发布”按钮。

保存并发布您的更改

如何撤消CSS Hero中的更改

CSS Hero的最佳功能之一是能够随时撤消所做的任何更改。CSS Hero保留您对主题所做的所有更改的历史记录。只需单击CSS Hero工具栏中的历史记录按钮即可查看更改列表。

CSS Hero历史

您可以单击日期和时间来查看您的网站当时的状况。如果要恢复到该状态,则只需保存或从该点继续编辑。

这并不意味着您在那之后所做的更改会消失。它们仍将被存储,您也可以还原到该时间。没有比这更简单的了。

但是,如果您只想还原对特定项目所做的更改怎么办?

在这种情况下,您无需使用历史记录工具。只需单击要还原的元素,然后单击重置按钮。

重置单个元素

这会将项目更改回由WordPress主题定义的默认设置。

在CSS Hero中为移动设备自定义您的网站

Web设计中最具挑战性的方面是设备兼容性。您需要确保您的网站在所有设备和屏幕尺寸上看起来同样令人眼花乱。Web设计人员使用各种工具来测试浏览器和设备的兼容性。幸运的是,CSS Hero带有内置的预览工具。

只需单击CSS Hero工具栏中的桌面图标,然后单击设备类型。您可以从移动设备、平板电脑和台式设备中进行选择。预览区域将变为您选择的设备。

在不同的设备模式下编辑

现在,您可以在预览移动设备的同时对其进行编辑。此工具对于调整手机和平板电脑的主题设计特别有用。

CSS Hero主题兼容性

CSS Hero官方网站上有越来越多的兼容主题列表。此列表包括许多最好的免费WordPress主题。它还具有来自CSSIgniter、Themify、StudioPress等商店的最受欢迎的高级主题。

主题兼容性列表中没有的主题呢?

CSS Hero具有一项称为“火箭模式自动检测”的功能。如果您使用的主题不包含在主题兼容性列表中,则CSS Hero将自动开始使用火箭模式。

火箭模式会尝试从主题中自行猜测CSS选择器。在大多数情况下,这都是完美的。如果您的主题遵循WordPress编码标准,那么您几乎可以编辑所有内容。

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

哪些插件与CSS Hero兼容?

CSS Hero已定期通过顶级WordPress插件进行兼容性测试。这包括联系表单插件、流行的页面构建器、WooCommerce等。

如果您使用的WordPress插件生成的输出无法被CSS Hero编辑,那么您可以要求插件作者对此进行修复。他们不需要做太多工作就能提供与CSS Hero的兼容性。

我们希望您发现我们的CSS Hero评测有用。您可能还想看看我们的Elementor及WordPress网站卡顿变慢的原因及解决办法

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值