如果没有CSS知识，你如何重新设计你的网站并创建漂亮的网页？如果你没有CSS技能，你如何改变其外观和感觉？
不知道如何编写CSS代码不应该阻止你对你的网页进行样式设计。
这就是像YellowPencil这样的WordPress CSS编辑器的用武之地。
在这篇文章中，我将评述YellowPencil CSS可视化样式编辑器。 但在我们深入研究之前，这里要简单介绍一下CSS。
CSS控制着你的网站的外观和感觉。 它增加了装饰和风格，使其具有吸引力。 网络开发人员和网页设计师使用CSS对网站进行风格改变。
由CSS控制的网页外观的许多方面包括。
- 颜色
- 字体样式
- 列的大小和布局
- 元素的定位
- 网页在不同的浏览器和设备中的外观。
CSS代码被保存在一个CSS样式表上。与HTML一起，这些代码被计算机作为如何显示你的网站的指令来阅读。
YellowPencil WordPress CSS编辑器有什么作用？
YellowPencil CSS视觉风格编辑器允许您从前端对您的网站的视觉外观进行实时重新设计，而不需要CSS知识。
这意味着你不需要像程序员那样进入你的网站核心文件，以进行任何修改。
为了帮助你设计你的网站，YellowPencil WordPress CSS Editor配备了很多工具和库。
- 视觉编辑界面
- 实时视觉编辑器，所以你可以看到实时的变化
- 允许你选择颜色、字体等的工具。
你如何使用YellowPencil WordPress CSS Editor进行修改？
使用实时编辑器界面，你将点击和指向，以便通过视觉编辑你的网站前端的任何部分来进行修改。
内置的工具会给你选择你想要的页面或背景的颜色的选项。此外，你还可以选择字体、布局，甚至添加动画等效果。 这样，你就可以实现你心目中的网站外观。
当您在网站的前端进行修改时，YellowPencil WordPress CSS Editor会在后台生成一个CSS代码，并将生成的代码作为CSS样式表加载到HTML中。
YellowPencil WordPress CSS Editor不会修改任何后台文件。它只是添加CSS样式表。 它不会影响你的网站的性能。
而且，如果您想恢复到您网站的原始外观，您可以随时这样做。这是安全的编辑。你可以撤消步骤，修改或完全重置变化。
YellowPencil不是一个页面生成器!
我再说一遍。YellowPencil不是一个页面生成器。它不编辑你的网站的内容，相反，它让你对你的网站中已经存在的一切进行造型。
但它与WordPress页面生成器是兼容的。
另外，YellowPencil的主要目的不是作为一个CSS代码编辑器。但是，它确实包括一个直接的CSS编辑器，作为它的功能之一。这对那些了解CSS并想直接编辑CSS代码以生成文件或添加自己的代码的人来说是完美的。
YellowPencil的主要特点
YellowPencil带有内置工具，允许你在前端对网站的任何部分进行修改。
这些工具给了你很多选择，可以改变字体、颜色、布局的大小，生成动画，并定制你的网站以适应任何设备的屏幕尺寸。
让我们来看看这些功能。
字体管理
这个工具带有数百种谷歌字体。它可以帮助你编辑你网站上的任何字体。你可以调整字体样式、字体大小、字母间距、文本阴影、装饰、行高和颜色。
颜色管理
这个内置的颜色选择器与调色板允许你为你的网站选择合适的颜色，并根据你的规格调整它们的色调和音调。
调整措施
这个工具允许你直观地改变你网站上的元素的尺寸。你可以编辑元素的大小，甚至边距或填充属性。
视觉拖放
视觉拖放编辑器可以帮助你改变任何元素的CSS位置。
CSS3过滤器效果
这个过滤器工具带有调整功能，可以帮助你编辑图片的对比度、亮度和其他措施。
视觉样式生成器
使用可视化生成器，你可以创建动画、渐变和阴影。
撤销和重做功能
如果你对某些变化的结果不满意，你可以在任何时候撤销和重做它们。
当前的设计资产，给你的网站带来活力
趋势变化很快。改变你的网站的外观涉及到的不仅仅是更新你的网页的颜色。图片和字体会变得陈旧，在现代浏览器上不再好看。在这种情况下，它们就不再与你的访客交谈。你总是希望你的网站是最新的。
一个好的WordPress CSS编辑器，如YellowPencil，也会给出最新的资产，帮助你的网站与时俱进。为此，YellowPencil提供了数百个免费的资产，这些资产一直在更新，你可以选择和使用这些资产来重新设计你的网站，使它反映你的品牌美学。这些资产包括。
- 一千多个谷歌字体
- 三百多个背景图案
- 平面调色板和页面颜色
- 丰富的CSS3梯度库，帮助你为你的网站着色
- Unsplash背景图片库
- 超过五十种动画
用动画使你的网站恢复活力
动画使你的网站有活力。该动画工具带有动画生成器，因此你可以创建和编辑自定义的CSS动画，并将它们应用于任何元素。它也有动画管理器，允许你将动画附加到你的网站元素上。
使用响应式工具定制任何设备的屏幕尺寸
YellowPencil最令人惊奇的功能之一是响应式定制，它允许你根据特定的手机、桌子和笔记本电脑定制你的网站。 这样，你可以轻松地编辑、预览和控制你的网站在桌面和移动设备上的显示。 该工具包括一个响应式预览，允许你在任何设备上预览和测试你的网站设计变化。你在保存修改之前就可以这样做。
你将在YellowPencil上经常使用的工具
元素检查器
元素检查器允许你选择和编辑你网站上的任何元素。
线框工具
这个工具给你一个线框视图，所以你可以专注于用线框视图来编辑。
测量工具
在测量工具的帮助下，创建一个像素完美的设计。
移动和调整大小工具
通过这个工具，你可以直观地移动和调整元素的大小。
YellowPencil的兼容性
YellowPencil WordPress CSS Editor与几乎所有的WordPress主题和插件都是兼容的，并能无缝工作。
它还兼容所有的WordPress页面生成器，并允许你自定义用Gutenberg块编辑器、Elementor或其他页面生成器创建的页面。
总结
YellowPencil Visual CSS Style Editor帮助你设计网站的外观，以反映你的创意风格，而无需CSS知识。这个插件很直观，容易使用，有各种各样的工具来协助你改造你的网站，使其成为现代的、最新的。
最后，下面的将视频将指导你如何安装和使用YellowPencil。
