WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

YellowPencil Review: Easy CSS Customization With Visual Editing

Last Updated on November 30th, 2023

Tags: ,

If you want to go beyond the limitations of theme and plugin options to truly customize how every element looks on your WordPress site, CSS is the way to do it.

But – as we’ve written about before here – the big problem with CSS is that, while it’s powerful, it requires special knowledge that puts it out of reach for beginners.

So – you have this powerful styling language – but only advanced users can benefit from it. What to do…?

Enter, YellowPencil. YellowPencil is a plugin that makes CSS editing more accessible to both beginners and advanced users alike by offering a visual interface to help you style every single element at your site, including both theme and plugin content.

With YellowPencil, you’ll be able to easily customize your theme and plugin output using point-and-click, drag-and-drop, and a graphical interface.

And in my YellowPencil review, I’m going to show you how it works and share some of my own thoughts.

YellowPencil Review: Here’s What All It Does

Here are the nitty-gritty details on how YellowPencil actually goes about making CSS more accessible to all WordPress users…

First off, YellowPencil lets you edit CSS in two different ways:

  • Graphical interface – this is what most users will choose. You just click on the element that you want to edit and use the simple drop-downs, color pickers, and other options to make edits.
  • Code editor – if you are familiar with CSS, you can directly add your own code. This is still convenient because the inspector tool makes it simple to grab the proper CSS selector.

YellowPencil also includes easy responsive design. You can apply CSS styles to specific media queries for a more responsive site. And you can also edit how your media queries function, if desired (if you’re not familiar, a media query basically lets you target style choices to specific devices – like a smartphone or tablet).

Other helpful features include:

  • Visual resizing – you can resize elements just like you resize an image in Microsoft Word.
  • Drag & drop – you can drag and drop individual elements around on your page.
  • Wireframe mode – this makes it easier to arrange layouts without aesthetic elements getting in the way.
  • Animation tool – apply animations to the selected element(s)
  • Undo/redo – in case you make a mistake.

Hands-on With YellowPencil: Editing My Page

Now that you know what YellowPencil does, let’s take this YellowPencil review a little more hands-on.

I set up a test page that’s built with Elementor and the Astra theme, which should provide a good example of how YellowPencil works with both themes and plugin output.

A Quick Look At The YellowPencil Interface

You can launch the YellowPencil interface either from the regular WordPress editor or via the WordPress toolbar.

Once you’re in the interface, you’ll see a live preview of your site, as well as the YellowPencil interface on both the left and right sides:

yellow pencil review the interface

  • 1 – this is where you can change selectors, switch responsive mode, access the source code editor, and more.
  • 2 – once you select an element, this is where you’ll actually apply styles.

Using The YellowPencil Inspector Tool

YellowPencil gives you three different options to control what happens when you click on an element. This basically lets you control what you want to edit:

  • Cursor – this lets you interact with your website as if you’re a regular visitor. For example, you can click on a link to actually load a new page to edit.
  • Flexible Inspector – this selects all elements of a class. For example, if you click on a link in your navigation menu, you’ll be able to style all navigation menu links.
  • Single Inspector – this selects only the specific element you click on. For example, it would let you style only one specific link in your navigation menu, instead of all the navigation menu links.

selectors

Styling Elements With YellowPencil

Ok, now let’s style some elements. This will also give me a chance to show you the difference between the flexible and single inspectors in more detail.

Let’s say you use the flexible inspector to click on a navigation menu link. Now, you get a bunch of options on the right side where you can apply new styles:

select all

If you want to, say, add a border, you’d just use the Border style options. And just like that, every single menu link has a new border:

border

If you only wanted to add a border to the My account link, you could opt to use the single inspector instead. That would look more like this:

select one

In total, YellowPencil gives you 50+ CSS options to add to your designs, spread across:

  • Text
  • Background
  • Margin
  • Padding
  • Border
  • Border Radius
  • Position
  • Size
  • Animation
  • Box Shadow

The Position and Size options are especially interesting. If you choose Position, you not only get simple controls to manage the element’s position, but you can also drag and drop it on the screen:

Similarly, choosing Size lets you resize an element using drag and drop, as well:

That’s pretty awesome, to be honest!

If you’re adjusting size and positioning, you can even activate a special Wireframe mode to make it easier to position and align various elements:

All in all, I think you get a lot of depth here, especially in comparison to some of the other tools on the market.

Digging Into Responsive Design And Media Queries

If you want to edit your site’s responsive design, all you need to do is activate the Responsive mode and you’ll be able to see all your theme’s breakpoints, as well as a notice telling you what device(s) you’re currently editing:

By clicking on the options at the top, you’ll be able to edit specific responsive layouts. When working in this interface, your changes only apply to the specific media query.

Making Direct Edits To Code

If you are already familiar with CSS, you can still make direct code edits whenever needed. All you need to do is activate the Code Editor from the left-hand sidebar and you’ll see a live code editor, divided into three tabs:

You can tweak existing CSS or add your own CSS here.

Exploring YellowPencil Settings And Exporting Code

Beyond the interface options that I showed you above, you can also configure whether to include your CSS code as a static external CSS file or dynamic inline CSS (YellowPencil only adds the code to the relevant page(s)):

You can also download a CSS file of all your edits if you want to export your code. This would conceivably allow you to delete the plugin once you’re finished using it:

It’s always nice when a plugin gives you flexibility rather than trying to lock you in.

How Much Does YellowPencil Cost?

YellowPencil is available for $26 at CodeCanyon, which I think is pretty affordable for what you get.

There’s also a limited free version at WordPress.org. For reference, I reviewed the Pro version.

Final Thoughts On YellowPencil

I enjoyed my YellowPencil review and think it makes a great option, especially for beginners.

If you’re a developer, you might miss some advanced CSS tools, like snippets and variables, that some other CSS editors have.

But YellowPencil also has its own unique twists, like drag-and-drop positioning and resizing, which make it awesome for casual users.

If you’ve ever wished that you could have more control over how your WordPress theme and plugins look, give YellowPencil a try. Even if you’ve never heard of CSS, you should be able to pick it up quickly and start making meaningful edits to your WordPress site.

Get YellowPencil

A team of WordPress experts that love to test out new WordPress related software, WordPress plugins and WordPress themes.