Divi WordPress Theme

如果您想超越主题和插件选项的限制来真正自定义WordPress网站上每个元素的外观,那么CSS就是做到这一点的方法。

但是,正如我们之前在这里所写的那样,CSS的最大问题在于,尽管功能强大,但它需要特殊的知识,这对于初学者来说是遥不可及的。

因此-您拥有强大的样式语言-但只有高级用户才能从中受益。 该怎么办…?

输入,YellowPencil。 YellowPencil是一个插件,它通过提供可视界面来帮助您设置站点中每个元素的样式,包括主题和插件内容,使CSS编辑对初学者和高级用户都更易于访问。

使用YellowPencil,您将能够通过单击,拖放和图形界面轻松自定义主题和插件输出。

在我的YellowPencil评论中,我将向您展示它的工作原理并分享我的一些想法。

YellowPencil评论:这就是它的全部功能

以下是有关YellowPencil如何使CSS对所有WordPress用户更易访问的实际细节。

首先,YellowPencil使您可以通过两种不同的方式来编辑CSS:

  • 图形界面 –这是大多数用户会选择的。 您只需单击要编辑的元素,然后使用简单的下拉菜单,颜色选择器和其他选项进行编辑。
  • 代码编辑器 –如果您熟悉CSS,则可以直接添加自己的代码。 这仍然很方便,因为检查器工具使抓取适当的CSS选择器变得简单。

YellowPencil还包括易于响应的设计。 您可以将CSS样式应用于特定的媒体查询,以获取响应速度更快的网站。 如果需要,您还可以编辑媒体查询的功能(如果您不熟悉,则可以使用媒体查询基本上将样式选择定位到特定设备(例如智能手机或平板电脑))。

其他有用的功能包括:

  • 视觉调整大小 –您可以调整元素的大小,就像在Microsoft Word中调整图像的大小一样。
  • 拖放 –您可以在页面上拖放各个元素。
  • 线框模式 –这样可以更轻松地布置布局,而不会妨碍美观元素。
  • 动画工具 –将动画应用于所选元素
  • 撤销重做 –万一您犯了一个错误。

动手使用YellowPencil:编辑我的页面

既然您知道YellowPencil的功能,那么让我们再来实践一下这篇YellowPencil的评论。

我设置了一个用Elementor和Astra主题构建的测试页面,该页面应该提供一个很好的示例,说明YellowPencil如何与主题和插件输出一起使用。

快速查看YellowPencil界面

您可以从常规WordPress编辑器或通过WordPress工具栏启动YellowPencil界面。

进入界面后,您将看到站点的实时预览以及左侧和右侧的YellowPencil界面:

黄色铅笔查看界面

  • 1个 –您可以在其中更改选择器,切换响应模式,访问源代码编辑器等。
  • 2个 –一旦选择了元素,就可以在其中实际应用样式。

使用YellowPencil检查器工具

YellowPencil提供了三个不同的选项来控制单击元素时发生的情况。 基本上,这使您可以控制要编辑的内容:

  • 光标 –这使您可以像常规访问者一样与您的网站进行交互。 例如,您可以单击链接以实际加载新页面进行编辑。
  • 灵活的检查员 –选择 全部 一类的元素。 例如,如果您单击导航菜单中的链接,则可以设置样式 全部 导航菜单链接。
  • 单一检查员 –选择 只有您单击的特定元素。 例如,它可以让您仅设置样式 一个特定的链接 在您的导航菜单中,而不是在所有导航菜单链接中。

选择器

带有YellowPencil的样式元素

好的,现在让我们设置一些元素的样式。 这也使我有机会更详细地向您展示灵活检查员和单一检查员之间的区别。

假设您使用 灵活的 检查器以单击导航菜单链接。 现在,您会在右侧找到许多选项,可以在其中应用新样式:

全选

例如,如果您想添加边框,则只需使用 边界 样式选项。 就像这样,每个菜单链接都有一个新的边框:

边界

如果您只想在边框上添加边框 我的帐户 链接,您可以选择使用 单身的 检查员。 看起来更像这样:

选择一个

总而言之,YellowPencil给您 50多个CSS 添加到您的设计中的选项,分布于:

  • 文本
  • 背景
  • 利润
  • 填充
  • 边界
  • 边界半径
  • 位置
  • 尺寸
  • 动画片
  • 盒子阴影

位置 尺寸 选项特别有趣。 如果你选择 位置, 您不仅可以使用简单的控件来管理元素的位置,还可以将其拖放到屏幕上:

同样,选择 尺寸 还可以使用拖放来调整元素的大小:

老实说,那真是太棒了!

如果您要调整尺寸和位置,甚至可以激活特殊功能 线框 模式,以更轻松地定位和对齐各种元素:

总而言之,我认为您在这里有很多了解,特别是与市场上其他一些工具相比。

深入研究响应式设计和媒体查询

如果您要编辑网站的自适应设计,则只需激活 反应灵敏 模式,您将能够看到您主题的所有断点,以及一条通知,告知您当前正在编辑的设备:

通过单击顶部的选项,您将能够编辑特定的响应式布局。 在此界面中工作时,所做的更改仅适用于特定的媒体查询。

直接编辑代码

如果您已经熟悉CSS,则仍然可以在需要时直接进行代码编辑。 您需要做的就是激活 代码编辑器 从左侧边栏中,您将看到一个实时代码编辑器,分为三个选项卡:

您可以调整现有的CSS或在此处添加自己的CSS。

探索YellowPencil设置并导出代码

除了上面显示的界面选项之外,您还可以配置将CSS代码作为静态外部CSS文件还是动态嵌入式CSS(YellowPencil仅将代码添加到相关页面):

如果要导出代码,也可以下载所有编辑的CSS文件。 可以想象,一旦使用完该插件,便可以将其删除:

当插件为您提供灵活性而不是试图锁定您时,总是很好。

YellowPencil要多少钱?

YellowPencil在CodeCanyon上的售价为26美元,我认为这对于您所获得的价格来说是相当实惠的。

WordPress.org上还有一个有限的免费版本。 供参考,我查看了Pro版本

关于YellowPencil的最终想法

我很喜欢YellowPencil的评测,并认为它是一个不错的选择,尤其是对于初学者而言。

如果您是开发人员,则可能会错过一些其他CSS编辑器所拥有的高级CSS工具,例如代码片段和变量。

但是YellowPencil也有其独特的功能,例如拖放式定位和调整大小,这对于休闲用户来说真是太棒了。

如果您曾经希望自己可以更好地控制WordPress主题和插件的外观,请尝试使用YellowPencil。 即使您从未听说过CSS,也应该能够迅速将其拾起并开始对WordPress网站进行有意义的编辑。

获取YellowPencil

【免费外贸推广营销视频培训教程】
https://school.yooopaaa.com

WordPress著名Avada主题官方优惠
https://1.envato.market/xxPav

WordPress可视化建站Elementor插件
https://elementor.com/?ref=19904

WordPress外贸独立站DIVI主题官方优惠
https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=59787

亚马逊选品工具Jungle Scout官方优惠
https://junglescout.grsm.io/jieqiu1568

独立站SEO优化工具Semrush免费7天试用
https://shareasale.com/r.cfm?b=1577772&u=2541755&m=97231&urllink=&afftrack=