• Categories
    • Tutorials
    • Beginners Guide
    • WordPress News
    • WordPress Security
    • Best WordPress Plugins
    • WordPress Themes
    • Product Reviews
    • WP Tips & Tricks
  • Guides
    • Start a Blog
    • Make a Website
    • WordPress Hosting
  • WordPress Hosting
    • A2 Hosting
    • HostGator
    • Bluehost
    • Cloudways
  • Managed Hosting
    • WPEngine
    • WPX
    • Kinsta
  • Coupons
    • WPEngine
    • Flywheel
    • Cloudways
    • A2 Hosting
    • WPX Hosting
Sponsored

YellowPencil Review: A Beginner-Friendly Visual CSS Editor For WordPress

Last Updated on: September 9, 2018 Colin Newcomer 4 Comments

YellowPencil Review: A Beginner-Friendly Visual CSS Editor For WordPress

Ever wished that you could go beyond your theme’s style settings and style every little bit of your WordPress site? You could fix that plugin that looks weird with your theme…or you could change how that one widget looks to make it work better…

Well, CSS is a markup language that lets you do just that. It’s super powerful for customizing your WordPress site but…there’s a catch.

Unless you’re a developer, or at least familiar with the basics of HTML, it’s nigh-on impossible to use CSS to style your own site. Basically, casual users can’t benefit from CSS because the learning curve is just too big.

YellowPencil is a freemium WordPress plugin that changes that.

It lets you make CSS style changes to any element on your WordPress site using a beginner-friendly, visual interface.

Whether you’re a casual user and want more control over your site, or you’re a developer just looking to speed up your workflow while working with CSS, I think YellowPencil has something to offer.

Keep reading my YellowPencil review for a hands-on look at how it works, as well as my thoughts on the plugin.

YellowPencil Review: The Full Feature List

With YellowPencil, you get a new Edit With YellowPencil button that you can access from the WordPress toolbar.

Once you open the YellowPencil interface, you’re able to:

  • Click on any element on your page to select it.
  • Style elements using a graphic interface with drop-downs, color pickers, etc.

That’s the core function of the entire plugin – I’ll show you it hands-on in a section.

Beyond that, YellowPencil also offers:

  • Drag-and-drop layout controls. You can just drag-and-drop elements on the live preview to change their position.
  • Drag-and-drop resizing. Similarly, you can also use drag-and-drop to resize certain elements on the visual preview.
  • Responsive design. You can view responsive previews and make style changes that only apply to that device.
  • Wireframe mode. This helpful mode makes it easier to adjust layouts by hiding visual elements and just showing a simple wireframe.
  • Undo/Redo and Revision History. These make it easy to go backward or forward as needed.
  • Direct CSS Editor. If you are already familiar with CSS, you can also make direct changes in the code editor.

And one of the coolest things is that YellowPencil works with everything. That is, you can use it to style both your WordPress theme, as well as the output from any plugins you’re using.

Hands-on With YellowPencil: Styling A Page

To go hands-on with YellowPencil, I set up a new Contact Us page with a WPForms contact form. Now, I’m going to style it, as well as my theme’s menu, so you can see how YellowPencil works.

When you open up the YellowPencil interface, it looks like this:

yellowpencil review - the interface

  • 1 – this sidebar helps you access different modes, like responsive design mode or wireframe mode.
  • 2 – this is a live preview of the page that you’re editing. As you make style changes, you’ll instantly see them reflected on this live preview.
  • 3 – once you select an element, this is where you’ll set up the new styling.

Selecting An Element (2 Modes)

YellowPencil gives you two ways to select an element:

  • Flexible Inspector – when you use the flexible inspector, you’ll select all of that type of element. For example, if you click on one menu link with the flexible inspector, you’ll be able to apply the same styles to all of the menu links.
  • Single Inspector – when you use the single inspector, you’ll select just that one specific element. For example, if you click on one menu link with the single inspector, you’ll be able to apply styles to just that one link.

Here’s an example:

If I use the Flexible Inspector to select a menu link and add a border, you’ll see it apply to all the menu items:

flexible inspector

Now, here’s how those same styles look with the Single Inspector (notice how only the Home menu link gets a border):

single inspector

So right off the bat, that’s a pretty helpful feature to make sure that you can always select the exact element(s) you want.

CSS selectors get tricky – but being able to switch between these two modes makes them simple.

Styling Elements With The Side Panel

You kind of saw this above, but let’s go a little more in-depth with how styling an element works.

For every element, YellowPencil gives you tabs for:

  • Text
  • Background
  • Margin
  • Padding
  • Border
  • Border Radius
  • Position
  • Size
  • Animation
  • Box Shadow
  • Extra (more developer-oriented features like opacity, float position, cursor, etc.)

For example, to add some box shadow to the input form field, you just head to the Box Shadow tab and make your edits using the simple interface controls:

style form

Here’s my favorite feature, though.

If you want to change the size of an element, you can use the same side panel. Or, you can just drag and drop like this:

resize form

Similarly, you can also use drag and drop to actually move some elements (it won’t work for every single element, but you can move most things).

For example, it’s easy to move the page title around:

arrange layout

Not only is the drag-and-drop functionality something unique for a visual CSS editor plugin, it’s also pretty dang handy for changing up how your pages look.

And that right there is the core of how YellowPencil works. Now, let me show you some of the other modes that you get.

Exploring YellowPencil’s Other Modes

You can use the sidebar on the left to access some of the other modes in YellowPencil.

Responsive Mode

In Responsive Mode, you’ll get a new ruler at the top of your screen with all the different responsive breakpoints for your site, as well as a message telling you which version you’re currently editing:

responsive design

To edit a different device, you just click on one of the breakpoints at the top. That will give you a live preview of that device size.

But more than that – any style changes that you make in this mode will only apply to that device:

responsive styling

All in all, I like how YellowPencil has implemented its responsive controls. Being able to visually see the breakpoints on the ruler at the top is quite handy.

Wireframe Mode

Wireframe Mode helps you create the basic layout for your content. Essentially, it dims all the styling so that you can focus exclusively on positioning. And it also shows detailed sizing information whenever you hover over an element:

wireframe mode

Again – pretty handy. You probably won’t use this mode a ton, especially if you’re a casual user. But it is nice to have.

Code Editor

If you ever want to work directly with code, you can open the full code editor to edit styles for:

  • The specific post you’re editing
  • The specific template you’re editing
  • Your entire site (Global)

code editor

Animation Manager

If you’re using animations on your page, you can use the Animation Manager mode to see a timeline of all the animation events on that page. You can also use drag and drop to change the duration of an animation event, which is convenient:

animation editor

Exploring The Other YellowPencil Settings

Finally, YellowPencil also gives you a few other helpful controls in its settings area.

In the Customizations tab, you can view all the custom CSS that you’ve added. And you can also export all of your CSS with the click of a button:

export code

This means you’re never locked in and can stop using YellowPencil whenever you want.

And beyond that, the Settings tab lets you choose whether you want to include your custom CSS as Dynamic Inline CSS or a Static External CSS File:

css method

How Much Does YellowPencil Cost?

The premium version of YellowPencil that I reviewed is available at CodeCanyon where it costs just $26 and has a 4.77 star rating on over 10,000 sales.

There’s also a Lite version available for free at WordPress.org if you want to test it out. It includes many of the basic features that you saw above, but doesn’t have quite as many options.

Still, that free version is a good way to play around with the plugin and see if you like it. Then, if you decide to go Pro, $26 isn’t exactly breaking the bank.

Final Thoughts On YellowPencil

YellowPencil is the best visual CSS customizer plugin that I’ve used from the perspective of a non-developer. If you’re a developer, you might want to check out CSS Hero as it has some neat developer-focused features in its newest version.

But for a regular user, I prefer YellowPencil because:

  • The drag-and-drop positioning and resizing is super convenient.
  • The responsive design mode is well done. And it’s also way easier for a casual user to grasp how breakpoints work in YellowPencil.
  • You get lots of design controls for each element.

If you’re interested, head to WordPress.org to play around with the free version. And if you like it, consider purchasing the Pro version.

Get YellowPencil Pro

And if you want to learn some CSS yourself, check out our beginner’s guide to learning CSS for WordPress.

+ Share
Disclosure

Colin Newcomer

Colin Newcomer is a WordPress writer for WPKube. He uses WordPress more often than any sane person should.

Related Posts

Back to all articles
  • Jupiter X Theme Review: Multipurpose, Customizable, And Powered By Elementor

  • Social Snap Review: An All-in-One WordPress Social Media Toolkit

  • Oxygen 2.1 Update: ACF/Toolset Integrations, Sticky Headers + More

Coupons

View more deals
  • 10% OFF

    Elegant Themes Coupon

    You can’t move within WordPress circles without coming across E
    Get This Deal
  • wpengine coupon
    20% OFF

    WP Engine Coupon

    If you’re in search of a WordPress hosting company that deliver
    Get This Deal
  • Kraft Plugins Coupon Code
    10% OFF

    Kraft Plugins Coupon

    Business websites and WordPress go hand-in-hand. Of course, you w
    Get This Deal
4 Comments Leave a Reply
  1. SillyFresh says

    October 12, 2018 at 11:31 am

    Hi, thanks for this informative article. I’m interested in trying Yellow Pencil, but I wanted to know if it allows you to do some non-style edits, such as changing embedded link properties in a given template? Could this be achieved through the direct CSS editor?

    The reason I ask is because my landing page includes my recent posts, and to see more posts, the theme loads more posts into the same block, still within the landing page. What I’d like to do is have the pagination below the posts link to a new page that is blog-centric, and doesn’t include all of the other elements of the landing page. So instead of page 2 loading more posts in-place, I’d like to edit that element (page 2) to link to a new page.

    Or would it be necessary to find a plugin for adding blog posts to my landing page that would let me control all of its parameters?

    As you can tell, I don’t code (well, I did back in the HTML days), so I’m looking for the easiest solution.

    Thanks!

    Reply
  2. Shama says

    June 4, 2019 at 6:53 am

    Hi….I am using yellow pencil..Its a great tool..Wanted one clarification….How do i add border to single paragraph?..If i apply border property it is adding for each line,how to add for a border for a block?

    Reply
  3. Orhangoker says

    August 24, 2019 at 10:49 am

    I enjoyed this plug-in very much. But the security weakness had made my website hacked twice and I GOT A SEO PENALTY ON GOOGLE.

    It is said they cleaned it with running an update, but I don’t know how to trust coding even after envato sent mails to users.
    I am just sorry about this security breach but I’m moving to CSS Hero or Themeover.

    Reply
  4. fagun33 says

    August 26, 2019 at 9:41 am

    This plugin has destroyed my two websites and my marketing reputation.

    I can not arrange proper words to say how much harm it has done to my life overall. I have lost two running websites, lost my keywords’ google rank, lost thousands of dollars worth of orders, lost customers and their data and so on and on due to an stupid plugin vulnerability.

    I am now again building the sites from scratch, investing my little left money to build them.

    Reply

Leave a Reply Cancel reply

Full Disclosure This post may contain affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission (at no additional cost to you). All opinions are our own and we do not accept payments for positive reviews.

THE BEST OF WPKUBE

Some of the best content we have published so far.

BEGINNER GUIDES & REVIEWS

1How to Start a Blog in 2022 (Step by Step Guide)
28 Best Cheap WordPress Hosting Providers in 2022 (From $1.99)
310 Best WordPress Hosting Options Compared for 2022 (Pros & Cons)
48 Best Managed WordPress Hosting Compared for 2022
55 Best WooCommerce Hosting Providers Compared in 2022 (All Budgets)
6Top 9 Landing Page Plugins for WordPress (2022)
79 Best List Building Plugins for WordPress In 2022
8How to Fix the 500 Internal Server Error on Your WordPress Website
9Beaver Builder Review: Is it The Best Page Builder Plugin for WordPress (2022)?
10Thrive Themes Review: A Look At The Full Membership
11OptimizePress Review: Create Landing Pages with Ease
12How to Make a Website: Complete Beginner’s Guide
13WordPress.com vs WordPress.org: Which is Best for Me?
14Top 22 Best Free Stock Photo Resources For Your Site
1517 of the Best Google Fonts for 2022 (And How to Use Them in WordPress)
16How To Fix ‘503 Service Unavailable’ WordPress Error
1711 Best Contact Form Plugins for WordPress in 2022
18How to Add a Custom Logo to Your WordPress Site
19How to Fix Error Establishing a Database Connection in WordPress

WPEngine: 50% OFF Deal

Save 50% on one of the best managed hosting providers.

Get this Deal

Flywheel(our review)

Featured In Forbes Huffpost Entrepreneur SEJ

About WPKube

WPKube is an online WordPress resource which focuses on WordPress tutorials, How-to’s, guides, plugins, news, and more. We aim to provide the most comprehensive beginner’s guides to anything about WordPress — from installing plugins, themes, automated installs and setups, to creating and setting up pages for your website.

We have over 500+ tutorials, guides, product reviews, tips, and tricks about WordPress. Founded by Devesh Sharma, the main goal of this site is to provide useful information on anything and everything WordPress.

Twitter Facebook

Useful Links

  • Behind the Scenes
  • Beginner Guides
  • WordPress Hosting
  • WooCommerce Themes
  • MeridianThemes
  • Exclusive WordPress Deals
View All Guides »

Reviews

  • WPEngine 33% OFF
  • Thrive Leads
  • Flywheel 33% OFF
  • Divi Theme 20% OFF
  • Thrive Architect
  • Elegant Themes
Reviews »

Deals

  • InMotion Hosting
  • LifterLMS Coupon
  • LiquidWeb Coupon
  • WPEngine Coupon
  • A2 Hosting
  • FloThemes
More Deals »
© Copyright 2022 WPKube ® All Rights Reserved.
  • About
  • Contact
  • Site Terms
  • Disclosure
  • Privacy Policy